INTERACTIVE MEDIA DESIGN (Finals): NUMBER GAME
ASSIGNMENT 3.2
RESULT:
HTML CODE(OVERALL):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Counting Drill Game </title>
<style>
html {
font-family: Copperplate;
}
body {
max-width: 800px;
min-width: 480px;
color: #5E583A ;
background-color: #E8D2AF;
}
fieldset {
background-color: #C7D57E;
}
button {
background-color: #CDAD63;
}
</style>
</head>
<body>
<h1 style="font-size: 40px; margin-left: 450px;"> COUNT WITH ME </h1>
<fieldset>
<canvas id="myCanvas" width="1250" height="370";">
</canvas>
<label> COUNT THE SQUARES </label>
<input type="number" id="answer"> </input>
<button id="eraser" onclick="eraser()" > Next </button>
<button id="compare" onclick="compare();eraser()" > Answer </button>
<div id="myScore"> </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="#84CB1D"; break
case 2: c="#90A380"; break
case 3: c="#77C20A"; break
case 4: c="#7C9B50"; break
case 5: c="#37540E"; break
case 6: c="#586C3C"; break
case 7: c="#B5FD4D"; break
case 8: c="#95BB14"; break
case 9: c="#E5FF8C"; break
case 10: c="#ACDF00"; break
}
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="YOU GOT IT!"
}
else {
document.getElementById("demo").innerHTML="INCORRECT."
}
}
</script>
</body>
</html>
Comments
Post a Comment