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

╰半夏微凉° 2023-10-14 10:05 27阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★[前端炫酷代码分享][Link 3]  
> ★ ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
         *  项目核心
         *   *  使用方法
             *  HTML结构
         *  xxl.js游戏初始化以及逻辑
         *  style.css 表格绘制
         *   *  表格分析
 *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

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

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][bd4e168cf00247feb1322907b477f4e9.png]

### 获取项目 ###

点击链接： [开心消消乐][Link 6]

![在这里插入图片描述][0e8f8bdae09445b0af9cc61638841edb.png]

### 项目核心 ###

![在这里插入图片描述][fbb0b7f4e941422492ea93ce03b2a5a4.png]

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

#### 使用方法 ####

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

#### HTML结构 ####

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

![在这里插入图片描述][989b1acbac4644d48ce4bc7b9fac0785.png]

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

![在这里插入图片描述][87e5c183aed0471b9b100ff9b15666a5.png]

### 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;}

#### 表格分析 ####

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

1.  `ul1` 是一个 `div` 元素的 id，该元素具有相对定位(`position:relative`)，背景颜色为 `#1b1f2b`，并且设置了内部内容的溢出隐藏(`overflow:hidden`)。
2.  在 `ul1` 内部，有一组无序列表(`<li>`)，每个列表项都没有自定义的列表样式(`list-style:none`)。
3.  下面是用于显示图片的6个小盒子(`box0` 到 `box5`)，每个盒子的宽度和高度都是 70 像素，使用 `float:left` 让这些盒子水平浮动在一行中。
4.  每个盒子都有一个不同的背景图片，图片的路径是从上层文件夹的 `images` 文件夹中获取的。例如，`box0` 使用 `1.jpg` 作为背景图像，`box1` 使用 `2.jpg`，依此类推。
5.  最后，在整个页面的 `<body>` 元素中，设置了文本居中对齐和背景颜色为 `#2A2A2A`。  
    开心消消乐是一款使用HTML编写的游戏。它是一个类似于消除游戏的益智游戏，玩家需要通过点击相同类型的方块来消除它们并得分。

# 小结 #

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

1.  游戏界面布局：使用HTML的div元素和样式定义游戏区域的布局，包括方块的位置和大小。
2.  方块生成：通过使用HTML的div元素和CSS样式创建方块，并将它们动态添加到游戏区域中。
3.  交互功能：使用JavaScript编写事件处理程序，以便在用户点击方块时触发消除逻辑。这可以通过检查方块的类型和位置来实现。

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[bd4e168cf00247feb1322907b477f4e9.png]: https://img-blog.csdnimg.cn/bd4e168cf00247feb1322907b477f4e9.png
[Link 6]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_36
[0e8f8bdae09445b0af9cc61638841edb.png]: https://img-blog.csdnimg.cn/0e8f8bdae09445b0af9cc61638841edb.png
[fbb0b7f4e941422492ea93ce03b2a5a4.png]: https://img-blog.csdnimg.cn/fbb0b7f4e941422492ea93ce03b2a5a4.png
[989b1acbac4644d48ce4bc7b9fac0785.png]: https://img-blog.csdnimg.cn/989b1acbac4644d48ce4bc7b9fac0785.png
[87e5c183aed0471b9b100ff9b15666a5.png]: https://img-blog.csdnimg.cn/87e5c183aed0471b9b100ff9b15666a5.png