-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (78 loc) · 1.98 KB
/
index.html
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Touch Event Horizon</title>
<style> body { margin: 0; background: #fff; } canvas { background: #eee; } </style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var p1Counter = 0;
var p2Counter = 0;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#0095DD";
ctx.font = "bold 16px Arial";
window.addEventListener("touchstart", handleStart, false);
window.addEventListener("touchmove", handleMove, false);
window.addEventListener("touchend", handleEnd, false);
ctx.fillText("Touch to start", 200, 70);
function handleStart(evt){
evt.preventDefault();
ctx.clearRect (0, 0, canvas.width, canvas.height);
for (var i = evt.touches.length - 1; i >= 0; i--) {
var touch = evt.touches[i];
var x = evt.touches[i].pageX;
var y = evt.touches[i].pageY;
if(x <= 240){
p1Counter++;
}
if(x > 240){
p2Counter++;
}
drawInfo();
if(p1Counter == 50) {
alert("Player One reached 50 points and WON!");
window.location.reload();
}
else if(p2Counter >= 50) {
alert("Player Two reached 50 points and WON!");
window.location.reload();
}
}
};
function handleMove(evt){
evt.preventDefault();
for (var i = evt.touches.length - 1; i >= 0; i--) {
var touch = evt.touches[i];
var x = evt.touches[i].pageX;
var y = evt.touches[i].pageY;
ctx.beginPath();
ctx.fillStyle = "#0095DD";
ctx.arc(x, y, 10, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
};
function handleEnd(evt){
ctx.clearRect (0, 0, canvas.width, canvas.height);
drawInfo();
}
function drawInfo() {
ctx.fillText("P1: "+ p1Counter, 155, 20);
ctx.fillText("P2: "+p2Counter, canvas.width-175, 20);
ctx.beginPath();
ctx.fillStyle = "#0095DD";
ctx.arc(155, 80, p1Counter, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#0095DD";
ctx.arc(canvas.width-175, 80, p2Counter, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>