贪吃蛇进阶版本（javascript）

最新推荐文章于 2024-04-29 22:21:34 发布

VIP文章嗯嗯好的呢！

最新推荐文章于 2024-04-29 22:21:34 发布

阅读量119

点赞数 1

分类专栏：前端 html 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/m0_67403076/article/details/123323952

版权

昨天写了一个贪吃蛇的小游戏，在写完之后，因为自己平时喜欢打王者荣耀这一类的游戏，所以在想能否将这个游戏进阶一下，当完成一定的要求之后，他就晋级。于是写了下面的代码：

示例图如下：

这个是贪吃蛇初级版本：

这是贪吃蛇高阶版本：

这个是当贪吃蛇最终通关过后的版本：

他会有一个动态的烟花效果：

下面是代码：

初级贪吃蛇：

<!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;
    }

    #pic{
        width: 400px;
        height: 400px;
        opacity: 0.6;
        position: absolute;
        background-color: antiquewhite;
    }


    div{
        position: absolute;
        width: 50px;
        height: 50px;
    }

    </style>
</head>
<body>
    <h3 id="score">分数：0</h3>
    <div id="pic"></div>
    <script>
        document.write("<table cellspacing='0'>")
            for(var i=0;i<8;i++){
                document.write('</tr>')
                for(var j=0;j<8;j++){
                    document.write("<td></td>")
                }
            }
        document.write("</table>")

        var pic =document.getElementById("pic")

        function createPic(type){
            var Node =document.createElement("div")
            Node.style.left =parseInt(Math.random()*8)*50+"px"
            Node.style.top= parseInt(Math.random()*8)*50+"px"
            pic.appendChild(Node)
            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 Score =0
        var snakeHead=createPic("head")
        snakeHead.value="上"
        var snakeFood=createPic("food")
        var snakeArr=[]  //存储身体元素
        var snakeAll=[]  //存储所有元素
        var snakeScore=document.getElementById("score")

        function move(){
            if(snakeArr.length>0){
                for(var i=snakeArr.length-1;i >= 0;i--){
                    switch(snakeArr[i].value){
                        case "上":
                            snakeArr[i].style.top =parseInt(snakeArr[i].style.top)-50+"px"
                            break
                        case "下":
                            snakeArr[i].style.top =parseInt(snakeArr[i].style.top)+50+"px"
                            break
                        case "左":
                            snakeArr[i].style.left =parseInt(snakeArr[i].style.left)-50+"px"
                            break
                        case "右":
                            snakeArr[i].style.left =parseInt(snakeArr[i].style.left)+50+"px"
                            break
                    }

                    if(i==0){
                        snakeArr[i].value=snakeHead.value  //当i=0的时候，那个元素其实就是蛇头
                    }else{
                        snakeArr[i].value=snakeArr[i-1].value
                    }
                }
            }
            
            switch(snakeHead.value){
                case "上":
                    snakeHead.style.top =parseInt(snakeHead.style.top)-50+"px"
                break
                case "下":
                    snakeHead.style.top =parseInt(snakeHead.style.top)+50+"px"
                break
                case "左":
                    snakeHead.style.left =parseInt(snakeHead.style.left)-50+"px"
                break
                case "右":
                    snakeHead.style.left =parseInt(snakeHead.style.left)+50+"px"
                break
            }

            if(parseInt(snakeHead.style.left)<0 || parseInt(snakeHead.style.top)<0 ||parseInt(snakeHead.style.left) >350 || parseInt(snakeHead.style.top) >350){
                clearInterval(time)
                alert("很抱歉，因为贪吃蛇撞到了墙，游戏结束！！！")
            } 

            if(snakeArr.length>0){
                for(var i=0;i<snakeArr.length;i++){
                    if(snakeHead.style.left ==snakeArr[i].style.left && snakeHead.style.top ==snakeArr[i].style.to

最低0.47元/天解锁文章

嗯嗯好的呢！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇进阶版本（javascript）

昨天写了一个贪吃蛇的小游戏，在写完之后，因为自己平时喜欢打王者荣耀这一类的游戏，所以在想能否将这个游戏进阶一下，当完成一定的要求之后，他就晋级。于是写了下面的代码：示例图如下：这个是贪吃蛇初级版本：这是贪吃蛇高阶版本：这个是当贪吃蛇最终通关过后的版本：他会有一个动态的烟花效果：下面是代码：初级贪吃蛇：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