Exercise 011: Counting Game


HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Counting Game </title>
<style>
html {
font-family: sans-serif;
margin-left: 4%;
background-color: #f20a99;
    }
      
body {
max-width: 800px;
min-width: 480px;
    }
fieldset {
background-color: white;
}
button {
background-color: #9bd2fa;
color: black;
border-radius: 10px;
width: 100px;
height: 50px;
}
</style>
</head>

<body>

<h1>Let's Play a Game!</h1>
<p> Let's count the shapes! </p>
  
<fieldset>
<canvas id="myCanvas" width="1200" height="300" style="border:none;">
</canvas>

<label> How many shapes do you see? </label>
<input type="number" id="answer"> </input>
<!-- <button id="colors" onclick="colors()" > Colors </button> -->
<button id="eraser" onclick="eraser()" > Next </button>
<button id="compare" onclick="compare();eraser()" > Answer </button>

<p> <b> Score: </b> </p> <div id="myScore"> 0 </div>

<p id="demo"> </p>

</fieldset>

<script type = "text/javascript">
var score=0;
function colors()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
x=Math.round(Math.random()*10+1);
for(f=1; f<=x;f++)
{
switch(f)
{
case 1: c="#7d4280"; break
case 2: c="#7d4280";break
case 3: c="#7d4280"; break
case 4: c="#7d4280";break
case 5: c="#7d4280"; break
case 6: c="#7d4280"; break
case 7: c="#7d4280"; break
case 8: c="#7d4280"; break
case 9: c="#7d4280"; break
case 10: c="#7d4280"; break
}
ctx.font = "20px Calibri";
ctx.fillStyle=c;
ctx.fillRect(10+f*100,100, 50, 50);
}
}

function eraser()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,1200,300); 
colors();
}

colors()

function compare()
{
ans=document.getElementById("answer").value

if (ans==x) {
score += 1;
document.getElementById("myScore").innerHTML=score.toString()
document.getElementById("demo").innerHTML="Hooray! You are Correct! ☺"
}
else {
document.getElementById("demo").innerHTML="Sorry, you are Wrong..."
}
}
</script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Activity 2 HTML Entaties Tag and Out put

My Personal Information Name: John Lerry Delos Angeles Age: 21 years old Birthday: january 28, 1999 Address: 290 Tramo Kaingen Bacoor, Cavite Hobbies & Interest Singing Painting Acting Playing Valley Ball Photography Movies Video Editing Dancing Talent & Skills Talent Singing Dancing Skills Teamwork Fashionable Favorite Song One Call away One Day Love your Self Let it Go Social Media Facebook
Read more