312 lines
9.7 KiB
XML
312 lines
9.7 KiB
XML
<template>
|
|
<div class="page">
|
|
<scroll id="scroller" class="page" scroll-y="true" direction="vertical" onscroll="onCrownScroll">
|
|
<stack class="dial">
|
|
<image class="board" src="/common/tex/board.png" onclick="onTap"></image>
|
|
<image class="food" src="/common/tex/apple.png" show="{{ hasFood }}" onclick="onTap" style="left: {{ food.left }}; top: {{ food.top }};"></image>
|
|
<image class="seg" src="{{ seg.src }}" for="{{ seg in snake }}" onclick="onTap" style="left: {{ seg.left }}; top: {{ seg.top }};"></image>
|
|
<div class="hud">
|
|
<text class="score">{{ scoreText }}</text>
|
|
<text class="best">{{ bestText }}</text>
|
|
</div>
|
|
<div class="footer">
|
|
<text class="modeLabel">{{ modeText }}</text>
|
|
<text class="hint">swipe / tap pause</text>
|
|
</div>
|
|
<div class="overlay" show="{{ paused && !over }}">
|
|
<text class="overText">PAUSED</text>
|
|
<text class="overSub">{{ scoreText }}</text>
|
|
<text class="retry" onclick="onTap">RESUME</text>
|
|
<text class="overHint">Change mode: new game</text>
|
|
<div class="modes">
|
|
<text class="modeButton" onclick="selectMode('classic')">CLASSIC</text>
|
|
<text class="modeButton" onclick="selectMode('wrap')">WRAP</text>
|
|
</div>
|
|
</div>
|
|
<div class="overlay" show="{{ over }}">
|
|
<text class="overText">{{ endText }}</text>
|
|
<text class="overSub">{{ scoreText }}</text>
|
|
<text class="retry" onclick="restart">PLAY AGAIN</text>
|
|
<text class="overHint">Change mode: new game</text>
|
|
<div class="modes">
|
|
<text class="modeButton" onclick="selectMode('classic')">CLASSIC</text>
|
|
<text class="modeButton" onclick="selectMode('wrap')">WRAP</text>
|
|
</div>
|
|
</div>
|
|
</stack>
|
|
</scroll>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import snake from '../../common/snake.js'
|
|
import storage from '@system.storage'
|
|
import best from '../../common/best.js'
|
|
|
|
const CELL = snake.ARENA.cell
|
|
const GRID = snake.ARENA
|
|
const OFFSET = snake.ARENA.offset
|
|
// Crown rotation arrives as scroll deltas on the focused scroll container
|
|
// (see docs/CROWN.md). This many px of accumulated scroll = one 90° turn.
|
|
const CROWN_STEP_PX = 40
|
|
const CW_ORDER = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }]
|
|
function rotate90(d, clockwise) {
|
|
let i = 0
|
|
for (let k = 0; k < 4; k++) {
|
|
if (CW_ORDER[k].x === d.x && CW_ORDER[k].y === d.y) { i = k; break }
|
|
}
|
|
return clockwise ? CW_ORDER[(i + 1) % 4] : CW_ORDER[(i + 3) % 4]
|
|
}
|
|
|
|
export default {
|
|
private: {
|
|
snake: [],
|
|
food: { left: '57px', top: '57px' },
|
|
hasFood: true,
|
|
endText: 'GAME OVER',
|
|
scoreText: 'SCORE 0',
|
|
bestText: 'BEST 0',
|
|
mode: 'classic',
|
|
modeText: 'CLASSIC',
|
|
paused: false,
|
|
over: false
|
|
},
|
|
onInit() {
|
|
this.dir = { x: 1, y: 0 }
|
|
this.queue = []
|
|
this.records = best.getStore(storage)
|
|
this.records.subscribe(value => { if (!this.destroyed) this.bestText = 'BEST ' + value })
|
|
this.reset()
|
|
this.records.sync()
|
|
},
|
|
onShow() {
|
|
if (this.destroyed) return
|
|
this.visible = true
|
|
this.crownAnchor = 233
|
|
try { this.$element('scroller').scrollTo({ top: 233 }) } catch (err) {}
|
|
this.records.sync()
|
|
this.startTimer()
|
|
},
|
|
stopTimer() {
|
|
this.timerEpoch = (this.timerEpoch || 0) + 1
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
startTimer() {
|
|
this.stopTimer()
|
|
if (this.destroyed || !this.visible || this.paused || this.over) return
|
|
const epoch = this.timerEpoch
|
|
this.timer = setInterval(() => {
|
|
if (epoch === this.timerEpoch) this.tick()
|
|
}, Math.max(120, 300 - (this.model.length - 3) * 10))
|
|
},
|
|
onHide() {
|
|
this.visible = false
|
|
this.paused = true
|
|
this.queue = []
|
|
this.stopTimer()
|
|
},
|
|
onDestroy() {
|
|
this.onHide()
|
|
this.destroyed = true
|
|
this.records.subscribe(null)
|
|
},
|
|
reset() {
|
|
this.model = snake.initialSnake()
|
|
this.foodModel = snake.spawnFood(this.model, GRID)
|
|
this.dir = { x: 1, y: 0 }
|
|
this.queue = []
|
|
this.over = false
|
|
this.endText = 'GAME OVER'
|
|
this.paused = false
|
|
this.rebuild()
|
|
},
|
|
tick() {
|
|
if (this.over || this.paused || this.destroyed || this.visible === false) return
|
|
if (this.queue.length) this.dir = this.queue.shift()
|
|
const r = snake.step(this.model, this.dir, this.foodModel, GRID, this.mode)
|
|
if (!r.alive) {
|
|
this.over = true
|
|
this.stopTimer()
|
|
return
|
|
}
|
|
this.model = r.snake
|
|
if (r.ate) {
|
|
this.foodModel = snake.spawnFood(this.model, GRID)
|
|
if (!this.foodModel) {
|
|
this.over = true
|
|
this.endText = 'YOU WIN'
|
|
this.stopTimer()
|
|
}
|
|
}
|
|
this.rebuild()
|
|
if (r.ate) {
|
|
this.records.record(this.model.length - 3)
|
|
this.startTimer()
|
|
}
|
|
},
|
|
selectMode(mode) {
|
|
if (this.destroyed || !this.visible || (!this.paused && !this.over)) return
|
|
if ((mode !== 'classic' && mode !== 'wrap') || mode === this.mode) return
|
|
this.mode = mode
|
|
this.modeText = mode === 'wrap' ? 'WRAP' : 'CLASSIC'
|
|
this.reset()
|
|
this.paused = true
|
|
this.stopTimer()
|
|
},
|
|
restart() {
|
|
if (this.destroyed || this.visible === false) return
|
|
this.reset()
|
|
this.startTimer()
|
|
},
|
|
onSwipe(e) {
|
|
if (this.over || this.paused || this.destroyed || this.visible === false) 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
|
|
const last = this.queue.length ? this.queue[this.queue.length - 1] : this.dir
|
|
if (this.queue.length >= 2 || (last.x === v.x && last.y === v.y)) return
|
|
if (snake.turn(last, v) === last) return
|
|
this.queue.push(v)
|
|
},
|
|
// Crown rotation: firmware routes it into this container's scroll offset
|
|
// (docs/CROWN.md). Accumulate deltas, one 90° turn per CROWN_STEP_PX, then
|
|
// re-center so the board never visibly moves.
|
|
onCrownScroll(e) {
|
|
if (this.destroyed) return
|
|
const top = e && typeof e.scrollTop === 'number' ? e.scrollTop : 0
|
|
const center = 233
|
|
const d = top - (this.crownAnchor == null ? center : this.crownAnchor)
|
|
this.crownAnchor = top
|
|
if (d === 0) return
|
|
// keep the dial pinned: snap back to center immediately
|
|
try { this.$element('scroller').scrollTo({ top: center }) } catch (err) {}
|
|
this.crownAnchor = center
|
|
if (this.over || this.paused || !this.visible) return
|
|
this.crownAcc = (this.crownAcc || 0) + d
|
|
while (Math.abs(this.crownAcc) >= CROWN_STEP_PX) {
|
|
const clockwise = this.crownAcc > 0
|
|
this.crownAcc += clockwise ? -CROWN_STEP_PX : CROWN_STEP_PX
|
|
const base = this.queue.length ? this.queue[this.queue.length - 1] : this.dir
|
|
if (this.queue.length >= 2) return
|
|
const v = rotate90(base, clockwise)
|
|
if (v.x === base.x && v.y === base.y) return
|
|
this.queue.push(v)
|
|
}
|
|
},
|
|
onTap() {
|
|
if (this.destroyed || !this.visible || this.over) return
|
|
this.paused = !this.paused
|
|
this.queue = []
|
|
this.startTimer()
|
|
},
|
|
rebuild() {
|
|
const pieces = snake.renderPieces(this.model, this.dir, this.mode === 'wrap' ? GRID : 0)
|
|
const out = []
|
|
for (let i = 0; i < this.model.length; i++) {
|
|
const s = this.model[i]
|
|
out.push({
|
|
left: (OFFSET + s.x * CELL) + 'px',
|
|
top: (OFFSET + s.y * CELL) + 'px',
|
|
src: '/common/tex/' + pieces[i] + '.png'
|
|
})
|
|
}
|
|
this.snake = out
|
|
this.hasFood = !!this.foodModel
|
|
if (this.hasFood) this.food = {
|
|
left: (OFFSET + this.foodModel.x * CELL) + 'px',
|
|
top: (OFFSET + this.foodModel.y * CELL) + 'px'
|
|
}
|
|
this.scoreText = 'SCORE ' + (this.model.length - 3)
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.page {
|
|
width: 466px; height: 466px;
|
|
background-color: #000000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* scrollable travel: dial centered in 932px content, 233px of crown travel
|
|
each way; onReady + onscroll snap back to the center offset (233) */
|
|
padding-top: 233px;
|
|
padding-bottom: 233px;
|
|
}
|
|
.dial {
|
|
width: 466px; height: 466px;
|
|
}
|
|
.board {
|
|
position: absolute; left: 49px; top: 49px;
|
|
width: 368px; height: 368px;
|
|
}
|
|
.seg {
|
|
position: absolute;
|
|
width: 32px; height: 32px;
|
|
}
|
|
.food {
|
|
position: absolute;
|
|
width: 32px; height: 32px;
|
|
}
|
|
.score {
|
|
width: 152px; height: 20px;
|
|
color: #d8edce; font-size: 18px; text-align: center;
|
|
}
|
|
.best {
|
|
width: 152px; height: 20px;
|
|
color: #f3bd60; font-size: 17px; text-align: center;
|
|
}
|
|
.hud {
|
|
position: absolute; left: 157px; top: 16px;
|
|
width: 152px; height: 40px;
|
|
flex-direction: column; align-items: center;
|
|
}
|
|
.footer {
|
|
position: absolute; left: 143px; top: 410px;
|
|
width: 180px; height: 36px;
|
|
flex-direction: column; align-items: center;
|
|
}
|
|
.modeLabel {
|
|
width: 180px; height: 18px;
|
|
color: #cee4bd; font-size: 17px; text-align: center;
|
|
}
|
|
.hint {
|
|
width: 180px; height: 18px;
|
|
color: #adb7c6; font-size: 16px; text-align: center;
|
|
}
|
|
.overlay {
|
|
position: absolute; left: 93px; top: 123px;
|
|
width: 280px; height: 220px;
|
|
background-color: #101923; border-radius: 18px;
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
}
|
|
.overText {
|
|
width: 260px; height: 40px;
|
|
color: #ffffff; font-size: 30px; text-align: center;
|
|
}
|
|
.overSub {
|
|
width: 260px; height: 30px;
|
|
color: #f3bd60; font-size: 22px; text-align: center;
|
|
}
|
|
.retry {
|
|
width: 216px; height: 56px;
|
|
background-color: #80bf55; border-radius: 12px;
|
|
color: #101923; font-size: 23px; text-align: center;
|
|
}
|
|
.overHint {
|
|
width: 260px; height: 30px;
|
|
color: #adb7c6; font-size: 17px; text-align: center;
|
|
}
|
|
.modes {
|
|
width: 240px; height: 44px;
|
|
flex-direction: row; justify-content: space-between;
|
|
}
|
|
.modeButton {
|
|
width: 116px; height: 44px;
|
|
background-color: #304252; border-radius: 10px;
|
|
color: #ffffff; font-size: 18px; text-align: center;
|
|
}
|
|
</style>
|