This repository has been archived by the owner on Feb 8, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (81 loc) · 3.33 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Rocket Game</title>
<style>
* {
padding: 0;
margin: 0;
background: #555;
}
canvas {
background: #333;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="debugText"></div>
<canvas id="game"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const isDebug = true, drawTextures = false;
const rocketModel = new Image;
rocketModel.src = "RocketPrototype.png";
canvas.width = window.innerWidth * 0.9;
canvas.height = window.innerHeight * 0.9;
document.addEventListener("keydown", ev => keyEvent(true, ev), false);
document.addEventListener("keyup", ev => keyEvent(false, ev), false);
canvas.addEventListener("touchstart", ev => tapEvent(true, ev), false);
canvas.addEventListener("touchmove", ev => tapEvent(true, ev), false);
canvas.addEventListener("touchend", ev => tapEvent(false, ev), false);
socket.emit("init", function (data) {
multiplier = Math.min(canvas.width / data["sw"], canvas.height / data["sh"]);
canvas.width = data["sw"] * multiplier;
canvas.height = data["sh"] * multiplier;
if (isDebug) document.getElementById("debugText").innerHTML += "\n Connected to " + data["port"];
});
draw();
function draw() {
socket.emit("sreq", function (data) { // state request
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.translate((data["x"] + data["width"] / 2) * multiplier, (data["y"] + data["height"]) *
multiplier);
ctx.rotate(data["rot"] * Math.PI / 180);
if(!isDebug || drawTextures)
ctx.drawImage(rocketModel, -data["width"] / 2 * multiplier, -data["height"] / 2 * multiplier,
data["width"] * multiplier, data["height"] * multiplier);
if (isDebug) debug(data, multiplier);
ctx.fill();
ctx.restore();
});
requestAnimationFrame(draw);
}
function debug(data, multiplier) {
ctx.beginPath();
ctx.fillStyle = "gold";
ctx.fillRect( - data["width"] / 2 * multiplier, - data["height"] / 2 * multiplier,
data["width"] * multiplier, data["height"] * multiplier);
ctx.fillStyle = "red";
for (const x of [-1, 1]) for (const y of [-1, 1]) {
ctx.fillRect(x * (data["width"] / 2 - 4) * multiplier , y * (data["height"] / 2 - 4) * multiplier, x * multiplier * 9, y * multiplier * 9);
}
ctx.fill();
}
function tapEvent(pressed, ev) {
socket.emit("gmev", pressed);
}
function keyEvent(pressed, ev) {
if (ev.key === " ")
socket.emit("gmev", pressed); // game event
}
</script>
</body>
</html>