Webpage designed using HTML/CSS/Javascript Nothing more needed than besides what
ID: 3585435 • Letter: W
Question
Webpage designed using HTML/CSS/Javascript
Nothing more needed than besides what it said in instructions
Part 3. This part is a game that the user can play The game starts with just two buttons "Start Game" and "Stop Game". Start Game Game When the user clicks on the button "Start Game", a prompt window appears and asks the user to choose an integer between 0 and 9. Then every one second, three random numbers (between 0 and 9) will be generated and flashing on the screen. The user has to click on the number that was previously chosen to win 1 point. If the user click on the wrong number then 1 point is deducted. Therefore, the game score can become negative if the user clicks on many wrong numbers. The number that the user chosen is displayed in green. The game score is displayed in red. The three random numbers must be in red, orange and blue color The game score must be updated in real-time as the user playing the game. Start Game Stop Game Your chosen number is:7 Your score so far:0 4 7 0 When the user clicks on the button "Stop Game", then the game is stopped. The screen must be remain the same with the chosen number, the current score, the last 3 random numbers unchanged. When the user clicks on the "Start Game", then a new game is generated. A prompt windovw appears and asks the user to choose a new number. And then the score will be reset to 0.Explanation / Answer
Hi
Please create html file and put below code :
<html>
<head>
<title>title</title>
</head>
<body>
<script src="jquery-1.11.0.min.js"></script>
<input type="button" value="Start Game" id="start" />
<input type="button" value="Stop Game" id="stop" />
<div id="startSelect" >Choose number 0 to 9 <select id="chosedno">
<option value="" selected="selected">Select Number</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select></div>
<div id="stopedDiv">
Your chosen number is : <label id="green"></label><br>
Your score so far :<label id="red"></label><br>
</div>
<div id="randomdiv">
<label class="label0" id="label0"></label>
<label class="label1" id="label1"></label>
<label class="label2" id="label2"></label>
</div>
<script type="text/javascript">
$(function(){
var score = 0;
var selectedno;
var clickedno;
var cleartime;
$('#start').click(function(){
$('#startSelect').show();
});
$('#stop').click(function(){
$('#startSelect').hide();
$('#stopedDiv').show();
$('#green').text(selectedno);
$('#red').text(score);
clearTimeout(cleartime);
});
$('#startSelect').change(function(){
selectedno = $('#chosedno').val();
randomno();
});
function randomno(){
for(var i=0; i < 3; i++){
var randomnumber = Math.floor(Math.random() * (9 - 0 + 1)) + 0;
$('#label'+i).text(randomnumber);
}
cleartime = setTimeout(function(){randomno();}, 1000);
}
$(document).on('click','.label0',function(){
var clickedv= $('.label0').text();
if(selectedno == clickedv ){
score = score+1;
}else{
score = score -1;
}
});
$(document).on('click','.label1',function(){
var clickedv= $('.label1').text();
if(selectedno == clickedv ){
score = score+1;
}else{
score = score -1;
}
});
$(document).on('click','.label2',function(){
var clickedv= $('.label2').text();
if(selectedno == clickedv ){
score = score+1;
}else{
score = score -1;
}
});
});
</script>
</body>
</html>
We have used click, change function and setTimeout function in javascript.
Please download jquery-1.11.0.min.js from internet and put with this html file.
Please rate me.
Thank you.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.