Question

我想创建一个游戏，用户必须收集一些对象并为此获取积分。但是如何在一定时间后创建新对象？为什么分数没有更新？我可以看到第一个，但没有更多出现......请帮助。

<html>
<head>

<title>MyGame</title>

<script src="js/easeljs-0.5.0.min.js"></script>

<script>

    var canvas, stage;
    var STEPS = 120;
    var player;
    var obstacle;
    var text;
    var score = 0;

    function init(){

        canvas = document.getElementById("canvas");
        stage = new createjs.Stage(canvas);

        // Unser Spieler
        var bg = new createjs.Bitmap("img/bg.jpg");
        player = new createjs.Bitmap("img/player.png");
        player.x = 300;
        player.y = 600;

        // My obstacle which needs to be collected
        createObstacle();

        // Highscore text
        var text = new createjs.Text("Score: " + score, "20px Arial", "#000"); 
        text.x = 10; 
        text.y = 10;

        stage.addChild(bg, player, obstacle, text);

        stage.onClick = function(event){
            if(stage.mouseX < 320){

                player.x -= STEPS;

                if(player.x < 60){
                    player.x = 60;
                }
            }else{

                player.x += STEPS;

                if(player.x > 540){
                    player.x = 540;
                }
            }
        }

        stage.onTick = function ( ){
            obstacle.y += 8;

            if(obstacle.x === player.x && obstacle.y > 600){
                stage.removeChild(obstacle);
                score += 1; // doesn't work
                createObstacle(); // doesn't work
            }
        }    

        if (createjs.Touch.isSupported())
        {
            createjs.Touch.enable(stage);

        }else{
            // alert("Please play this game on a mobile device");
        }

        createjs.Ticker.addListener(stage);
    }

    function createObstacle(){
        obstacle = new createjs.Shape();
        obstacle.graphics.beginFill("#FFF").drawRect(0, 0, 80, 40);
        var trace = randomNumberBetweenMinAndMax(0, 5);
            if(trace === 0){
                obstacle.x = 60;
            }else if(trace === 1){
                obstacle.x = 180;
            }else if(trace === 2){
                obstacle.x = 300;
            }else if(trace === 3){
                obstacle.x = 420;
            }else if(trace === 4){
                obstacle.x = 540;
            }
        obstacle.y = 100;
    }
    function randomNumberBetweenMinAndMax(min, max){
        return Math.floor(Math.random() * (max - (min)) + (min));

    };

</script>

 </head>
 <body onload="init()" style="background: #FFF; padding: 0; margin: 0">

 <canvas id="canvas" width="640" height="960" style="background: #ccc; height: 100%;        width: 100%; margin: 2; padding: 0;"></canvas>

 </body>
 </html>

Answer 1

一种方法是使用像这样的简单window.setInterval函数：

// start interval
var interval = window.setInterval(function() {
    // action to be repeated every 2 seconds
}, 2000);

// clear interval

interval = window.clearInterval(interval);

Answer 2

我只是移除障碍物并再次创建它......与得分相同！

stage.onTick = function (){
                obstacle.y +=10;
                if(obstacle.x === player.x && obstacle.y > 600){
                    stage.removeChild(obstacle);
                    createObstacle();
                    stage.addChild(obstacle);
                    stage.removeChild(text);
                    score += 50;
                    text = new createjs.Text("Score: " + score, "20px Arial", "#000"); 
                    text.x = 10; 
                    text.y = 10;
                    stage.addChild(text);
                    stage.update();
                }else if(obstacle.y > 700){
                    gameOver();
                }
        }

如何在CreateJS中每2秒创建一个新对象？

2 个答案: