javascript、超时、按钮、移动。

在过去的3天里，我一直在使用javascript，我有一项任务要做。（不要问我为什么他们让我在第一次js任务中创建一个游戏）我已经创建了这个游戏，你可以在这里查看

工作原理：单击“开始”按钮，然后“开始”按钮消失，动画从角色开始。计时器仍将运行，直到30秒结束。（目前用于测试的时间为1秒）游戏结束并在弹出窗口中显示点击量（+50次获胜）。“开始”按钮重新启动，您可以再次播放

我遇到的问题是：

1：我需要让按钮在点击时消失，但仍然会继续倒计时直到游戏结束，但在游戏结束时会返回。我在哪里可以学会这样做？请告诉我一个地点或给我看

2：在所有这些过程中，当你按下“开始游戏”时，我需要加农慢慢移动，而你点击他，分数就会上升。我得到了分数，但我不能让他移动，我甚至不知道从哪里开始。另外，当你点击他时，我需要它在屏幕上随机移动10个像素

我需要这个最简单的形式，你可以给我与javascript。你能给我指一下正确的方向吗？这是到目前为止的代码，很抱歉CSS和脚本目前在一个文件中。（省略CSS，因为我认为您不需要它。）

试着打败加农！
点击Ganon，看着你的分数上升！如果你在时间结束前打了加农足够多次，你就赢了








0

开始比赛
var计数器=0；
函数add（）{
返回计数器+=1；
}
函数myFunction（）{
document.getElementById（“numberCounter”）.innerHTML=add（）；
}
函数myTimer（）{
setTimeout（函数（）{alert（“游戏结束！”）；}，1000）；
}

也许这个小提琴可以帮助你让计时器工作起来

---

谢谢，我会尝试一下。这在一个方面帮助了我，我让开始按钮正常工作。但就我个人而言，我不能给这个角色设置动画-_-

    <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>

// 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();