</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=0
top = 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>
效果展示
时间： 2024-10-25 19:13:09