jQuery实现简易的天天爱消除小游戏


Posted in Javascript onOctober 16, 2015

今天分享一枚小demo:《天天爱消除游戏》,我想大家对这个游戏不陌生吧!?近期挺火的一款手游

妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad、iPhone上玩吧~

涉及知识点:JS、HTML5;

游戏截图:

jQuery实现简易的天天爱消除小游戏

CSS:

*{ margin:0; padding:0;}
#ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;}
#ul1 li{ list-style:none;}

body { text-align:center;}
#input1 { width:490px; height:50px; border:none; font-size:20px; position:relative; top:10px; border-radius: 12px 12px 0 0; box-shadow: 0px 3px 1px 1px #d1aca2;
background: -webkit-linear-gradient(top,#fae0e1,#e8c4c2);background: -moz-linear-gradient(top,#fae0e1,#e8c4c2);background: linear-gradient(top,#fae0e1,#e8c4c2); color:#fff; }

#sty1 .box0{ width:70px; height:70px; background:url(img/1.jpg) no-repeat; float:left;}
#sty1 .box1{ width:70px; height:70px; background:url(img/2.jpg) no-repeat; float:left;}
#sty1 .box2{ width:70px; height:70px; background:url(img/3.jpg) no-repeat; float:left;}
#sty1 .box3{ width:70px; height:70px; background:url(img/4.jpg) no-repeat; float:left;}
#sty1 .box4{ width:70px; height:70px; background:url(img/5.jpg) no-repeat; float:left;}
#sty1 .box5{ width:70px; height:70px; background:url(img/6.jpg) no-repeat; float:left;}

#sty2 .box0{ width:70px; height:70px; background:url(img/d.jpg) no-repeat; float:left;}
#sty2 .box1{ width:70px; height:70px; background:url(img/l.jpg) no-repeat; float:left;}
#sty2 .box2{ width:70px; height:70px; background:url(img/m.jpg) no-repeat; float:left;}
#sty2 .box3{ width:70px; height:70px; background:url(img/w.jpg) no-repeat; float:left;}
#sty2 .box4{ width:70px; height:70px; background:url(img/y.jpg) no-repeat; float:left;}
#sty2 .box5{ width:70px; height:70px; background:url(img/z.jpg) no-repeat; float:left;}

JS

document.ontouchmove = function(ev){
 ev.preventDefault(); 
};

$(function(){
 
 var bBtn = true;
 
 $('#input1').click(function(){
 if(bBtn){
 $(this).val('点击切换到爱消除版');
 $('body').attr('id','sty2');
 $('#ul1').css('background','#fff');
 }
 else{
 $(this).val('点击切换教师节版');
 $('body').attr('id','sty1');
 $('#ul1').css('background','#1b1f2b');
 }
 bBtn = !bBtn;
 });
 
 var Game = {
 colNum : 7,
 wH : 70,
 timeBtn : true,
 dir : 0,
 dirThis : null,
 init : function(){
 this.oUl = $('#ul1');
 this.addSound();
 this.createMap();
 
 },
 createMap : function(){
 
 this.oUl.css({width : this.colNum*this.wH , height : this.colNum*this.wH});
 var numX = 0;
 var numY = 0;
 
 for(var i=0;i<Math.pow(this.colNum,2);i++){
 var oLi = $('<li>');
 oLi.attr('class','box'+ Math.floor(Math.random()*6));
 
 oLi.data({x : numX , y : numY});
 
 numX++;
 
 if( numX == this.colNum ){
  numX = 0;
  numY++;
 }
 
 this.oUl.append( oLi );
 }
 
 this.positionShow();
 
 this.removeShow();
 
 this.bindTouch();
 
 },
 positionShow : function(){
 
 this.aLi = this.oUl[0].getElementsByTagName('li');
 
 var arr = [];
 $(this.aLi).each(function(i,elem){
 arr.push( [ elem.offsetLeft , elem.offsetTop ] );
 });
 $(this.aLi).each(function(i,elem){
 $(elem).css({position : 'absolute',left : arr[i][0] , top : arr[i][1]});
 
 });
 
 this.arr = arr;
 
 },
 bindTouch : function(){
 
 var startX = 0;
 var startY = 0;
 var This = this;
 var izIndex = 2;
 var startThis = null;
 
 this.oUl.delegate('li','touchstart mousedown',function(event){
 
  var data = event.originalEvent.changedTouches ? event.originalEvent.changedTouches[ 0 ] : event;
  startX = data.clientX;
  startY = data.clientY;
  
  startThis = this;
  
  return false;
 });
 
 this.oUl.delegate('li','touchend mouseup',function(event){
 
 var data = event.originalEvent.changedTouches ? event.originalEvent.changedTouches[ 0 ] : event;
 
 if(This.timeBtn && ( Math.abs(startX - data.clientX)>10 || Math.abs(startY - data.clientY) > 10 )){
  
 $(startThis).css('zIndex',izIndex++);
 
 if( Math.abs(startX - data.clientX) > Math.abs(startY - data.clientY) ){// 左右
  if(startX < data.clientX){ //→
  
  if( $(startThis).data('x') != This.colNum-1 ){
  
  This.dir = 1;
  
  var index = $(startThis).data('x')+1 + $(startThis).data('y')*This.colNum;
  
  var nextLi = $(This.oUl).find('li').eq(index);
  
  $(startThis).insertAfter( nextLi ); 
  
  $(startThis).animate({left : This.arr[index][0]},300); 
  nextLi.animate({left : This.arr[index-1][0]},300); 
  
  $(startThis).data('x',$(startThis).data('x')+1);
  nextLi.data('x',nextLi.data('x')-1);
  
  This.dirThis = nextLi;
  
  }
  
  }
  else{ //←
  
  if( $(startThis).data('x') != 0 ){
  
  This.dir = 2;
  
  var index = $(startThis).data('x')-1 + $(startThis).data('y')*This.colNum;
  
  var prevLi = $(This.oUl).find('li').eq(index);
  
  $(startThis).insertBefore( prevLi ); 
  $(startThis).animate({left : This.arr[index][0]},300); 
  prevLi.animate({left : This.arr[index+1][0]},300); 
  
  $(startThis).data('x',$(startThis).data('x')-1);
  prevLi.data('x',prevLi.data('x')+1);
  
  This.dirThis = prevLi;
  
  }
  
  }
 }
 else{ //上下
 
  if(startY < data.clientY){ //↓
  
  if( $(startThis).data('y') != This.colNum-1 ){
  
  This.dir = 3;
  
  var index = $(startThis).data('x') + ($(startThis).data('y')+1)*This.colNum; 
  
  var downLi = $(This.oUl).find('li').eq(index);
  
  var prevThis = $(startThis).prev();
  
  $(startThis).insertAfter( downLi ); 
  downLi.insertAfter( prevThis );
  
  $(startThis).animate({top : This.arr[index][1]},300); 
  downLi.animate({top : This.arr[index-This.colNum][1]},300); 
  
  $(startThis).data('y',$(startThis).data('y')+1);
  downLi.data('y',downLi.data('y')-1);
  
  This.dirThis = downLi;
  
  }
  
  }
  else{ //↑
 
  if( $(startThis).data('y') != 0 ){
  
  This.dir = 4;
  
  var index = $(startThis).data('x') + ($(startThis).data('y')-1)*This.colNum; 
  
  var upLi = $(This.oUl).find('li').eq(index);
  
  var prevThis = $(startThis).prev();
  
  $(startThis).insertAfter( upLi ); 
  upLi.insertAfter( prevThis );
  
  $(startThis).animate({top : This.arr[index][1]},300); 
  upLi.animate({top : This.arr[index+This.colNum][1]},300); 
  
  $(startThis).data('y',$(startThis).data('y')-1);
  upLi.data('y',upLi.data('y')+1);
  
  This.dirThis = upLi;
  
  }
  
  }
 
 }
  This.oA.src = 'sound/b.mp3';
  This.oA.play();
  
  This.removeShow();
 }
 
 return false;
 
 });
 },
 removeShow : function(){
 
 var arr = [];
 var This = this;
 
 function addArr(aLi){
 
 var prevLi = aLi[0];
 var iNum = 0;
 
 for(var i=0;i<aLi.length;i++){
  if( aLi[i].className == prevLi.className && i%7!=0 ){
  iNum++;
  }
  else{
  
  if(iNum >= 2){
  for(var j=0;j<=iNum;j++){
  arr.unshift( aLi[(i-1)-j] );
  }
  
  }
  
  iNum = 0;
  }
  prevLi = aLi[i]; 
 }
 
 if(iNum >= 2){
  for(var j=0;j<=iNum;j++){
  arr.unshift( aLi[(i-1)-j] );
  }
  
 }
 
 }
 
 addArr(this.aLi);
 addArr(this.xyChange(this.aLi));
 
 for(var i=0;i<arr.length;i++){
 
 for(var j=0;j<this.aLi.length;j++){
  if( arr[i] == this.aLi[j] ){
  this.aLi[j].bBtn = true;
  }
 }
 }
 
 var removeNum = 0;
 var removeY = [];
 var changeArr = [];
 
 for(var i=0;i<this.aLi.length;i++){
 if( this.aLi[i].bBtn ){
  removeNum++;
  removeY.push( this.aLi[i] );
 }
 }
 
 if(removeY.length){
 this.timeBtn = false;
 this.dir = 0;
 }
 else{
 this.toReset();
 return;
 }
 
 for(var i=0;i<removeY.length;i++){
 for(var j=0;j<this.arrY[ $(removeY[i]).data('x') ].length;j++ ){
  
  if( removeY[i] == this.arrY[ $(removeY[i]).data('x') ][j] ){
  this.arrY[ $(removeY[i]).data('x') ].iNum++;
  this.arrY[ $(removeY[i]).data('x') ].splice(j,1);
  this.arrY[ $(removeY[i]).data('x') ].unshift( this.oneLi( $(removeY[i]).data('x') , this.arrY[ $(removeY[i]).data('x') ].iNum ) );
  
  }
 }
 }
 
 for(var i=0;i<this.colNum;i++){
 changeArr = changeArr.concat( this.arrY[i] );
 }
 
 var c = this.xyChange( changeArr );
 var removeYnum = 0;
 
 for(var i=0;i<removeY.length;i++){
 
 $(removeY[i]).animate({opacity:0},function(){
  $(this).remove();
  
  removeYnum++;
  
  if(removeYnum == removeY.length){
  
  
  for(var i=0;i<c.length;i++){
  This.oUl.append( c[i] );
  }
  
  var numX = 0;
  var numY = 0;
  
  for(var i=0;i<This.aLi.length;i++){
  
  $(This.aLi).eq(i).data({x : numX , y : numY});
  
  numX++;
  
  if( numX == This.colNum ){
  numX = 0;
  numY++;
  }
  
  }
  
  This.movePos();
  }
  
 });
 }
 
 },
 xyChange : function(aLi){
 
 var arr = [];
 var This = this;
 this.arrY = {};
 iNum = 0;
 
 for(var i=0;i<this.colNum;i++){
 this.arrY[i] = [];
 this.arrY[i].iNum = 0;
 }
 
 (function(){
 
 if(iNum==This.colNum){
  return;
 }
 
 for(var i=0;i<aLi.length;i++){
  if(i%This.colNum == iNum){
  arr.push( aLi[i] );
  This.arrY[iNum].push( aLi[i] );
  }
 }
 iNum++;
 arguments.callee();
 
 })();
 
 return arr;
 
 },
 oneLi : function(x,iNum){
 
 var oLi = $('<li>');
 oLi.attr('class','box'+ Math.floor(Math.random()*6));
 oLi.css({ position : 'absolute' , left : x*this.wH , top : -iNum*this.wH });
 this.oUl.append( oLi );
 
 return oLi.get(0);
 
 },
 movePos : function(){
 
 var bBtn = true;
 var This = this;
 
 for(var i=0;i<this.aLi.length;i++){
 $(this.aLi[i]).animate({top : this.arr[i][1] },function(){
  if(bBtn){
  bBtn = false;
  
  This.timeBtn = true;
  
  This.removeShow();
  
  This.oA.src = 'sound/a.mp3';
  This.oA.play();
  
  }
 });
 }
 
 },
 toReset : function(){
 
 switch(this.dir){
 case 1:
  
  var index = $(this.dirThis).data('x')+1 + $(this.dirThis).data('y')*this.colNum;
  
  var nextLi = $(this.oUl).find('li').eq(index);
  
  $(this.dirThis).insertAfter( nextLi ); 
  
  $(this.dirThis).animate({left : this.arr[index][0]},300); 
  nextLi.animate({left : this.arr[index-1][0]},300); 
  
  $(this.dirThis).data('x',$(this.dirThis).data('x')+1);
  nextLi.data('x',nextLi.data('x')-1);
  
 break;
 case 2:
 
  var index = $(this.dirThis).data('x')-1 + $(this.dirThis).data('y')*this.colNum;
  
  var prevLi = $(this.oUl).find('li').eq(index);
  
  $(this.dirThis).insertBefore( prevLi ); 
  $(this.dirThis).animate({left : this.arr[index][0]},300); 
  prevLi.animate({left : this.arr[index+1][0]},300); 
  
  $(this.dirThis).data('x',$(this.dirThis).data('x')-1);
  prevLi.data('x',prevLi.data('x')+1);
 
 break;
 case 3:
 
  var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y')+1)*this.colNum; 
  
  var downLi = $(this.oUl).find('li').eq(index);
  
  var prevThis = $(this.dirThis).prev();
  
  $(this.dirThis).insertAfter( downLi ); 
  downLi.insertAfter( prevThis );
  
  $(this.dirThis).animate({top : this.arr[index][1]},300); 
  downLi.animate({top : this.arr[index-this.colNum][1]},300); 
  
  $(this.dirThis).data('y',$(this.dirThis).data('y')+1);
  downLi.data('y',downLi.data('y')-1);
 
 break;
 case 4:
 
  var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y')-1)*this.colNum; 
  
  var upLi = $(this.oUl).find('li').eq(index);
  
  var prevThis = $(this.dirThis).prev();
  
  $(this.dirThis).insertAfter( upLi ); 
  upLi.insertAfter( prevThis );
  
  $(this.dirThis).animate({top : this.arr[index][1]},300); 
  upLi.animate({top : this.arr[index+this.colNum][1]},300); 
  
  $(this.dirThis).data('y',$(this.dirThis).data('y')-1);
  upLi.data('y',upLi.data('y')+1);
 
 break;
 }
 
 
 },
 addSound : function(){
 
 this.oA = document.createElement('audio');
 document.body.appendChild( this.oA );
 
 }
 
 };

 Game.init();
 
});

HTML

<input type="button" value="点击切换到教师节版" id="input1" />
<ul id="ul1">
</ul>

当然啦,千万别忘记载入jQuery

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Javascript 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
浅析javascript 定时器
Dec 23 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 #Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 #Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
javascript实现3D切换焦点图
Oct 16 #Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 #Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 #Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 #Javascript
You might like
php下载文件的代码示例
2012/06/29 PHP
php内嵌函数用法实例
2015/03/20 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php编程每天必学之验证码
2016/03/03 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
Vue表单实例代码
2016/09/05 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
什么是规则表达式
2012/05/03 面试题
行政处罚告知书
2015/07/01 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis