-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.html
89 lines (75 loc) · 2.38 KB
/
game.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
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<title>thisIsTheFoxe</title>
<noscript>Please Enable JavaScript to enjoy this Website with all it's features :)</noscript>
<body>
<canvas id="game" height="300" width="300" style="border:solid 2px black"></canvas><br/>
<button onclick="start()">Start!</button>
</body>
<script>
let canvas = document.getElementById("game").getContext('2d');
canvas.lineJoin = "round"
addEventListener("keypress", handle);
let pt = 0
let timerID = 0
let speed = 200
let x = 150
let y = 150
let dir = 3 //o, r, u, l
function start(){
timerID = setInterval(play, speed);
}
function play(){
console.log(x,y);
canvas.beginPath();
canvas.moveTo(x,y);
switch (dir){
case 0: x -= 2; break
case 1: y -= 2; break
case 2: x += 2; break
case 3: y += 2; break
default: console.log(dir, "ERR"); break;
}
if(canvas.getImageData(x,y,2,2).data[3] != 0){
gameOver()
return
}else if(x > 305){
gameOver();
return
}else if (y > 305) {
gameOver()
return
}else if (y < -5){
gameOver()
return
}else if (x < -5){
gameOver()
return
}
canvas.lineTo(x,y);
canvas.stroke();
pt += 1
if (pt % 15 == 0){
speed -= 5
clearTimeout(timerID)
start()
}
}
function gameOver(){
clearTimeout(timerID);
canvas.clearRect(0, 0, 300, 300);
x = 150
y = 150
speed = 250
dir = 3
}
function handle(e){
console.log(e.key);
switch(e.key){
case 'a': dir = (dir+1) % 4; break
case 'd': dir = dir = dir <= 0 ? 3: --dir
}
}
</script>
</html>