别踩白块小游戏源代码中相关js部分如下所示：
<script> var main = document.getelementbyid('main') go = document.getelementbyid('go') count = document.getelementbyid('count');//设置四种颜色 cols = ['#1aab8a', '#e15650', '#121b39', '#80a84e'];//动态创建div function cdiv(classname) { var div = document.createelement('div') //生成随机数 index = math.floor(math.random() * 4) //添加class div.classname = classname //循环创建div为块 for (var i = 0; i < 4; i++) { var idiv = document.createelement('div') div.appendchild(idiv) } if (main.children.length == 0) { main.appendchild(div); } else { main.insertbefore(div, main.children[0]); } div.children[index].style.backgroundcolor = cols[index]; div.children[index].classname = "i"; }</script>
此段代码中，我们在for循环体中，通过document.createelement('div')定义了一个变量idiv，然后通过appendchild() 方法向前面动态创建的div下，循环添加子元素即idiv。
这里动态创建的div则表示游戏中的行，添加的idiv则表示一行中的四个方块。
然后通过if判断语句，判断main下是否存在子元素，如果不存在则通过appendchild方法添加子节点，如果存在则通过insertbefore在已有的子节点之前插入新的子节点。
最后通过产生随机数，给一行中的方块随机添加背景颜色并添加class为i。这里我们定义了变量cols为四种颜色。
注：
appendchild() 方法可向节点的子节点列表的末尾添加新的子节点。
insertbefore() 方法在您指定的已有子节点之前插入新的子节点。
本节就是关于别踩白块小游戏中cdiv方法的具体介绍，那么由于文章篇幅的原因，我们会在后期的文章中，继续为大家解析剩余的js代码部分。
以上就是原生js实现别踩白块小游戏（五）的详细内容。