Game is now working
This commit is contained in:
parent
80d370eee5
commit
64a64f2524
|
@ -4,6 +4,11 @@ const G = 500;
|
||||||
|
|
||||||
class Box {
|
class Box {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
this.size = 0.1;
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
// All these values are in percentage of the screen
|
// All these values are in percentage of the screen
|
||||||
this.x = 0.5;
|
this.x = 0.5;
|
||||||
this.y = 0;
|
this.y = 0;
|
||||||
|
@ -11,7 +16,6 @@ class Box {
|
||||||
this.speedX = 0;
|
this.speedX = 0;
|
||||||
this.speedY = 0;
|
this.speedY = 0;
|
||||||
|
|
||||||
this.size = 0.1;
|
|
||||||
this.jumpCounter = MAX_JUMP;
|
this.jumpCounter = MAX_JUMP;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
15
src/main.js
15
src/main.js
|
@ -6,19 +6,16 @@ loop();
|
||||||
function init() {
|
function init() {
|
||||||
|
|
||||||
// Initialize scene
|
// Initialize scene
|
||||||
scene = new Scene(document.getElementById('canvas'));
|
|
||||||
scene.autoResize();
|
|
||||||
|
|
||||||
let box = new Box();
|
let box = new Box();
|
||||||
scene.addObject(box);
|
scene = new Scene(document.getElementById('canvas'), box);
|
||||||
|
|
||||||
scene.addPlatform(new Platform(0.2, 0.5, 0.3));
|
|
||||||
scene.addPlatform(new Platform(0.6, 0.2, 0.2));
|
|
||||||
scene.addPlatform(new Platform(0.7, 0.7, 0.3));
|
|
||||||
|
|
||||||
// Initialize listeners
|
// Initialize listeners
|
||||||
window.addEventListener('resize', () => scene.autoResize());
|
window.addEventListener('resize', () => {
|
||||||
|
scene.autoResize()
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('touchstart', (event) => {
|
document.addEventListener('touchstart', (event) => {
|
||||||
|
scene.start();
|
||||||
let e = event.changedTouches[0];
|
let e = event.changedTouches[0];
|
||||||
box.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
|
box.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
|
||||||
});
|
});
|
||||||
|
|
136
src/scene.js
136
src/scene.js
|
@ -1,10 +1,33 @@
|
||||||
class Scene {
|
class Scene {
|
||||||
constructor(canvas) {
|
constructor(canvas, player) {
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
this.context = canvas.getContext('2d');
|
this.context = canvas.getContext('2d');
|
||||||
this.objects = [];
|
this.player = player;
|
||||||
this.platforms = [];
|
|
||||||
this.maxHeight = 0;
|
this.maxHeight = 0;
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
this.autoResize();
|
||||||
|
this.player.reset();
|
||||||
|
this.platforms = [];
|
||||||
|
this.cameraHeight = 0;
|
||||||
|
this.cameraSpeed = 0;
|
||||||
|
this.started = false;
|
||||||
|
|
||||||
|
// Generate random initial platforms
|
||||||
|
for (let i = 0.25; i <= 2; i += 0.33) {
|
||||||
|
let platform = new Platform(Math.random(), i, 0.2);
|
||||||
|
this.addPlatform(platform);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
if (!this.started) {
|
||||||
|
this.started = true;
|
||||||
|
this.cameraSpeed = 0.005;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
width() {
|
width() {
|
||||||
|
@ -37,57 +60,70 @@ class Scene {
|
||||||
}
|
}
|
||||||
|
|
||||||
update(time = 0.002) {
|
update(time = 0.002) {
|
||||||
for (let object of this.objects) {
|
|
||||||
|
|
||||||
// Update high score
|
// Check if the game is lost
|
||||||
this.maxHeight = Math.max(object.y, this.maxHeight);
|
if (this.player.y + this.player.size < this.cameraHeight) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
let previous = {
|
// The last platform is the highest.
|
||||||
x: object.x,
|
let last = this.platforms[this.platforms.length - 1];
|
||||||
y: object.y + object.size / 2,
|
|
||||||
|
// If the last platform is on screen, we need to create the next platform.
|
||||||
|
if (last.y <= this.cameraHeight + 1) {
|
||||||
|
let diff = 0.1 + Math.random() * 0.4;
|
||||||
|
let platform = new Platform(Math.random(), last.y + diff, 0.2);
|
||||||
|
this.platforms.push(platform);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Increase position of the camera
|
||||||
|
this.cameraHeight += this.cameraSpeed * time * this.height();
|
||||||
|
|
||||||
|
|
||||||
|
// Update high score
|
||||||
|
this.maxHeight = Math.max(this.player.y, this.maxHeight);
|
||||||
|
|
||||||
|
let previous = {
|
||||||
|
x: this.player.x,
|
||||||
|
y: this.player.y + this.player.size / 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.player.update(time);
|
||||||
|
|
||||||
|
let next = {
|
||||||
|
x: this.player.x,
|
||||||
|
y: this.player.y + this.player.size / 2,
|
||||||
|
size: this.player.size,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect collision with platform
|
||||||
|
for (let platform of this.platforms) {
|
||||||
|
|
||||||
|
let p = {
|
||||||
|
x: platform.x,
|
||||||
|
y: platform.y + platform.height / 2,
|
||||||
|
width: platform.width,
|
||||||
|
height: platform.height,
|
||||||
};
|
};
|
||||||
|
|
||||||
object.update(time);
|
if (previous.y >= p.y && next.y < p.y) {
|
||||||
|
if (next.x >= p.x - p.width / 2 - next.size / 2) {
|
||||||
let next = {
|
if (next.x <= p.x + p.width / 2 + next.size / 2) {
|
||||||
x: object.x,
|
// Collision detected
|
||||||
y: object.y + object.size / 2,
|
this.player.collide(p.y - next.size/2);
|
||||||
size: object.size,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Detect collision with platform
|
|
||||||
for (let platform of this.platforms) {
|
|
||||||
|
|
||||||
let p = {
|
|
||||||
x: platform.x,
|
|
||||||
y: platform.y + platform.height / 2,
|
|
||||||
width: platform.width,
|
|
||||||
height: platform.height,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (previous.y >= p.y && next.y < p.y) {
|
|
||||||
if (next.x >= p.x - p.width / 2 - next.size / 2) {
|
|
||||||
if (next.x <= p.x + p.width / 2 + next.size / 2) {
|
|
||||||
// Collision detected
|
|
||||||
object.collide(p.y - next.size/2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Collision with the ground
|
|
||||||
if (object.y <= 0) {
|
|
||||||
object.collide(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Collisions with the border of the screen
|
|
||||||
object.x = Math.max(object.x, object.size / 2);
|
|
||||||
object.x = Math.min(object.x, 1 - object.size / 2);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
addObject(object) {
|
// Collision with the ground
|
||||||
this.objects.push(object);
|
if (this.player.y <= 0) {
|
||||||
|
this.player.collide(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collisions with the border of the screen
|
||||||
|
this.player.x = Math.max(this.player.x, this.player.size / 2);
|
||||||
|
this.player.x = Math.min(this.player.x, 1 - this.player.size / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
addPlatform(object) {
|
addPlatform(object) {
|
||||||
|
@ -98,14 +134,12 @@ class Scene {
|
||||||
this.clear();
|
this.clear();
|
||||||
this.drawBackground();
|
this.drawBackground();
|
||||||
|
|
||||||
for (let object of this.objects) {
|
|
||||||
this.drawObject(object);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let platform of this.platforms) {
|
for (let platform of this.platforms) {
|
||||||
this.drawPlatform(platform);
|
this.drawPlatform(platform);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.drawObject(this.player);
|
||||||
|
|
||||||
this.drawHud();
|
this.drawHud();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -117,7 +151,7 @@ class Scene {
|
||||||
|
|
||||||
this.context.rect(
|
this.context.rect(
|
||||||
(object.x - object.size / 2) * this.width(),
|
(object.x - object.size / 2) * this.width(),
|
||||||
(1 - object.y - object.size / 2) * this.height(),
|
(1 - object.y - object.size / 2 + this.cameraHeight) * this.height(),
|
||||||
size,
|
size,
|
||||||
size,
|
size,
|
||||||
);
|
);
|
||||||
|
@ -133,7 +167,7 @@ class Scene {
|
||||||
|
|
||||||
this.context.rect(
|
this.context.rect(
|
||||||
(object.x - object.width / 2) * this.width(),
|
(object.x - object.width / 2) * this.width(),
|
||||||
(1 - object.y - object.height / 2) * this.height(),
|
(1 - object.y - object.height / 2 + this.cameraHeight) * this.height(),
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue