Итак, я пытаюсь сделать игру-змейку с нуля практикой создания игр на javascript. Я сделал квадрат внутри своего холста и теперь пытаюсь заставить его двигаться. Это код, который я сделал для этого.

     <!DOCTYPE html>
<html>
<body>

<canvas id = "gameCanvas" width="700" height="600" style="border:4px solid black; background-color: yellow"></canvas>

<script type = "text/javascript">
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");


    this.x = 0;
    this.y = 0;

    var snake = ctx.fillRect(this.x,this.y,10,10);

    myMovement = function(){
        var moveUp = event.keyCode;
        if(moveUp == 39){
            snake = ctx.fillRect(this.x + 1, this.y,10,10);
        }
    }

</script>
</body>
</html>

К сожалению, когда я нажимаю кнопку, ничего не происходит. Что не так с моим кодом.

0
Khadijah Muhammad 26 Сен 2018 в 03:52

2 ответа

Лучший ответ

Есть несколько проблем с вашим кодом.

  1. Вы используете this там, где он будет ссылаться на глобальный объект (в данном случае window).
  2. Ваша функция myMovement ни к чему не привязана, то есть она не настроена как прослушиватель событий, который необходим для ее вызова при нажатии клавиши.
  3. Даже если ваш myMovement был настроен, у него не было объекта event, определенного в качестве параметра, поэтому ваша функция могла бы выполнить ошибку, поскольку не было бы объекта event для доступа

Для 1 , если вы хотите отслеживать x, y, вы можете поместить их в объект и получить к ним доступ оттуда:

var rect={
  x:0,
  y:0
};
//then when needing to use them access them like rect.x, rect.y
//also fillRect doesn't return anything so no need for "var snake = "
ctx.fillRect(rect.x, rect.y, 10, 10);

Для 2 и 3 вы можете использовать различные ключевые * события для своей функции. Вы можете присоединить функцию с помощью addEventListener. Наконец, определите параметр event для вашей функции, чтобы у вас действительно был объект события для использования:

function myMovement(event) {
    var moveUp = event.keyCode;
    if(moveUp == 39){
        //++rect.x adds one and assigns the new value to rect.x
        //and again fillRect doesn't return a value so no need for "snake ="
        ctx.fillRect(++rect.x, rect.y,10,10);
    }
}
window.addEventListner("keydown",myMovement);

Демонстрация

var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");

var rect = {
  x: 0,
  y: 0
};

ctx.fillRect(rect.x, rect.y, 10, 10);

window.onkeydown = function(event) {
  var moveUp = event.keyCode;
  if (moveUp == 39) {
    //erase last fill
    ctx.clearRect(rect.x, rect.y, 10, 10);
    ctx.fillRect(++rect.x, rect.y, 10, 10);
  }
}
<canvas id="gameCanvas" width="100%" height="100%" style="border:4px solid black; background-color: yellow"></canvas>
3
Patrick Evans 26 Сен 2018 в 01:24

Выводы проблемы:

  myMovement = function(){
        var moveUp = event.keyCode;
        if(moveUp == 39){
            snake = ctx.fillRect(this.x + 1, this.y,10,10);
        }
    }

Когда myMovement срабатывает, он не знает кода, и

//x value just add 1 with previous but not increment gradually, so it should be this.x += 1    
ctx.fillRect(this.x + 1, this.y,10,10); 

Решение:

  window.onkeyup = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;

   if (key == 39) {
    snake = ctx.fillRect(this.x += 1, this.y,10,10);
   }
}

Значение клавиш клавиатуры можно найти здесь

Событие onkeyup происходит, когда пользователь отпускает клавишу (на клавиатуре).

На самом деле есть 3 разных варианта запуска ключевого события

< Сильный > < EM> OnKeyDown

< Сильный > < EM> OnKeyPress

< Сильный > < EM> OnKeyUp

0
Md Mahamudul Hasan 27 Сен 2018 в 01:30