个人中心
gpt4 book ai didi

javascript - 基本 JS Canvas 游戏

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:25:51 25 4
gpt4 key购买 nike

我正在开发一款非常基本的基于 JS Canvas 的游戏，它介于导弹防御和太空入侵者之间，我需要一些帮助。

我在屏幕底部有一个小炮塔，可以从枪管中射出圆圈，但出于某种原因，最近射出的圆圈似乎后面还有第二个圆圈。然而，当开另一枪时，滞后的圆圈从原来的后面消失，然后出现在新的一枪后面。另外，我在屏幕下方有一个正方形，代表行为古怪的外星入侵者。外星人向下飞行 250 像素，然后开始沿方形路径移动，直到它被摧毁。代表外星人的正方形似乎在沿着正方形路径的边缘移动时改变了大小，这显然不应该发生。

除了这两个问题，我很想听听您对代码的任何建议。我以前从未使用过 JavaScript，而且一般情况下真的不会编写太多代码，因此非常感谢任何帮助/指导。

这是一个工作演示:http://jsbin.com/ehezuj/1/edit

这是我的代码:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Space Game Demo</title>
    </head>
    <body>
        <section>
            <div>
                <canvas id="canvas" width="800" height="600">
                    Your browser does not support HTML5.
                </canvas>
            </div>
            <script type="text/javascript">
//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 400;
var y = 0;
var direction = 0;
var mouseDown = false;
var gloop;
var shots = new Array;
var aliens = new Array;
aliens.push(new basicAlien());
var playerTurret = new (function() { //turret object
    var that = this;
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.strokeStyle = "white";
        ctx.rect(380, 540, 40, 60); //draw base
        ctx.fill();

        ctx.beginPath();
        ctx.arc(400, 540, 20, Math.PI, 2*Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.lineWidth="10";
        ctx.moveTo(400, 540);
        var tempX, tempY, temp;
        temp = getTrajectory(x, y);
        tempX = 35 * temp[0]; tempY = 35 * temp[1];
        ctx.lineTo(tempX + 400, 540 - tempY);
        ctx.stroke();
    }
});

function basicAlien() {
    var that = this;
    that.step = 0; that.bottom = false;
    that.vel = 2;
    that.pos = [(Math.random() * 740) + 30, -10];
    that.move = function() {
        if (that.pos[1] >= 250) {that.bottom = true;}
        if (!that.bottom) {
            that.pos[1] += that.vel;
        }
        else {
            if (that.step < 20) {
                that.pos[0] += that.vel;
            }
            else if (that.step < 40) {
                that.pos[1] -= that.vel;
            }
            else if (that.step < 60) {
                that.pos[0] -= that.vel;
            }
            else {
                that.pos[1] += that.vel;
            }
            that.step = (that.step+1)%80;
        }
    }
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.rect(that.pos[0] - 10, that.pos[1] - 5, 20, 10);
        ctx.fill();
    }
};

function shotObject(shotX, shotY) {
    var that = this;
    that.traj = getTrajectory(shotX, shotY);
    that.vel = 10;
    that.pos = [400, 540];
    that.draw = function() {
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(that.pos[0], that.pos[1], 5, 0, 2 * Math.PI);
        ctx.fill();
    }
    that.move = function() {
        that.pos[0] += that.vel * that.traj[0];
        that.pos[1] -= that.vel * that.traj[1];
        if (that.pos[0] < -10 || that.pos[0] > 810 || that.pos[1] < -10 || that.pos[1] > 610) {
            shots.splice(shots.indexOf(that), 1);
        }
    }
};

function getTrajectory(coordx, coordy) {
    var tempX, tempY, neg = false;
    if (coordx == 400)  {
        if (coordy <= 540) {
            direction = degToRad(90);
        }
        else {
            direction = degToRad(270);
        }
    }
    else {
        direction = Math.atan((540 - coordy)/(coordx - 400));
        if (coordx < 400) {
            neg = true;
        }        
    }
    tempX = Math.cos(direction);
    tempY = Math.sin(direction);
    if (neg) {
        tempX = -tempX;
        tempY = -tempY;
        neg = false;
    }
    return [tempX, tempY];
};

function degToRad(angle) {
    return angle * (Math.PI/180);
}; //end degToRad()

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
};

function process() {
    for (var i = 0; i < shots.length; i++) {
        shots[i].move();
    };
    for (var i = 0; i < aliens.length; i++) {
        aliens[i].move();
    };
};

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    playerTurret.draw();
    for (var i = 0; i < shots.length; i++) {
        shots[i].draw();
    };
    for (var i = 0; i < aliens.length; i++) {
        aliens[i].draw();
    };
}; //end draw()

function loop() {
    process();
    draw();
    gloop = setTimeout(loop, 25);
}; //end loop()

canvas.addEventListener('mousemove', function(e) {
    var mousePos = getMousePos(canvas, e);
    x = mousePos.x;
    y = mousePos.y;
}, false);

canvas.addEventListener('mousedown', function(e) {
    var mousePos = getMousePos(canvas, e);
    var shotX = mousePos.x;
    var shotY = mousePos.y;
    shots.push(new shotObject(shotX, shotY));
    mouseDown = true;
}, false);

canvas.addEventListener('mouseup', function(e) {
    mouseDown = false;
});

loop();

            </script>
        </section>
    </body>
</html>

最佳答案

您有几个地方没有调用 beginPath 而您应该这样做。导致你的额外射击和外星人伸长的一个特别是在你的玩家炮塔绘制函数中:

ctx.beginPath();  // THIS LINE FIXES IT
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.rect(380, 540, 40, 60); //draw base
ctx.fill();

此处的 rect 被添加到上一次迭代的最后一次拍摄的路径中并填充它。类似地，外星人的前一次迭代的路径被填充，导致一个盒子紧跟在外星人后面，使其在当前移动的方向上看起来被拉长了(向左或向右时更宽，向上或向下时更高)

http://jsfiddle.net/W3wKw/

编辑: This demo我认为很好地说明了这个问题。这是最初问题的确切代码，只是颜色发生了变化。红色是炮塔填充/描边，黄色是外星人填充，绿色是射击填充。

关于javascript - 基本 JS Canvas 游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17374079/

25 4 0
文章推荐： javascript - 无法在 backbone.js 应用程序的绑定(bind)回调中访问 "this"
文章推荐： ios - NSDate 造成内存泄漏
文章推荐： android - 将 Android 库导出为 AAR 文件
文章推荐： objective-c - 换肤 iOS 应用程序
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com