AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

童年回忆——开心消消乐（内含源码inscode一键运行）

2024-02-02 80
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 童年回忆——开心消消乐（内含源码inscode一键运行）

认识一下inscode

CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。


Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。


使用Inscode，只需访问其网站https://inscode.csdn.net/

个人主页：why_does_it_work


先看运行效果

这里可以直接看查源码内容，刷新，最后一个是放大跳转网页


看查源码内容

获取项目

点击链接： 开心消消乐

项目核心

这是一款HTML5仿腾讯QQ开心消消乐小游戏。开心消消乐是一款三消游戏。玩家只需滑动手指让三个及以上的同色小动物横竖相连即可消除，完成每关的指定消除目标就可以过关。


使用方法

在页面中引入style.css和jquery、xxl.js文件。

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/xxl.js"></script>
HTML结构

使用一个无序列表来作为开心消消乐小游戏的容器即可。

<ul id="ul1"></ul>


xxl.js游戏初始化以及逻辑

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 );
  $(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.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();
  }
 });
 }
 },
 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;
 }
 },
 };
 Game.init();
});

style.css 表格绘制

*{ 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; }
.box0{ width:70px; height:70px; background:url(../images/1.jpg) no-repeat; float:left;}
.box1{ width:70px; height:70px; background:url(../images/2.jpg) no-repeat; float:left;}
.box2{ width:70px; height:70px; background:url(../images/3.jpg) no-repeat; float:left;}
.box3{ width:70px; height:70px; background:url(../images/4.jpg) no-repeat; float:left;}
.box4{ width:70px; height:70px; background:url(../images/5.jpg) no-repeat; float:left;}
.box5{ width:70px; height:70px; background:url(../images/6.jpg) no-repeat; float:left;}
表格分析

根据提供的代码分析，以下是代码的结构和功能：


ul1 是一个 div 元素的 id，该元素具有相对定位(position:relative)，背景颜色为 #1b1f2b，并且设置了内部内容的溢出隐藏(overflow:hidden)。


在 ul1 内部，有一组无序列表(<li>)，每个列表项都没有自定义的列表样式(list-style:none)。


下面是用于显示图片的6个小盒子(box0 到 box5)，每个盒子的宽度和高度都是 70 像素，使用 float:left 让这些盒子水平浮动在一行中。


每个盒子都有一个不同的背景图片，图片的路径是从上层文件夹的 images 文件夹中获取的。例如，box0 使用 1.jpg 作为背景图像，box1 使用 2.jpg，依此类推。


最后，在整个页面的 <body> 元素中，设置了文本居中对齐和背景颜色为 #2A2A2A。

开心消消乐是一款使用HTML编写的游戏。它是一个类似于消除游戏的益智游戏，玩家需要通过点击相同类型的方块来消除它们并得分。

小结

开心消消乐的实现可能包括以下步骤：


游戏界面布局：使用HTML的div元素和样式定义游戏区域的布局，包括方块的位置和大小。


方块生成：通过使用HTML的div元素和CSS样式创建方块，并将它们动态添加到游戏区域中。


交互功能：使用JavaScript编写事件处理程序，以便在用户点击方块时触发消除逻辑。这可以通过检查方块的类型和位置来实现。

文章标签：
前端开发
JavaScript
开发者
Java
移动开发
雪碧有白泡泡
目录
相关文章
雪碧有白泡泡
|
6月前
|
前端开发 JavaScript Java
童年回忆——超级玛丽（内含源码inscode一键运行）
童年回忆——超级玛丽（内含源码inscode一键运行）
雪碧有白泡泡
116 0
听风de歌
|
Python
python脚本的开心消消乐
python脚本的开心消消乐
听风de歌
291 2
雪碧有白泡泡
|
6月前
|
前端开发 JavaScript Java
童年回忆——捕鱼达人（内含源码inscode一键运行）
童年回忆——捕鱼达人（内含源码inscode一键运行）
雪碧有白泡泡
138 0
山水怡情
|
存储 前端开发 JavaScript
你小子！过年了，写了一个拼图小游戏来拼掘金兔年礼盒，来玩玩不？
你小子！过年了，写了一个拼图小游戏来拼掘金兔年礼盒，来玩玩不？
山水怡情
202 2
陈童学哦
|
C语言
无敌！我用【C语言】手搓出了一个体系完整的【员工管理系统】还能玩游戏听音乐？（超详细，附完整源码）
前言：员工管理系统是一款面向公司管理员的管理工具，旨在提供员工信息管理、薪资管理、员工绩效评估、员工福利管理和智能推荐等功能，帮助公司管理员更好地管理员工信息和提高员工工作效率。 这是总体设计大概模型图：
陈童学哦
140 0
二哥不像程序员
|
Python
真香！端午节到来，我用Python画了几个粽子送给女票，女票差点吃了我的电脑...
真香！端午节到来，我用Python画了几个粽子送给女票，女票差点吃了我的电脑...
二哥不像程序员
221 0
耀骑士
|
数据安全/隐私保护 图形学 Windows
推荐五款宝藏软件，身为宝藏男孩和宝藏女孩的你，不试一下吗？
今天带来五款宝藏软件，身为宝藏男孩和宝藏女孩的你们，不试一下吗？
耀骑士
193 0
推荐五款宝藏软件，身为宝藏男孩和宝藏女孩的你，不试一下吗？
木鸟杂记
|
程序员 Android开发 iOS开发
程序员五一修图小贴士
程序员五一修图小贴士
木鸟杂记
155 0
程序员五一修图小贴士
蜡笔小心_
|
Web App开发 JavaScript 前端开发
【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件
【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件
蜡笔小心_
148 0
【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件
渴望成为寂寞胜者
想过七夕？-＞女朋友陪你玩游戏（C）（上）
三子棋 七夕到了，没有女朋友怎么办？没事~ 写一个小游戏，让女朋友陪你玩三子棋~
渴望成为寂寞胜者
169 0
想过七夕？-＞女朋友陪你玩游戏（C）（上）

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    46
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    40
  • 3
    Kotlin - 区间与数组
    40
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    22
  • 7
    Kotlin - 分支与循环
    18
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 【科技少年】Python绘画编程第一课
  • 相册服务中的故事生成算法介绍
  • 阿里小蜜中的机器阅读技术

    • 相关电子书

    更多
  • 长安十二时辰背后的技术秘籍
  • 分身大师那些事
  • 分身大师那些事儿

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
  • 基于函数计算一键部署掌上游戏机
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
    • 下一篇
    阿里云OSS设置跨域访问