fixed holes in snake
This commit is contained in:
199
src/App.vue
199
src/App.vue
@@ -8,70 +8,70 @@ const snake = ref(spawnSnake())
|
|||||||
const score = ref(0)
|
const score = ref(0)
|
||||||
|
|
||||||
interface Cell {
|
interface Cell {
|
||||||
x: number
|
x: number
|
||||||
y: number
|
y: number
|
||||||
color: 'white' | 'yellow' | 'green'
|
color: 'white' | 'yellow' | 'green'
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Snake {
|
interface Snake {
|
||||||
cell: Cell
|
cell: Cell
|
||||||
history: Cell[]
|
history: Cell[]
|
||||||
length: number
|
length: number
|
||||||
}
|
}
|
||||||
|
|
||||||
function genGrid(length: number, height: number) {
|
function genGrid(length: number, height: number) {
|
||||||
const grid: Cell[][] = []
|
const grid: Cell[][] = []
|
||||||
for (let i = 0; i < length; i++) {
|
for (let i = 0; i < length; i++) {
|
||||||
const currentRow: Cell[] = []
|
const currentRow: Cell[] = []
|
||||||
for (let j = 0; j < height; j++) {
|
for (let j = 0; j < height; j++) {
|
||||||
currentRow[j] = {
|
currentRow[j] = {
|
||||||
x: i,
|
x: i,
|
||||||
y: j,
|
y: j,
|
||||||
color: 'white'
|
color: 'white'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
grid[i] = currentRow
|
grid[i] = currentRow
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
console.log(grid)
|
console.log(grid)
|
||||||
|
|
||||||
return grid
|
return grid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function spawnCoin() {
|
function spawnCoin() {
|
||||||
const cell = randomCell()
|
const cell = randomCell()
|
||||||
cell.color = 'yellow'
|
cell.color = 'yellow'
|
||||||
return cell
|
return cell
|
||||||
}
|
}
|
||||||
|
|
||||||
function spawnSnake(): Snake {
|
function spawnSnake(): Snake {
|
||||||
const row = random(grid.value)
|
const row = random(grid.value)
|
||||||
const cell = random(row)
|
const cell = random(row)
|
||||||
|
|
||||||
cell.color = 'green'
|
cell.color = 'green'
|
||||||
return {
|
return {
|
||||||
cell: cell,
|
cell: cell,
|
||||||
history: [cell],
|
history: [cell],
|
||||||
length: 3
|
length: 3
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function random<T>(array: Array<T>) {
|
function random<T>(array: Array<T>) {
|
||||||
return array[Math.floor(Math.random() * array.length)]
|
return array[Math.floor(Math.random() * array.length)]
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function randomCell() {
|
function randomCell() {
|
||||||
const randomRow = random(grid.value)
|
const randomRow = random(grid.value)
|
||||||
const randomCell = random(randomRow)
|
const randomCell = random(randomRow)
|
||||||
|
|
||||||
return randomCell
|
return randomCell
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveSnake(x: number, y: number) {
|
function moveSnake(x: number, y: number) {
|
||||||
const current = snake.value.cell
|
const current = snake.value.cell
|
||||||
const newCell = getCell(current.x + x, current.y + y);
|
const newCell = getCell(current.x + x, current.y + y);
|
||||||
|
|
||||||
if (newCell === undefined || newCell.color === 'green') {
|
if (newCell === undefined || newCell.color === 'green') {
|
||||||
@@ -79,18 +79,23 @@ function moveSnake(x: number, y: number) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
newCell.color = 'green'
|
newCell.color = 'green'
|
||||||
snake.value.cell = newCell
|
snake.value.cell = newCell
|
||||||
snake.value.history.push(newCell)
|
snake.value.history.push(newCell)
|
||||||
|
|
||||||
if (snake.value.history.length > length) {
|
if (snake.value.history.length > length) {
|
||||||
const currentLength = snake.value.history.length
|
const currentLength = snake.value.history.length
|
||||||
const allowedLength = snake.value.length
|
const allowedLength = snake.value.length
|
||||||
const toDelete = snake.value.history.slice(0, currentLength - allowedLength)
|
|
||||||
for (const cell of toDelete) {
|
if (currentLength > allowedLength) {
|
||||||
cell.color = 'white'
|
const toDelete = snake.value.history.shift()
|
||||||
}
|
|
||||||
}
|
if (toDelete !== undefined) {
|
||||||
|
toDelete.color = 'white'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -126,45 +131,45 @@ function killCoin() {
|
|||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
|
|
||||||
if (direction.value === undefined) {
|
if (direction.value === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (direction.value) {
|
switch (direction.value) {
|
||||||
case 'left':
|
case 'left':
|
||||||
moveSnake(-1, 0)
|
moveSnake(-1, 0)
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
moveSnake(1, 0)
|
moveSnake(1, 0)
|
||||||
break
|
break
|
||||||
case 'top':
|
case 'top':
|
||||||
moveSnake(0, -1)
|
moveSnake(0, -1)
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
moveSnake(0, 1)
|
moveSnake(0, 1)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
|
if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
|
||||||
snake.value.length++
|
snake.value.length++
|
||||||
currentCoin.value = spawnCoin()
|
currentCoin.value = spawnCoin()
|
||||||
score.value++
|
score.value++
|
||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
|
|
||||||
function keydown(event: KeyboardEvent) {
|
function keydown(event: KeyboardEvent) {
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case 'ArrowRight': direction.value = 'right'
|
case 'ArrowRight': direction.value = 'right'
|
||||||
break
|
break
|
||||||
case 'ArrowLeft': direction.value = 'left'
|
case 'ArrowLeft': direction.value = 'left'
|
||||||
break
|
break
|
||||||
case 'ArrowUp': direction.value = 'top'
|
case 'ArrowUp': direction.value = 'top'
|
||||||
break
|
break
|
||||||
case 'ArrowDown': direction.value = 'bottom'
|
case 'ArrowDown': direction.value = 'bottom'
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('keydown', keydown)
|
window.addEventListener('keydown', keydown)
|
||||||
@@ -172,35 +177,35 @@ window.addEventListener('keydown', keydown)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1>Score {{ score }}</h1>
|
<h1>Score {{ score }}</h1>
|
||||||
<div class="grid" @keyup="keydown($event)">
|
<div class="grid" @keyup="keydown($event)">
|
||||||
<div class="row" v-for="row in grid">
|
<div class="row" v-for="row in grid">
|
||||||
<div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
|
<div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
|
||||||
:style="{ backgroundColor: cell.color }">
|
:style="{ backgroundColor: cell.color }">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.grid {
|
.grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user