Question

我是JS和画布的新手，我正在尝试练习一下。我正在尝试创建一个垂直射击游戏，我想让敌人不仅以线性方式移动，而且还要上下移动（曲折）。到目前为止，我只能编码线性运动，但我无法对摆动运动进行编码。这是我到目前为止编码的内容（查看drawDucks函数）：

<html>
<head>
    <script>
        var c = new Object();
        var ctx = new Object();
        bg = new Image();
        bg.src = "bg.jpg";
        tank = new Image();
        tank.src = "tank1.png";
        duck = new Image();
        duck.src = "duck_1.png";
        gameCanvas =
            {       
                tankPos : 221.5,
                duckLeft : 0,
                duckTop : 30,
                getCanvas : function(id)
                    {
                        c = document.getElementById('canvas1');
                        ctx = c.getContext('2d');
                        setInterval(gameCanvas.drawDucks,2);
                        gameCanvas.drawGame();
                        gameCanvas.moveTank();
                    },
                drawGame : function()
                    {
                        ctx.drawImage(bg,0,0);
                        ctx.drawImage(tank,gameCanvas.tankPos,400);
                        ctx.drawImage(duck,gameCanvas.duckLeft,gameCanvas.duckTop);
                    },
                moveTank : function()
                    {
                        document.onkeydown = function(dir)
                            {
                                switch (dir.keyCode)
                                    {
                                        case 39:
                                            {
                                                if (gameCanvas.tankPos < 440)
                                                    {
                                                        gameCanvas.tankPos += 20;
                                                        gameCanvas.drawGame();
                                                    }
                                                else
                                                    {
                                                        gameCanvas.tankPos;
                                                    }
                                                break;  
                                            }
                                        case 37:
                                            {
                                                if (gameCanvas.tankPos > 10)
                                                    {
                                                        gameCanvas.tankPos -= 20;
                                                        gameCanvas.drawGame();
                                                        break;
                                                    }
                                            }
                                        case 17:
                                            {
                                                gameCanvas.fire();
                                            }
                                    }
                            }
                    },
                drawDucks : function()
                    {
                        if (gameCanvas.duckLeft < 512)
                            {
                                gameCanvas.duckLeft += 1;
                            }
                        else
                            {
                                gameCanvas.duckLeft = -75
                            }
                        gameCanvas.drawGame();
                    }
            }
    </script>
</head>

<body onload = 'gameCanvas.getCanvas()'>
    <canvas id = 'canvas1' width='512px' height='480px'>
    </canvas>
</body>
</html>

Answer 1

不确定。您需要为运动模式的最小y和最大y设置变量。像这样：

var direction = 'down';
var minY = 100;
var maxY = 200;
var x = 400;
var y = 150;
var speed = 5;

if (direction == 'down')
{
    if (y <= maxY)
    {
        y += speed;
    }
    else
    {
        direction = 'up';
    }
}
else if (direction == 'up')
{
    if (y >= minY)
    {
        y -= speed;
    }
    else
    {
        direction = 'down';
    }
}
x -= speed;

当它向画布的左边缘移动时，这会使对象在y轴上形成锯齿形。

使用帆布的Zig Zag运动图像

1 个答案: