贪吃蛇游戏 js网页版

最新推荐文章于 2024-10-12 15:48:18 发布
菜到不会下载软件
最新推荐文章于 2024-10-12 15:48:18 发布
阅读量5.7k
点赞数 7
分类专栏：前端js 文章标签： HTML JavaScript 贪吃蛇游戏开发前端开发
本文链接：https://blog.csdn.net/m0_57446284/article/details/122767113
版权
前端js 专栏收录该内容
41 篇文章 1 订阅
订阅专栏
在学习了前端三大件之后，对于自己的学习情况进行一个总结，所以写了一个网页版本的简单小游戏，贪吃蛇，成果如下：
首先介绍一下：
分数可以计数总共吃了多少东西，红色的是贪吃蛇的蛇头，蓝色的是食物，还有黄色的，黄色的是身体。
代码如下：
<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        td{
            width: 48px;
            height: 48px;
            border: 1px solid black;
        }

        #map{
            width: 700px;
            height: 700px;
            opacity: 0.4;
            position: absolute;
            background-color: rgb(29, 236, 10);
            /* 背景颜色是这个 */
        }

        div{
            position: absolute;
            width: 50px;
            height: 50px;
        }
        
        span{
            position: relative;
            width: 100px;
            height: 100px;
        }

        h1{
            margin-left: 300px;
        }

        button{
            margin-left: 150px;
        }
    </style>

    
