Hecc-inc./caa-game
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Added mages, stamina and improved running/walking

Browse Source
This commit is contained in:
Arne van Iterson 2020-03-29 15:40:57 +02:00
parent 730bfbe568
commit c86f2ed370
8 changed files with 223 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/aseprite/tilemap.aseprite
View File

Binary file not shown.

BIN
res/mage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

83
res/tilemap.min.js vendored
View File

@ -2,45 +2,46 @@
* Tile map for caa-game * Tile map for caa-game
* Index for tilemap file * Index for tilemap file
* *
* 0. Corner top-left * 0. Empty tile
* 1. normal top wall middle piece * 1. Corner top-left
* 2. Corner top -> left wall * 2. normal top wall middle piece
* 3. Left wall * 3. Corner top -> left wall
* 4. top wall before corner * 4. Left wall
* 5. corner top -> right wall * 5. top wall before corner
* 6. normal right wall piece * 6. corner top -> right wall
* 7. Corner right -> top * 7. normal right wall piece
* 8. Corner right -> bottom * 8. Corner right -> top
* 9. bottom wall piece before 8. * 9. Corner right -> bottom
* 10. normal bottom wall piece * 10. bottom wall piece before 8.
* 11. Corner bottom -> right * 12. normal bottom wall piece
* 12. Corner right -> bottom * 12. Corner bottom -> right
* 13. Corner bottom -> left * 13. Corner right -> bottom
* 14. Bottom wall piece before 13. * 14. Corner bottom -> left
* 15. Corner left -> bottom * 16. Bottom wall piece before 13.
* 32. Normal floor tile * 17. Corner left -> bottom
* 17. +-shaped floor tile * 33. Normal floor tile
* 18. Heavily cracked floor tile * 18. +-shaped floor tile
* 19. Lightly cracked floor tile * 19. Heavily cracked floor tile
* 20. Normal brick wall 1 * 20. Lightly cracked floor tile
* 21. Normal brick wall 2 * 21. Normal brick wall 1
* 22. Normal brick wall 3 * 22. Normal brick wall 2
* 23. blood brick wall 1 * 23. Normal brick wall 3
* 24. blood brick wall 2 * 24. blood brick wall 1
* 25. blood brick wall 3 * 25. blood brick wall 2
* 26. light vines brick wall 1 * 26. blood brick wall 3
* 27. light vines brick wall 2 * 27. light vines brick wall 1
* 28. light vines brick wall 3 * 28. light vines brick wall 2
* 29. heavy vines brick wall 1 * 29. light vines brick wall 3
* 30. heavy vines brick wall 2 * 30. heavy vines brick wall 1
* 31. heavy vines brick wall 3 * 31. heavy vines brick wall 2
* 64. Chest closed * 32. heavy vines brick wall 3
* 33. Chest opened * 65. Chest closed
* 34. Rock 1 * 34. Chest opened
* 35. Rock 2 * 35. Rock 1
* 36. door * 36. Rock 2
* 37. Ladder (should be over wall) * 37. door
* 38. Torch * 38. Ladder (should be over wall)
* 39. Staircase * 39. Torch
* 40. Staircase
------------------------------------------------------------------- */ ------------------------------------------------------------------- */
module.exports=[{x:0,y:0,walkable:!1},{x:32,y:0,walkable:!1},{x:64,y:0,walkable:!1},{x:96,y:0,walkable:!1},{x:128,y:0,walkable:!1},{x:0,y:32,walkable:!1},{x:32,y:32,walkable:!1},{x:64,y:32,walkable:!1},{x:96,y:32,walkable:!1},{x:128,y:32,walkable:!1},{x:0,y:64,walkable:!1},{x:32,y:64,walkable:!1},{x:64,y:64,walkable:!1},{x:96,y:64,walkable:!1},{x:128,y:64,walkable:!1},{x:0,y:96,walkable:!1},{x:32,y:96,walkable:!0},{x:64,y:96,walkable:!0},{x:96,y:96,walkable:!0},{x:128,y:96,walkable:!0},{x:0,y:128,walkable:!1},{x:32,y:128,walkable:!1},{x:64,y:128,walkable:!1},{x:96,y:128,walkable:!1},{x:128,y:128,walkable:!1},{x:0,y:80,walkable:!1},{x:32,y:80,walkable:!1},{x:64,y:80,walkable:!1},{x:96,y:80,walkable:!1},{x:128,y:80,walkable:!1},{x:0,y:96,walkable:!1},{x:32,y:96,walkable:!1},{x:64,y:96,walkable:!1},{x:96,y:96,walkable:!1},{x:128,y:96,walkable:!1},{x:0,y:224,walkable:!1},{x:32,y:224,walkable:!1},{x:64,y:224,walkable:!1},{x:96,y:224,walkable:!1},{x:128,y:224,walkable:!1}]; module.exports=[{x:0,y:256,walkable:!1},{x:0,y:0,walkable:!1},{x:32,y:0,walkable:!1},{x:64,y:0,walkable:!1},{x:96,y:0,walkable:!1},{x:128,y:0,walkable:!1},{x:0,y:32,walkable:!1},{x:32,y:32,walkable:!1},{x:64,y:32,walkable:!1},{x:96,y:32,walkable:!1},{x:128,y:32,walkable:!1},{x:0,y:64,walkable:!1},{x:32,y:64,walkable:!1},{x:64,y:64,walkable:!1},{x:96,y:64,walkable:!1},{x:128,y:64,walkable:!1},{x:0,y:96,walkable:!1},{x:32,y:96,walkable:!0},{x:64,y:96,walkable:!0},{x:96,y:96,walkable:!0},{x:128,y:96,walkable:!0},{x:0,y:128,walkable:!1},{x:32,y:128,walkable:!1},{x:64,y:128,walkable:!1},{x:96,y:128,walkable:!1},{x:128,y:128,walkable:!1},{x:0,y:80,walkable:!1},{x:32,y:80,walkable:!1},{x:64,y:80,walkable:!1},{x:96,y:80,walkable:!1},{x:128,y:80,walkable:!1},{x:0,y:96,walkable:!1},{x:32,y:96,walkable:!1},{x:64,y:96,walkable:!1},{x:96,y:96,walkable:!1},{x:128,y:96,walkable:!1},{x:0,y:224,walkable:!1},{x:32,y:224,walkable:!1},{x:64,y:224,walkable:!1},{x:96,y:224,walkable:!1},{x:128,y:224,walkable:!1}];

