本文讲述了作者尝试使用Vue和HTML来实现一个自动吃满的贪吃蛇游戏的过程。虽然目前实现的功能尚不能完全达到目标，但作者在学习算法后有所进步。期待有经验的大佬分享思路，帮助完善。
刚工作那会儿在网上看到别人的自动吃满的贪吃蛇，就想着自己也写一个，结果是基本活不过半屏幕。
最近刷了一些算法，突然觉得自己能行了，就写了个h5版的，结果还是差一些，才能吃满。
不知道有没有大佬，给点思路。
h5贪吃蛇源码(需要引入vue)
<style>
html, body {
height: 90%;
}
#app {
width: 100%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.one {
display: flex;
background: rgba(0, 0, 255, 0.28);
}
.two {
width: 40px;
height: 40px;
border: aliceblue solid 1px;
}
.snack {
background: rgba(0, 128, 0, 0.22);
}
.dian {
background: rgba(255, 255, 0, 0.21);
}
.tou {
background: rgba(255, 0, 0, 0.3);
}
.wei {
background: rgba(0, 92, 128, 0.22);
}
</style>
<body>
<div id="app">
<input id="input" type="text" @keydown="keyPress" style="width: 0;height: 0">
<div @click="begin">开始{{cd}}</div>
<div v-for="(one,index) in list" class="one">
<div v-for="(two,index2) in list[index]" class="two"
:class="{'snack':two == 1,'dian':index==dian[0]&&index2==dian[1],'tou':index==tou.y&&index2==tou.x,'wei':index==wei.y&&index2==wei.x}">
</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
let timer = null;
let vm = new Vue({
el: "#app",
data() {
return {
list: [],
dian: [5, 5],
temp: 2,
fx: 1,
tou: {},
wei: {},
cd: 0,
}
},
methods: {
keyPress(v) {
// this.fx = v.keyCode - 36
},
begin() {
timer = setInterval(() => {
this.move()
this.auto();
this.list[this.wei.y][this.wei.x] = 1
}, 10)
},
move() {
switch (this.fx) {
case 1:
this.snack(this.tou.x - 1, this.tou.y)
break
case 2:
this.snack(this.tou.x, this.tou.y - 1)
break
case 3:
this.snack(this.tou.x + 1, this.tou.y)
break
case 4:
this.snack(this.tou.x, this.tou.y + 1)
break
default:
alert("未知方向")
clearInterval(timer)
}
},
auto() {
let x = this.tou.x;
let y = this.tou.y
// this.rightStain(x, y)
this.isOne(x, y)
let canList = []
if (y < 14 && this.list[y + 1][x] === this.temp) {
canList.push(4)
}
if (y > 0 && this.list[y - 1][x] === this.temp) {
canList.push(2)
}
if (x > 0 && this.list[y][x - 1] === this.temp) {
canList.push(1)
}
if (x < 14 && this.list[y][x + 1] === this.temp) {
canList.push(3)
}
console.log(canList)
let yx = [];
if (y < 14 && this.dian[0] > y) {
if (this.list[y + 1][x] === this.temp) {
yx.push(4)
}
}
if (y > 0 && this.dian[0] < y) {
if (this.list[y - 1][x] === this.temp) {
yx.push(2)
}
}
if (x > 0 && this.dian[1] < x) {
if (this.list[y][x - 1] === this.temp) {
yx.push(1)
}
}
if (x < 14 && this.dian[1] > x) {
if (this.list[y][x + 1] === this.temp) {
yx.push(3)
}
}
if (yx.length > 0) {
this.fx = yx[Math.floor(Math.random() * yx.length)]
return
}
this.fx = canList[Math.floor(Math.random() * canList.length)]
},
isOne(x, y) {
let ex = this.wei.x
let ey = this.wei.y
this.list[ey][ex] = 0
let lists = this.getCanRunList(x, y);
console.log("可以的移动的")
console.log(lists)
let cans = [];
lists.forEach(o=>{
let lists = this.getCanRunList(o[0], o[1])
if (lists.length === 0){
return
}
this.temp++
this.list[o[1]][o[0]] = 1
let g = 0
this.stain(ex, ey)
this.list.forEach(one=>{
one.forEach(two=>{
if (two === this.temp){
g++
}
})
})
if (g+this.cd === 225){
cans.push(o)
}
this.list[o[1]][o[0]] = 0
})
console.log("不分割地址")
console.log(cans)
if (cans.length > 0){
this.temp++
cans.forEach(o=>{
this.list[o[1]][o[0]] = this.temp
})
}else {
// alert("必须分")
// clearInterval(timer)
this.rightStain(x,y)
}
// if (lists.length > 1) {
// this
// can.forEach(l => this.list[l[1]][l[0]] = this.temp)
// } else {
// this.rightStain(x, y)
// }
},
getCanRunList(x, y) {
let lists = []
if (x > 0 && this.list[y][x - 1] !== 1) {
lists.push([x - 1,y])
}
if (x < 14 && this.list[y][x + 1] !== 1) {
lists.push([x+1,y])
}
if (y > 0 && this.list[y-1][x] !== 1) {
lists.push([x,y - 1])
}
if (y < 14 && this.list[y+1][x] !== 1) {
lists.push([x,y + 1])
}
return lists;
},
rightStain(x, y) {
this.temp++
let ex = this.wei.x
let ey = this.wei.y
this.list[ey][ex] = 0
if (this.stainOne(x + 1, y)) {
this.stain(x + 1, y)
if (this.list[ey][ex] === this.temp) {
return
}
}
this.temp++
if (this.stainOne(x, y - 1)) {
this.stain(x, y - 1)
if (this.list[ey][ex] === this.temp) {
return
}
}
this.temp++
if (this.stainOne(x, y + 1)) {
this.stain(x, y + 1)
if (this.list[ey][ex] === this.temp) {
return
}
}
this.temp++
if (this.stainOne(x - 1, y)) {
this.stain(x - 1, y)
}
},
stain(x, y) {
if (this.stainOne(x + 1, y)) {
this.stain(x + 1, y)
}
if (this.stainOne(x - 1, y)) {
this.stain(x - 1, y)
}
if (this.stainOne(x, y + 1)) {
this.stain(x, y + 1)
}
if (this.stainOne(x, y - 1)) {
this.stain(x, y - 1)
}
},
stainOne(x, y) {
if (x < 0 || x >= 15 || y < 0 || y >= 15) {
return false
}
if (this.list[y][x] === 1 || this.list[y][x] === this.temp) {
return false
}
this.list[y][x] = this.temp
return true
},
snack(x, y) {
// console.log(x + 'ccc' + y)
if (x < 0 || x >= 15 || y < 0 || y >= 15) {
alert("越界")
clearInterval(timer)
return
}
this.list[this.wei.y][this.wei.x] = 0
if (this.list[y][x] === 1) {
alert("结束")
clearInterval(timer)
return;
}
vm.$set(this.list[y], x, 1);
if (this.dian[0] === y && this.dian[1] === x) {
this.list[this.wei.y][this.wei.x] = 1
let c = 15 * 15 - ++this.cd
if (c === 0) {
alert('完成')
clearInterval(timer)
return
}
let temp = Math.floor(Math.random() * c)
let tempTime = 0;
for (let i = 0; i < this.list.length && tempTime <= temp; i++) {
for (let j = 0; j < this.list[i].length; j++) {
if (this.list[i][j] !== 1) {
tempTime++;
if (tempTime === temp) {
this.dian[0] = i
this.dian[1] = j
break
}
}
}
}
} else {
this.list[this.wei.y][this.wei.x] = 0
this.wei = this.wei.previous
}
vm.$set(this.list[y], x, 1);
let n = {
x: x,
y: y,
next: this.tou
}
this.tou.previous = n
this.tou = n
}
},
created() {
for (let i = 0; i < 15; i++) {
this.list.push([])
for (let j = 0; j < 15; j++) {
this.list[i].push(2)
}
}
this.list[7][7] = 1
this.list[7][8] = 1
this.list[7][9] = 1
this.tou = {
x: 7,
y: 7,
next: null,
previous: null
}
this.tou.next = {
x: 8,
y: 7,
next: null,
previous: this.tou
}
this.wei = {
x: 9,
y: 7,
next: null,
previous: this.tou.next
}
this.tou.next.next = this.wei
this.cd = 3
}
})
function cf1(one) {
// console.log(one)
}
function cf2(one) {
// console.log(one)
}
function cf3(one) {
// console.log(one)
}
function cf4() {
// console.log(one)
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