</head>
<body>
    <span id="score1"><h1>分数:0</h1></span>
    <span>
        <button onclick="changTime('100')">快</button>
        <button onclick="changTime('300')">中</button>
        <button onclick="changTime('1000')">慢</button>
    </span>
    <div id="map"></div>
    <script>
        //首先创建地图 地图的规模是14*14即一行14格，共计14行
        document.write("<table cellspacing ='0'");
        for(var i=0;i<14;i++){
            document.write("</tr>");
            for(var j=0;j<14;j++){
                document.write("<td></td>");
            }
            document.write("</tr>");
        }
        document.write("</table>")

        var map =document.getElementById("map")  //获取地图的标签

        function createDiv(type){
            var node =document.createElement("div")  // 一个创建函数，主要是创建一个小格
            node.style.left=parseInt(Math.random()*14)*50+"px"  //随机生成一个距离左边的位置
            node.style.top=parseInt(Math.random()*14)*50+"px"  //随机生成一个距离右边的位置
            map.appendChild(node)     //将创建的div 50*50的一个颜色为传入的color的小格，添加到map地图中去
            
            switch(type){  //给创建的新的元素赋“含义”  红色的是蛇头  蓝色的是食物  黄色的是身体
                case "head":
                    node.style.backgroundColor="red"
                    break;
                case "food":
                    node.style.backgroundColor="blue"
                    break;
                case "body":
                    node.style.backgroundColor="yellow"
                    break;
            }
            return node
        }

        var arrAll =[]  //放置蛇身体的元素
        var NodeAll=[]  //放置所有的元素
        var score =0; //用来计分的
        var headNode =createDiv("head") //红色的是蛇头的颜色
        var spanScore =document.getElementById("score1")  //获取计分数的，目的是当吃了一个食物后，就能够将分数进行更新
        var footNode =createDiv("food") //蓝色的是食物的部分  
        headNode.value="下"  //初始化蛇头的运动状态

        //创建函数，此函数主要功能是贪吃蛇的移动
        function move(){

            //贪吃蛇移动身体
            if(arrAll.length>0){
                for(var i=arrAll.length-1;i >= 0;i--){
                    switch(arrAll[i].value){
                        case "上":
                            arrAll[i].style.top =parseInt(arrAll[i].style.top)-50+"px"
                        break
                        case "下":
                            arrAll[i].style.top =parseInt(arrAll[i].style.top)+50+"px"
                        break
                        case "左":
                            arrAll[i].style.left =parseInt(arrAll[i].style.left)-50+"px"
                        break
                        case "右":
                            arrAll[i].style.left =parseInt(arrAll[i].style.left)+50+"px"
                        break
                    }

                    if(i==0){
                        arrAll[i].value=headNode.value  //当i=0的时候，那个元素其实就是蛇头
                    }else{
                        arrAll[i].value=arrAll[i-1].value
                    }
                }
            }

            //确定蛇头的移动方向，根据蛇头的移动方向，来确定移动方向
            switch(headNode.value){
                case "上":
                    headNode.style.top =parseInt(headNode.style.top)-50+"px"
                break
                case "下":
                    headNode.style.top =parseInt(headNode.style.top)+50+"px"
                break
                case "左":
                    headNode.style.left =parseInt(headNode.style.left)-50+"px"
                break
                case "右":
                    headNode.style.left =parseInt(headNode.style.left)+50+"px"
                break
            }

            //这个判断是如果蛇咬到了自己，那么就停止游戏
            if(arrAll.length>0){
                for(var i=0;i<arrAll.length;i++){
                    if(headNode.style.left ==arrAll[i].style.left && headNode.style.top ==arrAll[i].style.top){
                        clearInterval(time)
                        alert("你操作的贪吃蛇咬到自己了，游戏结束！！！")
                    }
                }
            }

            //如果蛇碰到四周的墙壁，那么蛇就会死亡
            if(parseInt(headNode.style.left) <0 ||parseInt(headNode.style.left)>650  || parseInt(headNode.style.top) <0 ||parseInt(headNode.style.top)>650){
                //判断的条件是地图的四条边框线
                clearInterval(time)  //在这里是清除定时器
                alert("你操作的贪吃蛇撞墙了，游戏结束！！点击刷新重新开始游戏")
                
                switch(headNode.value){
                    case "上":
                        headNode.style.top =0+"px"
                    break
                    case "下":
                        headNode.style.top =650+"px"
                    break
                    case "左":
                        headNode.style.left =0+"px"
                    break
                    case "右":
                        headNode.style.left =650+"px"
                    break
                }
                //这个switch的作用是不让蛇头在死亡后再次移动
            }

            //重合检测  保证贪吃蛇不能够重合
            if(headNode.style.left ==footNode.style.left && headNode.style.top ==footNode.style.top){
                score =score +10
                spanScore.innerHTML="<h1>分数:"+score+"</h1>"
                
                var bodyNode =createDiv("body")
                NodeAll.push(headNode)
                var lastNode
                if(arrAll.length >0){
                    lastNode=arrAll[arrAll.length-1]
                }else{
                    lastNode=headNode
                }

                switch(lastNode.value){
                    case "上":
                        bodyNode.style.top=parseInt(lastNode.style.top)+50+"px"
                        bodyNode.style.left=lastNode.style.left
                    break
                    case "右":
                        bodyNode.style.left=parseInt(lastNode.style.left)-50+"px"
                        bodyNode.style.top=lastNode.style.top
                    break
                    case "下":
                        bodyNode.style.top=parseInt(lastNode.style.top)-50+"px"
                        bodyNode.style.left=lastNode.style.left
                    break
                    case "左":
                        bodyNode.style.left=parseInt(lastNode.style.left)+50+"px"
                        bodyNode.style.top=lastNode.style.top
                    break
                }
                bodyNode.value=lastNode.value
                arrAll.push(bodyNode)
                NodeAll.push(bodyNode)

                var px =parseInt(Math.random()*14)*50
                var py =parseInt(Math.random()*14)*50

                for(var i=0;i<NodeAll.length;i++){
                    if((parseInt(NodeAll[i].style.left) ==px &&parseInt(NodeAll[i].style.top) ==py)){
                        px =parseInt(Math.random()*14)*50
                        py =parseInt(Math.random()*14)*50
                    }
                }
                footNode.style.left =px+"px"
                footNode.style.top=py+"px"

            }
        }

        function changTime(speed){
            time =setInterval(move,speed)
        }

        //按住键盘的值，函数做出相应的反应  37对应的是左  38对应上  39对应右  40对应下
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    if(headNode.value ="右" ){
                        headNode.value="左"
                    }
                    break
                case 38:
                    if(headNode.value ="下"){
                        headNode.value="上"
                    }
                    break
                case 39:
                    if(headNode.value ="左" ){
                        headNode.value="右"
                    }
                    break                    
                case 40:
                    if(headNode.value ="上"){
                        headNode.value="下"
                    }
                    break
            }
        }
    </script>
</body>
</html>
希望能够不断成长