[verified] Snake 0.8: circular arena and larger 32px tiles

src/common/snake.js

@@ -1,4 +1,18 @@
-// Snake core — pure functions, no Vela APIs. Exports: initialSnake, step, turn, spawnFood.
+// Shared geometry: 32px tiles wholly inside the 368px circular arena.
+const ARENA = { cell: 32, size: 11, offset: 57, radius: 184, cells: [], rows: [], columns: [] }
+for (let y = 0; y < ARENA.size; y++) {
+  ARENA.rows[y] = []
+  ARENA.columns[y] = []
+}
+for (let y = 0; y < ARENA.size; y++) for (let x = 0; x < ARENA.size; x++) {
+  const dx = Math.abs((x + 0.5) * ARENA.cell - 176) + ARENA.cell / 2
+  const dy = Math.abs((y + 0.5) * ARENA.cell - 176) + ARENA.cell / 2
+  if (dx * dx + dy * dy <= ARENA.radius * ARENA.radius) {
+    ARENA.cells.push({ x, y })
+    ARENA.rows[y].push(x)
+    ARENA.columns[x].push(y)
+  }
+}
 function initialSnake() {
   return [
     { x: 6, y: 7 },
@@ -12,13 +26,22 @@ function step(snake, dir, food, N, mode) {
   const head = snake[0]
   let nx = head.x + dir.x
   let ny = head.y + dir.y
-  if (mode === 'wrap') {
+  if (typeof N === 'object') {
+    const row = N.rows[ny]
+    if (!row || row.indexOf(nx) === -1) {
+      if (mode !== 'wrap') return { snake, ate: false, alive: false }
+      const span = dir.x ? N.rows[head.y] : N.columns[head.x]
+      const opposite = dir.x + dir.y > 0 ? span[0] : span[span.length - 1]
+      if (dir.x) nx = opposite
+      else ny = opposite
+    }
+  } else if (mode === 'wrap') {
     nx = (nx + N) % N
     ny = (ny + N) % N
   } else if (nx < 0 || ny < 0 || nx >= N || ny >= N) {
     return { snake, ate: false, alive: false }
   }
-  const ate = (nx === food.x && ny === food.y)
+  const ate = !!food && (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++) {
@@ -44,13 +67,22 @@ function renderPieces(snakeCells, dir, N) {
   const D = { '1,0': 'e', '-1,0': 'w', '0,-1': 'n', '0,1': 's' }
   const opp = { e: 'w', w: 'e', n: 's', s: 'n' }
   const delta = d => N && d === N - 1 ? -1 : N && d === 1 - N ? 1 : d
+  // Circular seams join the endpoints of this row/column, not the bounding grid.
+  const side = (s, neighbor) => {
+    let dx = neighbor.x - s.x, dy = neighbor.y - s.y
+    if (N && typeof N === 'object') {
+      if (Math.abs(dx) > 1) dx = dx > 0 ? -1 : 1
+      if (Math.abs(dy) > 1) dy = dy > 0 ? -1 : 1
+    } else { dx = delta(dx); dy = delta(dy) }
+    return D[dx + ',' + dy]
+  }
   return snakeCells.map((s, i) => {
     if (i === 0) return 'head_' + D[dir.x + ',' + dir.y]
     const prev = snakeCells[i - 1]
     const next = snakeCells[i + 1]
-    const from = D[delta(prev.x - s.x) + ',' + delta(prev.y - s.y)]       // side toward head
+    const from = side(s, prev)       // side toward head
     if (!next) return 'tail_' + opp[from]                       // tip points away from body
-    const to = D[delta(next.x - s.x) + ',' + delta(next.y - s.y)]         // side toward tail tip
+    const to = side(s, next)         // side toward tail tip
     if ((from === 'e' || from === 'w') && (to === 'e' || to === 'w')) return 'body_h'
     if ((from === 'n' || from === 's') && (to === 'n' || to === 's')) return 'body_v'
     // corner: name = the two sides it connects; pairs are alphabetically sorted
@@ -75,6 +107,10 @@ function rotateDir(dir, clockwise) {
 // Random empty cell, avoiding the snake.
 function spawnFood(snake, N) {
   const occupied = new Set(snake.map(s => s.x + ',' + s.y))
+  if (typeof N === 'object') {
+    const empty = N.cells.filter(c => !occupied.has(c.x + ',' + c.y))
+    return empty.length ? empty[Math.floor(Math.random() * empty.length)] : null
+  }
   if (occupied.size >= N * N) return null
   // Select an empty-cell rank uniformly; at most N*N checks, even almost full.
   let rank = Math.floor(Math.random() * (N * N - occupied.size))
@@ -89,4 +125,4 @@ function spawnFood(snake, N) {
   return null
 }
 
-module.exports = { initialSnake, step, turn, renderPieces, rotateDir, spawnFood }
+module.exports = { ARENA, initialSnake, step, turn, renderPieces, rotateDir, spawnFood }

src/manifest.json

@@ -2,8 +2,8 @@
   "package": "com.ilias.snake",
   "name": "SNAKE",
   "icon": "/common/icon.png",
-  "versionName": "0.7",
-  "versionCode": 7,
+  "versionName": "0.8",
+  "versionCode": 8,
   "minAPILevel": 1,
   "deviceTypeList": [
     "watch"

src/pages/index/index.ux

@@ -10,7 +10,7 @@
       </div>
       <div class="footer">
         <text class="modeLabel">{{ modeText }}</text>
-        <text class="hint">swipe / tap to pause</text>
+        <text class="hint">swipe / tap pause</text>
       </div>
       <div class="overlay" show="{{ paused && !over }}">
         <text class="overText">PAUSED</text>
@@ -40,14 +40,14 @@ import snake from '../../common/snake.js'
 import storage from '@system.storage'
 import best from '../../common/best.js'
 
-const CELL = 20
-const GRID = 16
-const OFFSET = 73
+const CELL = snake.ARENA.cell
+const GRID = snake.ARENA
+const OFFSET = snake.ARENA.offset
 
 export default {
   private: {
     snake: [],
-    food: { left: '73px', top: '73px' },
+    food: { left: '57px', top: '57px' },
     hasFood: true,
     endText: 'GAME OVER',
     scoreText: 'SCORE 0',
@@ -195,41 +195,41 @@ export default {
   width: 466px; height: 466px;
 }
 .board {
-  position: absolute; left: 73px; top: 73px;
-  width: 320px; height: 320px;
+  position: absolute; left: 49px; top: 49px;
+  width: 368px; height: 368px;
 }
 .seg {
   position: absolute;
-  width: 20px; height: 20px;
+  width: 32px; height: 32px;
 }
 .food {
   position: absolute;
-  width: 20px; height: 20px;
+  width: 32px; height: 32px;
 }
 .score {
-  width: 188px; height: 22px;
+  width: 152px; height: 20px;
   color: #d8edce; font-size: 18px; text-align: center;
 }
 .best {
-  width: 188px; height: 22px;
+  width: 152px; height: 20px;
   color: #f3bd60; font-size: 17px; text-align: center;
 }
 .hud {
-  position: absolute; left: 139px; top: 24px;
-  width: 188px; height: 44px;
+  position: absolute; left: 157px; top: 16px;
+  width: 152px; height: 40px;
   flex-direction: column; align-items: center;
 }
 .footer {
-  position: absolute; left: 135px; top: 400px;
-  width: 196px; height: 40px;
+  position: absolute; left: 143px; top: 410px;
+  width: 180px; height: 36px;
   flex-direction: column; align-items: center;
 }
 .modeLabel {
-  width: 196px; height: 20px;
+  width: 180px; height: 18px;
   color: #cee4bd; font-size: 17px; text-align: center;
 }
 .hint {
-  width: 196px; height: 20px;
+  width: 180px; height: 18px;
   color: #adb7c6; font-size: 16px; text-align: center;
 }
 .overlay {