У меня есть игра в которой главный персонаж имеет 3 состояния: бег вправо, бег влево и стояние.
Как это работает сейчас, при нажатие на клавишу A,D идёт постоянный вызов функции движения и при каждом этом вызове меняется кадр на другой(мне кажется это не правильный способ, т.к. нельзя контролировать скорость анимации). А так же сама анимация ожидания, лагает при беге, если её сделать через setInterval.
Как сделать правильное изменение кадров в зависимости от состояния? Ну или просто реализовать нормальную анимацию ожидания, когда персонаж не двигается.
вот код со всеми спрайтами:
https://yadi.sk/d/-DJ1GhtIoBIJLw
и просто код
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="Game">
<div class="bg" width="800" height="600">
<canvas id="canvas" width="800" height="600"></canvas>
<img id="background"/>
<img id="cat">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="script.js" charset="utf-8"></script>
</body>
//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 600;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');
var a = 1;
var b = 1;
var c = 1;
stand();
// DRAW game
function moveRight(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/run/right/Run ('+ a +').png';
if (a>=8) {
a=0;
}
a++;
};
function moveLeft(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/run/left/Run ('+ b +').png';
if (b>=8) {
b=0;
}
b++;
};
function stand(){
cat.onload = function(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
};
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/stand/Idle ('+ c +').png';
if (c>=10) {
c=0;
}
c++;
};
//MOVE CAT
var x = 0;
var y = 430;
function CheckPos(x) {
if(x <= 700 && x >= 0){
return true;
}
else return false;
}
window.onload = function () {
window.onkeydown = function(event){
/* move right */
if(event.keyCode == 68){
if(CheckPos(x+5)){
x+=5;
moveRight();
}
}
/* move left */
else if(event.keyCode == 65){
if(CheckPos(x-5)){
x-=5;
moveLeft();
}
}
};
window.onkeyup = function () {
if (event.keyCode != 68 && event.keyCode != 65) {
setInterval(stand, 200)
}
};
};