jquery实现一个开心消消乐小游戏代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0