-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.js
402 lines (361 loc) · 10.9 KB
/
game.js
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
window.onload = function(){
var width = 1000;
var height = 500;
var canvas = document.getElementById("game");
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var keysDown = {};
var objectsInLevel = [];
var levels = [level1];
var currentLevel = 0;
var colWidth = 50;
var levelWidth = 2000;
var player = new Player(levels[currentLevel].spawnX, levels[currentLevel].spawnY);
var camera = new Camera();
var paused = false;
var lastUpdateTime;
function roundRect(x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}
//viewport
function Camera(){
this.x = 0;
this.y = 0;
this.width = canvas.width;
this.height = canvas.height;
}
Camera.prototype.update = function(char){
//current time
var now = new Date();
//number of miliseconds elapsed since Jan 1, 1970
var updateTick = now.getTime();
var vX = LinearMovement(char.velocityX, updateTick);
if(char.x + char.maxSpeedX/60 >= this.width/2 - char.width/2 && char.x - char.maxSpeedX/60 <= this.width/2 - char.width/2){
this.x += char.velocityX / 60;
}
if(this.x < 0){
this.x = 0;
}
if(this.x > levels[currentLevel].cols * colWidth - this.width){
this.x = levels[currentLevel].cols * colWidth - this.width;
}
};
function Player(x,y){
this.x = x;
this.y = y;
this.jumping = false;
this.moveRequest = false;
this.grounded = false;
//optimal frame rate 60fps
this.mScale = 60;
this.width = 15;
this.height = 15;
this.maxSpeedX = 6 * this.mScale;
this.maxSpeedY = 10 * this.mScale;
this.jumpStartSpeedY = 8 * this.mScale;
this.accelY = .5 * this.mScale;
this.maxHeight = 6;
this.velocityX = 0;
this.velocityY = 0;
this.accelX = .7 * this.mScale;
this.deccelX = .9 * this.mScale;
}
function Obstacle(x, y, width, height){
this.x=x;
this.y=y;
this.width=width;
this.height=height;
}
Obstacle.prototype.render = function(){
ctx.fillStyle = "red";
ctx.fillRect(this.x, this.y, this.width, this.height);
};
//update the state of the player
Player.prototype.update = function(cam){
//slow down if nothing pressed during frame
this.moveRequest = false;
//current time
var now = new Date();
//number of miliseconds elapsed since Jan 1, 1970
var updateTick = now.getTime();
//update player position
var amountToMoveX = LinearMovement(this.velocityX, updateTick);
var amountToMoveY = LinearMovement(this.velocityY, updateTick);
/*
if(this.x){
this.x += amountToMoveX;
}
else {
this.x = levels[currentLevel].spawnX;
}
*/
//when the player is at the center of the screen and is moving right or left they should stay in the center of the screen
//and the background should move with them.
if(cam.x === 0){
if(this.x + amountToMoveX >= 0){
this.x += amountToMoveX;
}
}
if(cam.x === levels[currentLevel].cols * colWidth - cam.width){
console.log("could this be the problem?");
if(this.x + amountToMoveX <= levels[currentLevel].cols * colWidth - this.width){
this.x += amountToMoveX;
}
}
if(this.y){
this.y += amountToMoveY;
}
else {
this.y = levels[currentLevel].spawnY;
}
//make player move based off of key strokes
this.interpretInputs();
//limit sideways acceleration of player
if(this.velocityX > this.maxSpeedX){
this.velocityX = this.maxSpeedX;
}
if(this.velocityX < -this.maxSpeedX){
this.velocityX = -this.maxSpeedX;
}
//limit the upward accel of gravity
if(this.velocityY < -this.maxSpeedY){
this.velocityY = -this.maxSpeedY;
}
//apply gravity
this.velocityY += this.accelY;
//slow down if nothing pressed
if(!this.moveRequest){
if(this.velocityX < 0){
this.velocityX += this.deccelX;
}
if(this.velocityX > 0){
this.velocityX -= this.deccelX;
}
if(this.velocityX > 0 && this.velocityX < this.deccelX) this.velocityX = 0;
if(this.velocityX < 0 && this.velocityX > -this.deccelX) this.velocityX = 0;
}
/*DELETE LATER
if(this.x <= 0){
this.x = 0;
}
if(this.x >= canvas.width - this.width){
this.x = canvas.width - this.width;
}
if(this.y >= height-this.height){
this.y = height - this.height;
this.jumping = false;
}
*///END DELETE
this.checkCollisions(objectsInLevel);
};
/* Ideally this is called 60 times in one second, so each frame the
player will move 1/60 th of the velocity. If the player is lagging
it will take more than that amount of time and this will adjust
based off of seconds between when render is called and player
movement is processed */
function LinearMovement(pixelsPerSecond, tickCount){
if(!tickCount){
var date = new Date();
tickCount = date.getTime();
}
//elapsed time since render function called in seconds
var secsElapsed = (tickCount - lastUpdateTime) / 1000;
return secsElapsed * pixelsPerSecond;
}
//check collisions with array of objects in the level and
//adjust position accordingly
Player.prototype.checkCollisions = function(objects){
var play = this;
var positionX;
var positionY;
play.grounded = false;
objects.forEach(function(obj){
//is colliding if true
var dir = collides(play, obj.x, obj.y, obj.width, obj.height);
if(dir === "l" || dir === "r"){
play.velocityX = 0;
play.jumping = false;
}
else if(dir === "b"){
play.grounded = true;
play.jumping = false;
}
else if(dir === "t"){
play.velocityY *= -1;
}
});
if(play.grounded){
play.velocityY = 0;
}
};
//check to see if player object collides with obstacle at x,y of size
//width height
var collides = function(play,x,y,width,height){
var vX = (play.x + (play.width/2)) - (x + width/2);
var vY = (play.y + (play.height/2)) - (y + height/2);
var hWidths = (play.width/2) + (width/2);
var hHeights = (play.height/2) + (height/2);
var colDir = null;
if(Math.abs(vX) < hWidths && Math.abs(vY) < hHeights){
var oX = hWidths - Math.abs(vX);
var oY = hHeights - Math.abs(vY);
if(oX >= oY){
if(vY > 0){
colDir = "t";
play.y += oY;
}
else {
colDir = "b";
play.y -= oY;
}
}
else {
if(vX > 0){
colDir = "l";
if(camera.x === 0 || camera.x === levels[currentLevel].cols * colWidth - camera.width){
play.x += oX + .05;
}
else {
camera.x += oX + .05;
}
}
else{
colDir = "r";
if(camera.x === 0 || camera.x === levels[currentLevel].cols * colWidth - camera.width){
play.x = play.x - oX - .05;
}
else {
camera.x = camera.x - oX - .05;
}
}
}
}
return colDir;
};
//adjust velocity based off of keyboard inputs from human
Player.prototype.interpretInputs = function(){
for (var key in keysDown) {
var value = Number(key);
//P - PAUSE/UNPAUSE
if (value == 80){
paused = true;
}
//left
if (value == 37) {
this.velocityX -= this.accelX;
this.moveRequest = true;
}
//right
else if (value == 39) {
this.velocityX += this.accelX;
this.moveRequest = true;
}
//up
else if (value == 32) {
if(!this.jumping && this.grounded){
this.jumping = true;
this.grounded = false;
this.velocityY = -this.jumpStartSpeedY;
}
}
}
};
//draw the player to the canvas
Player.prototype.render = function(){
ctx.fillStyle = "#000000";
ctx.fillRect(this.x, this.y, this.width, this.height);
// roundRect(this.x, this.y, this.width, this.height, 10, true, false);
// ctx.fillStyle = "white";
// roundRect(this.x + 2, this.y + 2, this.width - 4, this.height - 4, 10, true, false);
// ctx.fillStyle = "#000000";
// roundRect(this.x + 3, this.y + 3, this.width - 6, this.height - 6, 10, true, false);
};
//render all of the objects in the level by iterating
//through the array of objects in each level
//TODO: optimize by not drawing every object when not necessary?
var renderLevel = function(levels, currentLevel){
objectsInLevel = [];
for(var i = 0; i < levels[currentLevel].layout.length; i++){
for(var j = 0; j < levels[currentLevel].layout[i].length; j++){
switch(levels[currentLevel].layout[i][j]){
case 1:
var wall = new Obstacle(50 * j - camera.x, 50*i, 50, 50);
wall.render();
objectsInLevel.push(wall);
break;
case 0:
break;
}
}
}
};
//draw everything to the canvas
var render = function() {
//get the miliseconds every time the render function is called
//in order to be able to calculate lag -> decide how much player
//moves each frame
var date = new Date();
lastUpdateTime = date.getTime();
//when the player is at the center of the screen and is moving right or left they should stay in the center of the screen
//and the background should move with them.
ctx.clearRect(0,0, canvas.width, canvas.height);
renderLevel(levels, 0, camera);
player.render();
};
//updates positions of game elements
var update = function() {
player.update(camera);
camera.update(player);
};
//main game loop
var step = function(){
update();
render();
animate(step);
}
//handles animation of each frame
var animate = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) { window.setTimeout(callback, 1000/60) };
//start the game loop
animate(step);
window.addEventListener("keydown", function (event) {
keysDown[event.keyCode] = true;
//P
if(event.keyCode == 80){
if(paused == true){
paused = false;
}
else {
paused = true;
}
}
});
window.addEventListener("keyup", function (event) {
delete keysDown[event.keyCode];
});
}