countingGame/index.htm at master · ghosttk/countingGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" >#canvas1{border:solid black;width: 100%;height:50%;}</style>
</head>
<body>
<canvas id="canvas1" ></canvas>
<h1 style="font-size:30em;display:inline" id="result">result</h1>
<input style="font-size:10em;" type="text" onchange="check()" id="anwser" placeholder="0" autofocus="autofocus"/>
<input value="ok" type="button" id="commit" onclick="check()" style="font-size:18em"></input>

<script type="text/javascript">
var pngs=new Array("email.png","fileexplorer.png","gallery.png","gm.png","launcher.png","lock.png","maps.png","mms.png","monitor.png","music.png","notes.png","settings.png","talk.png","thememanager.png","updater.png","vending.png","voicedialer.png","weather.png");
    var rnd=Math.floor(Math.random()*9);
    var plus=Math.floor(Math.random()*9);
    var nresult=Math.floor(rnd+plus);
    var pngnum=Math.floor(pngs.length*Math.random());
    var cvs=document.getElementById("canvas1");
    var ctx=cvs.getContext("2d");
    var img=new Image();
    img.src="img/"+pngs[pngnum];
    var imgQue=new Image();
	imgQue.onload=function(){
        ctx.drawImage(imgQue,250,50,50,50);
        }

    imgQue.src="img/question-mark.png";
    img.onload=function(){
        for(i=0;i<rnd;i++)
        {
           ctx.drawImage(img,i*20,i*Math.random()*10);
        }
        }
    ctx.font=("40px");
    ctx.fillText("?",300,50,50,50);
    result=document.getElementById("result");
    result.innerHTML=nresult.toString();
    function check(){
	var anw=document.getElementById("anwser").value;
	var stdanw=nresult.toString()+"-"+rnd.toString()+"="+plus.toString();
	if(anw===stdanw){
	window.location.reload();
		}
	else{alert("error!");}
	}
</script>
</body>
</html>