Elite Baby is a side-scrolling platform game. A user controls a baby's run and jump with right/left/up arrow keys. User will have to run across platforms, and collect objects such as milk bottles to increase their score. Users will also have to avoid enemies such as cabbage and falling off the map. Being hit by an enemy will end the game. The objective of the game is to reach the end of the level where the sweet lollipop is at. Enjoy the game here at the (Live Site)
- Move left and right
- Jump up
- Collect food
- See current score base on the food collected
- Restart game at anytime
- Mute/unmute sound
- Game menu, simple introduction to the game
- Implement endless background scrolling for multi layers. Each background layer has it's own velocity and element (clouds/stars/color)
default class BackgroundLayer{
constructor(canvas, imgSrc, v){
this.canvas = canvas;
this.canvasWidth = canvas.width;
this.canvasHeight = canvas.height;
this.ctx = canvas.getContext("2d");
this.imgX = v["imgX"];
this.imgY = 0;
this.imgPosX = 0;
this.imgPosY = 0;
this.layerImg = new Image();
this.layerImg.src = `${imgSrc}`;
this.drawLayer = this.drawLayer.bind(this);
}
scroll() {
this.imgPosX += this.imgX;
}
drawLayer(){
let { canvas, ctx, canvasWidth, canvasHeight, layerImg, imgPosX, imgPosY, imgX } = this;
function loop(){
ctx.clearRect(0,0, 1000, 600);
ctx.drawImage(layerImg, imgPosX, 0, canvasWidth, canvasHeight);
ctx.drawImage(layerImg, imgPosX + canvasWidth, 0, canvasWidth, canvasHeight);
imgPosX += imgX
if (imgPosX >= canvasWidth) {
imgPosX = 1000;
}
else if (imgPosX < -(canvasWidth)){
imgPosX = 1;
}
requestAnimationFrame(loop);
}
loop();
}
}
function drawLayers(i) {
let v = { imgX: 0 };
switch(i) {
case 0:
v["imgX"] = 0;
break
case 1:
v["imgX"] = -.8;
break
case 2:
v["imgX"] = -1;
break
case 3:
v["imgX"] = -2;
break
case 4:
v["imgX"] = -1.7;
break
case 5:
v["imgX"] = 0;
break
case 6:
v["imgX"] = -1.5;
break
case 7:
v["imgX"] = 0;
break
case 8:
v["imgX"] = -1;
break
}
new BackgroundLayer(
document.getElementById("l" + i),
src + i + ".png",
v
).drawLayer();
}
function drawBackground() {
let layers = [];
for (let i = 0; i < 9; i++) {
layers.push(i)
}
layers.forEach(i => drawLayers(i));
}
- Formulated simple game object classes based on Object-Oriented Programming patterns for DRY code, which lends itself easily to the reuse of code through principles of inheritance and abstraction.
class GameObject{
constructor(ctx, x, y, vx, vy){
this.ctx = ctx;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.isColliding = false;
}
}
- JavaScript
- HTML
- CSS
- Canvas
- Day 1
- Game logic & Canvas & Research
- Day 2
- Game logic & Player Controller/Input
- Day 3
- Background Scrolling & Collison Detection
- Day 4
- Game Menu & Start & Restart & End
- Day 5
- Game logic/canvas
- User able to attack enemies
- Power up
- Select map difficulty