小游戏-别踩白块儿

2023-11-22 20:42:57

游戏截图：

Demo:Demo(建议谷歌打开)

html结构代码：

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>别走白格title><style>*{ margin:0;padding:0;}li{ list-style: none;}body,html{ width:100%;height:100%;}.tread-warp{ position: relative; width:100%;height:100%; overflow:hidden; background-color: #ccc; margin:0 auto; }.tread-main{ position:absolute;left:0;bottom:0; width:100%;box-sizing:border-box; }.tread-main .tread-box{position: relative; display: -webkit-box; width:100%; border-top:1px solid #ccc;}.tread-box div{  width:20%;height:500px; background-color: #fff; border-right:1px solid #ccc;box-sizing:border-box;}.tread-box div:last-child(){ border-right:none; }.tread-main div.back{ background-color: #000}.tread-main div.yellow{ background-color: yellow; text-align: center;  font-size:5em;}.tread-main div.white{ background-color: white;}style><script src="jquery-1.8.3.min.js">script><script src="tread.js">script><script>$(function(){var game = new treadBox();game.init();});script>
head>
<body><div class="tread-warp"><div class="tread-main">div>div>
body>
html>

View Code

tread.js 代码：

function treadBox(){this.win = $(window);this.treadMain = $('.tread-main');this.rows = 5;   //行数this.cols = 5;   //列数this.timer = null; //定时器this.lastDiv = null; // 最后一行this.queue = []; // 队列this.minute = 0; // 分数

}    
//初始化方法
treadBox.prototype.init = function(){this.setInt();this.begin();}
//初始化数据
treadBox.prototype.setInt = function(){var divH = this.getH()/this.rows;this.divH = divH;var html = '';for( var i=0;i<this.rows;i++ ){html += '';var ranNum = randomNum(0,this.cols-1);for( var j=0;j<this.cols;j++ ){if( i == this.rows-1 ){if( j == 2 ){html += 'this.divH +'px;line-height:'+ this.divH +'px;">开始';    }else{html += 'this.divH +'px;line-height:'+ this.divH +'px;">';    }}else if( ranNum == j ){html += 'this.divH +'px">';}else{html += 'this.divH +'px">';                }}html += '';}html += '';this.treadMain.html(html);this.insertDiv();}
//插入div
treadBox.prototype.insertDiv = function(){var html = '';for( var i=0;i<this.rows;i++ ){html += '';var ranNum = randomNum(0,this.cols-1);for( var j=0;j<this.cols;j++ ){if( ranNum == j ){html += 'this.divH +'px">';}else{html += 'this.divH +'px">';                }}html += '';}html += '';this.treadMain.prepend(html);this.getQueue();
}
//队列
treadBox.prototype.getQueue = function(){if( this.queue ){this.queue = [];}var len = $('.back').length;for( var i = 0;i ){this.queue.push( $('.back').eq(i) );}this.queue = this.queue.reverse();}
//开始游戏事件
treadBox.prototype.begin = function(){this.begin = $('.begin');var that = this;this.begin.on('click',function(){that.getLastDiv();that.animate();that.bindBegin();});}
//开始游戏事件；
treadBox.prototype.bindBegin = function(){var that = this;//白色方块 点击事件;$('.white').on('click',function(){clickWhite();});//黑色方块 点击事件;
    clickBack();function clickBack(){if( that.queue[0] ){$(that.queue[0]).on('click',function(){that.minute++;$(this).removeClass('back').addClass('white');//取消点击事件 添加"输"事件 (有问题)$(this).off('click');$(this).on('click',function(){that.lose();});that.queue.shift();clickBack();});    }}function clickWhite(){that.lose();}
}
//运动方法
treadBox.prototype.animate = function(){var n = 0;var that = this;this.timer = setInterval(function(){n = n+90;//运动
        that.treadMain.css({'bottom': -n });//超出屏幕
        that.fnExceed();//黑方框的碰撞检测
        that.collision();},150);}
//获取最后一行
treadBox.prototype.getLastDiv = function(){this.lastDiv = this.treadMain.find('.tread-ss:last-child');}
//超出添加
treadBox.prototype.fnExceed = function(){var winh = this.getH();if( parseFloat( this.lastDiv.offset().top ) > winh ){this.lastDiv.remove();this.lastDiv = '';this.getLastDiv();clearInterval( this.timer );this.treadMain.css('bottom',0);this.insertDiv();this.animate();}}
//黑块触碰底部
treadBox.prototype.collision = function(){var winh = this.getH();if( this.queue[0] ){if( parseFloat( $(this.queue[0]).offset().top + $(this.queue[0]).height() ) > winh ){this.lose();}}}
//输
treadBox.prototype.lose = function(){clearInterval( this.timer );alert('你输了!共得' + this.minute + '分');window.location.href = window.location.href;}
//屏幕高
treadBox.prototype.getH = function(){return this.win.height();}
//屏幕宽
treadBox.prototype.getW = function(){return this.win.width();}
//随机方法;
function randomNum( start,end ){return parseInt(Math.random()*(end-start+1)+start);}

View Code

心得：

起因：屌丝“站”地铁的时候看见美女坐着用手机玩游戏，当自己模拟做了这个游戏。。。。

这次用的是面向对象的方式写的其实本来也可以用单体json写就是好久没写new对象这样的代码就写着玩了。

黑格就是随机0到(列数-1)中某一列在判断是几然后就加class “back”，在第一次创建完了之后会跟着在‘.tread-main’的前头在插入一屏的同样的网格是为了开始游戏的时候运动好上边有数据同时也是为了判断第一屏的“.tread-ss”随着“.tread-main”运动超过手机屏幕的时候remove掉同时插入新的数据“.tread-main”运动清回原来值，在插入的方法里做了队列并反转了数组排序是为了让黑格子永远只能从低往上一个一个的点。队列还有一个用处就是运动的时候判断数组里第一个元素它的offsetTop到window的距离+自身的高是否大于手机屏幕来判断黑格是否触底，触底调用lose输的方法；

大概思路就是这个，当然其实插入insertDiv()和setInt()其实是可以合并的，包括为了游戏的可玩性可以无论是按着得分的累计、游戏时间的累计是可以做加速的更改或更复杂的障碍物的遮挡这些。。。。

转载于:https://www.cnblogs.com/auok/p/4647434.html

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

标签：技术

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统微软输入法于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题跑道汽车绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce

小游戏-别踩白块儿

相关文章