javascript，超时，按钮，移动。

Question

过去 3 天我一直在使用 javascript，我有一项任务要做。 (不要问我为什么他们让我在我的第一个 js 任务中创建一个游戏)我已经制作了这个游戏你可以在这里查看 http://nwdevelopment.host56.com/game.html

它应该如何工作:点击开始按钮，然后开始按钮消失，动画在 Angular 色上开始。计时器仍将继续，直到 30 秒结束。 (目前 1 秒用于测试目的)游戏结束并在弹出窗口中显示点击量(+ 50 获胜)。开始按钮重新出现，您可以再次播放。

我遇到的问题是:

1:我需要让按钮在点击时消失，但仍然继续倒计时直到游戏结束，但在游戏结束时又回来了。我在哪里可以学会这样做？请指引我到一个网站或向我展示。

2:在所有这些过程中，当你按下开始游戏时，我需要 Ganon 在你点击他的同时慢慢移动，分数会上升。我得到了分数上升，但我无法让他移动，我什至不知道从哪里开始。此外，当您点击他时，我需要它在屏幕上随机移动 10 个像素。

我需要这个最简单的形式，你可以用 javascript 给我。你能给我指出正确的教程或其他方向吗？这是到目前为止的代码，抱歉，CSS 和脚本目前在一个文件中。 (省略 CSS，因为我认为您不需要它。)

    <div id="textWrapper">
<h1>Try to Defeat<br /> Ganon!</h1>
<p class="description">Click on Ganon and watch your score rise! If you hit     Ganon enough times before the time runs out, you win!</p>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="unit3a.html">UNIT3A</a></li>
    <li><a href="unit3b.html">UNIT3B</a></li>
    <li><a href="game.html">Game</a></li>
</ul>
<br />
<!-- Counter -->
<div id="numberCounter">
<p>0</p>
</div>
</div>


<div id="backgroundImageWrapper">
<div id="ganonWrapper">
<img src="ganon.png" alt="ganon" onclick="myFunction()"/>
</div>

<div id="buttonWrapper">
<button id="button" onclick="myTimer()">Start Game</button>
</div>
</div>

<!-- START JAVASCRIPT -->
<script>
var counter = 0;

function add() {
return counter += 1;
}

function myFunction(){
document.getElementById("numberCounter").innerHTML = add();
}
function myTimer() {
setTimeout(function(){ alert("Game over!"); }, 1000);
}


</script>

Answer 1

也许这个 fiddle 可以帮助您让计时器正常工作。

http://jsfiddle.net/2zfdLf0q/2/

// lets put everything in our game object
var game = {

    //this is the init function (we call this function on page load (see last line))
    init: function(){
        //we attach a click event on the button
        document.getElementById('start').addEventListener('click', function(){
            //we hide the button
            document.getElementById('start').style.display = "none";
            //on click we start the timer
            game.timer.start();
        });
    },

    //this is the timer object
    timer: {
        startTime: 5,   //the time we start with (used to reset)
        currentTime: 5, //the counter used to remember where the counter is
        interval: null, //the interval object is stored here so we can stop it later
        start: function(){

            //when we start the timer we set an interval to execute every 1000 miliseconds
            game.timer.interval = setInterval(function(){
                game.timer.currentTime -= 1;  //we minus 1 every second to the timer current time

                //update the textbox to show the user what the time is
                document.getElementById('counter').value = game.timer.currentTime + ' seconds'; 

                //if timer hits 0 we show the game is over and reset the game, we also clear the timer
                //so it wouldn't count below zero
                if(game.timer.currentTime == 0){
                    alert('game over'); 
                    game.reset();
                    clearTimeout(game.timer.interval);
                }

            },1000);
        }

    },

    //this is the reset function
    reset: function(){
        document.getElementById('start').style.display = 'inline-block';
        game.timer.currentTime =  game.timer.startTime; 
        document.getElementById('counter').value = game.timer.currentTime + ' seconds';
    }

}

//we start the game on page load
//you should wrap this in
//window.onload = function(){}
//but jsFiddle does this automaticly
game.init();