«««< HEAD
<!DOCTYPE html>
<html lang="en">
<head>
</head>
#main {
width: 400px;
height: 400px;
position: relative;
top:-100px;
}
.row {
height: 100px;
}
.row div {
width: 98px;
height: 98px;
border:1px solid black;
float: left;
}
.black {
background: black;
}
</style>
<body>
<h1>别踩白块</h1>
<h2 id="sc">0</h2>
<div id="cont">
<div id="main"></div>
</div>
</body>
<script>
var main = document.getElementById('main');
var clock = null;
var state = true;
var speed = 2;
function getStyle(el , attr) {
return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr];
}
// 造div
function cDiv(className) {
var div = document.createElement('div');
if(className) {
div.className = className;
}
return div;
}
// 造一行,即连造4个小div
function cRow() {
// 造一个0-3之间的随机数
var ind = Math.floor(Math.random()*4);
// 造一个行div
var row = cDiv('row');
for(var i=0; i<4; i++) {
if(i == ind) {
row.appendChild(cDiv('black'));
} else {
row.appendChild(cDiv());
}
}
// 把行row塞到main里
if(main.firstChild) {
main.insertBefore(row , main.firstChild);
}else {
main.appendChild(row);
}
}
function move() {
var top = getStyle(main , 'top');
top = parseInt(top) + speed;
main.style.top = top + 'px'
if(top > 0){
cRow();
main.style.top = '-100px';
// 判断最后一行是否含有黑块
if(main.lastChild.pass == undefined) {
fail();
}
}
if(main.children.length>=5) {
main.removeChild(main.lastChild);
}
}
function init() {
for(var i=0; i<4; i++) {
cRow();
}
main.onclick = function(ev) {
ev.target = ev.target || ev.srcElement;
if(state == false) {
alert('重开一局吧');
} else if(ev.target.className == '') {
fail();
} else {
ev.target.className = '';
ev.target.parentNode.pass = true;
var score = document.getElementById('sc');
var sc = parseInt(score.innerHTML)+1;
score.innerHTML = sc;
if(sc%10==0) {
speed +=2;
}
}
}
clock = window.setInterval('move();' , 40);
}
function fail() {
clearInterval(clock);
state = false;
alert('输了');
}
init();
</script>
</html>
=======
<!DOCTYPE html>
<html lang="en">
<head>
</head>
#main {
width: 400px;
height: 400px;
position: relative;
top:-100px;
}
.row {
height: 100px;
}
.row div {
width: 98px;
height: 98px;
border:1px solid black;
float: left;
}
.black {
background: black;
}
</style>
<body>
<h1>别踩白块</h1>
<h2 id="sc">0</h2>
<div id="cont">
<div id="main"></div>
</div>
</body>
<script>
var main = document.getElementById('main');
var clock = null;
var state = true;
var speed = 2;
function getStyle(el , attr) {
return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr];
}
// 造div
function cDiv(className) {
var div = document.createElement('div');
if(className) {
div.className = className;
}
return div;
}
// 造一行,即连造4个小div
function cRow() {
// 造一个0-3之间的随机数
var ind = Math.floor(Math.random()*4);
// 造一个行div
var row = cDiv('row');
for(var i=0; i<4; i++) {
if(i == ind) {
row.appendChild(cDiv('black'));
} else {
row.appendChild(cDiv());
}
}
// 把行row塞到main里
if(main.firstChild) {
main.insertBefore(row , main.firstChild);
}else {
main.appendChild(row);
}
}
function move() {
var top = getStyle(main , 'top');
top = parseInt(top) + speed;
main.style.top = top + 'px'
if(top > 0){
cRow();
main.style.top = '-100px';
// 判断最后一行是否含有黑块
if(main.lastChild.pass == undefined) {
fail();
}
}
if(main.children.length>=5) {
main.removeChild(main.lastChild);
}
}
function init() {
for(var i=0; i<4; i++) {
cRow();
}
main.onclick = function(ev) {
ev.target = ev.target || ev.srcElement;
if(state == false) {
alert('重开一局吧');
} else if(ev.target.className == '') {
fail();
} else {
ev.target.className = '';
ev.target.parentNode.pass = true;
var score = document.getElementById('sc');
var sc = parseInt(score.innerHTML)+1;
score.innerHTML = sc;
if(sc%10==0) {
speed +=2;
}
}
}
clock = window.setInterval('move();' , 40);
}
function fail() {
clearInterval(clock);
state = false;
alert('输了');
}
init();
</script>
</html>
origin/master
近期评论