Question

我正在尝试在旧款手机中开发类似于蛇游戏的游戏。我创建了游戏，您可以查看here。但是当控制蛇的时候，我将蛇的宽度和高度切换到任何方向，但我想让蛇看起来像真正的蛇，我的意思是它在转弯时应该有一个L形状，然后逐渐变成直线，请给我任何想法，我怎么能用画布做到这一点。蛇是画布中的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>

Answer 1

您可能需要查看此CSS deck tutorial来解决您的问题。

这里的诀窍是，蛇是由单独的小块和离散块组成的，而不是像你的情况那样是一个静态块，每当蛇进行一步时，一个块从后面弹出并在顶部（面部）添加一个新块。

因此，当蛇在另一个方向（或轴）上移动时，它的面部块会逐渐添加到另一个轴上，并且会像你期望的那样呈现蛇形转动的错觉

游戏使用HTML5画布

1 个答案: