javascript - 让枪开火

Question

我正在尝试制作一款自上而下的射击游戏来学习 HTML/JS/CSS 编码。

我有一个 Canvas ，我的玩家在 Canvas 上移动和旋转，但我在让他的枪工作时遇到了一些问题。我在教程的帮助下并通过其他 stackoverflow 帖子搜索得到了这个，但是这个我似乎无法单独修复。

我定义了一个变量“gunfire”，如果按下鼠标左键则设置为 1，否则为 0，在我的函数 draw() 中我有一个 if 语句，它应该在我的 Sprite 前面绘制一个矩形(代表子弹)当按下鼠标左键时。

我遇到的问题是元素符号始终出现，与是否按下鼠标按钮无关。如果有人能指出我做错了什么，那么我将不胜感激，这是代码( Canvas 是在单独的 HTML/CSS 文件中创建的):

var turn = 0;
var frameRate = 24;
var main_x = 0,
    main_y = 0,
    move_x = 0,
    move_y = 0;
var gunfire = 0;
var speed = 4;

function keyPress(e) {
    if (e.keyCode == 68) { //d
        move_x = speed;
    }
    if (e.keyCode == 65) { //a
        move_x = -speed;
    }
    if (e.keyCode == 83) { //s
        move_y = speed;
    }
    if (e.keyCode == 87) { //w
        move_y = -speed;
    }
    if (e.keyCode == 1) { //left mouse
        gunfire = 1;
    }
}

function keyRelease(e) {
    if (e.keyCode == 68) { //d
        move_x = 0;
    }
    if (e.keyCode == 65) { //a
        move_x = 0;
    }
    if (e.keyCode == 83) { //s
        move_y = 0;
    }
    if (e.keyCode == 87) { //w
        move_y = 0;
    }
    if (e.keyCode == 1) { //left mouse
        gunfire = 0;
    }    
}

function move() {
    main_x += move_x;
    main_y += move_y;

    if (main_x < -220) {
        main_x = -220
    }
    if (main_y < -220) {
        main_y = -220
    }
    if (main_x > 220) {
        main_x = 220
    }
    if (main_y > 220) {
        main_y = 220
    }    
}

function mouseMove(e) {
    var mouseX, mouseY;
    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    } else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
    mouseX = mouseX - (top_canvas.width / 2) - main_x;
    mouseY = mouseY - (top_canvas.height / 2) - main_y;
    window.radians = Math.atan2(mouseY, mouseX);
    //document.getElementById("info").innerHTML = radians
}

var background = new Image();
background.src = "assets/background3.jpg";
var player1 = new Image();
player1.src = "assets/player1.png";

function draw() { //draws all content on the canvas
    ctx_1.save();
    ctx_1.clearRect(0, 0, top_canvas.width, top_canvas.height);
    ctx_1.drawImage(background, 0, 0);
    ctx_1.translate(top_canvas.width / 2 + main_x, top_canvas.height / 2 + main_y);
    ctx_1.rotate(turn);
    ctx_1.drawImage(player1, -25, -25, 50, 70);

    if (gunfire = 1) {
        ctx_1.fillStyle = "#000";
        ctx_1.fillRect(0, -10, 200, 20);
    }
    ctx_1.restore();
}

function gameLoop() {
    // all functions to update go here
    draw();
    turn = window.radians
    move();
}

function init() {
    window.top_canvas = document.getElementById("top_canvas");
    window.ctx_1 = top_canvas.getContext("2d");
    setInterval(gameLoop, 1000 / frameRate);
    //event fires every time the mouse moves
    top_canvas.addEventListener("mousemove", mouseMove, false);
    window.addEventListener("keydown", keyPress, false);
    window.addEventListener("keyup", keyRelease, false);
}

window.addEventListener("load", init, false);

Answer 1

首先，正如 Kippie 指出的那样，您每次都将 gunfire 设置为 1，这会导致语句为真。它必须更改为 == 或 === (后者更可取)或简单地删除比较，因为非零值将为真:

if (gunfire) {
   ...
}

其次，您正在检查 key handler 内的鼠标点击，并假设 keyCode 表示鼠标按钮点击。 keyCode 1 与鼠标点击完全无关，没有鼠标点击会在这里结束。

第三，您没有任何鼠标点击事件处理程序...

要解决这些问题(除了第一个)，添加一个鼠标点击事件处理程序:

top_canvas.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup",   mouseUp,   false);

然后在处理程序内部(仅显示鼠标按下):

function mouseDown(e) {

    if (e.button === 0) { // check left mouse-button
        gunfire = 1;
    }
}

使用 window 进行鼠标弹起的原因是，如果您的鼠标指针位于 canvas 元素之外，则不会注册弹起事件并且枪会继续开火。即使在这种情况下，使用窗口对象也可以让您注册事件。