diff --git a/src/game.js b/src/game.js index c52319b..43bb56f 100644 --- a/src/game.js +++ b/src/game.js @@ -1,4 +1,4 @@ -import Dvd from "./dvd.js" +import Player from "./player.js" import Input from "./input.js" export default class Game { @@ -7,7 +7,7 @@ export default class Game { this.ctx = canvas.getContext("2d") this.timestamp = 0 this.actors = [] - this.actors.push(new Dvd(this, 200, 200)) + this.actors.push(new Player(this, 200, 200)) this.input = new Input().initialize() } @@ -27,12 +27,6 @@ export default class Game { tick(dt) { this.actors.forEach(actor => actor.tick(dt)) - if (this.input.isInputPressed("attack")) console.log("attack!") - if (this.input.isInputPressed("interact")) console.log("interact!") - if (this.input.isInputPressed("up")) console.log("up!") - if (this.input.isInputPressed("down")) console.log("down!") - if (this.input.isInputPressed("left")) console.log("left!") - if (this.input.isInputPressed("right")) console.log("right!") } draw() { diff --git a/src/index.js b/src/index.js index 6b0098f..875011d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import Game from "./game.js" document.addEventListener("DOMContentLoaded", e => { - console.log("Hello, world!") const canvas = document.getElementById("game-canvas") const game = new Game(canvas) diff --git a/src/input.js b/src/input.js index b21068e..8d4d035 100644 --- a/src/input.js +++ b/src/input.js @@ -17,7 +17,6 @@ export default class Input { initialize() { window.addEventListener("keydown", key => this.inputPressed[this.keyFromInput(key.key)] = true) window.addEventListener("keyup", key => this.inputPressed[this.keyFromInput(key.key)] = false) - console.log(this) return this } diff --git a/src/player.js b/src/player.js new file mode 100644 index 0000000..d404ed3 --- /dev/null +++ b/src/player.js @@ -0,0 +1,56 @@ +import { SQRT_OF_TWO, isZeroVector } from "./util.js" +import Actor from "./actor.js" + +export default class Player extends Actor { + constructor(game, x, y) { + super(game) + this.x = x + this.y = y + this.width = 32 + this.height = 64 + this.xVel = 0 + this.yVel = 0 + this.color = "#56E" + this.playerDirection = { x: 0, y: 1 } + } + + tick(dt) { + this.handleInputAndMovement() + } + + handleInputAndMovement() { + const dir = this.inputDirection() + this.xVel = dir.x * 2 + this.yVel = dir.y * 2 + + this.x += this.xVel + this.y += this.yVel + + if (!isZeroVector(dir)) this.playerDirection = dir + } + + inputDirection() { + const isInputPressed = this.game.input.isInputPressed.bind(this.game.input) + const dir = { x: 0, y: 0 } + if (isInputPressed("up")) dir.y -= 1 + if (isInputPressed("down")) dir.y += 1 + if (isInputPressed("left")) dir.x -= 1 + if (isInputPressed("right")) dir.x += 1 + + if (Math.abs(dir.x, dir.y) == 2) { + dir.x *= SQRT_OF_TWO + dir.y *= SQRT_OF_TWO + } + + return dir + } + + draw(ctx) { + this.color = `rgb(128 ${(this.playerDirection.x * 128) + 128} ${(this.playerDirection.y * 128) + 128}` + ctx.beginPath() + ctx.fillStyle = this.color + ctx.rect(this.x, this.y, this.width, this.height) + ctx.fill() + ctx.closePath() + } +} diff --git a/src/util.js b/src/util.js new file mode 100644 index 0000000..fd1ba1e --- /dev/null +++ b/src/util.js @@ -0,0 +1,8 @@ +const SQRT_OF_TWO = Math.sqrt(2) + +const isZeroVector = vector => !vector.x && !vector.y + +export { + SQRT_OF_TWO, + isZeroVector +}