Цикличный запуск анимации
У меня есть игра в которой главный персонаж имеет 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)
}
};
};
|
Хорошая презентация, но если я интегрирую весь мой код под этот стандарт, то проблема останется. Нужно чтобы анимация стояния не работала пока идут обращения к клавишам A,D.
|
88 строка*
Как нужно задать условие, чтобы он выполнял эту функцию когда не происходит никаких взаимодействий? Я понимаю что если я удерживаю клавишу, то он обращается к функции ходьбы многократно и в промежутках этих вызовов он впихивает в неё функцию стояния, из-за этого происходит такой баг. |
У меня по рукой, правда, нет отдельных кадров движения...
<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="300">
<canvas id="canvas" width="800" height="300"></canvas>
<img id="background"/>
<img id="cat">
</div>
</div>
</div>
<script>
//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 300;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'https://javascript.ru/forum/images/ca_serenity/misc/logo.gif';
var a = 1;
var b = 1;
var c = 1;
var standLoop;
var oldKey;
stand();
// DRAW game
function moveRight(){
cat.src = 'https://javascript.ru/cat/list/donkey.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (a>=8) {
a=0;
}
a++;
};
function moveLeft(){
cat.src = 'https://javascript.ru/cat/list/event.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (b>=8) {
b=0;
}
b++;
};
function stand(){
cat.src = 'https://javascript.ru/cat/list/jquery_54.png';
cat.onload = function(){
context.clearRect(0, 0, 800, 300);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
};
if (c>=10) {
c=0;
}
c++;
};
//MOVE CAT
var x = 0;
var y = 200;
function CheckPos(x) {
if(x <= 700 && x >= 0){
return true;
}
else return false;
}
window.onload = function () {
window.onkeydown = function(event){
clearInterval(standLoop);
/* move right */
if(event.keyCode == 68 || oldKey == 68 ){
if(CheckPos(x+5)){
oldKey = 68;
x+=5;
moveRight();
}
}
/* move left */
else if(event.keyCode == 65 || oldKey == 65){
if(CheckPos(x-5)){
oldKey = 65;
x-=5;
moveLeft();
}
}
};
window.onkeyup = function (event) {
if(event.keyCode == 65 || event.keyCode == 68) {
oldKey = 0;
standLoop = setInterval(stand, 200);
}
};
};
</script>
</body>
|
Странно... в твоей демке я наблюдаю те же проблемы что и у меня (на мгновение анимация бега меняется на стояние). Но при добавление твоего кода в свой, всё хорошо работает. Спасибо!
|
Хоте неее, я поторопился с выводами, всё так же, только теперь анимация мерцает и очень редкие появления анимации стояния.
Ладно, всё равно спасибо, сделаю просто, чтобы стоял без смены кадров) |
Цитата:
ЗЫ: появляются, если нажимать/отпускать еще и другие клавиши. |
| Часовой пояс GMT +3, время: 08:54. |