BIN
res/tilemap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

81
src/entities/mage.js Normal file
View File

@ -0,0 +1,81 @@
var asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars
const { Texture, TileSprite, AnimManager, wallslide, entity } = asdf;
var texture = new Texture("./res/mage.png");
const states = {
idle: 0,
attack: 1,
evade: 2
};
class Mage extends TileSprite {
constructor(pos, player, level) {
super(texture, 16, 16);
this.pos = pos;
this.scale = { x: 3, y: 3 };
this.anims = new AnimManager(this);
// North
this.anims.add("move_n", [4, 5, 6, 7].map(x => ({ x, y: 0 })), 0.1);
// East
this.anims.add("move_e", [0, 1, 2, 3].map(x => ({ x, y: 1 })), 0.1);
// South
this.anims.add("move_s", [0, 1, 2, 3].map(x => ({ x, y: 0 })), 0.1);
// West
this.anims.add("move_w", [4, 5, 6, 7].map(x => ({ x, y: 1 })), 0.1);
// Inactive
this.anims.add("idle", [{ x: 0, y: 2 }], 0.1);
this.anims.play("idle");
this.state = states.idle;
this.level = level;
this.player = player;
this.hitBox = {
x: 4,
y: 1,
w: 8,
h: 14
};
}
update(dt) {
super.update(dt);
if (this.state != states.idle) {
// Move
const angle = entity.angle(this.player, this);
const xo = Math.cos(angle) * 100 * dt;
const yo = Math.sin(angle) * 100 * dt;
const r = wallslide.wallslide(this, this.level, xo, yo);
this.pos.x += r.x;
this.pos.y += r.y;
if (Math.abs(r.x) > Math.abs(r.y)) {
// Animation x axis
if (r.x >= 0) {
this.anims.play("move_e");
} else {
this.anims.play("move_w");
}
} else {
// Animation y axis
if (r.y >= 0) {
this.anims.play("move_s");
} else {
this.anims.play("move_n");
}
}
} else {
this.anims.play("idle");
}
}
}
module.exports = Mage;

