Javascript 如何在JS中为无限跑步者类型的游戏制作无止境的画布
我希望HTML5画布永远不会结束，这样正方形就永远不会停止移动，它会继续“运行”，这样它就可以跳过障碍，分数也会增加，等等。我真的不知道该怎么做。请提前帮助和感谢。我已经在下面发布了我的代码供大家看，我将JS合并到HTML中，是的Javascript 如何在JS中为无限跑步者类型的游戏制作无止境的画布,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我希望HTML5画布永远不会结束，这样正方形就永远不会停止移动，它会继续“运行”，这样它就可以跳过障碍，分数也会增加，等等。我真的不知道该怎么做。请提前帮助和感谢。我已经在下面发布了我的代码供大家看，我将JS合并到HTML中，是的 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Move Square</title>
</head>
<body>
<div id="centre">
<canvas id="myCanvas" height="100px" width="200px"></canvas>
</div>
<script>
function draw(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "grey";
ctx.fillRect(0,0,300,300);
ctx.fillRect(0,0,300,300);
ctx.closePath();
x+=dx/4;
//Draw Square
ctx.fillStyle = "red";
ctx.fillRect(x,y,20,20);
clearRect(0, 0, canvas.width, canvas.height);
}
var x = 20;
var y = 20;
var dx = 5;
var dy = 5;
setInterval(draw,10);
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 39) {
x+=dx;
}
}
</script>
</body>
</html>
摆正
函数绘图（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillStyle=“灰色”；
ctx.fillRect（0,0300）；
ctx.fillRect（0,0300）；
ctx.closePath（）；
x+=dx/4；
//画正方形
ctx.fillStyle=“红色”；
ctx.fillRect（x，y，20,20）；
clearRect（0，0，canvas.width，canvas.height）；
}
var x=20；
变量y=20；
var-dx=5；
var-dy=5；
设置间隔（抽签，10）；
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数keyDownHandler（e）{
如果（e.keyCode==39）{
x+=dx；
}
}
摆正
函数绘图（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillStyle=“灰色”；
ctx.fillRect（0,0300）；
ctx.fillRect（0,0300）；
ctx.closePath（）；
//画正方形
ctx.fillStyle=“红色”；
ctx.fillRect（x，y，20,20）；
//两个额外的绿色方块
ctx.fillStyle=“绿色”；
ctx.fillRect（x2,50,20,20）；
ctx.fillRect（x3,50,20,20）；
//让它们以相同的速度向后移动
x2-=dx/4；
x3-=dx/4；
}
var x=20；
变量y=20；
var-dx=5；
var-dy=5；
//绿色块的X坐标：
var x2=50；
var x3=250；
设置间隔（抽签，10）；
文档。addEventListener（“keydown”，keyDownHandler，false）；
//文件。addEventListener（“keyup”，keyUpHandler，false）；
函数keyDownHandler（e）{
如果（e.keyCode==39）{
x+=dx；
}
}