我正在尝试在旧型号手机中开发类似于贪吃蛇游戏的游戏。我创建了这个游戏，你可以看看 here 。但是在控制蛇时，我切换了蛇的宽度和高度以向任何方向转动，但我想让蛇看起来像真正的蛇，我的意思是它在转弯时应该呈L形，然后逐渐再次变直，请给我任何想法，我如何使用 Canvas 做到这一点。蛇是 Canvas 中的 fillrect()。
以下是完整代码..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Snake</title>
</head>
<body>
Use Arrow keys of to control the snake.
<canvas id="can_game" height="400" width="400" style="border:1px solid;"></canvas>
<div id="score_div"></div>
<div id="time">0.00</div>
<script type="text/javascript">
var score=0,fps=30,canvas=document.getElementById("can_game"),context=canvas.getContext('2d'),dir="",score_div=document.getElementById("score_div"),width_h=45,pass='left',timediv=document.getElementById("time"),time=0.00;
var player = {
color : '#ff00',
px :'180',
py : '384',
height : '12',
width : '45',
draw : function(){
context.fillRect(this.px,this.py,this.width,this.height);
}
}
var ball = {
x :Math.round(Math.random(4)*400),
y : Math.round(Math.random(4)*400),
draw : function() {
context.beginPath();
context.fillStyle = "#ff0000";
context.arc(this.x,this.y,6,0,2*Math.PI,false);
context.fill();
}
}
setInterval(function(){
score_div.innerHTML=score;
timediv.innerHTML=Math.round(time/1000)+" Seconds";
time=parseInt(time)+1000/fps;
update();
draw();
var test=hitTestPoint(player.px,player.py,player.width,player.height,ball.x,ball.y);
if(test===true)
{
ball.x=Math.round(Math.random(80)*400);
ball.y=Math.round(Math.random(80)*400);
score+=10;
width_h+=3;
}
console.log(player.py,canvas.width);
if(player.px <=0)
player.px=360;
else if(player.px >= (canvas.width))
player.px=0;
else if(player.py <= 0)
player.py=360;
else if(player.py >= (canvas.height))
player.py=0;
document.onkeydown = function() {
var key_pressed = window.event.keyCode;
/* if(key_pressed == 32)
dir = "freeze";*/
if(key_pressed == 37)
dir = "left";
else if(key_pressed == 39)
dir = "right";
else if(key_pressed == 38)
dir = "up";
else if(key_pressed == 40)
dir = "down";
};
},1000/fps);
function hitTestPoint(x1, y1, w1, h1, x2, y2)
{
if ((x1 <= x2 && x1+w1 >= x2) &&
(y1 <= y2 && y1+h1 >= y2))
return true;
else
return false;
}
function draw()
{
context.clearRect(0,0,canvas.width,canvas.height);
player.draw();
ball.draw();
context.fill();
}
function update()
{
switch(dir){
case "left":
player.px-=3;
player.width=width_h;
player.height=12;
break;
case "right":
player.px= parseInt(player.px)+3;
player.width=width_h;
player.height=12;
break;
case "up":
player.py-=3;
player.width=12;
player.height=width_h;
break;
case "down":
player.py+=3;
player.width=12;
player.height=width_h;
break;
}
}
</script>
</body>
</html>
最佳答案
您可能想看看这个 CSS deck tutorial解决您的问题。
这里的技巧是，蛇是由单独的小而离散的 block 组成，而不是像你的情况那样是静态 block ，并且蛇每前进一步，就会从后面弹出一个 block 并在顶部(面)添加一个新 block 。
因此，当蛇向另一个方向(或轴)移动时，其面部 block 会逐渐添加到另一个轴中，并给人一种蛇按照您期望的方式转动的错觉
关于javascript - 使用 HTML5 Canvas 的游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21472565/