diff --git a/Makefile b/Makefile index 9aed197..88fcf00 100644 --- a/Makefile +++ b/Makefile @@ -6,6 +6,7 @@ www/js/escalator.js: $(shell find src -name "*.js") src/open.js \ src/scene.js \ src/box.js \ + src/platform.js \ src/main.js \ src/close.js \ > www/js/escalator.js diff --git a/src/box.js b/src/box.js index 4009861..2c4ff2a 100644 --- a/src/box.js +++ b/src/box.js @@ -21,18 +21,14 @@ class Box { this.speedY -= G * time; this.speedY = Math.max(this.speedY, -MAX_SPEED); - this.x += this.speedX * time; this.y += this.speedY * time; + } - if (this.y <= 0) { - this.y = 0; - this.speedY = 0; - this.jumpCounter = MAX_JUMP; - } - - this.x = Math.max(0, Math.min(1, this.x)); - + collide(y) { + this.y = y; + this.speedY = 0; + this.jumpCounter = MAX_JUMP; } jump(_x, _y) { diff --git a/src/main.js b/src/main.js index 7551d3d..f9c3b38 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -let box, scene; +let scene; init(); loop(); @@ -8,8 +8,13 @@ function init() { // Initialize scene scene = new Scene(document.getElementById('canvas')); scene.autoResize(); - box = new Box(); - scene.add(box); + + 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)); // Initialize listeners window.addEventListener('resize', () => scene.autoResize()); diff --git a/src/platform.js b/src/platform.js new file mode 100644 index 0000000..84c52d6 --- /dev/null +++ b/src/platform.js @@ -0,0 +1,13 @@ +class Platform { + constructor(x, y, width) { + this.x = x; + this.y = y; + this.width = width; + this.height = 0.02; + this.color = 'rgb(0, 255, 0)'; + } + + update() { + + } +} diff --git a/src/scene.js b/src/scene.js index 99a98c3..166a355 100644 --- a/src/scene.js +++ b/src/scene.js @@ -3,6 +3,8 @@ class Scene { this.canvas = canvas; this.context = canvas.getContext('2d'); this.objects = []; + this.platforms = []; + this.maxHeight = 0; } width() { @@ -36,37 +38,112 @@ class Scene { update(time = 0.002) { for (let object of this.objects) { + + // Update high score + this.maxHeight = Math.max(object.y, this.maxHeight); + + let previous = { + x: object.x, + y: object.y + object.size / 2, + }; + 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); + } + } + } + } + + // 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); } } - add(object) { + addObject(object) { this.objects.push(object); } + addPlatform(object) { + this.platforms.push(object); + } + render() { this.clear(); this.drawBackground(); for (let object of this.objects) { - this.draw(object); - // object.drawOn(this.canvas); + this.drawObject(object); } + + for (let platform of this.platforms) { + this.drawPlatform(platform); + } + + this.drawHud(); } - draw(object) { + drawObject(object) { let size = object.size * this.width(); this.context.fillStyle = 'rgb(0, 0, 0)'; this.context.beginPath(); this.context.rect( - object.x * this.width(), - (1 - object.y) * this.height() - size, + (object.x - object.size / 2) * this.width(), + (1 - object.y - object.size / 2) * this.height(), size, size, ); this.context.fill(); } + drawPlatform(object) { + let width = object.width * this.width(); + let height = object.height * this.height(); + + this.context.fillStyle = object.color || 'rgb(0, 0, 0)'; + this.context.beginPath(); + + this.context.rect( + (object.x - object.width / 2) * this.width(), + (1 - object.y - object.height / 2) * this.height(), + width, + height, + ); + this.context.fill(); + } + + drawHud() { + this.context.font = "20px Arial"; + this.context.fillStyle = 'rgb(255, 255, 255)'; + this.context.fillText("High score: " + Math.floor(100 * this.maxHeight), 0, 20); + } + }