我用Javascript构建了一个简单的游戏，但是我不知道如何添加结尾

这是我在这个网站上的第一个问题。我使用Javascript构建了一个简单的游戏，但我不知道如何添加结束语，因为我是初学者。感谢您的帮助。我用Javascript构建了一个简单的游戏，但是我不知道如何添加结尾

document.getElementById("start").onclick =function() { 
 
\t \t \t \t function getRandomColor() { 
 
\t \t \t \t \t \t var letters='ABCDEF'.split(''); 
 
\t \t \t \t \t \t var color='#'; 
 
\t \t \t \t \t \t for (var i=0; i <6; i++) { 
 
\t \t \t \t \t \t \t color += letters[Math.round(Math.random()*15)]; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t return color; 
 
\t \t \t \t \t } 
 

 

 
\t \t \t \t var time; var createdTime; var clickTime; var reactionTime; 
 
\t \t \t \t function makeBox() { 
 
\t \t \t \t \t time=Math.random(); 
 
\t \t \t \t \t time=time*1000; 
 
\t \t \t \t \t setTimeout(function(){ 
 
\t \t \t \t \t \t createdTime=Date.now(); 
 
\t \t \t \t \t \t if (Math.random()>0.5) { 
 
\t \t \t \t \t \t \t document.getElementById("box").style.borderRadius="100px" 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t document.getElementById("box").style.borderRadius="0" 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t var top=Math.random(); 
 
\t \t \t \t \t \t top=top*300 
 
\t \t \t \t \t \t var left=Math.random(); 
 
\t \t \t \t \t \t left=left*300 
 
\t \t \t \t \t \t document.getElementById("box").style.top=top+"px"; 
 
\t \t \t \t \t \t document.getElementById("box").style.left=left+"px"; 
 

 
\t \t \t \t \t \t document.getElementById("box").style.backgroundColor=getRandomColor(); 
 
\t \t \t \t \t \t document.getElementById("box").style.display="block" 
 
\t \t \t \t \t },time); 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t \t document.getElementById("box").onclick =function() { 
 
\t \t \t \t \t clickedTime=Date.now(); 
 
\t \t \t \t \t reactionTime=(clickedTime-createdTime)/10; 
 
\t \t \t \t \t reactionTime=Math.round(reactionTime); 
 
\t \t \t \t \t reactionTime=reactionTime/100 
 
\t \t \t \t \t document.getElementById("resulte").innerHTML =reactionTime; 
 
\t \t \t \t \t this.style.display="none"; 
 
\t \t \t \t \t makeBox(); 
 
\t \t \t \t } 
 
\t \t \t \t makeBox(); 
 
\t \t \t }

坦克对我的帮助。

来源

2016-10-24 Abu Ataa

你一直在呼唤makeBox（），你#box的onclick，就拿了这一点，它就会停止，。顺便说一句。将你的代码片段编入工作片段并不是很难。如果你可以做一个工作片段，它会好得多。 – Keith

你可以做一个jsfiddle吗？ –

对不起@凯斯先生，我不明白“片段” –

-1

这里是MartinCothweis答案片断。像我说这不是比使用小提琴困难，但从长远看更好..

如果马丁副本这一点，你就可以接受他的答案。

最简单的方法是统计点击次数，用户点击五次后结束游戏。您可以使用平均响应时间创建一条好消息，而不是警报。 jsfiddle.net/8mp0tckg/5好，但。

var clicked = 0 
 

 
document.getElementById("start").onclick = function() { 
 
\t function getRandomColor() { 
 
\t \t var letters='ABCDEF'.split(''); 
 
\t \t var color='#'; 
 
\t \t for (var i=0; i <6; i++) { 
 
\t \t \t color += letters[Math.round(Math.random()*15)]; 
 
\t \t } 
 
\t \t return color; 
 
\t } 
 

 

 
\t var time; var createdTime; var clickTime; var reactionTime; 
 
\t function makeBox() { 
 
\t \t time=Math.random(); 
 
\t \t time=time*1000; 
 
\t \t setTimeout(function(){ 
 
\t \t \t createdTime=Date.now(); 
 
\t \t \t if (Math.random()>0.5) { 
 
\t \t \t \t document.getElementById("box").style.borderRadius="100px" 
 
\t \t \t } else { 
 
\t \t \t \t document.getElementById("box").style.borderRadius="0" 
 
\t \t \t } 
 
\t \t \t var top=Math.random(); 
 
\t \t \t top=top*300 
 
\t \t \t var left=Math.random(); 
 
\t \t \t left=left*300 
 
\t \t \t document.getElementById("box").style.top=top+"px"; 
 
\t \t \t document.getElementById("box").style.left=left+"px"; 
 

 
\t \t \t document.getElementById("box").style.backgroundColor=getRandomColor(); 
 
\t \t \t document.getElementById("box").style.display="block" 
 
\t \t },time); 
 
\t \t 
 
\t } 
 
\t document.getElementById("box").onclick =function() { 
 
\t \t clickedTime=Date.now(); 
 
\t \t reactionTime=(clickedTime-createdTime)/10; 
 
\t \t reactionTime=Math.round(reactionTime); 
 
\t \t reactionTime=reactionTime/100 
 
\t \t document.getElementById("resulte").innerHTML =reactionTime; 
 
\t \t this.style.display="none"; 
 
\t \t clicked++ 
 
\t \t 
 
\t \t if (clicked >= 5) { 
 
\t \t \t alert('good game!') 
 
\t \t } else { 
 
\t \t \t makeBox(); \t 
 
\t \t } 
 
\t } 
 
\t makeBox(); 
 
}

body { 
 
\t \t \t \t font-family: Verdana, Geneva, sans-serif; 
 
\t \t \t \t padding: 8px; 
 
\t \t \t \t background-color: #FAEEC6; 
 
\t \t \t } 
 
\t \t \t #box { 
 
\t \t \t \t width: 20px; 
 
\t \t \t \t height: 20px; 
 
\t \t \t \t background-color: red; 
 
\t \t \t \t display: none; 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t #text { 
 
\t \t \t \t font-size: 3.5em; 
 
\t \t \t \t margin: 30px; 
 
\t \t \t \t padding: 40px; 
 
\t \t \t } 
 
\t \t \t #bold { 
 
\t \t \t \t font-weight: bold;

<h1>Test your reaction!</h1> 
 
\t \t <p>click on boxes and circles as quickly as you can!</p> 
 
\t \t <button id="start"><b>start !</b></button> 
 
\t \t <p id="bold">Your time: <span id="resulte">0</span>s</p> 
 
\t \t <div id="box"></div>

来源

2016-10-24 11:50:36 Keith

我用Javascript构建了一个简单的游戏，但是我不知道如何添加结尾

回答

相关问题