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
* Index for tilemap file
*
* 0. Corner top-left
* 1. normal top wall middle piece
* 2. Corner top -> left wall
* 3. Left wall
* 4. top wall before corner
* 5. corner top -> right wall
* 6. normal right wall piece
* 7. Corner right -> top
* 8. Corner right -> bottom
* 9. bottom wall piece before 8.
* 10. normal bottom wall piece
* 11. Corner bottom -> right
* 12. Corner right -> bottom
* 13. Corner bottom -> left
* 14. Bottom wall piece before 13.
* 15. Corner left -> bottom
* 32. Normal floor tile
* 17. +-shaped floor tile
* 18. Heavily cracked floor tile
* 19. Lightly cracked floor tile
* 20. Normal brick wall 1
* 21. Normal brick wall 2
* 22. Normal brick wall 3
* 23. blood brick wall 1
* 24. blood brick wall 2
* 25. blood brick wall 3
* 26. light vines brick wall 1
* 27. light vines brick wall 2
* 28. light vines brick wall 3
* 29. heavy vines brick wall 1
* 30. heavy vines brick wall 2
* 31. heavy vines brick wall 3
* 64. Chest closed
* 33. Chest opened
* 34. Rock 1
* 35. Rock 2
* 36. door
* 37. Ladder (should be over wall)
* 38. Torch
* 39. Staircase
* 0. Empty tile
* 1. Corner top-left
* 2. normal top wall middle piece
* 3. Corner top -> left wall
* 4. Left wall
* 5. top wall before corner
* 6. corner top -> right wall
* 7. normal right wall piece
* 8. Corner right -> top
* 9. Corner right -> bottom
* 10. bottom wall piece before 8.
* 12. normal bottom wall piece
* 12. Corner bottom -> right
* 13. Corner right -> bottom
* 14. Corner bottom -> left
* 16. Bottom wall piece before 13.
* 17. Corner left -> bottom
* 33. Normal floor tile
* 18. +-shaped floor tile
* 19. Heavily cracked floor tile
* 20. Lightly cracked floor tile
* 21. Normal brick wall 1
* 22. Normal brick wall 2
* 23. Normal brick wall 3
* 24. blood brick wall 1
* 25. blood brick wall 2
* 26. blood brick wall 3
* 27. light vines brick wall 1
* 28. light vines brick wall 2
* 29. light vines brick wall 3
* 30. heavy vines brick wall 1
* 31. heavy vines brick wall 2
* 32. heavy vines brick wall 3
* 65. Chest closed
* 34. Chest opened
* 35. Rock 1
* 36. Rock 2
* 37. door
* 38. Ladder (should be over wall)
* 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");
class Player extends TileSprite {
constructor(keys, window, level) {
constructor(keys, window) {
super(texture, 24, 24);
this.scale = { x: 2, y: 2 };
this.window = window;
this.keys = keys;
this.rate = {
walking: 0.2,
running: 0.1
};
this.speed = {
walking: 75,
running: 150
};
this.anims = new AnimManager(this);
// North
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.pos.x = (level.w / 2) - (24 * this.scale.x / 2);
this.pos.y = (level.h / 2) - (24 * this.scale.y / 2);
this.level = level;
this.keys = keys;
this.lives = 5;
this.stamina = {
current: 5,
max: 5
};
this.hitBox = {
x: 4,
@ -52,30 +56,45 @@ class Player extends TileSprite {
// Animate
if (this.keys.x == -1) {
// Left
(this.keys.action) ?
(this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_w") : this.anims.play("walk_w");
} else if (this.keys.x == 1) {
// Right
(this.keys.action) ?
(this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_e") : this.anims.play("walk_e");
} else if (this.keys.y == -1) {
// Up
(this.keys.action) ?
(this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_n") : this.anims.play("walk_n");
} else if (this.keys.y == 1) {
// Down
(this.keys.action) ?
(this.keys.action && !(this.stamina.current <= 0)) ?
this.anims.play("run_s") : this.anims.play("walk_s");
} else {
// Idle
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
const xo = this.keys.x * dt * (600 * (1 - (this.keys.action) ?
this.rate.running : this.rate.walking ));
const yo = this.keys.y * dt * (600 * (1 - (this.keys.action) ?
this.rate.running : this.rate.walking ));
const xo = this.keys.x * ((this.keys.action && !(this.stamina.current <= 0)) ?
this.speed.running : this.speed.walking) * dt;
const yo = this.keys.y * ((this.keys.action && !(this.stamina.current <= 0)) ?
this.speed.running : this.speed.walking) * dt;
// Move
const r = wallslide.wallslide(this, this.level, xo, yo);

28
src/game.js
View File

@ -1,6 +1,7 @@
const { ipcRenderer, remote } = require("electron");
var asdf = require("asdf-games");
// eslint-disable-next-line no-unused-vars
const { Game, KeyControls, MouseControls, Camera, Lighting } = asdf;
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 keys = new KeyControls();
var level = new Level();
var player = new Player(keys, window, level);
var lightsources = [
{ x: 100, y: 100 },
{ x: 300, y: 100 },
{ x: 500, y: 100 },
{ x: 500, y: 300 }
];
var lighting = new Lighting(level.x, level.y, level.w, level.h, lightsources);
// var lightsources = [
// { x: 100, y: 50 },
// { x: 100, y: 300 },
// { x: 300, y: 50 },
// { x: 300, y: 300 },
// { x: 100, y: 500 },
// { x: 500, y: 100 }
// ];
// 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 });
scene.add(camera);
camera.add(level);
camera.add(player);
camera.add(lighting);
// camera.add(lighting);
game.run(() => {
if (mouseAim.isDown) {

65
src/levels/level.js
View File

@ -1,28 +1,30 @@
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 tiles = require("../../res/tilemap.min.js");
const tileSize = 32;
const Mage = require("../entities/mage.js");
const levelSize = { w: 960, h: 480 };
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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
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, 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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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) {
@ -30,12 +32,39 @@ var levelTiles = levelData.map(function(e) {
});
class Level extends TileMap {
constructor () {
constructor (player) {
super(levelTiles, levelSize.w / tileSize, levelSize.h / tileSize, tileSize, tileSize, texture);
this.pos = { x: 0, y: 0 };
this.startPos = { x: 48, y: 64 };
this.scale = { x: 1, y: 1 };
this.w = levelSize.w;
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;
}
}
}
}
}