Question

问题

你好，我正在创建一个游戏，并且我仍然坚持如何在画布上获得一个计时器。我知道Stackoverflow上有很多关于这个主题的问题。

问题

有人可以告诉我为什么我的代码不起作用。

代码

var game = create_game();
    game.init();

    function create_game() {
        debugger;
        var level = 1;
        var projectiles_per_level = 1;
        var min_speed_per_level = 1;
        var max_speed_per_level = 2;
        var last_projectile_time = 0;
        var next_projectile_time = 0;
        var width = 600;
        var height = 500;
        var delay = 1000;
        var item_width = 30;
        var item_height = 30;
        var total_projectiles = 0;
        var projectile_img = new Image();
        var projectile_w = 30;
        var projectile_h = 30;
        var player_img = new Image();
        var background_img = new Image();
        var c, ctx;

        var projectiles = [];
        var player = {
            x: 200,
            y: 400,
            score: 0
        };


        function init() {
            background_img.src = "background.png";
            projectile_img.src = "projectile.png";
            player_img.src = "player.png";

            level = 1;
            total_projectiles = 0;
            projectiles = [];

            c = document.getElementById("c");
            ctx = c.getContext("2d");
            ctx.fillStyle = "#410b11";
            ctx.fillRect(0, 0, 500, 600);

            c.addEventListener("mousemove", function (e) {
                //moving over the canvas.
                var bounding_box = c.getBoundingClientRect();
                player.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - player_img.width / 2;
            }, false);

            setupProjectiles(); 
            requestAnimationFrame(tick);
        }

        function tick() {

大多数游戏逻辑都在这里，我删除它，因为我不相信它有助于保持它。

            var i;
            var projectile;
            var dateNow = Date.now();
            c.width = c.width;
            ctx.drawImage(background_img, 0, 0);

            for (i = 0; i < projectiles.length; i++) {
                projectile = projectiles[i];
                if (dateNow > projectile.delay) {
                    projectile.y += projectile.v;
                if (collision(projectile)) {
                    initProjectile(i);
                        player.score++;
                    } else if (projectile.y > height) {
                        initProjectile(i);
                    } else {
                        ctx.drawImage(projectile_img, projectile.x, projectile.y);
                    }
                }
            }


            ctx.font = "bold 24px sans-serif";
            ctx.fillStyle = "#d1c09c";
            ctx.fillText(player.score, c.width - 50, 50);
            ctx.fillText("Level: " + level, 20, 50);

            ctx.drawImage(player_img, player.x, player.y);
            maybeIncreaseDifficulty();
            requestAnimationFrame(tick);

这是我将我的代码用于计时器的地方：

var startTime;

function drawElapsedTime(){
    var elapsed=parseInt((new Date() - startTime)/1000);
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.font="bold 24px sans-serif";
    g.fillText(elapsed+" secs", 75,25);
    g.restore();
}


        }

        return {
            init: init
        };
    }

我希望这是有道理的，抱歉代码过载。

Answer 1

从我看到的情况来看，您可能忘记初始化startTime变量。

某些未定义的

ParseInt()会返回NaN。

确保为其指定一个值，并且可以在drawElapsedTime()函数范围内访问此值。

HTML5 Canvas游戏，计时器

1 个答案: