-
Notifications
You must be signed in to change notification settings - Fork 0
/
simulator.html
140 lines (117 loc) · 3.95 KB
/
simulator.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trebuchet Simulator</title>
<!-- TODO: Include styles.css -->
<!-- TODO: Include simulator.js -->
<script type="text/javascript">
// This script contains code based on W3Schools' HTML Game Example
var wall;
var hpBarGreen;
var hpBarRed;
/* TODO: create the trebuchet image using trebuchet.png
* HINT: Use the JS Image class (2 lines) */
var trebuchet_img =
var components = [];
var aimArrow = {
angle: -Math.PI / 4, // in radians, negative because y increases downwards
power: 30
}
var gameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 720;
this.canvas.height = 360;
this.context = this.canvas.getContext("2d");
document.body.appendChild(this.canvas);
//document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function startGame() {
gameArea.start();
wall = new wall(10, 50, 600, gameArea.canvas.height - 50);
hpBarGreen = new component(wall.hp, 10, "green", gameArea.canvas.width - wall.hp, 0, "hpbar");
/* TODO: initialize hpBarRed.
* It should occupy the area from the right of hpBarGreen
* to the right edge of the canvas
* HINT: What should it's initial width be? (1 line) */
hpBarRed =
/* TODO: initialize components.
* HINT: What should the list initially contain?
* Which objects are components? (1 line) */
components =
updateGameArea();
}
function updateGameArea() {
gameArea.clear();
/* TODO: draw the trebuchet in the bottom left corner of the canvas
* HINT: Use the JS Canvas drawImage function.
* trebuchet.png is 100px x 100px (1 line) */
draw_arrow(gameArea.context, 10, gameArea.canvas.height - 25, aimArrow.power, aimArrow.angle);
// TODO: fill in the parentheses of the loop
for () {
var obj = components[i];
if (obj.type == "projectile") {
// TODO: update obj's position (1 line)
if (obj.collidesWith(wall)) {
console.log("Collided with wall!");
wall.hp -= 10;
hpBarGreen.width -= 10;
hpBarRed.width += 10;
hpBarRed.x -= 10;
// Remove projectile
components.splice(i, 1);
i--;
continue;
} else if (obj.hitBottom(gameArea.canvas.height)) {
// Remove projectile
components.splice(i, 1);
i--;
continue;
}
} else if (obj.type == "wall") {
// TODO: remove wall from components if wall.hp <= 0 (Around 5 lines)
}
obj.update(gameArea.context);
}
}
document.addEventListener("keydown", function(event) {
if (event.keyCode == 37 || event.keyCode == 38) {
// Left arrow pressed
aimArrow.angle -= Math.PI/180;
} else if (event.keyCode == 39 || event.keyCode == 40) {
// Right arrow pressed
aimArrow.angle += Math.PI/180;
} else if (event.keyCode == 32) {
// Space bar pressed
aimArrow.power++;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode == 32) {
// Space bar released
/* TODO: create a new projectile and launch it from the same coordinates
* as the arrow base's coordinates. Reset aimArrow to initial conditions.
* HINT: you might want to examine the arguments to draw_arrow.
* Is a projectile a component? Use simulator.js for helper functions.
* (<10 lines. I did it in 4) */
}
});
</script>
</head>
<body onload="startGame()">
<nav class="navbar">
<!-- TODO: Fix broken link to home and add link to About and Simulator -->
<ul>
<li><a href="/idx.html">Home</a></li>
</ul>
</nav>
<h1>Use a Trebuchet to tear down a Wall!</h1>
</body>
</html>