使用了封装了canvas的create.js库来实现的. 最终效果: 工程: Rect.js /* * 方块类 */ function Rect(n,color,specialColor){ createjs.Shape.call(this); /** * 设置方块的类型 */ this.setRectType=function(type){ this._RectType=type; switch(type){ case 1: this.setColor(color); break; case…

写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个版本. 所有开发H5的朋友都请先做些demo测试下你目标机的兼容性问题,以免开发好了后,跑不起来. 半年过去了,没想到地址都挂光了.看图片过过瘾吧2016-7-23 16:33:00 demo地址:帮朋友打点小广告,兑奖链接真实有效,微信中打开可以参与兑奖, <!--http://getgeekte…

3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一样(可以理解为借口).我先贴出写错的两个地方. 1. //self.last['', ''];//重置 这个是写错的 self.last = ["",""];//重置 这个才是正确的 2. $sword.css({'-webkit-transfrom':'rotateX…

代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下. 如有需要,可根据自己的需求修改源码样式.源码配置属性代码,实现个性化定制. 以下为文件目录结构示意图,核心代码在js文件夹下的四个common.js.main.js.game.js…

本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更重要的是参透一些游戏开发的思路和想法,而不是仅仅知道怎么写代码来完成这个游戏. 先用一张图来了解一下整个游戏的构成. Map表示整个背景地图,作用很简单,就是渲染黑色背景.Player 表示玩家粒子,它尾巴中带有生命点,我们用Life类来表示.Enemy为红色的敌人粒子,因为技能粒子和Enemy粒子…

本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canvas 2d的场景坐标系采用平面笛卡尔坐标系统,左上角为原点(0,0),向右为x轴正方向,向下为y轴正方向,坐标系统的1个单位相当于屏幕的1个像素.这对我们进行角色定位至关重要. Enemy粒子 游戏中的敌人为无数的红色粒子,往同一个方向做匀速运动,每个粒子具有不同的大小. 入口处通过一个循环来创建E…

前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇文章的提示,我们找到index.html,将帧率data-frame-rate修改成60.根据设计图宽高,我将data-content-width设成640,data-content-height设成1038: 就是下图不包括微信工具栏的高度.至于适配模式我先设成exactFit,以canvas的渲…

前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过程中会使用到众多的类或对象,对于它们的具体用法,建议查看白鹭官方文档. 文档地址:http://edn.egret.com/cn/docs/page/639 修改Loading 上一节我们讲到即将创建场景createGameScene()的时候就结束了,这一节在我们正常创建场景之前,我们先修改一下l…

前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相当部分用法没用到.虽然能够应付朋友圈里传播的…

Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相…