SNAKE game v0.3: round screen, swipe control

- 16x16 grid, 320px board centered on round 466 screen, designWidth 466 - pure snake logic in src/common/snake.js (step/turn/rotateDir/spawnFood, TDD'd) - for-directive segment rendering, show-gated game-over overlay, 300ms tick - swipe direction input (crown rotation confirmed unsupported on Vela S4) - tests: snake logic + page wiring
2026-09-09 15:09:23 +01:00
commit e618c02c1b
13 changed files with 10875 additions and 0 deletions
@@ -0,0 +1,10 @@
+<script>
+export default {
+  onCreate() {
+    console.log('Hello Vela app created')
+  },
+  onDestroy() {
+    console.log('Hello Vela app destroyed')
+  }
+}
+</script>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="48" fill="#ff6900"/>
+  <text x="96" y="116" text-anchor="middle" font-family="DejaVu Sans, sans-serif" font-size="72" font-weight="700" fill="#ffffff">Hi</text>
+</svg>
@@ -0,0 +1,59 @@
+// Snake core — pure functions, no Vela APIs. Exports: initialSnake, step, turn, spawnFood.
+function initialSnake() {
+  return [
+    { x: 6, y: 7 },
+    { x: 5, y: 7 },
+    { x: 4, y: 7 }
+  ]
+}
+
+// Advance the snake one cell in `dir` ({x,y} unit vector). Returns { snake, ate, alive }.
+function step(snake, dir, food, N) {
+  const head = snake[0]
+  const nx = head.x + dir.x
+  const ny = head.y + dir.y
+  if (nx < 0 || ny < 0 || nx >= N || ny >= N) {
+    return { snake, ate: false, alive: false }
+  }
+  const ate = (nx === food.x && ny === food.y)
+  // tail cell vacates unless we grew, so exclude it from self-collision check
+  const body = ate ? snake : snake.slice(0, snake.length - 1)
+  for (let i = 0; i < body.length; i++) {
+    if (body[i].x === nx && body[i].y === ny) {
+      return { snake, ate: false, alive: false }
+    }
+  }
+  const next = [{ x: nx, y: ny }].concat(snake)
+  if (!ate) next.pop()
+  return { snake: next, ate, alive: true }
+}
+
+// Reject a 180° reversal; otherwise accept the new direction.
+function turn(current, desired) {
+  if (current.x + desired.x === 0 && current.y + desired.y === 0) return current
+  return desired
+}
+
+// Rotate a direction 90°: clockwise order right->down->left->up. Always ±90°, never a reversal.
+function rotateDir(dir, clockwise) {
+  const order = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }]
+  let i = 0
+  for (let k = 0; k < 4; k++) {
+    if (order[k].x === dir.x && order[k].y === dir.y) { i = k; break }
+  }
+  return clockwise ? order[(i + 1) % 4] : order[(i + 3) % 4]
+}
+
+// Random empty cell, avoiding the snake.
+function spawnFood(snake, N) {
+  const occupied = new Set(snake.map(s => s.x + ',' + s.y))
+  if (occupied.size >= N * N) return null
+  let x, y
+  do {
+    x = Math.floor(Math.random() * N)
+    y = Math.floor(Math.random() * N)
+  } while (occupied.has(x + ',' + y))
+  return { x, y }
+}
+
+module.exports = { initialSnake, step, turn, rotateDir, spawnFood }
@@ -0,0 +1,32 @@
+{
+  "package": "com.ilias.snake",
+  "name": "SNAKE",
+  "icon": "/common/icon.png",
+  "versionName": "0.3",
+  "versionCode": 3,
+  "minAPILevel": 1,
+  "deviceTypeList": [
+    "watch"
+  ],
+  "config": {
+    "logLevel": "debug",
+    "designWidth": 466
+  },
+  "router": {
+    "entry": "pages/index",
+    "pages": {
+      "pages/index": {
+        "component": "index",
+        "path": "/"
+      }
+    }
+  },
+  "display": {
+    "backgroundColor": "#000000"
+  },
+  "features": [
+    {
+      "name": "system.router"
+    }
+  ]
+}
@@ -0,0 +1,180 @@
+<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>