practice_code/web/snake/script.js

// 随机数
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'