源码贪吃蛇详细 2021-09-01

最新推荐文章于 2024-08-11 18:40:36 发布

哈哈魔王

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量120

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_35752218/article/details/120034167

版权

这是一个使用HTML、CSS和JavaScript实现的贪吃蛇游戏源码。游戏包含基本的上下左右移动、碰撞检测和随机生成食物等功能。玩家可以通过键盘控制蛇的移动，并在吃到食物后蛇会增长。代码中还设置了音乐播放功能。

摘要由CSDN通过智能技术生成

源码贪吃蛇详细

请添加图片描述

<!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>
        .kks {
            width: 12px;
            height: 12px;
            border: 1px #000 solid;
            float: left;
            border-radius: 50px;
        }
        
        .sss {
            width: 700px;
            overflow: hidden;
            margin: 0 auto;
            border: 10px solid #000;
        }
        
        .kksa {
            clear: both;
        }
    </style>
</head>

<body>
    <p id="uu"></p>
    <p id="zz"></p>
    <p id="xy"></p>
    <p id="fx"></p>
    <p id="cd"></p>
    <div class="sss">
        <script>
            var mp3 = new Audio("Softer Still - New Age.mp3");
            mp3.play();

            let y = 50,
                x = 50;
            var m = Array();
            var fx = 2; //方向
            var wz = [0, 3]; //位置
            var sssz = Array(); //蛇身数组
            var sscd = 3; //蛇身长度
            var zz = 1; //种子
            for (let t = 0; t < y; t++) {
                m[t] = Array();
                for (let z = 0; z < x; z++)
                    m[t][z] = 0,
                    document.write('<div class="kks" id = "x' + t + 'n' + z + '" ></div>');
                document.write("<div class = 'kksa'></div>");
            }
            csh();
            //初始化数据
            function csh() {
                for (let y = 0; y <= sscd; y++) {
                    sssz[y] = [0, 0];
                    m[0][y] = 1;
                }
                sssz[0][1] = 3;
                sssz[1][1] = 2;
                sssz[2][1] = 1;
                sssz[3][1] = 0;
                fxx();
            }

            function fxx() {
                // let u = Math.round(Math.random()*4);
                // if(u!=0)
                // fx=u;
                switch (fx) {
                    case 1: //上
                        wz[1]--;
                        break;
                    case 2: //下
                        wz[1]++;
                        break;
                    case 3: //左
                        wz[0]--;
                        break;
                    case 4: //右
                        wz[0]++;
                        break;
                }
                document.getElementById("xy").innerText = "蛇头坐标" + wz;
                if (wz[0] >= y) wz[0] = 0;
                if (wz[0] <= -1) wz[0] = y - 1;
                if (wz[1] >= x) wz[1] = 0;
                if (wz[1] <= -1) wz[1] = x - 1;
                if (m[wz[0]][wz[1]] == 2)
                    zz = 1;
                xr();
                sssj();
                setTimeout(fxx, 100);
            }
            //渲染
            function xr() {
                for (let t = 0; t < y; t++)
                    for (let z = 0; z < x; z++)
                        if (m[t][z] == 1 || m[t][z] == 2)
                            document.getElementById("x" + t + "n" + z).style.background = "#f00";
            }
            //处理存储蛇身数据
            function sssj() {
                let r = sssz.length - 1;
                m[sssz[r][0]][sssz[r][1]] = 0;
                document.getElementById("x" + sssz[r][0] + "n" + sssz[r][1]).style.background = "#fff";
                document.getElementById("uu").innerText = "蛇身数据" + sssz;
                sssz.unshift(Array());
                if (zz == 0)
                    sssz.pop();
                sssz[0][0] = wz[0];
                sssz[0][1] = wz[1];
                m[wz[0]][wz[1]] = 1;
                zhongzi();

            } //种子
            function zhongzi() {
                let u = Math.round(Math.random() * y);
                let s = Math.round(Math.random() * x);
                //种子
                if (zz == 1) m[u][s] == 1 && zhongzi() || (zz = 0, m[u][s] = 2),
                    document.getElementById("zz").innerText = "键盘按键" + u + "     " + s;
            }
            //键盘事件
            window.onload = function() {
                document.onkeydown = function(event) {
                    var e = e ? e : window.event;
                    var currKey = e.keyCode || e.which || e.charCode;
                    //87上83下65左68右
                    document.getElementById("fx").innerText = currKey + "--" + fx;
                    if (currKey == 87)
                        fx = 3;
                    if (currKey == 83)
                        fx = 4;
                    if (currKey == 65)
                        fx = 1;
                    if (currKey == 68)
                        fx = 2;
                    if (currKey == 66)
                        zz = 1;
                }
            }
        </script>
    </div>
</body>

</html>

哈哈魔王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
源码贪吃蛇详细 2021-09-01

贪吃蛇<!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&
复制链接

扫一扫