Блог

Главная - Вопросы по программированию - Я создал простую игру на Javascript, но я не знаю, как я могу добавить к ней конец

Я создал простую игру на Javascript, но я не знаю, как я могу добавить к ней конец

#javascript #html

#javascript #HTML

Вопрос:

Это мой первый вопрос на этом веб-сайте. Я создал простую игру на 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();
			}

Спасибо за помощь мне.

Комментарии:

1. Вы продолжаете вызывать makeBox (), на вас #box onclick, удалите это, и это остановится,. кстати. Было не очень сложно превратить ваш фрагмент в рабочий фрагмент. Если вы можете создать рабочий фрагмент, это намного лучше.

2. не могли бы вы создать jsfiddle?

3. Извините, мистер @ Keith, я не понял «фрагмент»

4. Конечно, мистер @MartinGottweis. jsfiddle.net/8mp0tckg/4

5. Проще всего было бы посчитать клики и после того, как пользователь нажмет пять раз, завершить игру. Вместо предупреждения вы можете создать приятное сообщение со средним временем отклика. jsfiddle.net/8mp0tckg/5 Хорошая работа.

Ответ №1:

Вот ответ Мартинкотвейса в виде фрагмента.. Как я уже говорил, это не сложнее, чем использовать Fiddle, но намного лучше в долгосрочной перспективе..

Если Мартин скопирует это, и вы сможете принять его ответ.

Проще всего было бы посчитать клики и после того, как пользователь нажмет пять раз, завершить игру. Вместо предупреждения вы можете создать приятное сообщение со средним временем отклика. jsfiddle.net/8mp0tckg/5 Однако, хорошая работа.

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