oiwmiodev/vela-snake
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 7 Wiki Activity

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

Browse Source
This commit is contained in:
codex-bot
2026-09-09 22:06:09 +01:00
parent 4e39e1912a
commit eacad97240
24 changed files with 179 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.ux
+12 -22
View File
@@ -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;