使形状在画布中保持朝着方向移动，直到方向改变

时间：2018-09-22 02:56:16

标签： javascript html

我有此代码，但是当我向左，向右，向上或向下走时，我可以停下来。我要做到这一点，这样它就可以继续前进，而不必我一直按住按钮。查看真实版本的蛇，看看我在说什么。我已经尝试过执行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>

2 个答案:

答案 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 更新速度变量。而且我们仅在用户按下键时更改速度变量。

相关问题
最新问题