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 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
JavaScript实现栈结构详细过程
Dec 06 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使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
生成二维码方法汇总
2014/12/26 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
ES6学习教程之对象字面量详解
2017/10/09 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python实现flappy bird游戏
2018/12/24 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
校园创业策划书
2014/01/14 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
快餐公司创业计划书
2014/04/29 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
优秀教师单行材料
2014/12/16 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
反邪教观后感
2015/06/11 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python