想写贪吃蛇的,写成吃豆豆了,由于没学键盘事件,只能靠点击来移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.board {
width: 1000px;
height: 500px;
background-color: black;
display: flex;
flex-wrap: wrap;
margin: 10px auto;
}
.grid {
font-size: 6px;
text-align: center;
line-height: 8px;
color: white;
width: 48px;
height: 23px;
background-color: blue;
border: 1px dashed #000;
}
.startgamebtn {
width: 98px;
height: 48px;
background-color: blue;
border: 1px solid #000;
}
.startgame {
width: 98px;
height: 48px;
margin: 0 auto;
}
.white {
background-color: white !important;
}
.control1 {
display: flex;
justify-content: center;
}
.control2 {
display: flex;
justify-content: center;
}
.top {
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid pink;
text-align: center;
line-height: 50px;
}
.bottom,
.left,
.right {
text-align: center;
border: 1px solid pink;
width: 50px;
height: 50px;
line-height: 50px;
background-color: aqua;
}
.sss {
position: fixed;
right: 25px;
width: 150px;
height: 200px;
top: 0px;
background-color: #000;
color: wheat;
font-size: 44px;
white-space: initial;
}
.stepsee {
width: 1000px;
height: 50px;
background-color: red;
color: white;
font-size: 40px;
text-align: center;
line-height: 50px;
margin: 0 auto;
}
.gold {
background-color: gold;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="board">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
<div class="startgame">
<button class="startgamebtn">
</button>
</div>
<div class="control1">
<div class="top">
上
</div>
</div>
<div class="control2">
<div class="left">
左
</div>
<div class="bottom">
下
</div>
<div class="right">
右
</div>
</div>
<div class="stepsee">
1
</div>
<script>
let stepnum = 0
let scount = 0
let grids = document.querySelectorAll('.grid')
let len = grids.length;
let n = 20;
let res = []
for (i = 0; i < n; i++) {
res.push([0])
for (j = 0; j < n; j++) {
res[i].push([0])
}
}
let steptrace = []
let lineNum = len % n === 0 ? len / n : Math.floor((len / n) + 1);
let state = [
[0, -1],
[1, 0],
[0, 1],
[-1, 0]
]
let pos = [0, 0]
let x = 0;
let y = 0;
let stateindicator = 1;
for (let i = 0; i < lineNum; i++) {
let jj = 0
for (let j = i * n; j < i * n + n; j++) {
res[i][jj] = grids[j]
jj++
}
// let temp = grids.slice(i * n, i * n + n);
// res.push(temp);
}
console.log(res);
console.log(grids)
let startgamebtn = document.querySelector('.startgamebtn')
// startgamebtn.addEventListener('click',function(){
// setInterval(function(){
// while(1){
// }
// },100)
// })
// res[0][0].classList.add('white')
startgamebtn.addEventListener('click', function() {
stateindicator += 1
})
// 物体模块
let treasureindicator = 0;
let treasuetrace = [];
// 物体模块
let top1 = document.querySelector('.top')
let right = document.querySelector('.right')
let bottom = document.querySelector('.bottom')
let left = document.querySelector('.left')
top1.addEventListener('click', function() {
stateindicator = 0
})
right.addEventListener('click', function() {
stateindicator = 1
})
bottom.addEventListener('click', function() {
stateindicator = 2
})
left.addEventListener('click', function() {
stateindicator = 3
})
// startgamebtn.innerHTML
function playgame() {
setInterval(function() {
stepnum++
// treasue module
treasureindicator++
if (treasureindicator % 5 == 0) {
let treasure = [Math.floor(Math.random() * 20), Math.floor(Math.random() * 20)]
res[treasure[0]][treasure[1]].classList.add('gold')
treasuetrace.push([treasure[0], treasure[1]])
console.log(treasuetrace);
}
// treasue module
x += state[stateindicator % 4][0]
y += state[stateindicator % 4][1]
if (x >= n || x < 0 || y >= n || y < 0) {
x = 5;
y = 5;
}
let clear1 = document.querySelector('.white')
if (clear1) {
clear1.classList.remove('white')
}
res[y][x].classList.add('white')
if (stateindicator === 0) {
res[y][x].innerHTML = ''
} else if (stateindicator === 1) {
res[y][x].innerHTML = ''
} else if (stateindicator === 2) {
res[y][x].innerHTML = ''
} else if (stateindicator === 3) {
res[y][x].innerHTML = ''
}
let treasuetracecmp = [x, y]
for (let ii = 0; ii < treasuetrace.length; ii++) {
if (y == treasuetrace[ii][0] && x == treasuetrace[ii][1]) {
console.log(x);
console.log(y);
console.log([x, y]);
console.log(treasuetrace[ii]);
// treasuetrace.pop(ii)
res[y][x].classList.remove('gold')
res[y][x].classList.add('blue')
scount++;
let sss = document.querySelector('.sss')
sss.innerHTML = `score:
${scount}`
treasuetrace.splice(ii, 1)
}
}
let stepsee = document.querySelector('.stepsee')
stepsee.innerHTML = `step: ${stepnum}`
}, 1000);
}
playgame()
document.write(
`<div class="sss">score:
${scount}
</div>`)
</script>
</body>
</html>