[英]Can't draw square to canvas using setInterval?
Hey Guys I'm trying to draw a square to the canvas every 70ms using setInterval. 嗨,我正在尝试使用setInterval每70毫秒在画布上绘制一个正方形。 The Interval is set to call
function draw()
this function has the fillRect() method inside it. Interval设置为调用
function draw()
此函数内部具有fillRect()方法。 But I can't get it to work any ideas? 但是我无法使它发挥任何作用吗? Oh and I tried clearRect() and that didn't work.
哦,我尝试了clearRect(),但是没有用。
//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>
There were some bugs in your code, but I think this is what you meant: 您的代码中存在一些错误,但是我认为这是您的意思:
<!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>
Please notice: 请注意:
setInterval
setInterval
参数顺序 event.keyCode
event.keyCode
区分大小写
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.