gpt4 book ai didi

javascript,超时,按钮,移动。

转载 作者:行者123 更新时间:2023-11-28 07:38:18 24 4
gpt4 key购买 nike

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

最佳答案

也许这个 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();

关于javascript,超时,按钮,移动。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31104307/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com