Skip to content

Commit

Permalink
Merge pull request #28 from Nichodon/develop
Browse files Browse the repository at this point in the history 
Create real levels
  • Loading branch information
@briarsychung
briarsychung authored Dec 13, 2021
2 parents f596939 + dc67fab commit f01d246
Show file tree
Hide file tree
Showing 14 changed files with 262 additions and 56 deletions.
Binary file modified assets/background/outside.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@

<head>
<meta charset="utf-8">
<title>Final v0.2</title>
<title>SpLit</title>
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="main.css">
</head>

<body>
<div class="contain" id="menu" style="visibility: visible;">
<h1>Insert Name Here</h1>
<button id="start">Start Game</button>
<p>Version 0.2<br><br>By Robert Qu<br>and Brandon Chung</p>
<h1>SpLit</h1>
<button id="start">Start</button>
<p>By Robert Qu<br>and Brandon Chung<br><br>Version 0.3</p>
</div>
<div class="contain" id="game">
<canvas id="canvas"></canvas>
</div>
<div class="contain" id="end">
<h1>You Won</h1>
<h1>You Won!</h1>
<button id="reset">Back to Menu</button>
<p>Some info<br>goes here</p>
</div>
Expand Down
1 change: 0 additions & 1 deletion main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ body {
}

canvas {
background-color: white;
border-radius: 10px;
}

Expand Down
94 changes: 78 additions & 16 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { Game } from './modules/game.mjs';
import { Canvas } from './modules/canvas.mjs';
import { Texture } from './modules/texture.mjs';
import { Sandwich } from './modules/sandwich.mjs';
import { Animated } from './modules/animated.mjs';
import { Player } from './modules/player.mjs';
import { Sprite } from './modules/sprite.mjs';
import { Input } from './modules/input.mjs';
import { Level } from './modules/level.mjs';
import { Background } from './modules/background.mjs';
import { Spawn } from './modules/spawn.mjs';
import { Ground } from './modules/ground.mjs';
import { Cracked } from './modules/cracked.mjs';
Expand Down Expand Up @@ -46,7 +48,7 @@ document.addEventListener('keydown', e => {
if (GAME.debug) speed = 0;
break;
case '9':
if (GAME.debug) speed = 300;
if (GAME.debug) speed = 1000;
break;
case '8':
if (GAME.debug) speed = 100;
Expand Down Expand Up @@ -79,28 +81,88 @@ function generateLevels() {
GAME.addInput(new Input(players[0]));
GAME.addInput(new Input(players[1], { left: 'arrowleft', right: 'arrowright', up: 'arrowup' }));

let stair = new Level();
let outside = new Background(new Texture('../assets/background/outside.png', { w: 1024, h: 1024 }), ['#89c9e4', '#477553'])

stair.addBackground(new Texture('../assets/background/outside.png', { w: 1024, h: 1024 }));
let buttonTextures = {
up: new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }),
down: new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })
};

stair.addSpawn(new Spawn({ x: 300, y: 475 }, players[0]));
stair.addSpawn(new Spawn({ x: 325, y: 475 }, players[1]));
let ground = ['../assets/ground/ground-side.png', '../assets/ground/ground-middle.png'];
let cracked = ['../assets/ground/brick-cracked-side.png', '../assets/ground/brick-cracked-middle.png'];
let spike = {
big: '../assets/interactive/spike-small.png',
small: '../assets/interactive/spike-small.png'
};
let brick = {
big: ['../assets/ground/brick-big-side.png', '../assets/ground/brick-big-middle.png'],
small: ['../assets/ground/brick-small-side.png', '../assets/ground/brick-small-middle.png']
};

stair.addObject(new Ground({ x: 310, y: 525 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 })));
stair.addObject(new Ground({ x: 360, y: 475 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 })));
stair.addObject(new Ground({ x: 410, y: 425 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 })));
let links = new Level();
links.setBackground(outside);

