Move the player and face them in a direction

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() {

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)
 

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
   }
 

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()
+  }
+}

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
+}