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

Question

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

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


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

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

帮助我的坦克。

Answer 1

以下是MartinCothweis作为一个片段的回答..就像我说的那样，并不比使用小提琴更难，但从长远来看要好得多..

如果马丁复制了这个，那么你可以接受他的回答。

  

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

＆＃13;

＆＃13;

var clicked = 0

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


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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;