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

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

2024-02-02 595
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 童年回忆——开心消消乐（内含源码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
移动开发
雪碧有白泡泡
目录
相关文章
亚丁号
|
人工智能 Java 关系型数据库
分享66个JavaGame源码总有一个是你想要的
分享66个JavaGame源码总有一个是你想要的
亚丁号
1549 0
aliyun4468252351-17262
|
人工智能 机器人 测试技术
【python】python小游戏——开心消消乐（源码）【独一无二】
【python】python小游戏——开心消消乐（源码）【独一无二】
aliyun4468252351-17262
1196 5
不起名字可以不
|
11月前
|
JavaScript 前端开发 小程序
风靡全网的《羊了个羊》，其实可以用几百行代码复刻？
《羊了个羊》是一款曾在2022年9月风靡全网的小游戏，凭借第二关的超高难度成为现象级话题。本文通过CodeBuddy代码助手，探讨该游戏的核心机制与爆火原因，并尝试复刻其玩法。游戏结合“叠层消除+有限背包”设计，利用社交传播和心理驱动吸引用户，通关率极低的第二关更是激发了玩家的挑战欲。借助HTML和JS开发，我们逐步实现基础功能与优化，最终完成一个可运行的版本。无论是学习开发技巧还是理解爆款逻辑，这都是一次有趣的实践。
不起名字可以不
768 1
游客rci3gd3n2dlu2
|
9月前
|
机器学习/深度学习 数据安全/隐私保护 计算机视觉
过三色刷脸技术，过三色刷脸技术教程，插件过人脸python分享学习
三色刷脸技术是基于RGB三通道分离的人脸特征提取方法，通过分析人脸在不同颜色通道的特征差异
游客rci3gd3n2dlu2
1891 4
疯狂的猿
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件，并生成相应的图片链接，从而方便用户在网页、社交媒体或其他平台上分享图片。
疯狂的猿
596 2
单页图床HTML源码+本地API接口图床系统源码
ly~
|
数据可视化 BI API
除了 OpenGL，还有哪些常用的图形库可以在 C 语言中使用？
除了OpenGL，C语言中还有多个常用的图形库：SDL，适合初学者，用于2D游戏和多媒体应用；Allegro，高性能，支持2D/3D图形，广泛应用于游戏开发；Cairo，矢量图形库，支持高质量图形输出，适用于数据可视化；SFML，提供简单接口，用于2D/3D游戏及多媒体应用；GTK+，开源窗口工具包，用于创建图形用户界面。这些库各有特色，适用于不同的开发需求。
ly~
3676 4
游客5fdji2pvmf8888
|
安全 物联网 数据安全/隐私保护
智能家居安全：未来技术与隐私保护的平衡
在智能科技飞速发展的今天，智能家居已成为日常生活的一部分。然而，随着设备智能化程度的提高，数据安全问题也日益凸显。本文将探讨智能家居技术的最新发展趋势，并分析如何在提升生活便利性的同时，确保用户隐私和数据安全不被侵犯。我们将从技术层面剖析智能家居系统的潜在风险，并提出有效的防护策略，旨在为读者提供一个既先进又安全的智能家居使用环境。
游客5fdji2pvmf8888
539 1
JavaPub
你画我猜【附源码】
你画我猜【附源码】
JavaPub
460 1
土木林森
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略：HTML5属性与JavaScript方法的无缝对接，让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法，利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证，并借助JavaScript处理复杂逻辑，如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证，同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
土木林森
629 0
长梦
|
数据采集 搜索推荐 JavaScript
Next.js进阶：静态生成、服务器端渲染与SEO优化
【4月更文挑战第13天】Next.js是现代Web开发的关键框架，以其对静态生成（Static Generation）、服务器端渲染（Server-Side Rendering）和SEO的支持而备受青睐。本文深入解析了这三个核心特性的原理、应用和最佳实践。静态生成在构建时生成HTML，适用于内容更新少的页面，通过`getStaticProps`和`getStaticPaths`获取静态数据。服务器端渲染则在每次请求时生成HTML，适合实时数据，使用`getServerSideProps`获取服务器端数据。
长梦
800 1

热门文章

最新文章

  • 1
    教你用Python发现即将流失的客户（附代码、安装教程、学习资源）
  • 2
    什么是缓存击穿？
  • 3
    tensorflow：流程，概念和简单代码注释
  • 4
    阿里云CDN加速和全站加速DCDN区别及如何选择？
  • 5
    iGraph 2015双促复盘总结
  • 6
    阿里云学生服务器购买价格及学生免费服务器配置领取条件
  • 7
    SpringCloud Alibaba - Nacos 作为配置中心 & 读取Properties配置信息
  • 8
    各大在线地图，使用的经纬度坐标为什么都精确到小数点之后第六位？
  • 9
    加载exe的PE信息并输出相关PE信息的一段c++代码
  • 10
    RhinoMock入门（7）——Do，With和Record-playback
  • 1
    Hermes Agent纯免费部署教程：适合新手尝鲜，阿里云提供ECS免费部署Hermes Agent
    37
  • 2
    新手也能搭！阿里云轻量服务器一键部署 Hermes Agent，开源自进化 AI 智能体
    66
  • 3
    Hermes Agent 部署教程：阿里云轻量服务器新手0基础搭建自进化AI智能体，太简单了
    76
  • 4
    超详细！Hermes Agent 一键部署全流程指南，轻松上手不踩坑
    161
  • 5
    普通摄像头秒变“透视仪”：黎曼分形透镜如何让微弱瑕疵无处遁形（军工项目之外研究）
    50
  • 6
    SpringBoot对接黄金白银期货数据API
    50
  • 7
    Maven 本地仓库替代私仓配置指南
    36
  • 8
    【SpringSecurity新手村系列】（4）验证码功能实现
    36
  • 9
    【SpringSecurity新手村系列】（3）自定义登录页与表单认证
    30
  • 10
    当旅行规划开始理解礼仪边界，Agent协同与​D​М‌X​Α‌РΙ才有用武之地
    41

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务