-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcar.html
118 lines (93 loc) · 2.99 KB
/
car.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
<html>
<style>
html {
height: 100%;
margin: 0;
}
.canvas {
width: 100%;
height: 100%;
}
</style>
<canvas class="canvas" id="canvas"></canvas>
</html>
<script>
var throttle = false;
var brakes = false;
var steering = 0; // -1, 0, 1
document.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {return;}
var handled = false;
if (event.key !== undefined) {
handled = true;
if (event.key == 'w' || event.key == 'W') { throttle = true; }
if (event.key == 's' || event.key == 'S') { brakes = true; }
if (event.key == 'a' || event.key == 'A') { steering = -1; }
if (event.key == 'd' || event.key == 'D') { steering = 1; }
}
if (handled) { event.preventDefault(); }
}, true);
document.addEventListener("keyup", function (event) {
if (event.defaultPrevented) { return; }
var handled = false;
if (event.key !== undefined) {
handled = true;
if (event.key == 'w' || event.key == 'W') { throttle = false; }
if (event.key == 's' || event.key == 'S') { brakes = false; }
if (event.key == 'a' || event.key == 'A') { steering = 0; }
if (event.key == 'd' || event.key == 'D') { steering = 0; }
}
if (handled) { event.preventDefault();}
}, true);
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let treepng = new Image();
treepng.src = "tree.png"
resizeCanvasToDisplaySize(canvas);
ctx.fillStyle = 'lightblue'; // initialize canvas
ctx.fillRect(0, 0, canvas.width, canvas.height/2);
ctx.fillStyle = 'lightgreen'; // initialize canvas
ctx.fillRect(0, canvas.height/2, canvas.width, canvas.height/2);
treepng.onload = function() {
drawWorld(world)
};
let world = [
[1,1],
[1,0]
]
let worldScale = 100
let dstScale = 200;
const rad = Math.PI/180
let camera = {x:0, y:0, angle:0}
function drawWorld(world) {
for (let x = 0; x < world.length; x ++) {
for (let y = 0; y < world[0].length; y ++) {
if (world[x][y] != 0) {
let dstSqrd = (camera.x - x)**2 + (camera.y - y)**2
let dst = Math.sqrt(dstSqrd)
dst = dst * dstScale
rotatedX = dst * Math.cos(camera.angle * rad)
rotatedY = dst * Math.sin(camera.angle * rad)
ctx.drawImage( treepng,
rotatedX,
(canvas.height / 2) + dst + (rotatedY),
(100 - dst) + (rotatedY),
(150 - dst) + (rotatedY) )
}
}
}
}
function resizeCanvasToDisplaySize(canvas) {
// Lookup the size the browser is displaying the canvas in CSS pixels.
const displayWidth = canvas.clientWidth;
const displayHeight = canvas.clientHeight;
// Check if the canvas is not the same size.
const needResize = canvas.width !== displayWidth || canvas.height !== displayHeight;
if (needResize) {
// Make the canvas the same size
canvas.width = displayWidth;
canvas.height = displayHeight;
}
return needResize;
}
</script>