-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathship-sim.html
83 lines (77 loc) · 1.73 KB
/
ship-sim.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Chip Sim</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<style type="text/css">
#canvas{
background-color: #000000;
}
</style>
<script src="./js/utils.js"></script>
<script src="./js/ship.js"></script>
</head>
<body>
<canvas id="canvas" width="1000" height="400"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ship = new Ship(),
vr = 0,
vx = 0,
vy = 0,
thrust = 0;
ship.x = canvas.width / 2;
ship.y = canvas.height / 2;
window.addEventListener('keydown', function(event){
switch (event.keyCode){
case 37: //left
vr = -3;
break;
case 39: //left
vr = 3;
break;
case 38: //down
thrust = 0.05;
ship.showFlame = true;
break;
}
}, false);
window.addEventListener('keyup', function(event){
vr = 0;
thrust = 0;
ship.showFlame = false;
}, false);
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ship.rotation += vr * Math.PI / 180;
var angle = ship.rotation,
ax = Math.cos(angle) * thrust,
ay = Math.sin(angle) * thrust,
left = 0,
right = canvas.width,
top = 0,
bottom = canvas.height;
vx += ax;
vy += ay;
ship.x += vx;
ship.y += vy;
if(ship.x - ship.width / 2 > right){
ship.x = left - ship.width / 2;
} else if(ship.x + ship.width / 2 < left){
ship.x = right + ship.width / 2;
}
if(ship.y - ship.height / 2 > bottom){
ship.y = top - ship.height / 2;
} else if(ship.y < top - ship.height / 2){
ship.y = bottom + ship.height / 2;
}
ship.draw(context);
}());
}
</script>
</body>
</html>