let stairP1 = new Platform([{ x: 335, y: 525 }, { x: 335, y: 475 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 3, 'pause');
let stairP2 = new Platform([{ x: 385, y: 475 }, { x: 385, y: 425 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 3, 'pause');
links.addSpawn(new Spawn({ x: 400, y: 240 }, players[0]));
links.addSpawn(new Spawn({ x: 400, y: 400 }, players[1]));

stair.addObject(stairP1);
stair.addObject(stairP2);
links.addObject(new Ground({ x: 440, y: 280 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));
links.addObject(new Ground({ x: 440, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));

let linksC1 = new Cracked({ x: 600, y: 272 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 }));
links.addObject(linksC1);
links.addObject(new Spike({ x: 600, y: 288 }, { w: 80, h: 16 }, new Texture(spike.small, { w: 80, h: 16 })));
links.addObject(new Ground({ x: 600, y: 304 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 })));
links.addObject(new Link({ x: 600, y: 432 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC1));

let linksC2 = new Cracked({ x: 760, y: 432 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 }));
links.addObject(linksC2);
links.addObject(new Link({ x: 760, y: 272 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC2));

let linksC3 = new Cracked({ x: 920, y: 272 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 }));
links.addObject(linksC3);
links.addObject(new Spike({ x: 920, y: 288 }, { w: 80, h: 16 }, new Texture(spike.small, { w: 80, h: 16 })));
links.addObject(new Ground({ x: 920, y: 304 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 })));
links.addObject(new Link({ x: 920, y: 432 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC3));

links.addObject(new Ground({ x: 1080, y: 280 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));
links.addObject(new Ground({ x: 1080, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));

stair.addObject(new Door({ x: 360, y: 448.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, stairP1));
stair.addObject(new Door({ x: 410, y: 398.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, stairP2));
links.addGoal(new Goal({ x: 1176, y: 280 }));
links.addObject(new Ground({ x: 1176, y: 288 }, { w: 32, h: 16 }, new Sandwich(brick.small, { w: 32, h: 32 }), { x: 0, y: -8 }));
links.addGoal(new Goal({ x: 1176, y: 440 }));
links.addObject(new Ground({ x: 1176, y: 448 }, { w: 32, h: 16 }, new Sandwich(brick.small, { w: 32, h: 32 }), { x: 0, y: -8 }));

stair.addGoal(new Goal({ x: 470, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 })));
stair.addGoal(new Goal({ x: 450, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 })));
GAME.addLevel(links);

let stair = new Level();
stair.setBackground(outside);

stair.addSpawn(new Spawn({ x: 400, y: 400 }, players[0]));
stair.addSpawn(new Spawn({ x: 440, y: 400 }, players[1]));

stair.addObject(new Ground({ x: 440, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));

let stairP1 = new Platform([{ x: 536, y: 472 }, { x: 536, y: 376 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause');
stair.addObject(stairP1);
stair.addObject(new Ground({ x: 584, y: 376 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 })));
stair.addObject(new Door({ x: 584, y: 326.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP1));

let stairP2 = new Platform([{ x: 632, y: 376 }, { x: 632, y: 280 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause');
stair.addObject(stairP2);
stair.addObject(new Ground({ x: 680, y: 280 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 })));
stair.addObject(new Door({ x: 680, y: 230.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP2));

let stairP3 = new Platform([{ x: 728, y: 280 }, { x: 728, y: 184 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause');
stair.addObject(stairP3);
stair.addObject(new Ground({ x: 776, y: 184 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 })));
stair.addObject(new Door({ x: 776, y: 134.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP3));

stair.addObject(new Ground({ x: 888, y: 152 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 })));

stair.addGoal(new Goal({ x: 984, y: 152 }));
stair.addGoal(new Goal({ x: 1048, y: 152 }));
stair.addObject(new Ground({ x: 1016, y: 160 }, { w: 96, h: 16 }, new Sandwich(brick.big, { w: 96, h: 32 }), { x: 0, y: -8 }));
stair.addObject(new Ground({ x: 1016, y: 152 }, { w: 32, h: 32 }, new Texture(brick.big[1], { w: 32, h: 32 }), { x: 0, y: 0 }));

GAME.addLevel(stair);
}
8 changes: 8 additions & 0 deletions modules/background.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
class Background {
constructor (texture, colors) {
this.texture = texture;
this.colors = colors;
}
}

export { Background };
22 changes: 17 additions & 5 deletions modules/camera.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,30 @@ class Camera {
}

update(players) {
let target = {
let target = this.position(players);

this.zoom = this.smooth.zoom * this.zoom + (1 - this.smooth.zoom) * target.zoom;
this.pos.x = this.smooth.pos * this.pos.x + (1 - this.smooth.pos) * target.pos.x;
this.pos.y = this.smooth.pos * this.pos.y + (1 - this.smooth.pos) * target.pos.y;
}

snap(players) {
let target = this.position(players);

this.zoom = target.zoom;
this.pos.x = target.pos.x;
this.pos.y = target.pos.y;
}

position(players) {
return {
pos: {
x: (players[0].pos.x + players[1].pos.x) / 2,
y: (players[0].pos.y + players[1].pos.y) / 2
},
zoom: Math.min(500 / Math.abs(players[0].pos.x - players[1].pos.x),
500 / Math.abs(players[0].pos.y - players[1].pos.y), this.limit)
};

this.zoom = this.smooth.zoom * this.zoom + (1 - this.smooth.zoom) * target.zoom;
this.pos.x = this.smooth.pos * this.pos.x + (1 - this.smooth.pos) * target.pos.x;
this.pos.y = this.smooth.pos * this.pos.y + (1 - this.smooth.pos) * target.pos.y;
}
}

Expand Down
42 changes: 35 additions & 7 deletions modules/game.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class Game {
}

this.resetLevel();
this.camera.snap(this.players);
}

addPlayer(player) {
Expand All @@ -69,6 +70,7 @@ class Game {
gameTick() {
let level = this.levels[this.level];
let objects = level.objects.concat(this.players).filter(o => !o.dead);
let ghosts = level.objects.concat(this.players).filter(o => o.dead);

this.players[0].tag = "P1";
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
Expand Down Expand Up @@ -99,9 +101,15 @@ class Game {
this.draw(objects[i]);
}

for (let i = 0; i < ghosts.length; i++) {
this.draw(ghosts[i], ghosts[i].dying());
}

this.camera.update(this.players);

if (level.goals[0].player && level.goals[1].player) {
if (this.players[0].fade === 0 || this.players[1].fade === 0) {
this.resetLevel();
} else if (level.goals[0].player && level.goals[1].player) {
this.nextLevel();
}

Expand Down Expand Up @@ -139,22 +147,42 @@ class Game {
background(level) {
let real = this.camera.zoom * this.canvas.width / 1000;

this.context.drawImage(level.background.draw(),
this.canvas.width / 2 - this.camera.pos.x * real,
this.canvas.height / 2 - this.camera.pos.y * real,
1024 * real,
1024 * real);
for (let x = 1024 * Math.floor(Math.min(this.players[0].pos.x, this.players[1].pos.x) / 1024 - 1);
x < 1024 * Math.ceil(Math.max(this.players[0].pos.x, this.players[1].pos.x) / 1024 + 1); x += 1024) {
this.context.drawImage(level.background.texture.draw(),
this.canvas.width / 2 - this.camera.pos.x * real + x * real,
this.canvas.height / 2 - this.camera.pos.y * real,
1024 * real,
1024 * real);
this.context.fillStyle = level.background.colors[0];
this.context.fillRect(
this.canvas.width / 2 - this.camera.pos.x * real + x * real - 1,
this.canvas.height / 2 - this.camera.pos.y * real - 1024 * real - 1,
1024 * real + 3,
1024 * real + 3);
this.context.fillStyle = level.background.colors[1];
this.context.fillRect(
this.canvas.width / 2 - this.camera.pos.x * real + x * real - 1,
this.canvas.height / 2 - this.camera.pos.y * real + 1024 * real - 1,
1024 * real + 3,
1024 * real + 3);
}
}

draw(object) {
draw(object, opacity = 1) {
let real = this.camera.zoom * this.canvas.width / 1000;

this.context.save();
this.context.globalAlpha = opacity;

this.context.drawImage(object.texture.draw(), 0, 0, object.texture.dim.w, object.texture.dim.h,
this.canvas.width / 2 + (object.pos.x + object.offset.x - object.texture.dim.w / 2 - this.camera.pos.x) * real,
this.canvas.height / 2 + (object.pos.y + object.offset.y - object.texture.dim.h / 2 - this.camera.pos.y) * real,
object.texture.dim.w * real,
object.texture.dim.h * real);

this.context.restore();

if (!this.debug) return;

this.context.strokeStyle = object.touch && object.touch.bottom ? 'green' : 'red';
Expand Down
5 changes: 3 additions & 2 deletions modules/goal.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Interactive } from './interactive.mjs';
import { Player } from './player.mjs';
import { Texture } from './texture.mjs';

class Goal extends Interactive {
constructor(pos, dim, texture, offset) {
super(pos, dim, texture, offset);
constructor(pos) {
super(pos, { w: 32, h: 32 }, new Texture('../assets/ground/brick-door.png', { w: 32, h: 32 }), { x: 0, y: -32 });

this.player = false;
}
Expand Down
2 changes: 1 addition & 1 deletion modules/level.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class Level {
this.goals.push(goal);
}

addBackground(background) {
setBackground(background) {
this.background = background;
}
}
Expand Down
12 changes: 11 additions & 1 deletion modules/link.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@ class Link extends Interactive {
super(pos, dim, texture, offset);

this.object = object;

this.object.wait();
this.played = false;
}

init() {
this.played = false;

super.init();
}

trigger() {
if (this.pressed.length) {
if (this.pressed.length && !this.played) {
this.object.die(false);
this.played = true;
}

super.trigger();
Expand Down
Loading

0 comments on commit f01d246

Please sign in to comment.