贪吃蛇（js）_贪吃蛇js-CSDN博客

本文链接：https://blog.csdn.net/liu1yi2bo3/article/details/125160077
思想：
1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑
2、设计食物：属性宽、高
3、显示蛇：根据状态向地图里加元素
4、蛇跑起来：下一节到前一节的位置；当出界时，死亡；当蛇头吃到自己的时候，死亡
5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物
6、添加定时器，绑定按键
<!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>贪吃蛇</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    h3{
        margin-top: 10px;
    }
    .bt3{
        margin-left: 10px;
    }
    #map{
        width: 500px;
        height: 500px;
        background-color: pink;
        /* 相对定位 */
        position: relative;
    }
    table{
        /* 绝对定位 */
        position: absolute;
        top: 56.5px;
        left: -2px;
    }
    td{
        width: 48px;
        height: 48px;
    }
</style>
<body>
    <h3 id="score">Score:0</h3>
    <div class="bts">
        <button id="fast">快</button>
        <button id="Moderato">中</button>
        <button id="slow">慢</button>
    </div>
     <!-- 粉色的地图区域  规定map的大小-->
    <div id="map">

    </div>
</body>
<script>
    //完成基本的显示内容
    //1.地图 和基本按钮的显示  绘制表格
    //利用js完成一个10行10列表格，每一个表格单元格大小 50*50        
    //通过document.write("进行编写") //网页输出
    // border='1'边框增加1       cellspacing='0'边框之间的间距为0
    document.write("<table border='1' cellspacing='0'>")
        //内部需要10个tr标签 写一个10次循环 每循环一次产生一组tr标签
        for(var i = 0;i<10;i++){
            document.write("<tr>")
                //十个td ,再来一个循环
                for(var n = 0;n<10;n++){
                    document.write("<td></td>")
                }
            document.write("</tr>")
        }
    document.write("</table>")
     //2.产生红色蛇头 以及 蓝色事物
     //封装 一个产生div标签的函数，根据传入参数确定对应的背景色
    function createDiv(color){
         //创建一个 div标签，宽度50 高度50 ，背景色color,如何对应div的位置随机产生，
        //任意定义位置  改变定位属性的left,top来实现对应的位置调整
        var div = document.createElement("div")
        div.style.width="50px"
        div.style.height="50px"
        div.style.backgroundColor=color
        //给创建出来的div添加一个 绝对定位属性
        div.style.position="absolute"
        //使用随机数的概念来 随机产生对应的位置
        // //Math.random() 0-1随机数  小数
        // //发现left和top必须为50的整数倍 ，0-9
        // //产生一个0-9随机数，*50
        div.style.top=parseInt(Math.random()*10)*50+"px"
        div.style.left=parseInt(Math.random()*10)*50+"px"
        var map = document.getElementById("map")
        map.appendChild(div)
        return div
        
    }
    var head = createDiv("red")
    //需要head添加一个方向属性
    head.direction="左"
    var food = createDiv("blue")
    //点击按钮时，让蛇头默认情况下 ，自动的向左侧移动，每一次移动50px
    //点击三个不同的按钮时，启动对应的定时器
    var fast = document.getElementById("fast")
    var Moderato = document.getElementById("Moderato")
    var slow = document.getElementById("slow")
    var t
    var bodyNode=[]
    var s = 0//分数
    //js具有两个变量的作用域：1.全局 2.局部在函数内部定义的变量只在函数内部生效
    fast.onclick=function(){
        window.t =setInterval(move, 200);
        
    }
    Moderato.onclick=function(){
       
        window.t = setInterval(move, 400);
       
    }
    slow.onclick=function(){
      
        window.t = setInterval(move, 700);
    }
   function move (){
        //身体移动
        //永远跟随前一块的移动
        if(bodyNode.length>0){
            for(var n = bodyNode.length-1;n >= 0;n--){
                 //判断当前的每一块身体是否和head重合 ，如果重合证明咬到了身体，停止定时器
                if(bodyNode[n].style.left == head.style.left&&bodyNode[n].style.top == head.style.top){
                    alert("咬到身体了")
                    clearInterval(window.t)
                }
            
            switch(bodyNode[n].direction){
                        case "左":
                            var l=parseInt(bodyNode[n].style.left)
                            bodyNode[n].style.left=l-50+"px"
                        break
                        case "右":
                            var l=parseInt(bodyNode[n].style.left)
                            bodyNode[n].style.left=l+50+"px"
                        break
                        case "上":
                            var t=parseInt(bodyNode[n].style.top)
                            bodyNode[n].style.top=t-50+"px"
                        break
                        case "下":
                            var t=parseInt(bodyNode[n].style.top)
                            bodyNode[n].style.top=t+50+"px"
                        break
                    }
                    if(n==0){
                        bodyNode[n].direction= head.direction
                    }else{
                        bodyNode[n].direction=bodyNode[n-1].direction
                    }
        }
    }
        //头部移动
        switch(head.direction){
            case "左":
            var l = parseInt(head.style.left)
            head.style.left = l-50+"px"
            break
            case "右":
            var l = parseInt(head.style.left)
            head.style.left = l+50+"px"
            break
            case "上":
            var t = parseInt(head.style.top)
            head.style.top = t-50+"px"
            break
            case "下":
            var t = parseInt(head.style.top)
            head.style.top = t+50+"px"
            break
        }    
        //检测是否和食物发生了对应的碰撞
        //如何判断碰撞 两个的元素位置完全相同 ，left==left top==top
        if(food.style.top == head.style.top && food.style.left == head.style.left){
            //产生一个黄色身体，当前贪吃蛇身体最后一块的后方 
            //明确谁是最后一块，操作每一块身体 bodyNodes
            var body = createDiv("yellow")
            //目前位置随机，跟在最后一块后面
            //找到当前的最后一块
            //数组中的最后一个内容，数组中如果是空？ 蛇头是最后一块
            var lastNode
            if(bodyNode.length==0){
                lastNode = head
            }else{
                lastNode = bodyNode[bodyNode.length-1]
            }
            //body的位置要规矩当前最后一块的移动方向来决定
            switch(lastNode.direction){
                    case "上":
                        body.style.left=lastNode.style.left
                        body.style.top=parseInt(lastNode.style.top)+50+"px"
                    break
                    case "下":
                        body.style.left=lastNode.style.left
                        body.style.top=parseInt(lastNode.style.top)-50+"px"
                    break
                    case "左":
                        body.style.top=lastNode.style.top
                        body.style.left=parseInt(lastNode.style.left)+50+"px"
                    break
                    case "右":
                        body.style.top=lastNode.style.top
                        body.style.left=parseInt(lastNode.style.left)-50+"px"
                    break
                }
            //新产生的身体 移动方向 最后一块的移动方向保持一致
            body.direction = lastNode.direction
            //将新产生的身体放入数组中
            bodyNode.push(body)
            //将新产生的身体放入数组中
            food.style.top=parseInt(Math.random()*10)*50+"px"
            food.style.left=parseInt(Math.random()*10)*50+"px"
            //分数增加
            var score = document.getElementById("score")
            s+=1
            score.innerHTML="Score:"+s  
        }
        //死亡检测 判断蛇头是否跑出题图
        //蛇头从左侧跑出地图 
        if(parseInt(head.style.left)>500||parseInt(head.style.left)<0||parseInt(head.style.top)<0||parseInt(head.style.top)>500){
            alert("撞墙死亡")
            clearInterval(window.t)
        }
    }


   
        //按键控制div的移动方向
   document.onkeydown=function(event){
        switch(event.keyCode){
            case 37:
            head.direction="左" 
            break
            case 38:
            head.direction="上"
            break
            case 39:
            head.direction="右"
            break
            case 40:
            head.direction="下"
        }
    }
   
</script>
</html>