表格制作 贪吃蛇案例

使用表格制作

解释都在注释里

 

html文件：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>she</title>
        <link rel="stylesheet" href="./index.css">
    </head>

    <body>
        <div style="display: flex;">

            <table id="tabStart">
                <tr id=${tr+i}>
                    <td></td>
                </tr>
            </table>
            <div class="divright">
                <div class="branch">
                    <h2>得分:</h2>
                    <input class="branch1" type="text" value="0" id="defen">
                </div>
                <div class="hr1"></div>
                <div class="branch">
                    <h2>用时:（秒）</h2>
                    <input class="branch2" type="text" value="0" id="items">
                </div>
                <div class="hr1"></div>
                <div class="branch3">
                    <h2>游戏规则：</h2>
                    <h2 class="explain">按任意方向键，开<br>始游戏，通过吃蛋获<br>取得分。</h2>
                </div>
                <div class="hr1"></div>
                <div style="border: none;" class="branch">
                    <h2>榜单：</h2>
                    <ul id="before">
                        
                    </ul>
                    <ul id="liname">
                    </ul>
                </div>
                <div>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>
复制代码

css文件：

复制代码
            * {
                margin: 0;
                padding: 0;
            }

            h1 {
                text-align: center;
                margin-top: 20px;
            }

            table {
                background-color: #647866;
                border: 3px solid black;
                width: 970px;
            }

            #tabStart {
                width: 1000px;
                height: 1000px;
            }

            td {
                width: 20px;
                height: 20px;
                border: 1px solid #546956;
                text-align: center;
                line-height: 20px;
            }

            .div1 {
                width: 15px;
                height: 15px;
                background-color: #546956;
                margin: auto;
            }

            .branch {
                width: 100%;
                height: 120px;
                padding: 10px 0 0 10px;
            }

            .branch1 {
                text-indent: 1.3em;
                border: 0;
                background: none;
                width: 245px;
            }

            .branch2 {
                text-indent:1.3em;
                border: 0;
                background: none;
                width: 245px;
            }

            .branch3 {
                width: 100%;
                height: 200px;
                padding: 10px 0 0 10px;
            }

            .explain {
                text-indent: 1.5em;
                margin-top: 30px;
                letter-spacing: 4px;
            }

            .divright {
                height: 995px;
                width: 250px;
                background-color: #647866;
                border: black 3px solid;
                border-left: none;
            }

            ul {
                list-style: none;
                display: block;
                height: 280px;
                overflow: hidden;
            }

            ul li {
                display: block;
                line-height: 25px;
                margin: 15px 0 0 30px;
                font-size: 20px border: 1px solid black;
                color: black;
                display: flex;
            }

            input {
                font-size: 60px;

            }

            .hr1 {
                width: 100%;
                height: 1px;
                border-bottom: solid 3px black;
            }
复制代码

js文件：

