前端学习笔记——“贪吃蛇”小游戏制作（一）

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

dsq-ee

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

阅读量394

点赞数 1

本文链接：https://blog.csdn.net/qq_39046053/article/details/104683216

版权

此笔记主要记录我的前端学习。

“贪吃蛇”小游戏的制作（一）

一、创建背景

制作“贪吃蛇”小游戏，首先要创建一个格子背景，以此作为“贪吃蛇”的路径。

我的思路如下：

1、建立一个div容器；

2、运用JavaScript动态往大的div容器中添加小的div，代码如下。

<body>
        <div id="box" class="out">
            <script>
                window.onload=function(){
                    var col=10;
                    var row=10;
                    var box1=document.getElementById("box");
                    //创建表格
                    for(var i=0;i<col;i++){
                        for(var j=0;j<row;j++){
                            var div=document.createElement('div');  //创建新的子节点
                            div.style.width="45px";
                            div.style.height="45px";
                            div.style.border=" 1px solid #000";
                            div.style.float="left";
                            box1.appendChild(div);         //插入新的子节点
                            console.log("biaoge");
                        }
                    } 
                }  
            </script>
        </div>

    </body>