jquery实现一个开心消消乐小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：jquery实现一个开心消消乐小游戏代码，玩家只需滑动手指让三个及以上的同色小动物横竖相连即可消除，完成每关的指定消除目标就可以过关。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{ margin:0; padding:0;}
    #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;}
    #ul1 li{ list-style:none;}
     
    body { text-align: center; background-color: #2A2A2A; color: aliceblue}
    .box0{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/1.jpg) no-repeat; float:left;}
    .box1{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/2.jpg) no-repeat; float:left;}
    .box2{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/3.jpg) no-repeat; float:left;}
    .box3{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/4.jpg) no-repeat; float:left;}
    .box4{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/5.jpg) no-repeat; float:left;}
    .box5{ width:70px; height:70px; background:url(//repo.bfw.wiki/bfwrepo/images/game/xiaoxiaole/6.jpg) no-repeat; float:left;}
    </style>
</head>

<body>

    <p style="text-align:center;margin-top:1em;">《开心消消乐》 是一款三消游戏，游戏画面精美、上手简单。玩家只需滑动手指让三个及以上的同色小动物横竖相连即可消除，完成每关的指定消除目标就可以过关。</p>
    <p style="text-align:center;margin-top:1em;">小动物的滑动还会触发很多神奇的效果，比如在四连直线和横线特效相邻时，两个互相拖动，两者同时触发，构成十字架；四连直线可以产生爆炸特效，使横排或竖排四个目标同时清空。</p>
    <ul id="ul1"></ul>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript">
        document.ontouchmove = function(ev){
 ev.preventDefault(); 
};
 
$(function(){
 var Game = {
 colNum : 7,
 wH : 70,
 timeBtn : true,
 dir : 0,
 dirThis : null,
 init : function(){
 this.oUl = $('#ul1');
 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 ).........完整代码请登录后点击上方下载按钮下载查看