复制代码
            
            // 循环渲染Tr Td
            let tabStart = document.getElementById("tabStart");
            let trHtml = "";
            for (let i = 1; i <= 30; i++) {
                trHtml +=
                    `
                <tr id="${"tr" + i}">
    
                </tr>
            `
            }
            tabStart.innerHTML = trHtml;

            let tdHtml = "";
            for (let i = 1; i <= 30; i++) {
                let tabEnd = document.getElementById("tr" + i);
                for (let j = 1; j <= 30; j++) {
                    tdHtml += "<td><div class='div1'></div></td>"
                }
                tabEnd.innerHTML = tdHtml;
                tdHtml = "";
            }
            // 1.基本设置
            var score = 0; //定义分数变量，保存游戏的成绩
            // 弹框
            let person
            var direction = "right" //设置蛇身移动的方向，默认向右移动
            var snake_data = [{
                "row": 6,
                "col": 8
            }, {
                "row": 6,
                "col": 7
            }, {
                "row": 6,
                "col": 6
            }, ]; //定义蛇身的基本数据(键，值类型)
            // row(行)，columns(列) 蛇身起始位置

            // 声明绘制蛇身的函数(并封装函数)
            function snake(row, col, color) {
                var tr = document.getElementsByTagName("tr")[row];
                var td = tr.getElementsByTagName("td")[col];
                td.style.background = color;
            }

            //声明绘制整条蛇的函数
            function draw_snake() {
                for (var i = 0; i < snake_data.length; i++) {
                    if (i != 0) {
                        // 渲染蛇身体在表格位置
                        var result = snake_data[0].row == snake_data[i].row && snake_data[0].col == snake_data[i].col;
                        // 如果蛇头的行号和当前行号相等(重合) 并且 蛇头的列号和蛇身的列号相等(说明重合)
                        if (result) {
                            die();
                            return;
                        }
                    }
                    var row = snake_data[i].row;
                    var col = snake_data[i].col;
                    var color = "rgba(0,0,0,1)";
                    snake(row, col, color);
                }
            }
            //调用函数
            draw_snake();

            //声明绘制 蛋 的函数
            function draw_egg() {
                do {
                    var row = parseInt(Math.random() * 25); //random(0-1)
                    var col = parseInt(Math.random() * 25);
                    var flag = false; //随机出来的egg不能和蛇身重合
                    for (var i = 0; i < snake_data.length; i++) {
                        var snake_row = snake_data[i].row;
                        var snake_col = snake_data[i].col;
                        if (row == snake_row && col == snake_col) {
                            flag = true;
                        }
                    }

                } while (flag) {
                    var tr = document.getElementsByTagName("tr")[row];
                    var td = tr.getElementsByTagName("td")[col];
                    td.style.background = "red";
                }
            
            }
            // 调用
            draw_egg();

            // 定义清屏函数 
            function clear() {
                for (var i = 0; i < 29; i++) {
                    for (var j = 0; j < 29; j++) {
                        var td = document.getElementsByTagName("tr")[i].getElementsByTagName("td")[j];
                        if (td.style.background != "red") {
                            td.style.background = "";
                        }
                    }
                }
            }

            // 死亡函数
            function die() {
                let aar
                    if (localStorage.getItem('aar') == null) {
                        aar=[]
                    } else{
                        aar = JSON.parse(localStorage.getItem('aar'))
                    }
                    // 死亡时在数组里面添加当前的名字和分数
                    aar.push({
                        uname:person,
                        dfen:score
                    })
                    // 存储数组，转换成字符串
                    localStorage.setItem('aar', JSON.stringify(aar))
                    
                clearInterval(timer); // 停止定时器
                var result = confirm(`游戏结束,总计:${score}分`);
                if (result) {
                    window.location.reload();
                }
                if(window.location.reload()){
                    document.getElementById(ul)+=`<h2>${userName}: &nbsp;<span>${userNubr}</span>分</h2>`
                }
            }

            // 定义定时器，让蛇自动移动(主要业务逻辑)
            var timer = setInterval(function() {
                clear(); // 每移动一次都要清除上一次绘制的蛇
                switch (direction) {
                    case "left":
                        if (snake_data[0].col - 1 < 0) {
                            die();
                            return;
                        }
                        // unshift 给第一个元素后面加入一个元素
                        snake_data.unshift({
                            "row": snake_data[0].row,
                            "col": snake_data[0].col - 1
                        })

                        break;

                    case "right":
                        if (snake_data[0].col + 1 > 30) {
                            die();
                            return;
                        }
                        snake_data.unshift({
                            "row": snake_data[0].row,
                            "col": snake_data[0].col + 1
                        })
                        break;

                    case "up":
                        if (snake_data[0].row - 1 < 0) {
                            die();
                            return;
                        }
                        snake_data.unshift({
                            "row": snake_data[0].row - 1,
                            "col": snake_data[0].col
                        })
                        break;

                    case "down":
                        if (snake_data[0].row + 1 > 30) {
                            die();
                            return;
                        }
                        snake_data.unshift({
                            "row": snake_data[0].row + 1,
                            "col": snake_data[0].col
                        })
                        break;
                }

                //判断新添加的蛇头是否是egg
                var row = snake_data[0].row;
                var col = snake_data[0].col;
                var td = document.getElementsByTagName("tr")[row].getElementsByTagName("td")[col];
                if (td.style.background != "red") {
                    snake_data.pop();
                } else {
                    draw_egg();
                    score += 10; //得分+1分
                }
                draw_snake();

            }, 800); // 匿名函数，刷新时间(毫秒)
            
            // 监听键盘事件，完成贪吃蛇方向的改变
            // onkeydown 按下操作
            document.onkeydown = function(event) {
                console.log(event.keyCode); //在控制台输出
                switch (event.keyCode) {
                    case 37:
                        if (direction == "right") {
                            return;
                        }
                        direction = "left";
                        break;

                    case 38:
                        if (direction == "down") {
                            return;
                        }
                        direction = "up";
                        break;


                    case 39:
                        if (direction == "left") {
                            return;
                        }
                        direction = "right";
                        break;

                    case 40:
                        if (direction == "up") {
                            return;
                        }
                        direction = "down";
                        break;

                    default:
                        break;
                }
            }
            // 得分
            var int = setInterval(defen, 1000)

            function defen() {
                let fen = document.getElementById("defen").value = score;
                
            
                let add= 0;
                add=score
                localStorage.setItem("分数", add);
                // 得分
                let userNubr = localStorage.getItem("分数");
                

                // // 获取名字
                let userName = localStorage.getItem("名字");
                let ListHtml = ''
                ListHtml += `<li><h2>${userName}: &nbsp;<span>${userNubr}</span>分</h2></li>`
                let li = document.getElementById("liname");
                li.innerHTML = ListHtml
                // console.log(li, ListHtml)
                
            }
            // 时间
            var int = setInterval(items, 1000)
            var timesa = 1;

            function items() {
                document.getElementById("items").value = timesa;
                timesa++;
            }

            function ucrname() {
                /**
                 * 在 结束 的时候 往本地存当前的名和分
                 * 在弹窗确认后拿到存的名和分循环生成 html 文本 添加到页面上
                 * */
                person = prompt("请输入您的名字", "小明");
                
                // 存储名字
                localStorage.setItem("名字", person);
                let aar
                // 判断 获取数组是否为空
                if (localStorage.getItem('aar') == null) {
                    aar = []
                } else{
                    // 把数组转为对象形式
                    aar = JSON.parse(localStorage.getItem('aar'))
                }
                let html=''
                // 确认弹窗后，生成html
                for (let i = 0; i < aar.length; i++) {
                    // html变量添加li标签
                    html+=`<li><h2>${aar[i].uname}</h2>:<h2>${aar[i].dfen}</h2>分</li>`
                }
                document.getElementById('before').innerHTML= html
                console.log(aar);
            }
            ucrname()
复制代码

 

posted @   罗砂  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
· 动态生成表格
· form的基本使用
· 贪吃蛇9.0终极版
· js+jquery实现贪吃蛇经典小游戏
· 贪吃蛇小游戏
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae