别踩白块简单实现

• 刚开始学习javascript,想找个小项目练练手，所以就写了一个简单的别踩白块网页版小游戏，不是很复杂，但是刚开始的时候还是觉得无从下手，写这篇文章以防我自己以后忘了
• 到底还如何做呢？
  1、 四行div，每行div有四小div并排，每四个必有一个黑块
  2、使用定时器控制div向下移动
  3、添加onclick事件判断黑块是否被点击
  4、设置死亡条件和分数
  html代码

score
0
/*main为游戏区，con为白块黑块区，白块黑块的div在js代码中生成*/
开始游戏

css布局

*{margin: 0px;padding: 0px;
}
h2{text-align: center;
}
#sco1{margin-top: 100px;
}
#main{width: 400px;height: 400px;margin-left: auto;margin-top: 50px;margin-right: auto;position: relative;border: 1px solid gray;overflow: hidden;
}
#con{width: 100%;/*border: 1px solid #87f71e;*/height: 400px;position: relative;top: -100px;/*为了让白块从第二层开始，从最后一层还玩不玩了*/
}
.rows{width: 100%;height: 100px;}
.cell{width: 100px;height: 100px;float: left;background-color: white;/*border: 1px solid #fb0d1b;*/
}
.black{width: 100px;height: 100px;background-color: black;/*border: 1px solid #fbfa07;*/float: left;
}
#bt{/*position: absolute;*//*left:400px;*//*top:300px;*//*z-index: 1;*/margin-left: 730px;margin-top: 20px;height: 30px;width: 60px;
}

javascript代码

var speed=2;var clock=null;function createRows() {//创建一行白块（当然其中有个黑块）var content=$("con");var row=createDiv("rows");var cells=getCell();//得到黑块和白块的class值for(var i=0;i<4;i++){row.appendChild(createDiv(cells[i]));}if(content.firstChild==null){content.appendChild(row);}else{content.insertBefore(row,content.firstChild);}
}
function getCell() {//返回一行的块的classvar cCell=["cell","cell","cell","cell",];var cellIndex=Math.floor(Math.random()*4);随机生成黑块位置cCell[cellIndex]="black";return cCell;
}
function createDiv(className) {//创建一个白块var cdiv=document.createElement("div");cdiv.className=className;return cdiv;
}
function $(Element) {//为了方便，把通过id查找元素的方法拿了出来return  document.getElementById(Element);
}
function cclick(ev) {//点击函数// console.log(ev.target.className);if(ev.target.className.indexOf("black")!==-1)//点到黑块{ev.target.className="cell";ev.target.parentNode.pass=1;cscore();}else {//点到白块die();}
}
function delet() {//删除一行var content=$("con");if(content.childNodes.length==6){content.removeChild(content.lastChild);}
}
function move() {//下移var content = $("con");var top = parseInt(window.getComputedStyle(content, null)["top"]);if (top + speed > 0) {top = 0;}else {top += speed;}// console.log(top);content.style.top = top + "px";//console.log(content.childNodes.length)if (top == 0) {createRows();content.style.top = '-100px';delet();}else if(top==(-100+speed)){var roww=content.childNodes;console.log(roww[roww.length-1].pass);if(roww.length==5&&roww[roww.length-1].pass!==1){die();}}
}
function  die() {clearInterval(clock);alert("游戏结束，得分："+parseInt($("sco").innerHTML));}
function cscore() {var score=$("sco");var newscore=parseInt(score.innerHTML)+1;score.innerHTML=newscore;if(newscore%10==0){speedadd();}}
function speedadd() {speed+=2;
}
function init() {for(var i=0;i<4;i++){createRows();}$("main").onclick=function (ev) {cclick(ev);};clock=window.setInterval("move()",30);}
init();
$("bt").onclick=function(ev)
{location.replace(location);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！