简易贪吃色

最新推荐文章于 2023-03-26 23:09:38 发布

ggyyjavascript

最新推荐文章于 2023-03-26 23:09:38 发布

阅读量407

点赞数 1

分类专栏： js 文章标签： javascript 贪吃蛇 js贪吃蛇

本文链接：https://blog.youkuaiyun.com/guoshujie1/article/details/124020432

版权

js 专栏收录该内容

28 篇文章

订阅专栏

<!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>
        *{ margin: 0; padding: 0;}
        .border_warp { margin: auto; width: 500px; height: 500px; border: 1px solid; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
        .random_warp { display: inline-block; width: 10px; height: 10px; background-color: blue; top: 0; left: 0; position: absolute;}
        .snake_warp li{ position: absolute; list-style: none; width: 10px; height: 10px; background-color: black; top: 0px; left: 0px;}
    </style>
</head>
<body>
    <div class="border_warp">
        <span class="random_warp"></span>
        <ul class="snake_warp"></ul>
    </div>
    <button onclick="startFn()">开始</button>
    <button onclick="suspendFn()">暂停</button>
    <script src="/http.js"></script>
</body>
</html>

// get 坐标place  and width/height
let borderDOM = document.getElementsByClassName('border_warp')
let borderX = borderDOM[0].clientWidth
let borderY = borderDOM[0].clientHeight

// 随机方块
let randomDOM = document.getElementsByClassName('random_warp')
let randomtopNUM = parseInt(Math.random()*10)*borderY/10
let randomleftNUM = parseInt(Math.random()*10)*borderX/10
randomDOM[0].style.top = randomtopNUM + 'px'
randomDOM[0].style.left = randomleftNUM + 'px'

// snake移动
let snakeDOM = document.getElementsByClassName('snake_warp')
let moveNumX = 30 // 初始位置
let moveNumY = 0  // 初始化位置
let snakeEatFoodlength = 0
let that = this
var turn = (function(that){
    let turn = 'right';
    document.onkeydown = function(evt){
        var e = evt || event;
        var keyCode = e.keyCode || e.which;
        switch( keyCode ){
            case 37 : turn = "left";break;
            case 38 : turn = "top";break;
            case 39 : turn = "right";break;
            case 40 : turn = "bottom";break;
        }
        that.turn=turn
    }
    return turn
})(that); // 初始化方向
// 创建 蛇头 蛇身
snakeDOM[0].innerHTML = '<li class="snake_c" style="background-color: brown; top: 0px;left: 30px;"></li><li class="snake_c" style="top: 0px;left: 20px;"></li><li class="snake_c" style="top: 0px;left: 10px;"></li><li class="snake_c" style="top: 0px;left: 0px;"></li>'

let snakeCDOMS = snakeDOM[0].getElementsByClassName('snake_c')

function moveFn (type) {
    // snake move
    if (turn == 'right') {
        if ((moveNumX+10) >=  borderX) {
            clearMoveFn()
            return
        } else {
            moveNumX += 10
        }
    } else if (turn == 'left') {
        if (moveNumX <= 0) {
            clearMoveFn()
            return
        } else {
            moveNumX -= 10
        }
    } else if (turn == 'top') {
        if (moveNumY <= 0) {
            clearMoveFn()
            return
        } else {
            moveNumY -= 10
        }
    } else if (turn == 'bottom') {
        if ((moveNumY+10) >= borderY) {
            clearMoveFn()
            return
        } else {
            moveNumY += 10
        }
    }
    for (var i = snakeCDOMS.length-1; i > 0; i--) {
        snakeCDOMS[i].style.top = snakeCDOMS[i - 1].style.top
        snakeCDOMS[i].style.left = snakeCDOMS[i - 1].style.left
    }
  
    snakeCDOMS[i].style.top = moveNumY + 'px'
    snakeCDOMS[i].style.left = moveNumX + 'px'
    if (randomtopNUM == moveNumY && randomleftNUM == moveNumX) {
        var li=document.createElement("li");
	    li.className = 'snake_c'
        li.style.top = snakeCDOMS[snakeCDOMS.length-1].style.top
        li.style.left = snakeCDOMS[snakeCDOMS.length-1].style.left
        snakeDOM[0].appendChild(li)
        snakeEatFoodlength +=1
        randomtopNUM = parseInt(Math.random()*10)*borderY/10
        randomleftNUM = parseInt(Math.random()*10)*borderX/10
        randomDOM[0].style.top = randomtopNUM + 'px'
        randomDOM[0].style.left = randomleftNUM + 'px'
    }
}

// start and suspend 开始和暂停
let moveTime = null
function startFn () {
    moveTime = setInterval(function(){
        moveFn()
    }, 100)
}
// 暂停
function suspendFn () {
    clearInterval(moveTime)
    console.log(moveTime, 'moveTime')
}

// snake move 范围
function clearMoveFn () {
    clearInterval(moveTime)
    alert('撞墙了,你吃了'+snakeEatFoodlength+'个')
    turn = 'right'
    moveNumX = 30
    moveNumY = 0
    snakeEatFoodlength = 0
    snakeDOM[0].innerHTML = '<li class="snake_c" style="background-color: brown; top: 0px;left: 30px;"></li><li class="snake_c" style="top: 0px;left: 20px;"></li><li class="snake_c" style="top: 0px;left: 10px;"></li><li class="snake_c" style="top: 0px;left: 0px;"></li>'
}