Can't draw square on canvas using setInterval?
User 10870573
Hey guys, I'm trying to use setInterval to draw a square on the canvas every 70ms. Interval is set to call function draw()this function, which contains the fillRect() method. But I can't get it to work any ideas? Oh, I tried clearRect() but it didn't work.
//declare global variables
const canvas = document.querySelector('#canvas');
//set canvas context
const ctx = canvas.getContext('2d');
//put canvas dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;
//create snake unit
const unit = 16;
//create snake and set starting position
let snake = [{
x : cvsW/2,
y : cvsH/2
}]
//create a variable to store the direction of the snake
let direction;
//add event to read users input then change direction
document.addEventListener('keydown', (e) => {
if(e.keycode == 37 && direction != 'right') direction = 'left';
else if (e.keycode == 38 && direction != 'down') direction = 'up';
else if (e.keycode == 39 && direction != 'left') direction = 'right';
else if (e.keycode == 38 && direction != 'up') direction = 'down';
})
//move snake in chosen direction
if(direction == 'left') snake[0].x -= unit;
else if(direction == 'right') snake[0].x += unit;
else if(direction == 'up') snake[0].y -= unit;
else if(direction == 'down') snake[0].y += unit;
function draw() {
ctx.fillStyle = 'limegreen';
ctx.fillRect(snake[0].x - unit/2, snake[0].y - unit/2, unit, unit);
}
setInterval(70, draw);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake</title>
<style>
body {
background-color: #333;
}
#canvas {
background-color: #4d4d4d;
display: block;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="768" height="512"></canvas>
<script src="script.js"></script>
</body>
</html>Vito SRG
There are some errors in your code, but I think this is what you mean:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake</title>
<style>
body {
background-color: #333;
}
#canvas {
background-color: #4d4d4d;
display: block;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="768" height="512"></canvas>
<script>
//declare global variables
const canvas = document.querySelector('#canvas');
//set canvas context
const ctx = canvas.getContext('2d');
//put canvas dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;
//create snake unit
const unit = 16;
//create snake and set starting position
let snake = [{
x : cvsW/2,
y : cvsH/2
}]
//create a variable to store the direction of the snake
let direction;
//add event to read users input then change direction
document.addEventListener('keydown', (e) => {
if (e.keyCode == 37 && direction != 'right') direction = 'left';
else if (e.keyCode == 38 && direction != 'down') direction = 'up';
else if (e.keyCode == 39 && direction != 'left') direction = 'right';
else if (e.keyCode == 40 && direction != 'up') direction = 'down';
//move snake in chosen direction
if (direction == 'left') snake[0].x -= unit;
else if (direction == 'right') snake[0].x += unit;
else if (direction == 'up') snake[0].y -= unit;
else if (direction == 'down') snake[0].y += unit;
console.log(e.keyCode, direction);
})
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'limegreen';
ctx.fillRect(snake[0].x - unit/2, snake[0].y - unit/2, unit, unit);
console.log('oi');
}
setInterval(draw, 70);
</script>
</body>
</html>
caution:
- parameter order of
setInterval - case sensitive
event.keyCode