Question

我在HTML5 + CSS3 + JS中制作了我的第一个游戏，但我遇到了一些问题。这是一个简单的蛇游戏（http://5nake.ugu.pl/）。

让我们来解决这个问题。当你进入游戏（“Gra jednoosobowa”）并打开动画（你可以在设置中打开/关闭它们（“Ustawienia”））一切都被正确绘制，但它没有被清除，所以一切都结束了到处都是蛇的一部分。当然，玩这样的游戏是不可能的。但是在Firefox或Opera中一切正常。

另一个存在的问题是当你输了的时候应该有一个快速的动画，其中蛇分裂成单个碎片并沿着画布元素向下移动。然后应该显示一个文本（“Koniec gry”）2秒钟，游戏应该要求玩家写下他的名字，并且应该显示一个高分屏幕（“Wyniki”）。谷歌Chrome再一次没有做任何事情，当你输掉游戏时就冻结了。 JS Console中没有报告。以下是相关代码：

function gameOver() {
    stopGame();
    storage.set("activeGameData", null);
    display.gameOver(function() {
        announce("Koniec gry");
        setTimeout(function() {
            snake.game.showScreen("hiscore", board.getScore());
        }, 2500);
    });
}

display.gameOver()：

function gameOver(callback) {
    addAnimation(1000, {
        render : function(pos) {
            canvas.style.left =
                0.2 * pos * (Math.random() - 0.5) + "em";
            canvas.style.top =
                0.2 * pos * (Math.random() - 0.5) + "em";
        },
        done : function() {
            canvas.style.left = "0";
            canvas.style.top = "0";
            explode(callback);
        }
    });
}

以下是explode()功能：

function explode(callback) {
 // At the beginning there are many lines of some Math.random() with position,
 // velocity and rotation of every fragment of the snake which I skipped.
    addAnimation(3000, {
        before : function(pos) {
            ctx.clearRect(0,0,cols,rows);
        },
        render : function(pos, delta) {
            explodePieces(pieces, pos, delta);
        },
        done : callback
    });
}

explodePieces()：

function explodePieces(pieces, pos, delta) {
    // Some calculations on every fragment's position, velocity
    // and rotation skipped.
        ctx.save();
        ctx.translate(piece.pos.x, piece.pos.y);
        ctx.rotate(piece.rot * pos * Math.PI * 4);
        ctx.translate(-piece.pos.x, -piece.pos.y);
        drawObject(piece.type,
            piece.pos.x - 0.5,
            piece.pos.y - 0.5,
            1, piece.rotation
        );
        ctx.restore();
    }
}

动画系统的工作方式如下：requestAnimationFrame()正在进行动画循环。 addAnimation()的第一个参数是动画持续多长时间。第二个是一个可能有3个属性的对象：

之前：它正在为每一帧动画准备画布
渲染：它与显示每一帧动画相关（`pos`是动画中0-1范围内的位置）
完成：动画结束后正在完成的事情。

当您尝试在移动设备上玩游戏时，还有一个奇怪的问题。游戏在Safari（iOS）和Firefox Mobile（Android）中正常运行（几乎）。我没有在任何其他操作系统上检查过它。但是，即使在Safari和Firefox中，当您在丢失后切换到高分屏幕时，底部的按钮（“菜单”），它应该会让您回到主菜单，但不起作用，尽管它可以工作桌面浏览器。这是应该做的事情的代码：

dom.bind(backButton, "click", function(e) {
        game.showScreen("main-menu"); // The showScreen function is working for sure.
});

以下是dom.bind()：

function bind(element, event, handler) {
    if (typeof element == "string") {
        element = $(element)[0];
    }
    element.addEventListener(event, handler, false)
}

感谢您的帮助。

这是一个github链接，供您查看代码：https://github.com/lewapkon/HTML5Snake。
负责图形的文件： scripts / display.canvas.js 。
gameOver函数所在的文件： scripts / screen.game.js 。
用于高分菜单的文件： scripts / screen.hiscore.js 。

Answer 1

似乎animValue未定义，但Firefox不知何故忽略了这一点。它在screen.settings.js中声明，但从未赋值。由于我不知道应该将其定义为什么，请仔细研究并澄清您的问题。

Canvas在Google Chrome浏览器中无法正常运行

1 个答案: