Make shape keep moving in direction in canvas until changed direction

Question

I have this code, but when I go left, right, up, or down, I can stop. I want to make it so it will keep going instead of me having to keep holding on the buttons. Look at the real version of snake to see what I'm talking about. I have already tried doing a while loop instead of and if statement, but that still didn't work. Please help if you can. Here's my code:

Nikhil Kinkar · Accepted Answer

to automate the movement of the green box (snake) you can use requestAnimationFrame, which takes the animation code that you want to iterate.

then you will need to save the previous keyCode, to update the movement direction.

for iterating the animation the code you put in move function need to be moved out in another function iterate which set the requestAnimationFrame, and when the move function is called again we need to cancelAnimationFrame, if you don't cancel animation frame, it will increase the animation frame speed every time move is called. bellow is the updated code that would solve you problem.

var box = 32;

function reset() {
  location.reload();
}
var canvas = document.querySelector("#canvas");
var context = canvas.getContext('2d');
var xPos = 10;
var yPos = 10;

var xPos2 = 10;
var yPos2 = 90;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#1aff1a";
ctx.fillRect(xPos, yPos, 20, 20);

var ctx2 = c.getContext("2d");
ctx2.fillStyle = "red";
ctx2.fillRect(xPos2, yPos2, 20, 20);

var d = 0;
var hit;
var hitKey;
var animate;
var fps = 15;
var now;
var then = Date.now();
var interval = 1000 / fps;
var delta;

function move(e) {
  cancelAnimationFrame(animate);
  hitKey = e.keyCode;
  if (e.keyCode == 39) {
    d = "right";
  }
  if (e.keyCode == 37) {
    d = "left";
  }
  if (e.keyCode == 38) {
    d = "up";
  }
  if (e.keyCode == 40) {
    d = "down";
  }
  again();
  iterate();
}

function iterate() {
  animate = requestAnimationFrame(iterate);
  now = Date.now();
  delta = now - then;

  if (delta > interval) {
    then = now - (delta % interval);
    if (xPos == xPos2 && yPos == yPos2) {
      score.value += "+";
      score.value += "1";
      score.value = eval(score.value);
      document.getElementById('h').innerHTML = "Score: " + score.value;
      xPos2 = Math.floor(Math.random() * 38) * 10;
      yPos2 = Math.floor(Math.random() * 38) * 10;
    }

    if (xPos < 0 || xPos > 380) {
      cancelAnimationFrame(animate);
      alert('you lost');
      alert('your score: ' + score.value)
      document.getElementById('canvas').style.display = "none";
    }
    if (yPos > 390 || yPos < 0) {
      cancelAnimationFrame(animate);
      alert('you lost');
      alert('your score: ' + score.value)
      document.getElementById('canvas').style.display = "none";
    }

    if (hitKey != hit) {
      canvas.width = canvas.width;
      ctx.fillStyle = "#1aff1a";
      ctx.fillRect(xPos, yPos, 20, 20);
      ctx2.fillStyle = "red";
      ctx2.fillRect(xPos2, yPos2, 20, 20);
      again();
    }
  }
}

function again() {
  if (d == "right") {
    xPos += 10;
  }
  if (d == "left") {
    xPos -= 10;
  }
  if (d == "up") {
    yPos -= 10;
  }
  if (d == "down") {
    yPos += 10;
  }
}

function win() {
  if (xPos == xPos2 && yPos == yPos2) {
    alert('you win')
  }
}

function while1() {
  while (d != "right" && d != "up" && d != "down" && d == "left") {
    xPos -= 10;
  }
  while (d == "right") {
    xPos += 10;
  }
  while (d == "up") {
    yPos -= 10;
  }
  while (d == "down") {
    yPos += 10;
  }
}

function block() {
  document.getElementById('score').style.display = "block";
}
while1()
document.onkeypress = function(e) {
  hit = e.keyCode;
}
document.addEventListener("keydown", move);

#canvas {
  outline: 1px solid #000;
  background-color: black;
}





  
  

  Score: 0

you can increase/decrease the speed of movement by changing fps value.

Make shape keep moving in direction in canvas until changed direction

Answers (2)

Related Questions