Please no jQuery.
I created a game through a tutorial and I want to make some changes. How the game already works is that the user clicks on the shape when it appears and then the shape will reappear within a random time between 0 - 1 second. When the user clicks the shape, their response time is displayed.
Here is what I wanna do:
- Make the shape disappear after so many seconds (probably 3s at first.)
- Add a loop. After every 10-15 rounds, the shape will disappear faster.
I tried using another setTimeout() to make the shape disappear and placed it in different places within the code. But it would either work only on the first time the shape appears if I wait the 3s, or work throughout but disable me from clicking the shape.
For the loop, I tried a for loop, then a while loop, and even a do while. But the game would either freeze on load, or it'll just iterate those 10 times really fast, not allowing the user to click the shape.
Here is the entire html/css/javascript of the basic game. Please focus on the functionality of the code and not the naming convention or the fact that its all internal. I am aware that using i as a variable is bad practice and that it is most likely best to use external sheets and js files. This is straight from the tutorial and the code was kept on one page so it would be easier for those to just copy the entire thing and test it without saving other files.
<!doctype html>
<html>
<head>
<title>Reaction Game</title>
<style>
body{
font-family:Verdana, Geneva, sans-serif;
}
#box{
width:100px;
height:100px;
background-color:red;
display:none;
position:relative;
}
.bold{
font-weight:bold;
}
</style>
</head>
<body>
<h1>Test your reactions</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<p class="bold">Your time: <span id="time">0</span>s</p>
<div id="box"></div>
<script type="text/javascript">
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 clickedTime;
var createdTime;
var reactionTime;
function makeBox(){
var time=Math.random();
time=time*1000;
setTimeout(function(){
if(Math.random()>0.5){
document.getElementById("box").style.borderRadius="100px";
} else{
document.getElementById("box").style.borderRadius="0px";
}
var top=Math.random();
top=top*300;
var left=Math.random();
left=left*800;
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";
createdTime=Date.now();
}, time);
}
document.getElementById("box").onclick=function(){
clickedTime=Date.now();
reactionTime=(clickedTime-createdTime)/1000;
document.getElementById("time").innerHTML=reactionTime;
this.style.display="none";
makeBox();
}
makeBox();
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire