vela-snake-m/src/pages/index/index.ux

<template>
  <div class="page" onswipe="onSwipe">
    <stack class="dial">
      <div class="board"></div>
      <div class="food" style="left: {{ food.left }}px; top: {{ food.top }}px;"></div>
      <div class="{{ seg.cls }}" for="{{ seg in snake }}" style="left: {{ seg.left }}px; top: {{ seg.top }}px;"></div>
      <div class="overlay" show="{{ over }}" onclick="onTap">
        <text class="overText">GAME OVER</text>
        <text class="overSub">{{ scoreText }}</text>
        <text class="overHint">tap to play again</text>
      </div>
      <text class="score">{{ scoreText }}</text>
      <text class="hint">swipe to move</text>
    </stack>
  </div>
</template>
<script>
import snake from '../../common/snake.js'

const CELL = 20
const GRID = 16
const OFFSET = 73

export default {
  private: {
    snake: [],
    food: { left: '73px', top: '73px' },
    scoreText: 'SCORE 0',
    over: false
  },
  onInit() {
    this.dir = { x: 1, y: 0 }
    this.pending = null
    this.reset()
  },
  onShow() {
    this.timer = setInterval(() => this.tick(), 300)
  },
  onHide() {
    clearInterval(this.timer)
  },
  onDestroy() {
    clearInterval(this.timer)
  },
  reset() {
    this.model = snake.initialSnake()
    this.foodModel = snake.spawnFood(this.model, GRID)
    this.dir = { x: 1, y: 0 }
    this.pending = null
    this.over = false
    this.rebuild()
  },
  tick() {
    if (this.over) return
    if (this.pending) {
      this.dir = snake.turn(this.dir, this.pending)
      this.pending = null
    }
    const r = snake.step(this.model, this.dir, this.foodModel, GRID)
    if (!r.alive) {
      this.over = true
      clearInterval(this.timer)
      return
    }
    this.model = r.snake
    if (r.ate) {
      this.foodModel = snake.spawnFood(this.model, GRID)
    }
    this.rebuild()
  },
  restart() {
    this.reset()
    clearInterval(this.timer)
    this.timer = setInterval(() => this.tick(), 300)
  },
  onSwipe(e) {
    if (this.over) return
    const d = e.direction
    let v
    if (d === 'left') v = { x: -1, y: 0 }
    else if (d === 'right') v = { x: 1, y: 0 }
    else if (d === 'up') v = { x: 0, y: -1 }
    else if (d === 'down') v = { x: 0, y: 1 }
    else return
    this.pending = v
  },
  onTap() {
    if (this.over) this.restart()
  },
  rebuild() {
    const out = []
    for (let i = 0; i < this.model.length; i++) {
      const s = this.model[i]
      out.push({
        left: (OFFSET + s.x * CELL + 1) + 'px',
        top: (OFFSET + s.y * CELL + 1) + 'px',
        cls: i === 0 ? 'seg head' : 'seg'
      })
    }
    this.snake = out
    this.food = {
      left: (OFFSET + this.foodModel.x * CELL + 3) + 'px',
      top: (OFFSET + this.foodModel.y * CELL + 3) + 'px'
    }
    this.scoreText = 'SCORE ' + (this.model.length - 3)
  }
}
</script>
<style>
.page {
  width: 466px; height: 466px;
  background-color: #000000;
  align-items: center;
  justify-content: center;
}
.dial {
  width: 466px; height: 466px;
}
.board {
  position: absolute; left: 71px; top: 71px;
  width: 320px; height: 320px;
  border-radius: 26px;
  border-width: 2px;
  border-color: #2a3040;
  background-color: #0a0f1a;
}
.seg {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 4px;
  background-color: #35c26a;
}
.seg.head {
  background-color: #7cf0a0;
}
.food {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 7px;
  background-color: #ff5a5a;
}
.score {
  position: absolute; left: 0px; top: 24px;
  width: 466px;
  color: #9aa0aa;
  font-size: 22px;
  text-align: center;
}
.hint {
  position: absolute; left: 0px; top: 408px;
  width: 466px;
  color: #3a4052;
  font-size: 18px;
  text-align: center;
}
.overlay {
  position: absolute; left: 0px; top: 160px;
  width: 466px;
  flex-direction: column;
  align-items: center;
}
.overText {
  height: 40px;
  color: #ffffff;
  font-size: 32px;
  text-align: center;
}
.overSub {
  height: 32px;
  color: #f3a633;
  font-size: 24px;
  text-align: center;
}
.overHint {
  height: 30px;
  color: #9aa0aa;
  font-size: 20px;
  text-align: center;
}
</style>