Question

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

我有一个画布，我的播放器在画布上移动并旋转，但我在操作枪时遇到了一些麻烦。我已经借助教程和搜索其他stackoverflow帖子得到了这个，但是这个我似乎无法单独修复。

我已经定义了一个变量'gunfire'，如果按下鼠标左键则设置为1，否则为0，在我的函数draw（）中我有一个if语句，应该在我的精灵前画一个矩形（按下鼠标左键时表示项目符号。

我遇到的问题是子弹一直出现，与是否按下鼠标按钮无关。如果有人能够指出我做错了什么，那么我将非常感激，这是代码（在单独的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

if (gunfire = 1)

您正在使用赋值运算符，而不是进行比较。请改用===。

Answer 2

首先，正如Kippie指出的那样，每次将gunfire设置为1会产生真实的陈述。必须将其更改为== or ===（后者更可取）或简单地删除比较，因为非零值为真：

if (gunfire) {
   ...
}

其次，您正在检查键处理程序中的鼠标单击，并假设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;
    }
}

使用鼠标向上窗口的原因是，如果鼠标指针位于画布元素之外，则up事件不会注册，并且枪将继续触发。即使在这种情况下，使用窗口对象也可以注册事件。

拿枪开枪

2 个答案: