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, i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0