返回主页有问题
This commit is contained in:
parent
2f1fdd72c2
commit
9b86fbfc93
13
web/snake/main.html
Normal file
13
web/snake/main.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>贪吃蛇</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
672
web/snake/script.js
Normal file
672
web/snake/script.js
Normal file
@ -0,0 +1,672 @@
|
|||||||
|
// 随机数
|
||||||
|
function random(min, max) {
|
||||||
|
if(max){
|
||||||
|
return Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return Math.floor(Math.random() * 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 定义尺寸
|
||||||
|
const lengthX=50
|
||||||
|
const lengthY=50
|
||||||
|
const backWidth=16
|
||||||
|
const backHeight=16
|
||||||
|
// 游戏当前模式
|
||||||
|
let gameMode=null
|
||||||
|
// 蛇数组
|
||||||
|
let snakeAll=[]
|
||||||
|
// 食物模型
|
||||||
|
const food=document.createElement('div')
|
||||||
|
food.style.width=backWidth+'px'
|
||||||
|
food.style.height=backHeight+'px'
|
||||||
|
food.classList.add('food')
|
||||||
|
for(let i=0;i<4;i++){
|
||||||
|
let foodSingle=document.createElement('div')
|
||||||
|
foodSingle.classList.add('foodSingle')
|
||||||
|
food.appendChild(foodSingle)
|
||||||
|
}
|
||||||
|
// 食物总数
|
||||||
|
let foodNumber=0
|
||||||
|
let foodNumberNow=0
|
||||||
|
// 颜色
|
||||||
|
let color=['AliceBlue','PaleGoldenrod','Cyan','LightBlue','LightCyan','Beige','LightGrey','LightGreen']
|
||||||
|
// 创建地图
|
||||||
|
const map=document.createElement('div')
|
||||||
|
map.style.width=lengthX*backWidth+'px'
|
||||||
|
map.style.height=lengthY*backHeight+'px'
|
||||||
|
map.classList.add('map')
|
||||||
|
document.body.appendChild(map)
|
||||||
|
// 添加地图格子
|
||||||
|
let mapBlock=[]
|
||||||
|
for(let i=0;i<lengthX;i++){
|
||||||
|
mapBlock[i]=[]
|
||||||
|
}
|
||||||
|
for(let i=0;i<lengthX;i++){
|
||||||
|
for(let j=0;j<lengthY;j++){
|
||||||
|
mapBlock[i][j]=document.createElement('div')
|
||||||
|
mapBlock[i][j].style.width=backWidth+'px'
|
||||||
|
mapBlock[i][j].style.height=backHeight+'px'
|
||||||
|
mapBlock[i][j].classList.add('mapBlock')
|
||||||
|
mapBlock[i][j].dataset.mapBlockX=`${i}`
|
||||||
|
mapBlock[i][j].dataset.mapBlockY=`${j}`
|
||||||
|
map.appendChild(mapBlock[i][j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 开始界面
|
||||||
|
const mapTextNameDiv=document.createElement('div')
|
||||||
|
const mapTextName=document.createElement('div')
|
||||||
|
|
||||||
|
mapTextName.classList.add('mapTextName')
|
||||||
|
mapTextName.innerText='贪吃蛇'
|
||||||
|
|
||||||
|
mapTextNameDiv.appendChild(mapTextName)
|
||||||
|
|
||||||
|
map.appendChild(mapTextNameDiv)
|
||||||
|
|
||||||
|
const mapTextStartDiv=document.createElement('div')
|
||||||
|
mapTextStartDiv.classList.add('mapTextStart')
|
||||||
|
|
||||||
|
const mapTextStartSingle=document.createElement('div')
|
||||||
|
mapTextStartSingle.innerText='单人'
|
||||||
|
mapTextStartDiv.appendChild(mapTextStartSingle)
|
||||||
|
mapTextStartSingle.addEventListener('click', singleMode)
|
||||||
|
|
||||||
|
const mapTextStartDouble=document.createElement('div')
|
||||||
|
mapTextStartDouble.innerText='双人'
|
||||||
|
mapTextStartDiv.appendChild(mapTextStartDouble)
|
||||||
|
mapTextStartDouble.addEventListener('click', doubleMode)
|
||||||
|
|
||||||
|
|
||||||
|
const mapTextStartAI=document.createElement('div')
|
||||||
|
mapTextStartAI.innerText='人机'
|
||||||
|
mapTextStartDiv.appendChild(mapTextStartAI)
|
||||||
|
mapTextStartAI.addEventListener('click', aiMode)
|
||||||
|
|
||||||
|
|
||||||
|
map.appendChild(mapTextStartDiv)
|
||||||
|
|
||||||
|
mapTextStartDiv.addEventListener('click',function(){
|
||||||
|
mapTextNameDiv.style.display='none'
|
||||||
|
mapTextStartDiv.style.display='none'
|
||||||
|
})
|
||||||
|
// 辅助操作界面
|
||||||
|
const playerOneDiv=document.createElement('div')
|
||||||
|
playerOneDiv.classList.add('playerOne')
|
||||||
|
|
||||||
|
const playerOneText=document.createElement('p')
|
||||||
|
playerOneText.innerText="一号玩家"
|
||||||
|
playerOneDiv.appendChild(playerOneText)
|
||||||
|
|
||||||
|
const playerOneScoreDiv=document.createElement('div')
|
||||||
|
const playerOneScoreText=document.createElement('p')
|
||||||
|
playerOneScoreText.innerText="长度："
|
||||||
|
const playerOneScore=document.createElement('p')
|
||||||
|
playerOneScoreDiv.appendChild(playerOneScoreText)
|
||||||
|
playerOneScoreDiv.appendChild(playerOneScore)
|
||||||
|
playerOneDiv.appendChild(playerOneScoreDiv)
|
||||||
|
|
||||||
|
const playerOneMove=document.createElement('div')
|
||||||
|
playerOneMove.innerText="移动：W A S D"
|
||||||
|
playerOneDiv.appendChild(playerOneMove)
|
||||||
|
|
||||||
|
const playerTwoDiv=document.createElement('div')
|
||||||
|
playerTwoDiv.classList.add('playerTwo')
|
||||||
|
|
||||||
|
const playerTwoText=document.createElement('p')
|
||||||
|
playerTwoText.innerText="二号玩家"
|
||||||
|
playerTwoDiv.appendChild(playerTwoText)
|
||||||
|
|
||||||
|
const playerTwoScoreDiv=document.createElement('div')
|
||||||
|
const playerTwoScoreText=document.createElement('p')
|
||||||
|
playerTwoScoreText.innerText="长度："
|
||||||
|
const playerTwoScore=document.createElement('p')
|
||||||
|
playerTwoScoreDiv.appendChild(playerTwoScoreText)
|
||||||
|
playerTwoScoreDiv.appendChild(playerTwoScore)
|
||||||
|
playerTwoDiv.appendChild(playerTwoScoreDiv)
|
||||||
|
|
||||||
|
const playerTwoMove=document.createElement('div')
|
||||||
|
playerTwoMove.innerText="移动：↑↓←→"
|
||||||
|
playerTwoDiv.appendChild(playerTwoMove)
|
||||||
|
|
||||||
|
document.body.appendChild(playerOneDiv)
|
||||||
|
document.body.appendChild(playerTwoDiv)
|
||||||
|
// 随机生成食物函数
|
||||||
|
function foodCreate(){
|
||||||
|
if(foodNumberNow<foodNumber){
|
||||||
|
const foodX=random(0,lengthX)
|
||||||
|
const foodY=random(0,lengthY)
|
||||||
|
if (mapBlock[foodX][foodY].childNodes.length===0){
|
||||||
|
mapBlock[foodX][foodY].appendChild(food.cloneNode(true))
|
||||||
|
foodNumberNow+=1
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
foodCreate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 吃掉食物函数
|
||||||
|
function foodEat(foodParent,snakeArr,snake){
|
||||||
|
foodParent.removeChild(foodParent.childNodes[0])
|
||||||
|
snakeArr.unshift(snake)
|
||||||
|
foodParent.appendChild(snake)
|
||||||
|
foodNumberNow-=1
|
||||||
|
foodCreate()
|
||||||
|
if(gameMode==='single'||gameMode==='double'||gameMode==='ai'&&snake.dataset.id==='0'){
|
||||||
|
playerOneScore.innerText=`${snakeAll[0].snake.length}`
|
||||||
|
}
|
||||||
|
else if(gameMode==='double'&&snake.dataset.id==='1'){
|
||||||
|
playerTwoScore.innerText=`${snakeAll[1].snake.length}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 生成蛇函数
|
||||||
|
function snakeCreate(){
|
||||||
|
const snake=[]
|
||||||
|
let snakeX=random(15,lengthX-15)
|
||||||
|
let snakeY=random(15,lengthY-15)
|
||||||
|
const snakeColor=color[random(0,color.length)]
|
||||||
|
const snakeLength=5
|
||||||
|
const direction=random(0,4)
|
||||||
|
for (let i=0;i<snakeLength;i++){
|
||||||
|
switch(direction){
|
||||||
|
case 0:
|
||||||
|
if(mapBlock[snakeX+i][snakeY].childNodes.length!==0){
|
||||||
|
snakeCreate()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
if(mapBlock[snakeX-i][snakeY].childNodes.length!==0){
|
||||||
|
snakeCreate()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
if(mapBlock[snakeX][snakeY+i].childNodes.length!==0){
|
||||||
|
snakeCreate()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
if(mapBlock[snakeX][snakeY-i].childNodes.length!==0){
|
||||||
|
snakeCreate()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i=0;i<snakeLength;i++){
|
||||||
|
snake[i]=document.createElement('div')
|
||||||
|
snake[i].classList.add('snake')
|
||||||
|
snake[i].style.width=backWidth+'px'
|
||||||
|
snake[i].style.height=backHeight+'px'
|
||||||
|
snake[i].style.background=snakeColor
|
||||||
|
snake[i].dataset.id=`${snakeAll.length}`
|
||||||
|
switch(direction){
|
||||||
|
case 0:
|
||||||
|
mapBlock[snakeX+i][snakeY].appendChild(snake[i])
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
mapBlock[snakeX-i][snakeY].appendChild(snake[i])
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
mapBlock[snakeX][snakeY+i].appendChild(snake[i])
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
mapBlock[snakeX][snakeY-i].appendChild(snake[i])
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const snakeInfo={
|
||||||
|
snake:snake,
|
||||||
|
direction:direction,
|
||||||
|
directionTest:direction,
|
||||||
|
}
|
||||||
|
console.log(snakeInfo)
|
||||||
|
snakeAll.push(snakeInfo)
|
||||||
|
}
|
||||||
|
// 移动速度
|
||||||
|
moveSpeed=100
|
||||||
|
// 移动函数
|
||||||
|
function move(){
|
||||||
|
let parentNode
|
||||||
|
let snake
|
||||||
|
for (let i = 0; i < snakeAll.length; i++) {
|
||||||
|
snake=snakeAll[i].snake[0].cloneNode(true)
|
||||||
|
if(snakeAll[i].directionTest===0){
|
||||||
|
if(snakeAll[i].direction===1){
|
||||||
|
snakeAll[i].directionTest=snakeAll[i].direction
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeAll[i].direction=snakeAll[i].directionTest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(snakeAll[i].directionTest===1){
|
||||||
|
if(snakeAll[i].direction===0){
|
||||||
|
snakeAll[i].directionTest=snakeAll[i].direction
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeAll[i].direction=snakeAll[i].directionTest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(snakeAll[i].directionTest===2){
|
||||||
|
if(snakeAll[i].direction===3){
|
||||||
|
snakeAll[i].directionTest=snakeAll[i].direction
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeAll[i].direction=snakeAll[i].directionTest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(snakeAll[i].directionTest===3){
|
||||||
|
if(snakeAll[i].direction===2){
|
||||||
|
snakeAll[i].directionTest=snakeAll[i].direction
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeAll[i].direction=snakeAll[i].directionTest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
switch(snakeAll[i].directionTest){
|
||||||
|
case 0:
|
||||||
|
parentNode=snakeAll[i].snake[0].parentNode
|
||||||
|
if (Number(parentNode.dataset.mapBlockX)-1>=0 && mapBlock[Number(parentNode.dataset.mapBlockX)-1][Number(parentNode.dataset.mapBlockY)].childNodes.length===0){
|
||||||
|
snakeAll[i].snake.unshift(snake)
|
||||||
|
mapBlock[Number(parentNode.dataset.mapBlockX)-1][Number(parentNode.dataset.mapBlockY)].appendChild(snake)
|
||||||
|
snakeAll[i].snake[snakeAll[i].snake.length-1].parentNode.removeChild(snakeAll[i].snake[snakeAll[i].snake.length-1])
|
||||||
|
snakeAll[i].snake.pop()
|
||||||
|
}
|
||||||
|
else if(Number(parentNode.dataset.mapBlockX)-1<=0){
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
if(mapBlock[Number(parentNode.dataset.mapBlockX)-1][Number(parentNode.dataset.mapBlockY)].childNodes[0].classList.contains('food')){
|
||||||
|
foodEat(mapBlock[Number(parentNode.dataset.mapBlockX)-1][Number(parentNode.dataset.mapBlockY)],snakeAll[i].snake,snake)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
parentNode=snakeAll[i].snake[0].parentNode
|
||||||
|
if (Number(parentNode.dataset.mapBlockX)+1<lengthX && mapBlock[Number(parentNode.dataset.mapBlockX)+1][Number(parentNode.dataset.mapBlockY)].childNodes.length===0){
|
||||||
|
snakeAll[i].snake.unshift(snake)
|
||||||
|
mapBlock[Number(parentNode.dataset.mapBlockX)+1][Number(parentNode.dataset.mapBlockY)].appendChild(snake)
|
||||||
|
snakeAll[i].snake[snakeAll[i].snake.length-1].parentNode.removeChild(snakeAll[i].snake[snakeAll[i].snake.length-1])
|
||||||
|
snakeAll[i].snake.pop()
|
||||||
|
}
|
||||||
|
else if(Number(parentNode.dataset.mapBlockX)+1>=lengthX-1){
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
if(mapBlock[Number(parentNode.dataset.mapBlockX)+1][Number(parentNode.dataset.mapBlockY)].childNodes[0].classList.contains('food')){
|
||||||
|
foodEat(mapBlock[Number(parentNode.dataset.mapBlockX)+1][Number(parentNode.dataset.mapBlockY)],snakeAll[i].snake,snake)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
parentNode=snakeAll[i].snake[0].parentNode
|
||||||
|
if (Number(parentNode.dataset.mapBlockY)-1>=0 && mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)-1].childNodes.length===0){
|
||||||
|
snakeAll[i].snake.unshift(snake)
|
||||||
|
mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)-1].appendChild(snake)
|
||||||
|
snakeAll[i].snake[snakeAll[i].snake.length-1].parentNode.removeChild(snakeAll[i].snake[snakeAll[i].snake.length-1])
|
||||||
|
snakeAll[i].snake.pop()
|
||||||
|
}
|
||||||
|
else if(Number(parentNode.dataset.mapBlockY)-1<=0){
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
if(mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)-1].childNodes[0].classList.contains('food')){
|
||||||
|
foodEat(mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)-1],snakeAll[i].snake,snake)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
parentNode=snakeAll[i].snake[0].parentNode
|
||||||
|
if (Number(parentNode.dataset.mapBlockY)+1<lengthY && mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)+1].childNodes.length===0){
|
||||||
|
snakeAll[i].snake.unshift(snake)
|
||||||
|
mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)+1].appendChild(snake)
|
||||||
|
snakeAll[i].snake[snakeAll[i].snake.length-1].parentNode.removeChild(snakeAll[i].snake[snakeAll[i].snake.length-1])
|
||||||
|
snakeAll[i].snake.pop()
|
||||||
|
}
|
||||||
|
else if(Number(parentNode.dataset.mapBlockY)+1>=lengthY-1){
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
if(mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)+1].childNodes[0].classList.contains('food')){
|
||||||
|
foodEat(mapBlock[Number(parentNode.dataset.mapBlockX)][Number(parentNode.dataset.mapBlockY)+1],snakeAll[i].snake,snake)
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeDie(snakeAll[i].snake,i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInterval(move,moveSpeed)
|
||||||
|
// 死亡函数
|
||||||
|
function snakeDie(snake,site){
|
||||||
|
snakeAll.splice(site,1)
|
||||||
|
if (snake[0].dataset.id==='0'){
|
||||||
|
diePanelOpen(snake)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(gameMode==='double'&&snake[0].dataset.id==='1'){
|
||||||
|
diePanelOpen(snake)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < snake.length/3*2 ; i++) {
|
||||||
|
let parentNode = snake[snake.length-1].parentNode
|
||||||
|
parentNode.removeChild(snake[snake.length-1])
|
||||||
|
snake.pop()
|
||||||
|
parentNode.appendChild(food.cloneNode(true))
|
||||||
|
foodNumberNow+=1
|
||||||
|
}
|
||||||
|
for (let i = snake.length-1; i >= 0 ;--i) {
|
||||||
|
snake[i].parentNode.removeChild(snake[i])
|
||||||
|
snake.pop()
|
||||||
|
}
|
||||||
|
snakeCreate()
|
||||||
|
}
|
||||||
|
// 清空地图函数
|
||||||
|
function mapClear() {
|
||||||
|
foodNumberNow=0
|
||||||
|
snakeAll=null
|
||||||
|
snakeAll=[]
|
||||||
|
const snakeClear=document.querySelectorAll('.snake')
|
||||||
|
for (let i = 0; i < snakeClear.length ; i++) {
|
||||||
|
snakeClear[i].parentNode.removeChild(snakeClear[i])
|
||||||
|
}
|
||||||
|
const foodClear=document.querySelectorAll('.food')
|
||||||
|
for (let i = 0; i < foodClear.length ; i++) {
|
||||||
|
foodClear[i].parentNode.removeChild(foodClear[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 死亡面板
|
||||||
|
const diePanelInfo=document.createElement('div')
|
||||||
|
diePanelInfo.classList.add('diePanelInfo')
|
||||||
|
map.appendChild(diePanelInfo)
|
||||||
|
|
||||||
|
const diePanelText=document.createElement('div')
|
||||||
|
diePanelInfo.appendChild(diePanelText)
|
||||||
|
|
||||||
|
const diePanelScoreDiv=document.createElement('div')
|
||||||
|
diePanelInfo.appendChild(diePanelScoreDiv)
|
||||||
|
const diePanelScoreText=document.createElement('p')
|
||||||
|
diePanelScoreText.innerText=`长度：`
|
||||||
|
diePanelScoreDiv.appendChild(diePanelScoreText)
|
||||||
|
const diePanelScore=document.createElement('p')
|
||||||
|
diePanelScoreDiv.appendChild(diePanelScore)
|
||||||
|
|
||||||
|
|
||||||
|
const diePanelPick=document.createElement('div')
|
||||||
|
diePanelPick.classList.add('diePanelPick')
|
||||||
|
map.appendChild(diePanelPick)
|
||||||
|
diePanelPick.addEventListener('click',mapClear)
|
||||||
|
diePanelPick.addEventListener('click',function () {
|
||||||
|
diePanelInfo.style.display='none'
|
||||||
|
diePanelPick.style.display='none'
|
||||||
|
})
|
||||||
|
|
||||||
|
const diePickHome=document.createElement('div')
|
||||||
|
diePickHome.innerText="返回主页"
|
||||||
|
diePanelPick.appendChild(diePickHome)
|
||||||
|
diePickHome.addEventListener('click',function (){
|
||||||
|
gameMode = null
|
||||||
|
mapTextNameDiv.style.display='block'
|
||||||
|
mapTextStartDiv.style.display='block'
|
||||||
|
})
|
||||||
|
|
||||||
|
const diePickRest=document.createElement('div')
|
||||||
|
diePickRest.innerText="重新开始"
|
||||||
|
diePanelPick.appendChild(diePickRest)
|
||||||
|
|
||||||
|
diePickRest.addEventListener('click',function (){
|
||||||
|
if (gameMode==='single'){singleMode()}
|
||||||
|
else if (gameMode==='double'){doubleMode()}
|
||||||
|
else if (gameMode==='double'){aiMode()}
|
||||||
|
})
|
||||||
|
// 开始死亡面板函数
|
||||||
|
function diePanelOpen(snake){
|
||||||
|
document.removeEventListener('click',key1)
|
||||||
|
document.removeEventListener('click',key2)
|
||||||
|
clearInterval(aiMoveTime)
|
||||||
|
playerOneDiv.style.display="none"
|
||||||
|
playerTwoDiv.style.display="none"
|
||||||
|
diePanelInfo.style.display='block'
|
||||||
|
diePanelPick.style.display='block'
|
||||||
|
snakeAll=null
|
||||||
|
snakeAll=[]
|
||||||
|
if(gameMode==='single'||gameMode==='ai'){
|
||||||
|
diePanelScoreText.style.display='inline-block'
|
||||||
|
diePanelText.innerText='游戏结束'
|
||||||
|
diePanelScore.innerText=playerOneScore.innerText
|
||||||
|
}
|
||||||
|
else if(gameMode==='double'){
|
||||||
|
diePanelScoreText.style.display='none'
|
||||||
|
if(snake[0].dataset.id==='1'){
|
||||||
|
diePanelScore.innerHTML='一号获胜'
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
diePanelScore.innerHTML='二号获胜'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 人机移动逻辑
|
||||||
|
function aiMove(snake){
|
||||||
|
const food=document.querySelectorAll('.food')[snake.snake[0].dataset.id]
|
||||||
|
const snakeX=Number(snake.snake[0].parentNode.dataset.mapBlockX)
|
||||||
|
const snakeY=Number(snake.snake[0].parentNode.dataset.mapBlockY)
|
||||||
|
const foodX=Number(food.parentNode.dataset.mapBlockX)
|
||||||
|
const foodY=Number(food.parentNode.dataset.mapBlockY)
|
||||||
|
|
||||||
|
if(snake.direction!=='1'&&snakeX-1>=0&&mapBlock[snakeX-1][snakeY].childNodes.length>0){
|
||||||
|
if (mapBlock[snakeX-1][snakeY].children[0].classList.contains('food')){
|
||||||
|
snake.directionTest=0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(snake.direction!=='0'&&snakeX+1<lengthX&&mapBlock[snakeX+1][snakeY].childNodes.length>0){
|
||||||
|
if (mapBlock[snakeX+1][snakeY].children[0].classList.contains('food')){
|
||||||
|
snake.directionTest=1
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(snake.direction!=='3'&&snakeY-1>=0&&mapBlock[snakeX][snakeY-1].childNodes.length>0){
|
||||||
|
if (mapBlock[snakeX][snakeY-1].children[0].classList.contains('food')){
|
||||||
|
snake.directionTest=2
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(snake.direction!=='2'&&snakeY+1<lengthY&&mapBlock[snakeX][snakeY+1].childNodes.length>0){
|
||||||
|
if (mapBlock[snakeX][snakeY+1].children[0].classList.contains('food')){
|
||||||
|
snake.directionTest=3
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch(random(0,2)){
|
||||||
|
case 0:
|
||||||
|
if(snake.direction!=='1'&&snakeX-1>=0&&foodX>snakeX&&mapBlock[snakeX-1][snakeY].childNodes.length===0){
|
||||||
|
snake.directionTest=0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(snake.direction!=='0'&&snakeX+1<lengthX&&foodX<=snakeX&&mapBlock[snakeX+1][snakeY].childNodes.length===0){
|
||||||
|
snake.directionTest=1
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(snake.direction!=='3'&&snakeY-1>=0&&foodY>snakeY&&mapBlock[snakeX][snakeY-1].childNodes.length===0){
|
||||||
|
snake.directionTest=2
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(snake.direction!=='2'&&snakeY+1<lengthY&&foodY<=snakeY&&mapBlock[snakeX][snakeY+1].childNodes.length===0){
|
||||||
|
snake.directionTest=3
|
||||||
|
return
|
||||||
|
}
|
||||||
|
case 1:
|
||||||
|
if(snake.direction!=='2'&&snakeY+1<lengthY&&mapBlock[snakeX][snakeY+1].childNodes.length===0){
|
||||||
|
snake.directionTest=3
|
||||||
|
}
|
||||||
|
if(snake.direction!=='3'&&snakeY-1>=0&&mapBlock[snakeX][snakeY-1].childNodes.length===0){
|
||||||
|
snake.directionTest=2
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(snake.direction!=='0'&&snakeX+1<lengthX&&mapBlock[snakeX+1][snakeY].childNodes.length===0){
|
||||||
|
snake.directionTest=1
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(snake.direction!=='1'&&snakeX-1>=0&&mapBlock[snakeX-1][snakeY].childNodes.length===0){
|
||||||
|
snake.directionTest=0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
function aiMoveOpen(){
|
||||||
|
if (snakeAll.length===1){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else if (snakeAll.length===0){
|
||||||
|
clearInterval(aiMoveTime)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 1; i < snakeAll.length ; i++) {
|
||||||
|
aiMove(snakeAll[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let aiMoveTime
|
||||||
|
// 按键监听
|
||||||
|
const key1=function(e){
|
||||||
|
if(snakeAll.length>0){
|
||||||
|
if (e.key==='w'){
|
||||||
|
snakeAll[0].directionTest=0
|
||||||
|
}
|
||||||
|
else if (e.key==='s'){
|
||||||
|
snakeAll[0].directionTest=1
|
||||||
|
}
|
||||||
|
else if (e.key==='a'){
|
||||||
|
snakeAll[0].directionTest=2
|
||||||
|
}
|
||||||
|
else if (e.key==='d'){
|
||||||
|
snakeAll[0].directionTest=3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(snakeAll.length>0){
|
||||||
|
if (e.key==="ArrowUp"){
|
||||||
|
snakeAll[1].directionTest=0
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowDown"){
|
||||||
|
snakeAll[1].directionTest=1
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowLeft"){
|
||||||
|
snakeAll[1].directionTest=2
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowRight"){
|
||||||
|
snakeAll[1].directionTest=3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const key2=function(e){
|
||||||
|
if(snakeAll.length>0){
|
||||||
|
if (e.key==="ArrowUp"||e.key==='w'){
|
||||||
|
snakeAll[0].directionTest=0
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowDown"||e.key==='s'){
|
||||||
|
snakeAll[0].directionTest=1
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowLeft"||e.key==='a'){
|
||||||
|
snakeAll[0].directionTest=2
|
||||||
|
}
|
||||||
|
else if (e.key==="ArrowRight"||e.key==='d'){
|
||||||
|
snakeAll[0].directionTest=3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 单人模式
|
||||||
|
function singleMode(){
|
||||||
|
// 改变当前模式
|
||||||
|
gameMode='single'
|
||||||
|
// 开启辅助操作页面
|
||||||
|
playerOneDiv.style.display="block"
|
||||||
|
// 生成蛇
|
||||||
|
snakeCreate()
|
||||||
|
// 更换提示文字颜色
|
||||||
|
playerOneText.style.color=snakeAll[0].snake[0].style.backgroundColor;
|
||||||
|
// 显示长度
|
||||||
|
playerOneScore.innerHTML=`${snakeAll[0].snake.length}`
|
||||||
|
// 生成食物
|
||||||
|
foodNumber=10
|
||||||
|
for(let i=0;i<foodNumber;i++){
|
||||||
|
foodCreate()
|
||||||
|
}
|
||||||
|
// 绑定按钮
|
||||||
|
document.addEventListener('keydown',key1)
|
||||||
|
}
|
||||||
|
// 双人模式
|
||||||
|
function doubleMode(){
|
||||||
|
// 改变当前模式
|
||||||
|
gameMode='double'
|
||||||
|
// 开启辅助操作页面
|
||||||
|
playerOneDiv.style.display="block"
|
||||||
|
playerTwoDiv.style.display="block"
|
||||||
|
// 生成蛇
|
||||||
|
snakeCreate()
|
||||||
|
snakeCreate()
|
||||||
|
// 更换提示文字颜色
|
||||||
|
playerOneText.style.color=snakeAll[0].snake[0].style.backgroundColor;
|
||||||
|
playerTwoText.style.color=snakeAll[1].snake[1].style.backgroundColor;
|
||||||
|
// 显示长度
|
||||||
|
playerOneScore.innerHTML=`${snakeAll[0].snake.length}`
|
||||||
|
playerTwoScore.innerHTML=`${snakeAll[1].snake.length}`
|
||||||
|
// 生成食物
|
||||||
|
foodNumber=10
|
||||||
|
for(let i=0;i<foodNumber;i++){
|
||||||
|
foodCreate()
|
||||||
|
}
|
||||||
|
// 绑定按钮
|
||||||
|
document.addEventListener('keydown',key2 )
|
||||||
|
}
|
||||||
|
// 人机模式
|
||||||
|
function aiMode(){
|
||||||
|
// 改变当前模式
|
||||||
|
gameMode='ai'
|
||||||
|
// 开启辅助操作页面
|
||||||
|
playerOneDiv.style.display="block"
|
||||||
|
// 生成蛇
|
||||||
|
const snakeNumber=5
|
||||||
|
for(let i=0;i<snakeNumber;i++){
|
||||||
|
snakeCreate()
|
||||||
|
}
|
||||||
|
for(let i=0;i<snakeAll[0].snake.length;i++){
|
||||||
|
snakeAll[0].snake[i].style.backgroundColor="rgba(0, 0, 0, 0.75)"
|
||||||
|
}
|
||||||
|
// 更换提示文字颜色
|
||||||
|
playerOneText.style.color=snakeAll[0].snake[0].style.backgroundColor;
|
||||||
|
// 显示长度
|
||||||
|
playerOneScore.innerHTML=`${snakeAll[0].snake.length}`
|
||||||
|
// 开始蛇移动
|
||||||
|
aiMoveTime=setInterval(aiMoveOpen, moveSpeed/2)
|
||||||
|
// 显示长度
|
||||||
|
playerOneScore.innerText=`${snakeAll[0].snake.length}`
|
||||||
|
// 生成食物
|
||||||
|
foodNumber=15
|
||||||
|
for(let i=0;i<foodNumber;i++){
|
||||||
|
foodCreate()
|
||||||
|
}
|
||||||
|
// 绑定按钮
|
||||||
|
document.addEventListener('keydown', key1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// // 临时隐藏开始页面
|
||||||
|
// singleMode()
|
||||||
|
// mapTextNameDiv.style.display='none'
|
||||||
|
// mapTextStartDiv.style.display='none'
|
||||||
127
web/snake/style.css
Normal file
127
web/snake/style.css
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
html,body{
|
||||||
|
font-family: "仿宋", serif;
|
||||||
|
font-weight: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 0;
|
||||||
|
background: #9bba5a;
|
||||||
|
color: rgba(0, 0, 0, 0.75);
|
||||||
|
user-select:none;
|
||||||
|
}
|
||||||
|
@keyframes foodRotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.food{
|
||||||
|
animation: foodRotate 3s linear infinite;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.foodSingle{
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
outline:5px rgba(75, 74, 74, 0.83) solid;
|
||||||
|
}
|
||||||
|
.mapTextName{
|
||||||
|
font-size: 150px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
.mapTextStart{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25%;
|
||||||
|
left: 17%;
|
||||||
|
}
|
||||||
|
.mapTextStart div{
|
||||||
|
font-size: 80px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5%;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.mapTextStart div:hover{
|
||||||
|
color: #9bba5a;
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);;
|
||||||
|
}
|
||||||
|
.mapBlock{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.snake{
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 25%;
|
||||||
|
}
|
||||||
|
.playerOne{
|
||||||
|
position: absolute;
|
||||||
|
font-size: 40px;
|
||||||
|
top:5%;
|
||||||
|
left: 3%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.playerOne p{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.playerOne p{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.playerTwo{
|
||||||
|
position: absolute;
|
||||||
|
font-size: 40px;
|
||||||
|
top:5%;
|
||||||
|
right: 2%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.playerTwo p{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.diePanelInfo{
|
||||||
|
position: absolute;
|
||||||
|
left: 30%;
|
||||||
|
top: 20%;
|
||||||
|
font-size: 80px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.diePanelInfo p{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diePanelPick{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 15%;
|
||||||
|
font-size: 70px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.diePanelPick div{
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5%;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.diePanelPick div:hover{
|
||||||
|
color: #9bba5a;
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user