海外h5游戏源码【h5制作平台免费】 收藏 0

前端实战：从零到一实现H5拼图小游戏(附源码)

我去年曾写过一个用H5，Javascript，css3实现的拼拼乐小游戏，技术栈采用自己封装的类Jquery框架 Xuery ，其中涉及到了很多经典的 javascript 算法和css3特性 ，对大家的编程能力会有很大的提高，文末我也会放上源码获取方式，大家可以学习体验一下。

因为该应用属于 H5 游戏，为了让项目更轻量，我没有采用第三方 ui 库，如果大家想采用基于 vue 的第三方移动端ui库，我给大家推荐几个我之前用过的比较靠谱的：

• Mint 饿了么推出的移动端ui库
• NutUI 一套京东风格的移动端组件库
• muse-ui 基于MaterialUI风格的移动端UI组件
• cube-ui 滴滴团队开发的移动端UI组件库
• vant 有赞团队的电商风格的移动端组件库
• atom-design atom风格的移动端ui组件库
• mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库

以上推荐的都是社区比较完善，bug比较少的组件库，大家可以感受一下。

回到我们的小游戏开发，考验更多的是大家对 javascript 和css3 的掌握程度，在学习完这篇文章之后相信大家对 javascript 和 css3 的编程能力都会有极大的提升，后面还会介绍如何使用 canvas 实现生成战绩海报图的功能。

我们先来看看游戏的预览界面：

本文的算法实现方式在之前的拼拼乐文章中已经说明，这里主要介绍核心算法， 至于vue-cli的使用方法，笔者之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：

关于vue-cli3配置实战，可以移步 一张图教你快速玩转vue-cli3

目前笔者主要整理了如下核心功能，接下来笔者会一一带大家实现： 实现纯javascript上传预览图片 实现拼图分割功能 实现洗牌算法 实现生成战绩海报功能

文件上传预览主要采用FileReader API实现，原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串（base64编码）以表示所读取文件的内容。 具体代码如下：

一般我们处理这种拼图游戏都会有如下方案： 用canvas分割图片 采用n张不同的切好的切片图片（方法简单，但是会造成多次请求） * 动态背景分割

经过权衡，笔者想出了第三种方法，也是自认为比较优雅的方法，即动态背景分割，我们只需要使用1张图片，然后利于css的方式切割图片，有点经典的雪碧图的感觉，如下：

本质就是我们设置九个div，每个div都使用同一张图片，并且图片大小等于游戏画布大小，但是我们通过backgroundPosition（背景定位）的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。

洗牌逻辑依托于随机算法，这里我们结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。

数组乱序比较简单，代码如下：

洗牌逻辑基于数组乱序，具体逻辑如下：

n维矩阵主要用来做洗牌和计算成功率的，具体实现如下：

置换算法主要用来切换拼图的，比如用户想移动拼图，可以通过置换来实现：

生成战绩海报笔者采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲的比较详细。这里笔者简单实现一个供大家参考：

H5拼图小游戏我已在github开源， 感兴趣的可以在我github上学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可，由于实现比较简单，这里我就不详细介绍了。

• H5-dooring H5页面制作工具
• mitu 在线图片编辑器

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

手把手教你实现一个高性能的抽抽乐H5小游戏(含源码)

那我们就来学点有意思的,用几十行代码来实现一个高性能的抽奖小游戏.也基于此,来巩固我们的javascript基础,以及前端一些基本算法的应用.

• 防抖函数的应用
• 用css实现九宫格布局
• 生成n维环形坐标的算法
• 如何实现环形随机轨道运动函数
• 实现加速度动画
• 性能分析与优化

由于目前已有很多方案可以实现九宫格抽奖动画,比如使用动态active实现边框动画,用随机算法和定时器设置在何处停止等等. 为了进一步提高性能,本文介绍的方法,将使用坐标法,将操作dom的成本降低,完全由js实现滑块的路径的计算,滑块元素采用绝对定位,让其脱离文档流,避免其他元素的重绘等等,最后点击按钮我们会使用防抖函数来避免频繁执行函数,造成不必要的性能损失.

