Skip to content

Commit b1e5f5a

Browse files
sebleedelislesebleedelisle
committed
Moving things around and adding SOTB13 files
1 parent 65f78b6 commit b1e5f5a

26 files changed

+1606
-0
lines changed

‎wxg12/designer-track.html ‎2012/wxg12/designer-track.html

File renamed without changes.

‎wxg12/developer-track.html ‎2012/wxg12/developer-track.html

File renamed without changes.

‎SOTB13/BrowserInvaders1/Invaders.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<head>
5+
<title>Invaders</title>
6+
<style type="text/css">
7+
body {
8+
background-color:black;
9+
margin:0px;
10+
overflow : hidden;
11+
text-align:center;
12+
}
13+
canvas {
14+
padding:auto;
15+
16+
}
17+
</style>
18+
</head>
19+
20+
21+
<body>
22+
<script src="../libs/creativejs.js"></script>
23+
<script src="../libs/Vector2.js"></script>
24+
<script src="../libs/KeyTracker.js"></script>
25+
<script src="InvadersGame.js"></script>
26+
27+
28+
</body>
29+
</html>
30+

‎SOTB13/BrowserInvaders1/InvadersGame.js

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
2+
var canvas, ctx,
3+
leftDown, rightDown;
4+
5+
var playerShip,
6+
invaders,
7+
bullets, particles;
8+
9+
var screenHeight, screenWidth;
10+
11+
init();
12+
13+
function init() {
14+
15+
screenWidth = window.innerWidth;
16+
screenHeight = window.innerHeight;
17+
18+
canvas = document.createElement('canvas');
19+
document.body.appendChild(canvas);
20+
canvas.width = screenWidth;
21+
canvas.height = screenHeight;
22+
ctx = canvas.getContext('2d');
23+
24+
window.addEventListener('keydown', keyDown);
25+
window.addEventListener('keyup', keyUp);
26+
27+
playerShip = new PlayerShip(screenWidth/2,screenHeight-80);
28+
29+
bullets = [];
30+
particles = [];
31+
resetInvaders();
32+
33+
setInterval(loop, 1000/50);
34+
35+
}
36+
37+
function loop() {
38+
ctx.clearRect(0,0,screenWidth, screenHeight);
39+
checkKeys();
40+
41+
updateBullets();
42+
43+
checkCollisions();
44+
45+
46+
47+
renderBullets();
48+
renderInvaders();
49+
updateParticles();
50+
playerShip.render(ctx);
51+
}
52+
53+
function checkCollisions() {
54+
55+
56+
for(var i = 0; i<bullets.length; i++) {
57+
var bullet = bullets[i];
58+
59+
for(var j = 0; j<invaders.length; j++) {
60+
var invader = invaders[j];
61+
62+
if( (bullet.x > invader.x) && (bullet.x < invader.x + invader.width)
63+
&& (bullet.y >invader.y) && (bullet.y < invader.y +invader.height)) {
64+
65+
invaders.splice(j, 1);
66+
j--;
67+
bullets.splice(i,1);
68+
i--;
69+
70+
makeExplosion(invader.x +invader.width/2, invader.y+invader.height/2)
71+
72+
}
73+
74+
75+
76+
}
77+
78+
}
79+
80+
81+
}
82+
83+
84+
85+
function resetInvaders() {
86+
invaders = [];
87+
88+
for(var col = 0; col <10; col++) {
89+
for(var row = 0; row<4; row++ ) {
90+
var invader = new Invader(col * 80, row*60);
91+
invaders.push(invader);
92+
93+
}
94+
}
95+
96+
}
97+
98+
function updateBullets() {
99+
for(var i =0; i<bullets.length; i++) {
100+
101+
bullets[i].update();
102+
}
103+
104+
105+
}
106+
function renderBullets() {
107+
for(var i =0; i<bullets.length; i++) {
108+
109+
bullets[i].render(ctx);
110+
}
111+
112+
113+
}
114+
115+
116+
function updateParticles() {
117+
for(var i =0; i<particles.length; i++) {
118+
particles[i].update();
119+
particles[i].render(ctx);
120+
}
121+
122+
123+
}
124+
125+
126+
function renderInvaders() {
127+
for(var i =0; i<invaders.length; i++) {
128+
129+
invaders[i].render(ctx);
130+
}
131+
132+
133+
}
134+
135+
function checkKeys() {
136+
137+
if(leftDown) {
138+
playerShip.x -=10;
139+
} else if(rightDown) {
140+
playerShip.x +=10;
141+
}
142+
143+
}
144+
145+
function keyDown(e) {
146+
147+
if(e.keyCode == 37) {
148+
leftDown = true;
149+
} else if (e.keyCode == 39) {
150+
rightDown = true;
151+
}
152+
153+
if(e.keyCode == 32) {
154+
var bullet = new Bullet(playerShip.x + playerShip.width/2, playerShip.y);
155+
bullets.push(bullet);
156+
}
157+
}
158+
159+
function keyUp(e) {
160+
161+
if(e.keyCode == 37) {
162+
leftDown = false;
163+
} else if (e.keyCode == 39) {
164+
rightDown = false;
165+
}
166+
}
167+
168+
169+
function PlayerShip(x, y) {
170+
171+
this.x = x;
172+
this.y = y;
173+
this.width = 60;
174+
this.height = 40;
175+
176+
this.render = function (ctx) {
177+
ctx.fillStyle = 'white';
178+
ctx.fillRect(this.x, this.y, this.width, this.height);
179+
}
180+
181+
182+
183+
}
184+
185+
186+
function Bullet(x, y) {
187+
188+
this.x = x;
189+
this.y = y;
190+
191+
this.update = function () {
192+
this.y -=20;
193+
194+
195+
}
196+
this.render = function (ctx) {
197+
ctx.fillStyle = 'white';
198+
ctx.fillRect(this.x, this.y, 4,10);
199+
}
200+
201+
202+
203+
}
204+
205+
206+
function Invader(x, y) {
207+
208+
this.x = x;
209+
this.y = y;
210+
this.width = 60;
211+
this.height = 40;
212+
213+
this.render = function (ctx) {
214+
ctx.fillStyle = 'red';
215+
ctx.fillRect(this.x, this.y, this.width, this.height);
216+
}
217+
218+
}
219+
function Particle(x, y) {
220+
221+
this.x = x;
222+
this.y = y;
223+
this.velX = Math.random()* 20 -10;
224+
this.velY = Math.random()* 20 -10;
225+
this.size = 10;
226+
this.update = function() {
227+
this.x += this.velX;
228+
this.y += this.velY;
229+
230+
}
231+
this.render = function (ctx) {
232+
ctx.fillStyle = 'red';
233+
ctx.fillRect(this.x, this.y, this.size, this.size);
234+
}
235+
236+
}
237+
238+
function makeExplosion(x, y) {
239+
for(var i = 0; i<100; i++ ) {
240+
241+
var p = new Particle(x,y);
242+
particles.push(p);
243+
244+
245+
246+
}
247+
248+
249+
}
250+
251+
252+
253+
254+
255+
256+

