diff --git a/res/dungeon_tiles.png b/res/dungeon_tiles.png new file mode 100644 index 0000000..91b4570 Binary files /dev/null and b/res/dungeon_tiles.png differ diff --git a/res/main.css b/res/main.css new file mode 100644 index 0000000..9a218f0 --- /dev/null +++ b/res/main.css @@ -0,0 +1,17 @@ +body { + background-color: rgba(42, 42, 46, 1); + text-align: center; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} +#board { + position: relative; + background-color: #111; + width: max-content; + height: auto; + margin: auto; + border: 5px solid whitesmoke; +} diff --git a/res/player.png b/res/player.png new file mode 100644 index 0000000..92ed8d3 Binary files /dev/null and b/res/player.png differ diff --git a/src/entities/player.js b/src/entities/player.js new file mode 100644 index 0000000..3ff6bcd --- /dev/null +++ b/src/entities/player.js @@ -0,0 +1,78 @@ +var asdf = require("asdf-games"); +const { math, KeyControls, Texture, Sprite, TileSprite } = asdf; + +var texture = new Texture('./res/player.png'); + +class Player extends TileSprite { + constructor(keys) { + super(texture, 24, 24); + this.scale = { x: 3, y: 3 }; + + // Rate walking = 0.4 + // Rate running = 0.08 + + this.rate = 1; + this.direction = 1; + this.frames = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 1 }, + { x: 3, y: 1 } + ]; + this.curTime = 0; + this.curFrame = 0; + this.frame = this.frames[this.curFrame]; + + this.pos.x = (640 / 2) - (24 * this.scale.x / 2); + this.pos.y = (320 / 2) - (24 * this.scale.y / 2); + + this.keys = keys; + } + update(dt, t) { + const { rate, frames } = this; + this.curTime += dt; + + // Change speed + if (this.keys.x || this.keys.y) { + // Walking + this.rate = 0.35; + } else { + // Standstill + this.curFrame = 0; + } + if (this.keys.action && (this.keys.x || this.keys.y)) { + // Running + this.rate = 0.08; + } + + // Change walking direction + if (this.keys.x == -1) { + // Left + this.direction = 3; + } + if (this.keys.x == 1) { + // Right + this.direction = 2; + } + if (this.keys.y == -1) { + // Down + this.direction = 0; + } + if (this.keys.y == 1) { + // Up + this.direction = 1; + } + + this.frames.forEach(element => { + element.y = this.direction; + }); + + // Animate + if (this.curTime > rate) { + this.frame = frames[this.curFrame++ % frames.length]; + this.curTime -= rate; + } + } +} + +module.exports = Player; \ No newline at end of file diff --git a/src/index.js b/src/index.js index dd3b217..9bf382d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,19 @@ -var asdf = require("asdf-games"); -const { Game, Container, CanvasRenderer, math, SpriteSheetXML, KeyControls, MouseControls, Text, Texture, Sprite, TileMapXML, TileSprite, TileSpriteXML } = asdf; +var asdf = require('asdf-games'); +const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf; -const game = new Game(720, 480, false); -const { scene, w, h } = game; \ No newline at end of file +const game = new Game(640, 320, true); +const { scene, w, h } = game; + +const mouseAim = new MouseControls(); +const keys = new KeyControls(); + +var Player = require("./src/entities/player.js") +var player = new Player(keys); + +scene.add(player); + +game.run((dt ,t) => { + if (mouseAim.isDown) { + console.log('cliccccccccccc'); + } +}); \ No newline at end of file