本文主要是介绍别踩白块JS代码实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
</pre><strong><span style="font-size:48px;">1.思路：</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">1.创建DIV容器；例如：400*400</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">2.创建4行DIV</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">3.4行DIV中，再放4列DIV，float left</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">4.写一个方法，创建4列子DIV，创建一行DIV，把一行四列，插入到容器中</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">5.定时器，没30毫秒增加TOP值</span><span style="font-size:24px; white-space: pre;"> </span><span style="font-size:24px;">6.没往下滑100px时，再创建一行四列，插入在窗口的最前面。</span></strong><pre name="code" class="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>别踩白块</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="http://blog.csdn.net/u012989536"/>
<style>#main {width: 400px;height: 400px;border: 2px solid green;margin: 0 auto;position: relative;overflow: hidden;}#container {width: 100%;height: 400px;position: relative;top:-100px;background: white;}.row {width: 100%;height: 100px;}.cell {width: 100px;height: 100px;float:left;}.black {background: black;}#score {text-align: center;}
</style>
</head><body><h1 id="score">0</h1><div id="main"><div id="container"></div></div></body><script>var clock = null; // 定时器操作句柄var state = 0; // 0初始化,1进行中, 2 暂停, 3失败var speed = 4;/** 初始化*/function init() {for(var i=0; i<4; i++) {crow();}$('main').onclick = function (ev) {judge(ev);}}function judge(ev) {if(state == 3) {alert('失败者禁入');return;}if(ev.target.className.indexOf('black') == -1) {} else {ev.target.className = 'cell';ev.target.parentNode.pass = 1;score();}//console.log(ev.target);}/** start() 启动*/function start(){clock = window.setInterval('move()' , 40);}/** 动画*/function move() {var con = $('container');var top = parseInt(window.getComputedStyle(con , null)['top']);if(speed + top > 0) { //一步会走过头,直接top=0top = 0;} else {top += speed; //调节每次下降的像素}con.style.top = top + 'px';// if(top == 0) {crow();con.style.top = '-100px';drow();} else if(top == (-100 + speed)) {//console.log(con.lastChild);var rows = con.childNodes;if( (rows.length == 5) && (rows[rows.length-1].pass !== 1)) {fail();} }}/** 加速函数*/function jiasu() {speed +=2;if(speed == 20) {alert('你的电脑太卡了');}}/** 输,结束*/function fail() {clearInterval(clock);state = 3;alert('结束');}/** 计分*/function score() {var newscore = parseInt($('score').innerHTML)+1;$('score').innerHTML = newscore;if(newscore % 10 == 0) {jiasu();}}/** 创建div.row*/function crow(){var con = $('container');var row = cdiv('row');var classes = createSn();for(var i=0; i<4; i++) {row.appendChild(cdiv(classes[i]));}if(con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row , con.firstChild);}}/** 删除最后一行*/function drow(){var con = $('container');if(con.childNodes.length == 6) {con.removeChild(con.lastChild);}}/*** 创建div,className是其类名*/function cdiv(className) {var div = document.createElement('div');div.className = className;return div;}/*** 返回1个数组,随机其中1个单元,值为'cell black',其他3个,皆为cell**/function createSn() {var arr = ['cell','cell','cell','cell'];var i = Math.floor(Math.random()*4);arr[i] = 'cell black';return arr; }/** 按id获取对象*/function $(id) {return document.getElementById(id);}init();start();</script>
</html>
效果展示
这篇关于别踩白块JS代码实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
