我有此代码，但是当我向左，向右，向上或向下走时，我可以停下来。我要做到这一点，这样它就可以继续前进，而不必我一直按住按钮。查看真实版本的蛇，看看我在说什么。我已经尝试过执行while循环而不是and if语句，但这仍然行不通。如果可以的话请帮忙。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<style>
#canvas {
outline:1px solid #000;
background-color:black;
}
</style>
<body>
<input style="display:none;" id="score" type="text" name="score" value="0">
<br>
<h2 id="h">Score: 0</h2>
<canvas id="canvas" height="410" width="400"></canvas>
<script>
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 = 90;
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;
function move(e){
if(e.keyCode == 39){
d="right";
}
if(e.keyCode == 37){
d="left";
}
if(e.keyCode == 38){
d="up";
}
if(e.keyCode == 40){
d="down";
}
if(d=="right"){
xPos += 10;
}
if(d=="left"){
xPos -= 10;
}
if(d=="up"){
yPos -= 10;
}
if(d=="down"){
yPos += 10;
}
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){
alert('you lost');
alert('your score: '+ score.value)
document.getElementById('canvas').style.display = "none";
}
if (yPos > 390 || yPos < 0){
alert('you lost');
alert('your score: '+ score.value)
document.getElementById('canvas').style.display = "none";
}
canvas.width=canvas.width;
ctx.fillStyle = "#1aff1a";
ctx.fillRect(xPos, yPos, 20, 20);
ctx2.fillStyle = "red";
ctx2.fillRect(xPos2, yPos2 , 20, 20);
}
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.addEventListener("keydown", move);
</script>
<br><button style="width:200px; height:68px;" onclick="reset()">Reset</button>
</body>
</html>
答案 0 :(得分：1)
您可以使用requestAnimationFrame来自动执行绿色框（蛇）的移动，keyCode将获取您要迭代的动画代码。
然后，您需要保存前一个move，以更新移动方向。
要迭代动画，您需要将放置在iterate函数中的代码移到另一个设置requestAnimationFrame的函数move中，并且当cancelAnimationFrame函数是再次调用我们需要move，如果您不取消动画帧，则每次调用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;
}<!DOCTYPE html>
<html>
<body>
<input style="display:none;" id="score" type="text" name="score" value="0">
<br>
<h2 id="h">Score: 0</h2>
<canvas id="canvas" height="410" width="400"></canvas>
<br><button style="width:200px; height:68px;" onclick="reset()">Reset</button>
</body>
</html>fps
您可以通过更改{{1}}的值来提高/降低移动速度。
答案 1 :(得分：0)
这个想法是设置一个speed变量。按下键时，可以相应地更改此speed变量。
每帧，通过调用requestAnimationFrame，您将根据speed变量移动字符。
const canvas = document.querySelector('#canvas')
const context = canvas.getContext('2d')
const width = parseInt(canvas.width)
const height = parseInt(canvas.height)
const size = [10, 10] // the size of our object (a rectangle)
let speed = [0, 0] // the speed in x, and y
let topleft = [0, 0] // the top left corner of our rectangle
function update() {
context.clearRect(0, 0, width, height)
context.fillStyle = 'red'
context.fillRect(topleft[0], topleft[1], size[0], size[1])
topleft[0] += speed[0]
topleft[1] += speed[1]
requestAnimationFrame(update)
}
document.body.addEventListener('keydown', e => {
if (e.code == 'ArrowLeft') {
speed[0] -= 1
} else if (e.code == 'ArrowRight') {
speed[0] += 1
} else if (e.code == 'ArrowUp') {
speed[1] -= 1
} else if (e.code == 'ArrowDown') {
speed[1] += 1
}
e.preventDefault()
})
update()canvas {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width=640 height=400 />
</body>
</html>
您知道吗？我们不断从 from 更新速度变量。而且我们仅在用户按下键时更改速度变量。