Форум

Retro_1477 · #1 (**permalink**) 08.10.2018, 14:53

У меня есть игра в которой главный персонаж имеет 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)
    }

  };
};

Rise · #2 (**permalink**) 08.10.2018, 17:13

Вот хорошее видео на эту тему

Retro_1477 · #3 (**permalink**) 09.10.2018, 08:38

Хорошая презентация, но если я интегрирую весь мой код под этот стандарт, то проблема останется. Нужно чтобы анимация стояния не работала пока идут обращения к клавишам A,D.

Retro_1477 · #4 (**permalink**) 09.10.2018, 08:43

88 строка*
Как нужно задать условие, чтобы он выполнял эту функцию когда не происходит никаких взаимодействий? Я понимаю что если я удерживаю клавишу, то он обращается к функции ходьбы многократно и в промежутках этих вызовов он впихивает в неё функцию стояния, из-за этого происходит такой баг.

Dilettante_Pro · #5 (**permalink**) 09.10.2018, 11:08

У меня по рукой, правда, нет отдельных кадров движения...

<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>

Retro_1477 · #6 (**permalink**) 09.10.2018, 12:53

Странно... в твоей демке я наблюдаю те же проблемы что и у меня (на мгновение анимация бега меняется на стояние). Но при добавление твоего кода в свой, всё хорошо работает. Спасибо!

Retro_1477 · #7 (**permalink**) 09.10.2018, 12:59

Хоте неее, я поторопился с выводами, всё так же, только теперь анимация мерцает и очень редкие появления анимации стояния.
Ладно, всё равно спасибо, сделаю просто, чтобы стоял без смены кадров)

Dilettante_Pro · #8 (**permalink**) 09.10.2018, 13:08

Сообщение от Retro_1477

в твоей демке я наблюдаю те же проблемы что и у меня (на мгновение анимация бега меняется на стояние)

Странно... В своей демке я не наблюдаю кадров стояния при нажатой A или D

ЗЫ: появляются, если нажимать/отпускать еще и другие клавиши.

Форум

Справочник

Discord чат

Курсы javascript