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

前言: 昨天的文章中简单的介绍了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等游戏框架了解的广度还不够,还有相当部分用法没用到.虽然能够应付朋友圈里传播的…

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

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

写在前面 本文实现一个简单的抽奖效果,使用青瓷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…

本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现了越来越多的以小游戏作为载体运营的活动类型,比如游戏预约,抢先试完等等,都收到了非常良好的效果. 在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下…

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

整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDialog:UI进度对话框属性类 依赖库类: SystemBarTintManager + Config =  实现兼容版本沉浸状态栏 ----------------------我是天天酷涛--------------------------- Webview 运行加载 H5小游戏 Webview基本属…

前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各处的文章时候,发现其中有几款是基于 three.js 开发的,目前火爆朋友圈的<跳一跳>就是其中之一.这引起了我的注意,想起几年前也做过不少 WebGL 的尝试,于是禁不住想要弄到微信小游戏平台上试试. 准备工作 最新版本的 three.js: 首先应该具有一定的 three.js 开发经验,有之…

在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下介绍.因为时间有限,研究并不深入, 如有高手路过,忘不吝赐教.   做个啥游戏呢?"绝地求生"很火,我们做个"绝地求死"如何?策划也很简单,和绝地求生相反,主角不是跳伞的玩家,而是地面的炮手,大炮要把跳伞的伞兵用大炮一个个都消灭掉.   牛逼的策划有了,咱们进入正题,…

Python开发转盘小游戏 Python  一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他为白色 二 知识点与难点 2.1 使用的package tkinter Python内置,实现GUI的主要package threading 实现多线程实现循环 time 用来延时 2.2 注意点 判断类型时使用isinstance函数,不要用type,因为type不区分子类 判断变量是否为TRUE…

剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友.同学.兄弟姐妹有意见分歧?通过“剪刀石头布游戏”来一局吧,谁赢了听谁的.躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找.洗衣服.做饭.扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做.这是我的处女座游戏,学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可…

1.环境搭建 安装教程传送门:http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=207&terms1_id=20&terms2_id=22   安装包下载:http://www.egret.com/egretengine 一键安装完成. 打开cmd验证是否完成:输入命令:egret,如安装正确的则如下图所示. 如果显示未配置环境变量,找到修复安装.点击修复安装后Egret 会帮你修复被破坏的环境变量和…

本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{ export class Soldier extends Laya.Sprite{ constructor(){ super(); this.init(); } init():void{ var img:Laya.Sprite = new Laya.Sprite(); img.graphics.draw…

人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件,下面分享一波源代码,可直接在手机上打开,进入手机浏览器,就能够high起来了. 分享一波关于H5的小游戏 1:飞翔的小鸟 以前用unity3D写过类似于这款小游戏,现在看完这个,是一款基于jQuery+CSS3实现的小鸟飞翔动画特效源码,效果很好,流畅也不卡顿,适配于各种主流浏览器. 2:锅打灰太…

推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 我的个人博客 最近事情特别多,今天终于实现了排行榜功能,记录下来大家一起学习学习. 一.调用默认排行榜 首先我们需要了解: 1.白鹭开发文档(开放数据域):http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html 2.微信小游戏开发文档(关系链数据):https://developers.weixin.q…

今天给大家分享一下微信分享转发功能,话不多说,直接干 方法一: 1.在egret中打开Platfrom.ts文件,添加代码如下(当然,你也可以直接复制粘贴) /** * 平台数据接口. * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一的接口用于开发者获取平台数据信息 * 推荐开发者通过这种方式封装平台逻辑,以保证整体结构的稳定 * 由于不同平台的接口形式各有不同,白鹭推荐开发者将所有接口封装为基于 Promise 的异步形式 */ declare interface Platform…

假设我们要实现的功能是从小游戏A跳转到小游戏B 对于小游戏A: (1)在platform.ts中添加代码如下: /** * 平台数据接口. * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一的接口用于开发者获取平台数据信息 * 推荐开发者通过这种方式封装平台逻辑,以保证整体结构的稳定 * 由于不同平台的接口形式各有不同,白鹭推荐开发者将所有接口封装为基于 Promise 的异步形式 */ declare interface Platform { getUserInfo(): Promi…

简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yanjd.top 第一步 - 制作想法 游戏如何实现是首要想的,这里我的想法如下: 利用canvas进行绘制地图(格子装). 利用canvas绘制蛇,就是占用地图格子.让蛇移动,即:更新蛇坐标,重新绘制. 创建四个方向按钮,控制蛇接下来的方向. 随机在地图上绘制出果子,蛇移动时"吃"到果子,增…

上一篇,水了近千字,很酸爽,同时表达了"重拾"一项旧本领并不容易,还有点题之效果.其实压缩起来就一句话:经过了一番记忆搜索,以及try..catch的尝试后,终于选定了Phaser 3.0作为我的小游戏开发引擎. 从这篇开始,我要开始拿出干货,进入实战.大家准备了好吗?一个字--干! 开发环境 首先说明一下,我的开发环境是VS Code + TypeScript.如果大家手头上没有用得比较顺手的TS开发环境,可以参考官微软方文档弄一个: https://code.visualstudi…

这应该是几个月前,闲的手痒,敲了一上午代码搞出来的,随之就把它丢弃了,当时让别人玩过,提过几条更改建议,但是时至今日,我也没有进行过优化和更改(本人只会作案,不会收场,嘎嘎),下面的建议要给代码爱好的童鞋完成了. 更改建议: a.当数字超过四位数时,显示的时候有部分被它的容器TextBox遮挡了,能不能把显示的数值变小点?答案是可以的.代码里有一段通过矩阵数据填充TextBox值的操作,可以在填充时,判断下数值长度,然后修改TextBox的文字大小. b.玩游戏的时候,使用方向键移动时,焦点可能…

一.简介 九宫格小游戏,可从本地图库载入一张图片,填充到9个ImageView,另涉及Timer计时.图库控件. 每个格子都是相同的控件,动态添加到首页中的,在初始化后,响应touch事件,之后通过多次消息传递,来完成整个拼图过程. 二.效果图 三.相关下载 http://bbs.deviceone.net/forum.php?mod=viewthread&tid=471 四.相关讨论 http://bbs.deviceone.net/forum.php?mod=viewthread&ti…

坑点: 1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onTouchEnded调用则是正常的,使用addTouchEventListener来播放也是正常的: 解决方案:在第一次addTouchEventListener回调方法里调用cc.audioEngine.playEffect()后再调用cc.audioEngine.stopAllEffects();之后在onTouchBegan方…

先用cocoscreator实现游戏逻辑 在cocoscreator项目里可以调用微信小游戏api 在cocos里面判断小游戏的运行环境 if (cc.sys.platform === cc.sys.WECHAT_GAME){ wx.aaaaa() } 纯js代码都可以在微信小游戏里使用,所以cocos creator里也可以调用为微信小游戏api,jq代码不行,纯在兼容问题…

前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较真 作为第一次分享,我选择打砖块这个逻辑不算太复杂的小游戏.同时,为了接近真实游戏效果,在游戏中也添加了关卡,砖块血量…

小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onload = function () { console.log("点击开始测试-------"); //点击开始按钮 var play = document.getElementsByClassName('play-btn'); play[0].click(); //获取画布盒子 // sle…

先来看一下界面: 游戏帮助类 class GameCore { //游戏地图 private int[,] map = new int[4, 4]; //合并时用到的临时数组 private int[] mergeArr = new int[4]; //空位数量 private int emptyCount = 16; //所有空位位置 private Location[] emptyArr = new Location[16]; private Random random = new Rand…