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

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

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

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

涉及知识点：JS、HTML5;

游戏截图：

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;}

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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jQuery小游戏
天天爱消除
jquery实现的小游戏、十字消除小游戏、消除小游戏、vb简易小游戏程序代码、儿童简易小游戏，以便于您获取更多的相关知识。

时间： 2024-09-09 04:27:06

jQuery实现简易的天天爱消除小游戏_jquery的相关文章

使用基于jquery的gamequery插件做JS乒乓球游戏_jquery

我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna.flash.js都做过同一款.先上张截图,不然大伙还不知道是什么东西. 它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/ 采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquer

七夕情人节丘比特射箭小游戏_jquery

载入jQuery <script src="./jquery-1.11.0.min.js" type="text/javascript"></script> HTML <div class="rank"> <div class="bangdan">勇士榜</div> <ul> <li>鲁大师成功射中!</li> <li>

jQuery制作拼图小游戏_jquery

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组在选择了使用CSS定位切图,就需要生成数据. 需要的css背景定位数组为:[0,0],[-150,0],[-300,0],[-4

有关jQuery中parent()和siblings()的小问题_jquery

今天发现一个小问题,现在也不知道到底是哪个梗在作祟,但是感觉是parent()和siblings()其中的一个. 我是想这样的根据输入的条件删选内容: demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://co

jQuery学习笔记之2个小技巧_jquery

1.jQuery功能函数前缀在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子复制代码代码如下: <script type="text/javascript"> var sString = "

Jquery进度条插件 Progress Bar小问题解决_jquery

个人使用总结: 复制代码代码如下: <script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>[Progres

Jquery时间验证和转换工具小例子_jquery

复制代码代码如下: var TimeObjectUtil;/** * @title 时间工具类 * @note 本类一律违规验证返回false * @author {boonyachengdu@gmail.com} * @date 2013-07-01 * @formatter "2013-07-01 00:00:00" , "2013-07-01" */TimeObjectUtil = { /** * 获取当前时间毫秒数 */ get

更高效的使用JQuery 这里总结了8个小技巧_jquery

1.DOM遍历是昂贵的,将变量缓存起来. 复制代码代码如下: //不推荐 var h = $('#ele').height(); $('#ele').css('height', h-20); 复制代码代码如下: //推荐 var $ele = $('#ele'); var h = $ele.height(); $ele.css('height',h-20); 2.优化选择符. 复制代码代码如下: //不推荐 $('div#myid') 复制代码代码如下: //推荐 $('#myid')

jQuery实现id模糊查询的小例子_jquery

eg_1. 在页面中查找某id图片集合,先放到代码: 复制代码代码如下: <div id="cacheLayerContainer-CBS-882" > <img src="" id="CBS_1_0" style="width: 256px; height: 256px"> <img src="" id="CBS_1_1" style=&qu