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

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

“贪吃蛇”小游戏的制作 (一)

一、创建背景

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

我的思路如下:

1、建立一个div容器;

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

<body>
        <div id="box" class="out">
            <script>
                window.οnlοad=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>
发布了2 篇原创文章 · 获赞 2 · 访问量 71

猜你喜欢

转载自blog.csdn.net/qq_39046053/article/details/104683216