别踩白块游戏用html如何制作,纯用JavaScript 实现网页上《别踩白块儿》小游戏

今天玩一个前端的语言 JavaScript 实战一个小游戏别踩白块儿

开发IDE：webStorm

实战思路：1、创建div容器 400*400

2、创建4行子div

3、4行子div中，在放四列子div，float

4、写一个方法，创建4列子div，创建一行div，把一行四列插入到容器中

5、定时器，每30秒增加top值

6、每往下挤100px时，再创建1行4列，插入再窗口的最前面

7、代码里的注释非常的详细

！！注意 ：因为是自己写来玩的，没有在意浏览器的兼容性，一定要用火狐浏览器啦运行代码

代码：

/*画面*/

#main{

width: 400px;

height: 400px;

border: 4px solid black;

margin: auto;

position: relative;

overflow: hidden;

}

/*容器*/

#container{

width: 100%;

height: 400px;

position: relative;

top:-100px;

background: white;

}

/*.row*/

.row{

width: 100%;

height: 100px;

}

/*.cell*/

.cell{

width: 100px;

height:100px;

float: left;

}

.black{

background: black;

}

/*

计分居中

*/

#score{

text-align: center;

}

#button{

text-align: center;

margin-top: 8px;

}

小翔的别踩白块儿

0

点我开始

var clock = null; // 定时器

var state = 0; //0 初始化状态,1 进行中，3 失败结束

var speed = 2;

/*

* 初始化界面操作

* */

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){

fall();

}else{

ev.target.className = 'cell';

ev.target.parentNode.pass = 1;

score();

}

}

/*

* start() 启动 定时器

* */

function start() {

clock = window.setInterval('move()',30);

}

/*

* 让黑快动画

* 获取container当前top的值 加像素

* */

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)){

var rows = con.childNodes;

if((rows.length == 5) && (rows[rows.length-1].pass !== 1)){

fall();

}

}

}

/*

* 加速方法

* */

function jiasu() {

if(speed == 2){

speed = 4;

}else if(speed == 4){

speed = 5;

}else if(speed == 5){

speed = 10;

}else if(speed == 10){

speed = 20;

}else if(speed == 20){

alert("你电脑太垃圾，浏览器玩不动了");

}

}

/*

* 输，结束

* */

function fall() {

clearInterval(clock);

state = 3;

alert('结束');

}

/*

* 计分

* */

function score() {

var newscore = parseInt($('score').innerHTML)+1;

$('score').innerHTML = newscore;

if(newscore % 20 == 0){

jiasu();

}

}

/*

* 创建 div.row div calss='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;

}

/*

* 返回一个数组，随机其中一个单元，值为“cell black” 其余三个皆为白色

* */

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();

公众号：顾四秋