v0.6: real PNG textures (head with eyes, scaled body, corners, tapering tails, apple, board); renderPieces classifier + tests

src/common/snake.js

@@ -34,6 +34,30 @@ function turn(current, desired) {
   return desired
 }
 
+// Classify every segment as a texture piece (head/body/corner/tail + compass side),
+// so the page can render each cell with the right PNG. Returns one name per segment.
+// Sides are screen compass (y grows down): e/w/n/s = right/left/up/down.
+function renderPieces(snakeCells, dir) {
+  const D = { '1,0': 'e', '-1,0': 'w', '0,-1': 'n', '0,1': 's' }
+  const opp = { e: 'w', w: 'e', n: 's', s: 'n' }
+  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[(prev.x - s.x) + ',' + (prev.y - s.y)]       // side toward head
+    if (!next) return 'tail_' + opp[from]                       // tip points away from body
+    const to = D[(next.x - s.x) + ',' + (next.y - s.y)]         // 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
+    const pair = [from, to].sort()
+    if (pair[0] === 'e' && pair[1] === 'n') return 'corner_en'
+    if (pair[0] === 'n' && pair[1] === 'w') return 'corner_nw'
+    if (pair[0] === 'e' && pair[1] === 's') return 'corner_es'
+    return 'corner_sw'
+  })
+}
+
 // 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 }]
@@ -56,4 +80,4 @@ function spawnFood(snake, N) {
   return { x, y }
 }
 
-module.exports = { initialSnake, step, turn, rotateDir, spawnFood }
+module.exports = { 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.5",
-  "versionCode": 5,
+  "versionName": "0.6",
+  "versionCode": 6,
   "minAPILevel": 1,
   "deviceTypeList": [
     "watch"

src/pages/index/index.ux

@@ -1,9 +1,9 @@
 <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>
+      <image class="board" src="/common/tex/board.png"></image>
+      <image class="food" src="/common/tex/apple.png" style="left: {{ food.left }}px; top: {{ food.top }}px;"></image>
+      <image class="seg" src="{{ seg.src }}" for="{{ seg in snake }}" style="left: {{ seg.left }}px; top: {{ seg.top }}px;"></image>
       <div class="overlay" show="{{ over }}" onclick="onTap">
         <text class="overText">GAME OVER</text>
         <text class="overSub">{{ scoreText }}</text>
@@ -88,19 +88,20 @@ export default {
     if (this.over) this.restart()
   },
   rebuild() {
+    const pieces = snake.renderPieces(this.model, this.dir)
     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'
+        left: (OFFSET + s.x * CELL) + 'px',
+        top: (OFFSET + s.y * CELL) + 'px',
+        src: '/common/tex/' + pieces[i] + '.png'
       })
     }
     this.snake = out
     this.food = {
-      left: (OFFSET + this.foodModel.x * CELL + 3) + 'px',
-      top: (OFFSET + this.foodModel.y * CELL + 3) + 'px'
+      left: (OFFSET + this.foodModel.x * CELL) + 'px',
+      top: (OFFSET + this.foodModel.y * CELL) + 'px'
     }
     this.scoreText = 'SCORE ' + (this.model.length - 3)
   }
@@ -117,27 +118,16 @@ export default {
   width: 466px; height: 466px;
 }
 .board {
-  position: absolute; left: 71px; top: 71px;
+  position: absolute; left: 73px; top: 73px;
   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;
+  width: 20px; height: 20px;
 }
 .food {
   position: absolute;
-  width: 14px; height: 14px;
-  border-radius: 7px;
-  background-color: #ff5a5a;
+  width: 20px; height: 20px;
 }
 .score {
   position: absolute; left: 0px; top: 24px;