‎SOTB13/BrowserInvaders1/explode.wav

20.4 KB
Binary file not shown.

‎SOTB13/BrowserInvaders1/laser.wav

7.01 KB
Binary file not shown.

‎SOTB13/BrowserInvaders1/png-0.png

6.77 KB
Loading

‎SOTB13/BrowserInvaders1/png-1.png

7.83 KB
Loading

‎SOTB13/BrowserInvaders1/png-2.png

3.79 KB
Loading

‎SOTB13/BrowserInvaders1/png-3.png

7.68 KB
Loading

‎SOTB13/BrowserInvaders1/png-4.png

7.52 KB
Loading

‎SOTB13/BrowserInvaders2/Invaders.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<head>
5+
<title>Invaders</title>
6+
<style type="text/css">
7+
body {
8+
background-color:black;
9+
margin:0px;
10+
overflow : hidden;
11+
text-align:center;
12+
}
13+
canvas {
14+
padding:auto;
15+
16+
}
17+
</style>
18+
</head>
19+
20+
21+
<body>
22+
<script src="../libs/creativejs.js"></script>
23+
<script src="../libs/Vector2.js"></script>
24+
<script src="../libs/KeyTracker.js"></script>
25+
<script src="InvadersGame.js"></script>
26+
27+
28+
</body>
29+
</html>
30+

0 commit comments

Comments
 (0)