为了让大家更加熟悉dom结构,这里我就不用js动态生成了.如下html结构:

九宫格布局我们使用flex来实现,核心代码如下:

由上可知容器box采用flex布局,要想让flex子元素换行,我们这里要设置flex-wrap: wrap;此时九宫格布局就实现了. 滑块采用绝对定位,至于具体如何去沿着环形轨道运动,请继续看下文介绍.

由上图我们可以知道,一个九宫格的4条边,可以用以上8个坐标收尾连接起来,那么我们可以基于这个规律.来生成环形坐标集合.代码如下:

如果是单位坐标,那么cell为1,cell设计的目的就位为了和现实的元素相结合,我们可以手动设置单元格的宽度来实现不同大小的n维环形坐标集.

由抽奖动画分析可知,我们滑块运动的轨迹,其实就是环形坐标集合,所以我们只要让滑块的顶点(默认左上角)沿着环形坐标集合一步步变化就好了.

这样就能实现我们的滑块按照九宫格边框运动的动画了,当然以上函数只是基本的动画, 还没有实现在随机位置停止, 以及滑块的加速度运动,这块需要一定的技巧和js基础知识比如闭包.

加速度运动其实很简单,比如每转过一圈将setTimeout的延迟时间改变即可.代码如下:

随机停止这块主要是用了Math.random这个API, 我们在最后一圈的时候, 根据随机返回的数值来决定何时停止,这里我们在函数内部实现随机数值,完整代码如下:

防抖函数实现:

那么我们点击时,代码应该长这样:

在文章发布之后,有热心的小伙伴们提出了几个建议,综合如下:

• 抽奖动画结束后提供回调来通知页面以便处理其他逻辑
• 处理多次点击时,虽然加了防抖,但是用户在动画没结束时点击了开始按钮,又会执行动画导致动画越来越快,发生混乱.

综合以上问题,我在之前基础上做了进一步扩展,来解决以上提到的问题.

1. 添加动画结束时回调:

1. 处理多次点击时,虽然加了防抖,但是用户在动画没结束时点击了开始按钮,又会执行动画导致动画越来越快,发生混乱.

谢谢各位认真的建议,继续优化吧.

该实现方式的好处是支持n维环形坐标的抽奖,基于坐标法的应用还有很多,尤其是游戏和图形领域,在实现过程中一定要考虑性能和可扩展性,这样我们就可以在不同场景使用同一套方法论,岂不乐哉?本文完整源码我会放在github上,欢迎交流学习~

github地址：https://github.com/MrXujiang?tab=repositories

欢迎在公众号《趣谈前端》加入我们一起学习讨论，共同探索前端的边界。

H5积分商城源码

一、概述

H5 积分商城源码是构建基于 HTML5 技术的积分驱动型在线商城系统的基础代码集合。HTML5 赋予了商城跨平台、易传播、强交互的特性，使其能在手机、平板、电脑等各类终端设备的浏览器上流畅运行，无需用户额外下载安装应用程序，极大地降低了使用门槛，拓宽了商城的触达范围。

这份源码涵盖前端界面设计与交互逻辑以及后端服务器端的管理与数据处理代码。前端利用 H5 的新特性，如 Canvas 绘图实现炫酷的积分动画效果、本地存储用于缓存用户积分与浏览记录、CSS3 动画打造丝滑的页面切换，为用户营造沉浸式购物体验。后端则负责用户信息管理、积分规则制定与核算、商品库存管控、订单处理以及与第三方服务（如支付、物流）的对接，确保商城稳定、高效运营。它不仅是一系列代码文件，更是整合电商业务、激励用户行为、驱动商业增长的数字化引擎蓝图。

二、应用场景

1. 电商促销：在电商购物狂欢节期间，如 “双 11”“618”，商家通过 H5 积分商城鼓励消费者多购物积累积分，积分可用于兑换优惠券、热门商品、免邮权益等，刺激消费，提升客单价与复购率。消费者在购物之余，热衷于参与积分活动，增加在平台的停留时间，形成购物生态闭环。