51
src/entities/player.js
View File

@ -4,17 +4,22 @@ const { Texture, TileSprite, AnimManager, wallslide } = asdf;
var texture = new Texture("./res/player.png"); var texture = new Texture("./res/player.png");
class Player extends TileSprite { class Player extends TileSprite {
constructor(keys, window, level) { constructor(keys, window) {
super(texture, 24, 24); super(texture, 24, 24);
this.scale = { x: 2, y: 2 }; this.scale = { x: 2, y: 2 };
this.window = window; this.window = window;
this.keys = keys;
this.rate = { this.rate = {
walking: 0.2, walking: 0.2,
running: 0.1 running: 0.1
}; };
this.speed = {
walking: 75,
running: 150
};
this.anims = new AnimManager(this); this.anims = new AnimManager(this);
// North // North
this.anims.add("walk_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.walking); this.anims.add("walk_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.walking);
@ -31,12 +36,11 @@ class Player extends TileSprite {
this.anims.play("walk_s"); this.anims.play("walk_s");
this.pos.x = (level.w / 2) - (24 * this.scale.x / 2); this.lives = 5;
this.pos.y = (level.h / 2) - (24 * this.scale.y / 2); this.stamina = {
current: 5,
this.level = level; max: 5
};
this.keys = keys;
this.hitBox = { this.hitBox = {
x: 4, x: 4,
@ -52,30 +56,45 @@ class Player extends TileSprite {
// Animate // Animate
if (this.keys.x == -1) { if (this.keys.x == -1) {
// Left // Left
(this.keys.action) ? (this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_w") : this.anims.play("walk_w"); this.anims.play("run_w") : this.anims.play("walk_w");
} else if (this.keys.x == 1) { } else if (this.keys.x == 1) {
// Right // Right
(this.keys.action) ? (this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_e") : this.anims.play("walk_e"); this.anims.play("run_e") : this.anims.play("walk_e");
} else if (this.keys.y == -1) { } else if (this.keys.y == -1) {
// Up // Up
(this.keys.action) ? (this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_n") : this.anims.play("walk_n"); this.anims.play("run_n") : this.anims.play("walk_n");
} else if (this.keys.y == 1) { } else if (this.keys.y == 1) {
// Down // Down
(this.keys.action) ? (this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_s") : this.anims.play("walk_s"); this.anims.play("run_s") : this.anims.play("walk_s");
} else { } else {
// Idle // Idle
this.anims.stop(); this.anims.stop();
} }
// Lose stamina
if (this.keys.action) {
if (!(this.stamina.current <= 0)) {
this.stamina.current -= dt;
} else {
this.stamina.current = 0;
}
} else {
if (!(this.stamina.current >= this.stamina.max)) {
this.stamina.current += dt;
} else {
this.stamina.current = this.stamina.max;
}
}
// Speed // Speed
const xo = this.keys.x * dt * (600 * (1 - (this.keys.action) ? const xo = this.keys.x * ((this.keys.action && !(this.stamina.current <= 0)) ?
this.rate.running : this.rate.walking )); this.speed.running : this.speed.walking) * dt;
const yo = this.keys.y * dt * (600 * (1 - (this.keys.action) ? const yo = this.keys.y * ((this.keys.action && !(this.stamina.current <= 0)) ?
this.rate.running : this.rate.walking )); this.speed.running : this.speed.walking) * dt;
// Move // Move
const r = wallslide.wallslide(this, this.level, xo, yo); const r = wallslide.wallslide(this, this.level, xo, yo);

28
src/game.js
View File

@ -1,6 +1,7 @@
const { ipcRenderer, remote } = require("electron"); const { ipcRenderer, remote } = require("electron");
var asdf = require("asdf-games"); var asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars
const { Game, KeyControls, MouseControls, Camera, Lighting } = asdf; const { Game, KeyControls, MouseControls, Camera, Lighting } = asdf;
const window = { w: 640, h: 320 }; const window = { w: 640, h: 320 };
@ -16,21 +17,28 @@ var Level = require("./src/levels/level.js");
const mouseAim = new MouseControls(document.getElementById("board")); const mouseAim = new MouseControls(document.getElementById("board"));
const keys = new KeyControls(); const keys = new KeyControls();
var level = new Level(); // var lightsources = [
var player = new Player(keys, window, level); // { x: 100, y: 50 },
var lightsources = [ // { x: 100, y: 300 },
{ x: 100, y: 100 }, // { x: 300, y: 50 },
{ x: 300, y: 100 }, // { x: 300, y: 300 },
{ x: 500, y: 100 }, // { x: 100, y: 500 },
{ x: 500, y: 300 } // { x: 500, y: 100 }
]; // ];
var lighting = new Lighting(level.x, level.y, level.w, level.h, lightsources); // var lighting = new Lighting(level.x, level.y, level.w, level.h, lightsources);
var player = new Player(keys, window);
var level = new Level(player);
player.pos = level.startPos;
player.level = level;
const camera = new Camera(player, window, { w: level.w * 2, h: level.h * 2 }); const camera = new Camera(player, window, { w: level.w * 2, h: level.h * 2 });
scene.add(camera); scene.add(camera);
camera.add(level); camera.add(level);
camera.add(player); camera.add(player);
camera.add(lighting); // camera.add(lighting);
game.run(() => { game.run(() => {
if (mouseAim.isDown) { if (mouseAim.isDown) {

65
src/levels/level.js
View File

@ -1,28 +1,30 @@
var asdf = require("asdf-games"); var asdf = require("asdf-games");
const { Texture, TileMap } = asdf; // eslint-disable-next-line no-unused-vars
const { Texture, TileMap, entity } = asdf;
const texture = new Texture("./res/tilemap.png"); const texture = new Texture("./res/tilemap.png");
const tiles = require("../../res/tilemap.min.js"); const tiles = require("../../res/tilemap.min.js");
const tileSize = 32; const tileSize = 32;
const Mage = require("../entities/mage.js");
const levelSize = { w: 960, h: 480 }; const levelSize = { w: 960, h: 480 };
var levelData = [ var levelData = [
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 5, 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,
3, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 21, 22, 20, 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,
3, 16, 16, 16, 16, 20, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 7, 0, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 20, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 7, 0, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 20, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 8, 2, 3, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 22, 22, 22, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6, 4, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 7,
13, 14, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 9, 8 14, 15, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 10, 9
]; ];
var levelTiles = levelData.map(function(e) { var levelTiles = levelData.map(function(e) {
@ -30,12 +32,39 @@ var levelTiles = levelData.map(function(e) {
}); });
class Level extends TileMap { class Level extends TileMap {
constructor () { constructor (player) {
super(levelTiles, levelSize.w / tileSize, levelSize.h / tileSize, tileSize, tileSize, texture); super(levelTiles, levelSize.w / tileSize, levelSize.h / tileSize, tileSize, tileSize, texture);
this.pos = { x: 0, y: 0 }; this.pos = { x: 0, y: 0 };
this.startPos = { x: 48, y: 64 };
this.scale = { x: 1, y: 1 }; this.scale = { x: 1, y: 1 };
this.w = levelSize.w; this.w = levelSize.w;
this.h = levelSize.h; this.h = levelSize.h;
this.player = player;
this.mages = [
new Mage({ x: 8 * tileSize, y: 2 * tileSize }, this.player, this),
new Mage({ x: 1 * tileSize, y: 8 * tileSize }, this.player, this)
];
for (let index = 0; index < this.mages.length; index++) {
this.children.push(this.mages[index]);
}
}
update(dt) {
super.update(dt);
if (this.player) {
for (let index = 0; index < this.mages.length; index++) {
const mage = this.mages[index];
if (entity.distance(this.player, mage) < 100) {
mage.state = 1;
} else {
mage.state = 0;
}
}
}
} }
} }