做了个游戏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cont {
margin-top: 100px;
width: 400px;
height: 400px;
border: 1px solid brown;
position: relative;
}
#main {
top: -100px;
width: 400px;
height: 400px;
border: 1px solid blueviolet;
position: absolute;
}
.row {
height: 100px;
}
.row div {
width: 98px;
height: 98px;
border: 1px solid black;
float: left;
}
.black {
background: black;
}
</style>
</head>
<body>
<h2 id="score">0</h2>
<div id="cont">
<div id="main"></div>
</div>
</body>
<script type="text/javascript">
//创建div
var main = document.getElementById("main")
var clock=null;
var k=true;
var speed=2;
function cDiv(className) {
var div = document.createElement("div");
if(className) {
div.className = className;
}
return div;
}
function cRow() {
var ind = Math.floor(Math.random() * 4)
var row = cDiv('row');
for(var i = 0; i < 4; i++) {
if(i == ind) {
row.appendChild(cDiv('black'));
} else {
row.appendChild(cDiv());
}
}
if(main.firstChild) {
main.insertBefore(row, main.firstChild)
} else {
main.appendChild(row);
}
}
function init() {
for(var i = 0; i < 4; i++) {
cRow();
}
main.onclick=function(ev){
ev.target=ev.target||ev.srcElement;
if(k==false){
alert("请点击刷新")
}else if (ev.target.className=="") {
clearInterval(clock)
k=false;
alert("输了1")
}else{
var score=document.getElementById("score");
var src=parseInt(score.innerHTML)+1;
score.innerHTML=src;
if(src%10==0){
speed=speed+1;
}
ev.target.className="";
ev.target.parentNode.pass=true;
}
}
clock=window.setInterval('move();', 40)
}
init();
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) {
clearInterval(clock)
k=false;
alert("输了2")
}
}
if (main.children.length>=5) {
main.removeChild(main.lastChild)
}
}
function getStyle(el, attr) {
return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el, null)[attr];
}
</script>
</html>
网友评论