html网页游戏别踩白块,如何实现网页版别踩白块的游戏（代码示例）

，我们通过 js 的 DOM

操作使其向下方移动，并设置定时器每30毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用

move()，触底后调用函数 fail() 游戏失败，具体方法如下：//使黑块向下移动

function move(){

var con = $('con');

var top = parseInt(window.getComputedStyle(con, null)['top']);

if(speed + top > 0){

top = 0;

}else{

top += speed;

}

con.style.top = top + 'px';

if(top == 0){

createrow();

con.style.top = '-100px';

delrow();

}else if(top == (-100 + speed)){

var rows = con.childNodes;

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

fail();

}

}

}

function fail(){

clearInterval(clock);

confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );

}

点击黑块事件

让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，

function judge(ev){

if (ev.target.className.indexOf('black') != -1) {

ev.target.className = 'cell';

ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击

score();

}

}

这一步，几个核心的功能点都已经实现了，剩下来的就是将这些方法组合起来，组成完整的逻辑关系。

完整代码别踩白块

score

0

《script》

var clock = null;

var state = 0;

var speed = 4;

/*

* 初始化 init

*/

function init(){

for(var i=0; i<4; i++){

createrow();

}

// 添加onclick事件

$('main').onclick = function(ev){

judge(ev);

}

// 定时器 每30毫秒调用一次move()

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

}

// 判断是否点击黑块

function judge(ev){

if (ev.target.className.indexOf('black') != -1) {

ev.target.className = 'cell';

ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击

score();

}

}

// 游戏结束

function fail(){

clearInterval(clock);

confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );

}

// 创建div, className是其类名

function creatediv(className){

var div = document.createElement('div');

div.className = className;

return div;

}

// 创造一个

并且有四个子节点

function createrow(){

var con = $('con');

var row = creatediv('row'); //创建div className=row

var arr = creatcell(); //定义div cell的类名,其中一个为cell black

con.appendChild(row); // 添加row为con的子节点

for(var i = 0; i < 4; i++){

row.appendChild(creatediv(arr[i])); //添加row的子节点 cell

}

if(con.firstChild == null){

con.appendChild(row);

}else{

con.insertBefore(row, con.firstChild);

}

}

// 根据id来get DOM元素

function $(id) {

return document.getElementById(id);

}

// 创建一个类名的数组，其中一个为cell black, 其余为cell

function creatcell(){

var temp = ['cell', 'cell', 'cell', 'cell',];

var i = Math.floor(Math.random()*4);

temp[i] = 'cell black';

return temp;

}

//让黑块动起来

function move(){

var con = $('con');

var top = parseInt(window.getComputedStyle(con, null)['top']);

if(speed + top > 0){

top = 0;

}else{

top += speed;

}

con.style.top = top + 'px';

if(top == 0){

createrow();

con.style.top = '-100px';

delrow();

}else if(top == (-100 + speed)){

var rows = con.childNodes;

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

fail();

}

}

}

// 加速函数

function speedup(){

speed += 2;

if(speed == 20){

alert('你超神了');

}

}

//删除某行

function delrow(){

var con = $('con');

if(con.childNodes.length == 6) {

con.removeChild(con.lastChild);

}

}

// 记分

function score(){

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

$('score').innerHTML = newscore;

if(newscore % 10 == 0){

speedup();

}

}

init();

《script》

吐了个 "CAO" !

吐个槽吧,看都看了