diff --git a/src/box.js b/src/box.js index 7755a49..aea9e40 100644 --- a/src/box.js +++ b/src/box.js @@ -4,6 +4,11 @@ const G = 500; class Box { constructor() { + this.size = 0.1; + this.reset(); + } + + reset() { // All these values are in percentage of the screen this.x = 0.5; this.y = 0; @@ -11,7 +16,6 @@ class Box { this.speedX = 0; this.speedY = 0; - this.size = 0.1; this.jumpCounter = MAX_JUMP; } diff --git a/src/main.js b/src/main.js index f9c3b38..751c764 100644 --- a/src/main.js +++ b/src/main.js @@ -6,19 +6,16 @@ loop(); function init() { // Initialize scene - scene = new Scene(document.getElementById('canvas')); - scene.autoResize(); - let box = new Box(); - scene.addObject(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)); + scene = new Scene(document.getElementById('canvas'), box); // Initialize listeners - window.addEventListener('resize', () => scene.autoResize()); + window.addEventListener('resize', () => { + scene.autoResize() + }); + document.addEventListener('touchstart', (event) => { + scene.start(); let e = event.changedTouches[0]; box.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight); }); diff --git a/src/scene.js b/src/scene.js index 166a355..09aba6d 100644 --- a/src/scene.js +++ b/src/scene.js @@ -1,10 +1,33 @@ class Scene { - constructor(canvas) { + constructor(canvas, player) { this.canvas = canvas; this.context = canvas.getContext('2d'); - this.objects = []; - this.platforms = []; + this.player = player; 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() { @@ -37,57 +60,70 @@ class Scene { } update(time = 0.002) { - for (let object of this.objects) { - // Update high score - this.maxHeight = Math.max(object.y, this.maxHeight); + // Check if the game is lost + if (this.player.y + this.player.size < this.cameraHeight) { + this.initialize(); + } - let previous = { - x: object.x, - y: object.y + object.size / 2, + // The last platform is the highest. + let last = this.platforms[this.platforms.length - 1]; + + // 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); - - let next = { - x: object.x, - y: object.y + object.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); - } + 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 + this.player.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) { - this.objects.push(object); + // Collision with the ground + 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) { @@ -98,14 +134,12 @@ class Scene { this.clear(); this.drawBackground(); - for (let object of this.objects) { - this.drawObject(object); - } - for (let platform of this.platforms) { this.drawPlatform(platform); } + this.drawObject(this.player); + this.drawHud(); } @@ -117,7 +151,7 @@ class Scene { this.context.rect( (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, ); @@ -133,7 +167,7 @@ class Scene { this.context.rect( (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, height, );