-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (112 loc) · 2.83 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
</div>
<canvas id="canvas"></canvas>
<div class="information">
<div>
<p>up: go up</p>
<p>left: go left</p>
<p>right: go right</p>
<p>down: go down</p>
</div>
</div>
</body>
<script>
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d")
const WIDTH = 480
const HEIGHT = WIDTH
canvas.width = WIDTH
canvas.height = HEIGHT
context.scale(24, 24)
const GRID_COL = WIDTH/24
const GRID_ROW = HEIGHT/24
const colors = [
"#dcdcdc",
"#00263f",
"#ffb900",
"#2753f1",
"#f7ff00",
"#ff6728",
"#11c5bf",
"#ae81ff",
"#e94659",
]
let requestAnimationFrameId = null
let lastTime = 0
let dropCounter = 0
let dropInterval = 500
window.addEventListener("keydown", (e) => {
if (!requestAnimationFrameId) return
switch (e.key) {
case "ArrowLeft": {
snake_step(snake, 3)
snake_draw(context, snake)
break
}
case "ArrowRight": {
snake_step(snake, 4)
snake_draw(context, snake)
break
}
case "ArrowDown": {
snake_step(snake, 2)
snake_draw(context, snake)
break
}
case "ArrowUp": {
snake_step(snake, 1)
snake_draw(context, snake)
break
}
}
})
let snake_draw = null;
let snake_new = null;
let snake_step = null;
let snake = null;
const importObject = {
canvas: {
stroke_rect: (ctx, x, y, width, height) => ctx.strokeRect(x, y, width, height),
set_line_width: (ctx, width) => ctx.lineWidth = width,
fill_rect: (ctx, x, y, width, height) => ctx.fillRect(x, y, width, height),
set_stroke_color: (ctx, color) => ctx.strokeStyle = colors[color],
set_fill_style: (ctx, color) => ctx.fillStyle = colors[color],
},
spectest: {
print_i32: (x) => console.log(String(x)),
print_f64: (x) => console.log(String(x)),
print_char: (x) => console.log(String.fromCharCode(x)),
},
Math:{
random: Math.random,
floor: Math.floor,
}
};
function update(time = 0) {
const deltaTime = time - lastTime
dropCounter += deltaTime
if (dropCounter > dropInterval) {
snake_step(snake, 5);
dropCounter = 0
}
lastTime = time
snake_draw(context, snake)
requestAnimationFrameId = requestAnimationFrame(update)
}
WebAssembly.instantiateStreaming(fetch("target/wasm/release/build/main/main.wasm"), importObject).then(
(obj) => {
obj.instance.exports._start();
snake_draw = obj.instance.exports["snake/main::draw"];
snake_new = obj.instance.exports["snake/main::new"];
snake_step = obj.instance.exports["snake/main::step"];
snake = snake_new();
requestAnimationFrameId = requestAnimationFrame(update);
}
)
</script>
</html>