Reorganised assets and added gamescreens
@ -1,33 +0,0 @@
|
|||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
background: lightskyblue;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: 25vw;
|
|
||||||
padding: 10px 20px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 20px;
|
|
||||||
background: #9ea399;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 2px solid #1c1914;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
box-shadow: 2px 2px #1c1914;
|
|
||||||
}
|
|
@ -3,20 +3,20 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="css/game.css">
|
<link rel="stylesheet" href="../css/game.css">
|
||||||
<script type="module" src="src/game.js"></script>
|
<script type="module" src="../src/index.js"></script>
|
||||||
<title>Game</title>
|
<title>Game</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="settings">
|
<div id="settings">
|
||||||
<img src="res/cog-solid.svg" alt="Settings">
|
<img src="../res/images/cog-solid.svg" alt="Settings">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="menu">
|
<div id="menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a id="close">Quit game</a></li>
|
<li><a id="resume">Resume</a></li>
|
||||||
<li><a id="save">Save progress</a></li>
|
|
||||||
<li><a id="mainmenu">Return to main menu</a></li>
|
<li><a id="mainmenu">Return to main menu</a></li>
|
||||||
|
<li><a id="close">Quit game</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
18
index.html
@ -1,18 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Caa-game</title>
|
|
||||||
<link rel="stylesheet" href="css/index.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Caa-game</h1>
|
|
||||||
<ul>
|
|
||||||
<li id="resume">Resume game</li>
|
|
||||||
<li id="settings">Settings</li>
|
|
||||||
<li id="quit">Quit game</li>
|
|
||||||
</ul>
|
|
||||||
<script src="src/index.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
2
main.js
@ -28,7 +28,7 @@ function createWindow () {
|
|||||||
win.removeMenu();
|
win.removeMenu();
|
||||||
|
|
||||||
// and load the index.html of the app.
|
// and load the index.html of the app.
|
||||||
win.loadFile(path.join("index.html"));
|
win.loadFile(path.join("html/game.html"));
|
||||||
|
|
||||||
// Open the DevTools.
|
// Open the DevTools.
|
||||||
win.webContents.openDevTools();
|
win.webContents.openDevTools();
|
||||||
|
6
package-lock.json
generated
@ -193,9 +193,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"asdf-games": {
|
"asdf-games": {
|
||||||
"version": "1.0.12",
|
"version": "1.0.14",
|
||||||
"resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.12.tgz",
|
"resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.14.tgz",
|
||||||
"integrity": "sha512-XaramOeOnLK4eH3HRRR6joCQClvuZZ/ANBEjKzMpMHsZ/+O/G3arMI2h6KQ86yrWrT0TZGTc89vrfmBhQmqNrQ=="
|
"integrity": "sha512-0CCsgxfPjJL5BI7a8CYw49Y14rslG1BIsg20gnaf8Hi0SOaXJ61mZXf6Q96l9h5OhDaOLsv9e/yAMY9P0vq3IQ=="
|
||||||
},
|
},
|
||||||
"astral-regex": {
|
"astral-regex": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
"author": "McArn",
|
"author": "McArn",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"asdf-games": "^1.0.12"
|
"asdf-games": "^1.0.14"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"cross-env": "^7.0.2",
|
"cross-env": "^7.0.2",
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 224 B |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
31
res/lang/default.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
module.exports = {
|
||||||
|
titleScreen: {
|
||||||
|
instructions: [
|
||||||
|
"Press Space to Start!",
|
||||||
|
"Press T for the tutorial",
|
||||||
|
"Press Q to quit",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tutorial: [
|
||||||
|
"Use WASD or the direction keys to move",
|
||||||
|
"Press Ctrl to sprint, but watch your stamina!",
|
||||||
|
"Press space to interact with objects",
|
||||||
|
"If the arrow above an object is red, you cannot interact with it",
|
||||||
|
"You might be missing key or have already interacted with it",
|
||||||
|
"Press space to return"
|
||||||
|
],
|
||||||
|
gameOver: {
|
||||||
|
dead: "You died!",
|
||||||
|
instruction: "Press space to return to title"
|
||||||
|
},
|
||||||
|
logoScreen: [
|
||||||
|
"Made by JoVo and McArn"
|
||||||
|
],
|
||||||
|
game: {
|
||||||
|
lives: "Lives",
|
||||||
|
stamina: "Stamina",
|
||||||
|
keyFind: "You found a key!",
|
||||||
|
keyMiss: "You do not have the key for this door!",
|
||||||
|
chestOpen: "You already opened this chest"
|
||||||
|
}
|
||||||
|
};
|
BIN
res/sounds/forbidden.wav
Normal file
@ -1,8 +1,8 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileSprite, AnimManager, wallslide, entity } = asdf;
|
const { Texture, TileSprite, deadInTracks, entity } = asdf;
|
||||||
|
|
||||||
const texture = new Texture("./res/tilemap.png");
|
const texture = new Texture(__dirname + "/../../res/images/tilemap.png");
|
||||||
|
|
||||||
class Bullet extends TileSprite {
|
class Bullet extends TileSprite {
|
||||||
constructor(pos, angle, parent, player, level) {
|
constructor(pos, angle, parent, player, level) {
|
||||||
@ -41,12 +41,18 @@ class Bullet extends TileSprite {
|
|||||||
} else {
|
} else {
|
||||||
const xo = Math.cos(this.rotation) * 100 * dt;
|
const xo = Math.cos(this.rotation) * 100 * dt;
|
||||||
const yo = Math.sin(this.rotation) * 100 * dt;
|
const yo = Math.sin(this.rotation) * 100 * dt;
|
||||||
|
const r = deadInTracks.deadInTracks(this, this.level, xo, yo);
|
||||||
|
|
||||||
|
if (r.x == 0 || r.y == 0) {
|
||||||
|
this.parent.bullet = false;
|
||||||
|
this.dead = true;
|
||||||
|
} else {
|
||||||
this.pos.x += xo;
|
this.pos.x += xo;
|
||||||
this.pos.y += yo;
|
this.pos.y += yo;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = Bullet;
|
module.exports = Bullet;
|
@ -1,9 +1,13 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileSprite, AnimManager, entity } = asdf;
|
const { Texture, Sound, TileSprite, entity } = asdf;
|
||||||
|
|
||||||
var texture = new Texture("./res/tilemap.png");
|
const texture = new Texture(__dirname + "/../../res/images/tilemap.png");
|
||||||
var Pointer = require("./pointer.js");
|
const sounds = {
|
||||||
|
forbidden: new Sound(__dirname + "/../../res/sounds/forbidden.wav")
|
||||||
|
};
|
||||||
|
|
||||||
|
const Pointer = require("./pointer.js");
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
open: 0,
|
open: 0,
|
||||||
@ -29,6 +33,7 @@ class Chest extends TileSprite {
|
|||||||
this.level = level;
|
this.level = level;
|
||||||
|
|
||||||
this.pointer = false;
|
this.pointer = false;
|
||||||
|
this.pressed = false;
|
||||||
|
|
||||||
this.hitBox = {
|
this.hitBox = {
|
||||||
x: 1,
|
x: 1,
|
||||||
@ -57,10 +62,21 @@ class Chest extends TileSprite {
|
|||||||
this.pointer.anims.play("red");
|
this.pointer.anims.play("red");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.keys.action && this.state == state.closed) {
|
if (this.keys.action) {
|
||||||
|
if (this.state == state.closed) {
|
||||||
this.state = state.open;
|
this.state = state.open;
|
||||||
|
this.pressed = true;
|
||||||
this.action();
|
this.action();
|
||||||
|
} else {
|
||||||
|
if (!sounds.forbidden.playing && !this.pressed) {
|
||||||
|
sounds.forbidden.play();
|
||||||
|
this.pressed = true;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.pressed = false;
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.level.entities.remove(this.pointer);
|
this.level.entities.remove(this.pointer);
|
||||||
this.pointer = false;
|
this.pointer = false;
|
||||||
|
@ -2,8 +2,8 @@ var asdf = require("asdf-games");
|
|||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileSprite, AnimManager, wallslide, entity } = asdf;
|
const { Texture, TileSprite, AnimManager, wallslide, entity } = asdf;
|
||||||
|
|
||||||
|
const texture = new Texture("../res/images/mage.png");
|
||||||
const Bullet = require("./bullet.js");
|
const Bullet = require("./bullet.js");
|
||||||
const texture = new Texture("./res/mage.png");
|
|
||||||
|
|
||||||
const states = {
|
const states = {
|
||||||
idle: 0,
|
idle: 0,
|
||||||
@ -126,7 +126,6 @@ class Mage extends TileSprite {
|
|||||||
}
|
}
|
||||||
|
|
||||||
shoot(angle) {
|
shoot(angle) {
|
||||||
console.log("shoot");
|
|
||||||
this.bullet = true;
|
this.bullet = true;
|
||||||
var pos = {
|
var pos = {
|
||||||
x: this.pos.x + 8,
|
x: this.pos.x + 8,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
const { Texture, TileSprite, AnimManager, wallslide } = asdf;
|
const { Texture, TileSprite, AnimManager, wallslide } = asdf;
|
||||||
|
|
||||||
var texture = new Texture("./res/player.png");
|
const texture = new Texture("../res/images/player.png");
|
||||||
|
|
||||||
class Player extends TileSprite {
|
class Player extends TileSprite {
|
||||||
constructor(keys, window) {
|
constructor(keys, window) {
|
||||||
|
@ -1,13 +1,8 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileSprite, AnimManager, entity } = asdf;
|
const { Texture, TileSprite, AnimManager } = asdf;
|
||||||
|
|
||||||
const texture = new Texture("./res/pointers.png");
|
const texture = new Texture("../res/images/pointers.png");
|
||||||
|
|
||||||
// const states = {
|
|
||||||
// white: 0,
|
|
||||||
// red: 1
|
|
||||||
// };
|
|
||||||
|
|
||||||
class Pointer extends TileSprite {
|
class Pointer extends TileSprite {
|
||||||
constructor(pos) {
|
constructor(pos) {
|
||||||
|
@ -1,8 +1,12 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileSprite, entity } = asdf;
|
const { Texture, Sound, TileSprite, entity } = asdf;
|
||||||
|
|
||||||
|
const texture = new Texture(__dirname + "/../../res/images/tilemap.png");
|
||||||
|
const sounds = {
|
||||||
|
forbidden: new Sound(__dirname + "/../../res/sounds/forbidden.wav")
|
||||||
|
};
|
||||||
|
|
||||||
var texture = new Texture("./res/tilemap.png");
|
|
||||||
var Pointer = require("./pointer.js");
|
var Pointer = require("./pointer.js");
|
||||||
|
|
||||||
class Portal extends TileSprite {
|
class Portal extends TileSprite {
|
||||||
@ -15,6 +19,8 @@ class Portal extends TileSprite {
|
|||||||
this.action = action;
|
this.action = action;
|
||||||
|
|
||||||
this.pointer = false;
|
this.pointer = false;
|
||||||
|
this.pressed = false;
|
||||||
|
|
||||||
this.keys = keys;
|
this.keys = keys;
|
||||||
this.key = key;
|
this.key = key;
|
||||||
|
|
||||||
@ -75,23 +81,42 @@ class Portal extends TileSprite {
|
|||||||
if (this.player.items.keys.length > 0) {
|
if (this.player.items.keys.length > 0) {
|
||||||
for (let index = 0; index < this.player.items.keys.length; index++) {
|
for (let index = 0; index < this.player.items.keys.length; index++) {
|
||||||
const element = this.player.items.keys[index];
|
const element = this.player.items.keys[index];
|
||||||
|
console.log(this.key);
|
||||||
|
console.log(element);
|
||||||
if (element == this.key) {
|
if (element == this.key) {
|
||||||
// Correct key
|
// Correct key
|
||||||
this.pointer.anims.play("white");
|
this.pointer.anims.play("white");
|
||||||
if (this.keys.action) {
|
if (this.keys.action) {
|
||||||
this.action();
|
this.action();
|
||||||
|
console.warn("action");
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
// Not the correct key
|
// Not the correct key
|
||||||
this.pointer.anims.play("red");
|
|
||||||
console.log("correct keyn't");
|
console.log("correct keyn't");
|
||||||
|
this.pointer.anims.play("red");
|
||||||
|
if (this.keys.action) {
|
||||||
|
if (!sounds.forbidden.playing && !this.pressed) {
|
||||||
|
sounds.forbidden.play();
|
||||||
|
this.pressed = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.pressed = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// No keys at all
|
// No keys at all
|
||||||
|
console.log("You have no keys");
|
||||||
this.pointer.anims.play("red");
|
this.pointer.anims.play("red");
|
||||||
console.log("keyn't");
|
if (this.keys.action) {
|
||||||
|
if (!sounds.forbidden.playing && !this.pressed) {
|
||||||
|
sounds.forbidden.play();
|
||||||
|
this.pressed = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.pressed = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (this.keys.action) {
|
if (this.keys.action) {
|
||||||
|
110
src/game.js
@ -1,110 +0,0 @@
|
|||||||
const { ipcRenderer, remote } = require("electron");
|
|
||||||
|
|
||||||
var asdf = require("asdf-games");
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const { Game, KeyControls, MouseControls, Camera } = asdf;
|
|
||||||
|
|
||||||
const window = { w: 640, h: 320 };
|
|
||||||
|
|
||||||
const game = new Game(window.w, window.h, true);
|
|
||||||
ipcRenderer.send("resize", window);
|
|
||||||
|
|
||||||
const { scene } = game;
|
|
||||||
|
|
||||||
const mouseAim = new MouseControls(document.getElementById("board"));
|
|
||||||
const keys = new KeyControls();
|
|
||||||
|
|
||||||
const Stats = require("./src/helpers/stats.js");
|
|
||||||
var Player = require("./src/entities/player.js");
|
|
||||||
var Level = require("./src/helpers/level.js");
|
|
||||||
|
|
||||||
// Initialise first level 1-1.js at startPosition 0
|
|
||||||
var player = new Player(keys, window);
|
|
||||||
|
|
||||||
var level = new Level(require("./src/levels/1-1.js"), keys, player);
|
|
||||||
player.pos.x = level.startPos[0].x / 1;
|
|
||||||
player.pos.y = level.startPos[0].y / 1;
|
|
||||||
player.level = level;
|
|
||||||
|
|
||||||
const camera = new Camera(player, window, { w: level.w * 2, h: level.h * 2 });
|
|
||||||
var stats = new Stats(player);
|
|
||||||
|
|
||||||
scene.add(camera);
|
|
||||||
camera.add(level);
|
|
||||||
camera.add(player);
|
|
||||||
scene.add(stats);
|
|
||||||
|
|
||||||
function switchLevel(module, pos = 0) {
|
|
||||||
scene.remove(stats);
|
|
||||||
console.log(scene);
|
|
||||||
camera.map(function(e) {
|
|
||||||
camera.remove(e);
|
|
||||||
if (e instanceof Level) {
|
|
||||||
var lives = player.lives;
|
|
||||||
var items = player.items;
|
|
||||||
|
|
||||||
var p = new Player(keys, window);
|
|
||||||
player = p;
|
|
||||||
|
|
||||||
e = new Level(module, keys, player);
|
|
||||||
level = e;
|
|
||||||
|
|
||||||
player.pos.x = level.startPos[pos].x / 1;
|
|
||||||
player.pos.y = level.startPos[pos].y / 1;
|
|
||||||
|
|
||||||
player.lives = lives;
|
|
||||||
player.items = items;
|
|
||||||
player.level = e;
|
|
||||||
|
|
||||||
stats = new Stats(player);
|
|
||||||
|
|
||||||
camera.add(e);
|
|
||||||
camera.add(player);
|
|
||||||
camera.setSubject(player);
|
|
||||||
scene.add(stats);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
game.run(() => {
|
|
||||||
// Debugging tools
|
|
||||||
if (mouseAim.isDown) {
|
|
||||||
console.log("cliccccccccccc");
|
|
||||||
console.log(player);
|
|
||||||
console.log(level);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Switch to another level
|
|
||||||
if (level.switch) {
|
|
||||||
console.log("Switching level!", level);
|
|
||||||
switchLevel(require(level.switch.module), level.switch.pos);
|
|
||||||
level.switch = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refocus camera to player when player is moved by a portal
|
|
||||||
if (player.refocus) {
|
|
||||||
camera.setSubject(player);
|
|
||||||
player.refocus = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/* *********************************************************
|
|
||||||
Settings behavior
|
|
||||||
********************************************************* */
|
|
||||||
|
|
||||||
// Opening and closing of menu.
|
|
||||||
document.getElementById("settings").addEventListener("click", () => {
|
|
||||||
const menuRef = document.getElementById("menu");
|
|
||||||
menuRef.style.display = menuRef.style.display === "block" ? "none" : "block";
|
|
||||||
});
|
|
||||||
|
|
||||||
// Quit Game handling.
|
|
||||||
document.getElementById("close").addEventListener("click", () => {
|
|
||||||
remote.app.quit();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Return to main menu button
|
|
||||||
document.getElementById("mainmenu").addEventListener("click", () => {
|
|
||||||
remote.getCurrentWindow().loadFile(__dirname + "/index.html");
|
|
||||||
});
|
|
@ -1,8 +1,8 @@
|
|||||||
var asdf = require("asdf-games");
|
var asdf = require("asdf-games");
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { Texture, TileMap, entity, Container } = asdf;
|
const { Texture, TileMap, Container } = asdf;
|
||||||
|
|
||||||
const texture = new Texture("./res/tilemap.png");
|
const texture = new Texture(__dirname + "/../../res/images/tilemap.png");
|
||||||
const tiles = require("../../res/tilemap.js");
|
const tiles = require("../../res/tilemap.js");
|
||||||
const tileSize = 32;
|
const tileSize = 32;
|
||||||
|
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
const { Container, TileSprite, Rect, Texture, Text } = require("asdf-games");
|
const { Container, TileSprite, Rect, Texture, Text } = require("asdf-games");
|
||||||
const tilemapFrames = require("../../res/tilemap.js");
|
|
||||||
|
|
||||||
const tilemap = new Texture("res/tilemap.png");
|
const tilemapFrames = require("../../res/tilemap.js");
|
||||||
|
const tilemap = new Texture("../res/images/tilemap.png");
|
||||||
const tileSize = 32;
|
const tileSize = 32;
|
||||||
|
|
||||||
|
const text = require(__dirname + "/../../res/lang/default.js");
|
||||||
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
|
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
|
||||||
|
|
||||||
class Stats extends Container {
|
class Stats extends Container {
|
||||||
@ -14,7 +16,7 @@ class Stats extends Container {
|
|||||||
const background = new Rect(640, 42, {fill: "rgba(0,0,0, 0.5)"});
|
const background = new Rect(640, 42, {fill: "rgba(0,0,0, 0.5)"});
|
||||||
background.pos = {x: 0, y: 280};
|
background.pos = {x: 0, y: 280};
|
||||||
|
|
||||||
const livesText = new Text("LIVES:", fillStyle);
|
const livesText = new Text(text.game.lives + ":", fillStyle);
|
||||||
livesText.pos = {x: 10, y: 310};
|
livesText.pos = {x: 10, y: 310};
|
||||||
|
|
||||||
const livesCounter = new Text(player.lives, fillStyle);
|
const livesCounter = new Text(player.lives, fillStyle);
|
||||||
@ -24,7 +26,7 @@ class Stats extends Container {
|
|||||||
heart.frame = {x: tilemapFrames[42].x / tileSize, y: tilemapFrames[42].y / tileSize};
|
heart.frame = {x: tilemapFrames[42].x / tileSize, y: tilemapFrames[42].y / tileSize};
|
||||||
heart.pos = {x: 104, y: 284};
|
heart.pos = {x: 104, y: 284};
|
||||||
|
|
||||||
const staminaText = new Text("| STAMINA:", fillStyle);
|
const staminaText = new Text("| " + text.game.stamina + ":", fillStyle);
|
||||||
staminaText.pos = {x: 140, y: 310};
|
staminaText.pos = {x: 140, y: 310};
|
||||||
|
|
||||||
this.children = [
|
this.children = [
|
||||||
@ -48,7 +50,6 @@ class Stats extends Container {
|
|||||||
this.children[2].text = this.player.lives;
|
this.children[2].text = this.player.lives;
|
||||||
|
|
||||||
Array(5).fill().forEach((_val, index) => {
|
Array(5).fill().forEach((_val, index) => {
|
||||||
//console.log(Math.round(this.player.stamina.current) - 1, index);
|
|
||||||
this.children[index + 5].frame =
|
this.children[index + 5].frame =
|
||||||
(Math.round(this.player.stamina.current)) <= index
|
(Math.round(this.player.stamina.current)) <= index
|
||||||
? {x: tilemapFrames[45].x / tileSize, y: tilemapFrames[45].y / tileSize}
|
? {x: tilemapFrames[45].x / tileSize, y: tilemapFrames[45].y / tileSize}
|
||||||
|
71
src/index.js
@ -1,14 +1,69 @@
|
|||||||
const { remote } = require("electron");
|
const { ipcRenderer, remote } = require("electron");
|
||||||
|
var asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Game, KeyControls, MouseControls } = asdf;
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
const
|
||||||
|
Logo = require(__dirname + "/../src/screens/logo.js"),
|
||||||
|
Title = require(__dirname + "/../src/screens/title.js"),
|
||||||
|
Tutorial = require(__dirname + "/../src/screens/tutorial.js"),
|
||||||
|
GameScreen = require(__dirname + "/../src/screens/game.js"),
|
||||||
|
Gameover = require(__dirname + "/../src/screens/gameover.js")
|
||||||
|
;
|
||||||
|
|
||||||
// Start game
|
const window = { w: 640, h: 320 };
|
||||||
document.getElementById("resume").addEventListener("click", () => {
|
|
||||||
remote.getCurrentWindow().loadFile(__dirname + "/game.html");
|
const game = new Game(window.w, window.h, true);
|
||||||
|
ipcRenderer.send("resize", window);
|
||||||
|
|
||||||
|
const keys = new KeyControls();
|
||||||
|
|
||||||
|
function titleScreen() {
|
||||||
|
game.scene = new Title(game, keys, newGame, tutorial, remote.app.quit);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tutorial() {
|
||||||
|
game.scene = new Tutorial(game, keys, titleScreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameOver() {
|
||||||
|
game.scene = new Gameover(game, keys, titleScreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function newGame() {
|
||||||
|
game.scene = new GameScreen(game, window, keys, gameOver);
|
||||||
|
}
|
||||||
|
|
||||||
|
game.scene = new Logo(game, titleScreen);
|
||||||
|
|
||||||
|
game.run();
|
||||||
|
|
||||||
|
|
||||||
|
/* *********************************************************
|
||||||
|
Settings behavior
|
||||||
|
********************************************************* */
|
||||||
|
|
||||||
|
// Opening and closing of menu.
|
||||||
|
function toggleMenu() {
|
||||||
|
const menuRef = document.getElementById("menu");
|
||||||
|
menuRef.style.display = menuRef.style.display === "block" ? "none" : "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
const elements = [...document.querySelectorAll("#settings, #resume")];
|
||||||
|
elements.forEach(element => {
|
||||||
|
element.addEventListener("click", () => {
|
||||||
|
toggleMenu();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Quit game
|
// Return to main menu button
|
||||||
document.getElementById("quit").addEventListener("click", () => {
|
document.getElementById("mainmenu").addEventListener("click", () => {
|
||||||
|
titleScreen();
|
||||||
|
toggleMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quit Game handling.
|
||||||
|
document.getElementById("close").addEventListener("click", () => {
|
||||||
remote.app.quit();
|
remote.app.quit();
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const tileSize = 32;
|
const tileSize = 32;
|
||||||
|
|
||||||
let level = {
|
var level = {
|
||||||
tiles: [
|
tiles: [
|
||||||
1, 2, 2, 2, 2, 6, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 6,
|
1, 2, 2, 2, 2, 6, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 6,
|
||||||
4, 21, 22, 23, 21, 7, 0, 4, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 7,
|
4, 21, 22, 23, 21, 7, 0, 4, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 7,
|
||||||
@ -47,7 +47,7 @@ let level = {
|
|||||||
pos: { x: 8 * tileSize, y: 2 * tileSize },
|
pos: { x: 8 * tileSize, y: 2 * tileSize },
|
||||||
texture: "Ladder",
|
texture: "Ladder",
|
||||||
action: (_player, level) => {
|
action: (_player, level) => {
|
||||||
level.switch = { module: "./src/levels/1-1.js", pos: 0 };
|
level.switch = { module: __dirname + "/1-1.js", pos: 0 };
|
||||||
},
|
},
|
||||||
key: "1-2_3"
|
key: "1-2_3"
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
const tileSize = 32;
|
const tileSize = 32;
|
||||||
|
|
||||||
let level = {
|
var level = {
|
||||||
tiles: [
|
tiles: [
|
||||||
1, 2, 2, 2, 2, 6, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 6,
|
1, 2, 2, 2, 2, 6, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 6,
|
||||||
4, 21, 22, 23, 21, 7, 0, 4, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 7,
|
4, 21, 22, 23, 21, 7, 0, 4, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 22, 23, 21, 7,
|
||||||
@ -47,7 +47,7 @@ let level = {
|
|||||||
pos: { x: 8 * tileSize, y: 2 * tileSize },
|
pos: { x: 8 * tileSize, y: 2 * tileSize },
|
||||||
texture: "Ladder",
|
texture: "Ladder",
|
||||||
action: (_player, level) => {
|
action: (_player, level) => {
|
||||||
level.switch = { module: "./src/levels/1-1 copy.js", pos: 0 };
|
level.switch = { module: __dirname + "/1-1 copy.js", pos: 0 };
|
||||||
},
|
},
|
||||||
key: "1-1_1"
|
key: "1-1_1"
|
||||||
}
|
}
|
||||||
|
110
src/screens/game.js
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
const asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Container, Camera } = asdf;
|
||||||
|
|
||||||
|
const debugMode = true;
|
||||||
|
|
||||||
|
const Stats = require(__dirname + "/../helpers/stats.js");
|
||||||
|
var Player = require(__dirname + "/../entities/player.js");
|
||||||
|
var Level = require(__dirname + "/../helpers/level.js");
|
||||||
|
|
||||||
|
class GameScreen extends Container {
|
||||||
|
constructor(game, window, keys, onGameOver) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.window = window;
|
||||||
|
this.keys = keys;
|
||||||
|
this.onGameOver = onGameOver;
|
||||||
|
|
||||||
|
// Initialise first level 1-1.js at startPosition 0
|
||||||
|
var player = new Player(keys, window);
|
||||||
|
|
||||||
|
var level = new Level(require(__dirname + "/../levels/1-1.js"), keys, player);
|
||||||
|
player.pos.x = level.startPos[0].x / 1;
|
||||||
|
player.pos.y = level.startPos[0].y / 1;
|
||||||
|
player.level = level;
|
||||||
|
|
||||||
|
var camera = new Camera(player, window, { w: level.w * 2, h: level.h * 2 });
|
||||||
|
var stats = new Stats(player);
|
||||||
|
|
||||||
|
this.add(camera);
|
||||||
|
camera.add(level);
|
||||||
|
camera.add(player);
|
||||||
|
this.add(stats);
|
||||||
|
|
||||||
|
this.camera = camera;
|
||||||
|
this.player = player;
|
||||||
|
this.level = level;
|
||||||
|
this.stats = stats;
|
||||||
|
}
|
||||||
|
|
||||||
|
switchLevel(module, pos = 0) {
|
||||||
|
var { camera, player, level, stats, keys } = this;
|
||||||
|
|
||||||
|
camera.map(function(e) {
|
||||||
|
camera.remove(e);
|
||||||
|
if (e instanceof Level) {
|
||||||
|
var lives = player.lives;
|
||||||
|
var items = player.items;
|
||||||
|
|
||||||
|
var p = new Player(keys, window);
|
||||||
|
player = p;
|
||||||
|
|
||||||
|
e = new Level(module, keys, player);
|
||||||
|
level = e;
|
||||||
|
|
||||||
|
player.pos.x = level.startPos[pos].x / 1;
|
||||||
|
player.pos.y = level.startPos[pos].y / 1;
|
||||||
|
|
||||||
|
player.lives = lives;
|
||||||
|
player.items = items;
|
||||||
|
player.level = e;
|
||||||
|
|
||||||
|
stats.player = player;
|
||||||
|
|
||||||
|
camera.add(e);
|
||||||
|
camera.worldSize = { w: e.w, h: e.h };
|
||||||
|
|
||||||
|
camera.add(player);
|
||||||
|
camera.setSubject(player);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.player = player;
|
||||||
|
this.level = level;
|
||||||
|
this.stats = stats;
|
||||||
|
this.camera = camera;
|
||||||
|
}
|
||||||
|
|
||||||
|
update(dt, t) {
|
||||||
|
super.update(dt, t);
|
||||||
|
var { camera, player, level, keys } = this;
|
||||||
|
|
||||||
|
// Debug options
|
||||||
|
if (debugMode && keys.ctrl && keys.key(66)) {
|
||||||
|
console.debug(level);
|
||||||
|
console.debug(player);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (player.lives <= 0) {
|
||||||
|
this.onGameOver();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Switch to another level
|
||||||
|
if (level.switch) {
|
||||||
|
if (debugMode) {
|
||||||
|
console.debug("Switching level!", level);
|
||||||
|
}
|
||||||
|
this.switchLevel(require(level.switch.module), level.switch.pos);
|
||||||
|
level.switch = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refocus camera to player when player is moved by a portal
|
||||||
|
if (player.refocus) {
|
||||||
|
camera.setSubject(player);
|
||||||
|
player.refocus = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = GameScreen;
|
36
src/screens/gameover.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
const asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Texture, Text, Container, Sprite } = asdf;
|
||||||
|
|
||||||
|
const text = require(__dirname + "/../../res/lang/default.js");
|
||||||
|
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
|
||||||
|
|
||||||
|
class GameOver extends Container {
|
||||||
|
constructor(game, keys, onEnd) {
|
||||||
|
super();
|
||||||
|
this.game = game;
|
||||||
|
this.keys = keys;
|
||||||
|
this.onEnd = onEnd;
|
||||||
|
|
||||||
|
this.children = [];
|
||||||
|
|
||||||
|
var gameover = new Text(text.gameOver.dead, {fill: "#ffffff", font: "32px Arial"});
|
||||||
|
gameover.pos = { x: 200, y: 200 };
|
||||||
|
this.add(gameover);
|
||||||
|
|
||||||
|
var instruction = new Text(text.gameOver.instruction, fillStyle);
|
||||||
|
instruction.pos = { x: 200, y: 236 };
|
||||||
|
this.add(instruction);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(dt, t) {
|
||||||
|
super.update(dt, t);
|
||||||
|
|
||||||
|
if (this.keys.action) {
|
||||||
|
this.onEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = GameOver;
|
40
src/screens/logo.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
const asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Texture, Text, Container, Sprite } = asdf;
|
||||||
|
|
||||||
|
const text = require(__dirname + "/../../res/lang/default.js");
|
||||||
|
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
|
||||||
|
|
||||||
|
class Logo extends Container {
|
||||||
|
constructor(game, onEnd) {
|
||||||
|
super();
|
||||||
|
this.game = game;
|
||||||
|
this.onEnd = onEnd;
|
||||||
|
|
||||||
|
this.children = [];
|
||||||
|
|
||||||
|
const textPos = { x: 200, y: 150 };
|
||||||
|
for (let index = 0; index < text.logoScreen.length; index++) {
|
||||||
|
const element = new Text(text.logoScreen[index], fillStyle);
|
||||||
|
element.pos = {
|
||||||
|
x: textPos.x,
|
||||||
|
y: textPos.y + 24 * index
|
||||||
|
};
|
||||||
|
this.add(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.lifetime = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
update(dt, t) {
|
||||||
|
super.update(dt, t);
|
||||||
|
|
||||||
|
if (this.lifetime <= 0) {
|
||||||
|
this.onEnd();
|
||||||
|
} else {
|
||||||
|
this.lifetime -= dt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Logo;
|
51
src/screens/title.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
const asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Texture, Container, Sprite, Text } = asdf;
|
||||||
|
|
||||||
|
const text = require(__dirname + "/../../res/lang/default.js");
|
||||||
|
const fillStyle = {fill: "#ffffff", font: "24px Arial"};
|
||||||
|
|
||||||
|
class Title extends Container {
|
||||||
|
constructor(game, keys, onStart, onTutorial, onQuit) {
|
||||||
|
super();
|
||||||
|
this.game = game;
|
||||||
|
this.keys = keys;
|
||||||
|
|
||||||
|
this.onStart = onStart;
|
||||||
|
this.onTutorial = onTutorial;
|
||||||
|
this.onQuit = onQuit;
|
||||||
|
|
||||||
|
this.keys.reset();
|
||||||
|
|
||||||
|
this.children = [];
|
||||||
|
|
||||||
|
const textPos = { x: 200, y: 200 };
|
||||||
|
for (let index = 0; index < text.titleScreen.instructions.length; index++) {
|
||||||
|
const element = new Text(text.titleScreen.instructions[index], fillStyle);
|
||||||
|
element.pos = {
|
||||||
|
x: textPos.x,
|
||||||
|
y: textPos.y + 28 * index
|
||||||
|
};
|
||||||
|
this.add(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update(dt, t) {
|
||||||
|
super.update(dt, t);
|
||||||
|
|
||||||
|
if (this.keys.action) {
|
||||||
|
this.onStart();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.keys.key(84)) {
|
||||||
|
this.onTutorial();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.keys.key(81)) {
|
||||||
|
this.onQuit();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Title;
|
38
src/screens/tutorial.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
const asdf = require("asdf-games");
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { Texture, Container, Text, Sprite } = asdf;
|
||||||
|
|
||||||
|
const text = require(__dirname + "/../../res/lang/default.js");
|
||||||
|
const fillStyle = {fill: "#ffffff", font: "20px Arial"};
|
||||||
|
|
||||||
|
class Tutorial extends Container {
|
||||||
|
constructor(game, keys, onEnd) {
|
||||||
|
super();
|
||||||
|
this.game = game;
|
||||||
|
this.keys = keys;
|
||||||
|
this.onEnd = onEnd;
|
||||||
|
|
||||||
|
this.children = [];
|
||||||
|
|
||||||
|
const textPos = { x: 50, y: 150 };
|
||||||
|
for (let index = 0; index < text.tutorial.length; index++) {
|
||||||
|
const element = new Text(text.tutorial[index], fillStyle);
|
||||||
|
element.pos = {
|
||||||
|
x: textPos.x,
|
||||||
|
y: textPos.y + 24 * index
|
||||||
|
};
|
||||||
|
this.add(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update(dt, t) {
|
||||||
|
super.update(dt, t);
|
||||||
|
|
||||||
|
if (this.keys.action) {
|
||||||
|
this.onEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = Tutorial;
|