player

src/Field.vue

@@ -3,11 +3,12 @@
     <input v-keep-focussed type="text"
       @keydown.down="goDown($event)"
       @keydown.up="goUp($event)"
-      @keydown.right="x = x + 1"
-      @keydown.left="x = x > 0 ? x - 1 : 0"
+      @keydown.right="goRight($event)"
+      @keydown.left="goLeft($event)"
     />
+    <div id="level-indicator">x:{{ x }}, y:{{ y }}</div>
     <template v-for="row in rows">
-      <div v-for="block in row" class="block" :class="block.type" />
+      <div v-for="block in row" class="block" :class="[block.type, block.background]" />
     </template>
   </div>
 </template>
@@ -24,12 +25,17 @@ export default {
   data () {
     return {
       x: 0,
-      y: 0
+      y: 0,
+      player_x: 0,
+      player_y: 0
     }
   },
+  mounted () {
+    this.findStartPos()
+  },
   computed: {
     rows () {
-      return level.grid(this.x, this.y)
+      return level.grid(this.x, this.y, this.player_x, this.player_y)
     }
   },
   methods: {
@@ -41,6 +47,26 @@ export default {
       if (ev.shiftKey) this.y -= 32
       else this.y--
       this.y = Math.max(0, this.y)
+    },
+    goRight (ev) {
+      if (ev.shiftKey) this.x += 32
+      else this.x++
+    },
+    goLeft (ev) {
+      if (ev.shiftKey) this.x -= 32
+      else this.x--
+    },
+    findStartPos () {
+      const x = parseInt(WIDTH / 2)
+
+      for (let y = HEIGHT - 1; y; y--) {
+        const block = this.rows[y][x]
+        if (block.walkable) {
+          this.player_x = x
+          this.player_y = y
+          break
+        }
+      }
     }
   }
 }
@@ -48,12 +74,11 @@ export default {
 
 <style>
 .field {
+  position: relative;
   display: flex;
   flex-flow: row wrap;
   width: 1024px;
   margin: auto;
-  margin-top: calc(100vh - 1056px);
-  border: 16px solid #222;
 }
 .field > input {
   position: absolute;
@@ -62,6 +87,12 @@ export default {
   width: 1px;
   height: 1px;
 }
+#level-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: white;
+}
 .block {
   flex: 0 0 auto;
   width: 30px;
@@ -78,6 +109,11 @@ export default {
 .block.stone { background-color: #555; }
 .block.bedrock { background-color: #333; }
 .block.cave { background-color: #000; }
+.block.player {
+  background-image: url(./assets/dwarf.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
 .block:hover {
   border-color: rgba(255,255,255,0.2);
 }

src/level/def.js

@@ -1,13 +1,14 @@
 export const type = {
-  air: {type: 'air', hp: 0},
-  grass: {type: 'grass', hp: 1},
-  leaves: {type: 'leaves', hp: 1},
-  wood: {type: 'wood', hp: 5},
-  soil: {type: 'soil', hp: 2},
-  gravel: {type: 'gravel', hp: 5},
-  stone: {type: 'stone', hp: 10},
-  bedrock: {type: 'bedrock', hp: 25},
-  cave: {type: 'cave', hp: 0}
+  air: {type: 'air', hp: 0, walkable: true},
+  grass: {type: 'grass', hp: 1, walkable: true},
+  leaves: {type: 'leaves', hp: 1, walkable: true},
+  wood: {type: 'wood', hp: 5, walkable: true},
+  soil: {type: 'soil', hp: 2, walkable: false},
+  gravel: {type: 'gravel', hp: 5, walkable: false},
+  stone: {type: 'stone', hp: 10, walkable: false},
+  bedrock: {type: 'bedrock', hp: 25, walkable: false},
+  cave: {type: 'cave', hp: 0, walkable: true},
+  player: {type: 'player', hp: 10, background: 'air'}
 }
 
 export const level = {

src/level/first-iteration.js

@@ -3,14 +3,13 @@ import FastSimplexNoise from 'fast-simplex-noise'
 import {type as T, level as L, probability as P} from './def'
 
 export default class BlockGen {
-  constructor (seed = 'so freakin random') {
-    const simplex = new FastSimplexNoise({ random: SeedRng(seed) })
-    this.rand = (x, y) => 0.5 + 0.5 * simplex.raw2D(x, y)
+  constructor (noiseGen) {
+    this.rand = (x, y) => 0.5 + 0.5 * noiseGen.raw2D(x, y)
   }
 
-  level (level, row, previousRow) {
+  level (level, column, row, previousRow) {
     for (let i = 0; i < row.length; i++) {
-      row[i] = this.block(level, i, row[i], row[i - 1], previousRow[i])
+      row[i] = this.block(level, column + i, row[i], row[i - 1], previousRow[i])
     }
   }
 

src/level/index.js

@@ -4,36 +4,35 @@ import FastSimplexNoise from 'fast-simplex-noise'
 import {type as T, level as L} from './def'
 import BlockGen from './first-iteration'
 import BlockExt from './second-iteration'
+import Player from './third-iteration'
 
 export default class Level {
   constructor (width, height, seed = 'super random seed') {
     const random = SeedRng(seed)
     const noiseGen = new FastSimplexNoise({ random })
-    this._x = 0
-    this._y = 0
     this._w = width
     this._h = height
     this._grid = new Array(this._h)
     this.blockGen = new BlockGen(noiseGen)
     this.blockExt = new BlockExt(noiseGen)
+    this.player = new Player(this._grid)
   }
 
-  grid (x, y) {
-    this._x = x
-    this._y = y
-
-    this.generate()
+  grid (x, y, px, py) {
+    this.generate(x, y, this._w, this._h, px, py)
     return this._grid
   }
 
-  generate () {
-    for (let i = 0; i < this._h; i++) {
-      const level = this._y + i
-      const row = Array(this._w)
+  generate (x, y, w, h, px, py) {
+    for (let i = 0; i < h; i++) {
+      const level = y + i
+      const column = x
+      const row = Array(w)
       const previousRow = this._grid[i - 1] || Array()
-      this.blockGen.level(level, row, previousRow)
-      this.blockExt.level(level, row, previousRow)
+      this.blockGen.level(level, column, row, previousRow)
+      this.blockExt.level(level, column, row, previousRow)
       this._grid[i] = row
     }
+    this.player.setPosition(px, py)
   }
 }

src/level/second-iteration.js

@@ -5,9 +5,9 @@ export default class BlockExt {
     this.rand = (x, y) => 0.5 + 0.5 * noiseGen.raw2D(x, y)
   }
 
-  level (level, row, previousRow) {
+  level (level, column, row, previousRow) {
     for (let i = 0; i < row.length; i++) {
-      const r = Math.abs(this.rand(level, i))
+      const r = Math.abs(this.rand(level, column + i))
 
       if (level < L.ground) this.trees(r, i, row, previousRow, level)
       else if (level < L.rock) this.ground(r, i, row, previousRow)

src/level/third-iteration.js

@@ -0,0 +1,17 @@
+import {type as T} from './def'
+
+export default class Player {
+  constructor (grid) {
+    this._player_changes = []
+    this._grid = grid
+  }
+
+  setPosition (px, py) {
+    const block = this._grid[py][px]
+
+    if (block.walkable) {
+      T.player.background = block.type
+      this._grid[py][px] = T.player
+    }
+  }
+}