2. 品牌会员忠诚度培养：品牌企业为会员打造专属 H5 积分商城，会员日常消费、签到、分享品牌内容皆可得积分。积分可兑换品牌限量版周边、新品试用装、线下活动门票等，强化会员与品牌的情感纽带，促使会员长期选择该品牌，抵御竞品冲击，提升品牌市场份额。

3. 线下门店引流：实体门店借助 H5 积分商城，将线下顾客引流至线上。顾客在店内消费扫码注册成为积分会员，线上积分商城提供线上专享折扣商品兑换、预约到店服务（如美容美发、餐饮订座），顾客线上预约到店消费又可获积分，实现线上线下流量互通，协同发展。

4. 员工福利商城：如今，越来越多的企业将 H5 积分商城运用到员工福利体系当中。一方面，企业通过设立多样化的积分获取途径来激励员工。

三、业务模式

1) 纯积分兑换模式：商城商品全部以积分标价，用户只能凭借前期积累的积分进行兑换，这种模式多见于品牌回馈老用户或合作伙伴福利发放场景，旨在提升用户粘性与品牌好感度，无需涉及现金交易，降低运营成本与财务风险。

2) 积分 + 现金混合模式：多数 H5 积分商城采用此模式，商品设定积分抵扣上限，用户在支付时可用积分抵扣部分金额，剩余款项现金支付。它既能激励用户积极攒积分，又能促进实际消费，平衡商城盈利与用户激励，适用于各类商业化运营的商城。

四、商城架构

H5积分商城的架构通常包括前端和后端两部分：

前端架构：

1. 页面布局：采用HTML5、CSS3等技术进行页面布局和样式设计，确保商城在不同设备和操作系统上都能良好显示。

2. 交互体验：使用JavaScript等前端技术实现商城的交互功能，如按钮点击、页面跳转等。同时，通过优化页面加载速度和交互效果，提升用户体验。

3. 数据展示：前端通过API接口与后端进行数据交互，获取商品信息、订单状态等数据，并在页面上展示给用户。

后端架构：

1. 服务器：采用高性能的服务器和数据库，确保商城的稳定运行和数据安全。

2. API接口：后端提供RESTful API接口，供前端进行数据交互。接口设计遵循统一规范，确保前后端数据交互的高效和稳定。

3. 业务逻辑处理：后端负责处理商城的业务逻辑，如用户注册与登录、积分获取与扣除、订单生成与处理等。通过编写高效的代码和优化算法，提高商城的响应速度和处理能力。

五、核心功能

1. 积分规则引擎：这是 H5 积分商城的核心驱动力，灵活配置积分获取与消耗规则。管理员可在后台设定不同行为（签到、消费、分享等）的积分奖励值、设置积分有效期、积分等级制度（随积分增长提升会员等级，解锁更多特权），根据商城运营策略动态调整规则，激发用户持续参与。

2. 商品管理系统：支持批量上传商品图片、信息，包括名称、规格、积分价格、库存数量、详情介绍等。对商品进行分类管理（如食品、数码、美妆）、标签标注（热门、新品、限量），方便用户检索。设置库存预警，当商品库存低于阈值自动提醒补货，确保兑换顺畅，结合销售数据分析商品热度，辅助商家采购决策。

3. 用户激励体系：除积分外，设立勋章系统，如 “连续签到 7 天勋章”“消费达人勋章”，给予用户荣誉感；排行榜功能展示积分排名前列用户，激发竞争心理，促使用户更多参与商城活动，同时为高积分用户提供专属客服、优先兑换等特权，全方位提升用户活跃度与忠诚度。

4. 营销推广工具：内置多种营销组件，如限时积分加倍活动，在特定时段购物积分翻倍，刺激消费高峰；组合兑换套餐，鼓励用户一次性兑换多件商品，提升客单价；社交分享奖励，用户分享商城链接至朋友圈、微信群，好友通过链接注册并消费，分享者与被分享者皆可得积分，借助社交裂变快速拓展用户群体，实现商城低成本引流。

H5 积分商城源码凭借其精巧架构与多元功能，为企业数字化营销、用户运营提供强大助力，在各行业持续释放商业潜能，随着技术迭代，未来将衍生更多创新玩法与应用可能。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com