html5游戏开源,网页小游戏html5源码

如何使用Createjs来编写HTML5游戏EaselJS简介

CreateJS

CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。

CreateJS 中包含：

EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。

TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。

SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。

PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……

以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。

一.如何使用EaselJS

首先到 下载最新版的EaselJS，下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录，这两个目录中包含一些入门介绍和例子，有英语基础可以看看，DOC文件夹中包含easeljs所有的api。（同理，可以得到createjs包含的其他三项，其目录结构都与EaselJS相似）。

1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入之：

[html] view plain copy

script src="easeljs-0.8.1.min.js"/script

2.入口函数和创建canvas标签

[html] view plain copy

body onload="init();"

canvas id="game" width="1000" height="700" style="background-color: white"/canvas

/body

3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById("game")，选取canvas来创建，没有区别。

[javascript] view plain copy

script

function init(){

var stage = new createjs.Stage("game");

.......

stage.update();

}

/script

二.使用EaselJS创建图形和文字

最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。

1.添加文字

[html] view plain copy

var txt = new createjs.Text("HELLO","20px Times","#000");

Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：

[html] view plain copy

txt.x = 100;

txt.y = 100;

txt.text = "hello, world!"

完成后记得一定要把新创建的txt添加到stage中才能正常显示

相关问答

Q1: 如何看待 HTML5 开源游戏引擎 Egret，HTML5 游戏开发的前景如何？

一般游戏做好了前景还是不错的。

大部分人认为Egret现阶段只是模仿了flash当前的架构，而flash架构本身并不是一个游戏引擎架构，只是一个渲染引擎，而在国外的纯渲染引擎也有一个更成熟的pixi。

Js,webgl支持画布。框架白白石更薄，无论如何是一种帆布的包装，如为低效率的游戏最常用的设备tilemap都没有，只集成了几个现有的开放源码。

他们的主要目标似乎是不增加开源引擎的功能，但是关闭源代码的周围工具非常多，甚至是visual studio插件，这是这个阶段的其他引擎。所以问题是，为什么白鹭开始受到如此多的关注?html5游戏的前景和白鹭游戏呢?

以中国特色的html5游戏引擎路线，优先考虑中国开发商市场，学习cocos2dx先进经验。你想要启动html5。不像上面提到的沉闷的技术引擎，白鹭有钱!你是怎么知道白鹭的?在github上吗?它不是。

让别人知道他们不是很出名，他们是在其他渠道推广的，为网友制作明星路线的每一个版本都发布了一个统一的公共关系网站。

普及一个神经猫+白鹭的传说要花多少钱?现在，html5梦想工厂已经被挖掘，基本上在中国的任何html5开发者大会，你都会看到白白花的宣传讲座。

当然，白鹭也有优势，他们更了解中国的开发人员，开发人员不会关心中国的封闭源码工具是如何返回一个责任，为什么要写自己的，而不是基于grunt的构建工具。。

他们需要的是你可以发布一个需要，之后这个需要可以和各个配件相匹配。

Q2: 学html5游戏开发用什么引擎比较合适

你可以先去【绘学霸】网站找“游戏特效/unity3D”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表： ;tagid=305,306zdhhr-11y17r-2078659620062793788

想要系统的学习可以考虑报一个网络直播课，推荐CGWANG的网络课。老师讲得细，上完还可以回看，还有同类型录播课可以免费学（赠送终身VIP）。

自制能力相对较弱的话，建议还是去好点的培训机构，实力和规模在国内排名前几的大机构，推荐行业龙头：王氏教育。

王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】：

在“游戏特效/unity3D”领域的培训机构里，【王氏教育】是国内的老大，且没有加盟分校，都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是：王氏教育每个校区都是实体面授，老师是手把手教，而且有专门的班主任从早盯到晚，爆肝式的学习模式，提升会很快，特别适合基础差的学生。

大家可以先把【绘学霸】APP下载到自己手机，方便碎片时间学习——绘学霸APP下载：

Q3: GitHub 上的优质开源游戏项目，每个都很厉害

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是几个优质的开源 游戏 项目。

Ancient Beast是一款基于回合制的策略独立 游戏 项目，可在线与其他人对战，获取各种各样的生物，并使用它们来击败你的对手。

项目地址：

Dark Days Ahead 是一款回合制生存 游戏 ，背景设置在后世界末日的世界中。 游戏 目标是努力在一个严酷、持久、程序生成的世界中生存，战斗以击败或逃离各种强大的怪物，从僵尸到巨型昆虫，再到杀手机器人以及更奇怪和更致命的东西。

项目地址：

游戏 全部使用c++开发，相较于原版的优势有更大分辨率，更好的画质，更高的刷新率。 游戏 中的属性与原版有较大差别，难度比原版稍难，有新的 游戏 模式等。

项目地址：

金庸群侠传3D重制版是一个回合制战棋战斗开放世界RPG 游戏 。它是一个非盈利 游戏 项目，项目目标为重制经典 游戏 《金庸群侠传》（在线玩DOS原版）并支持后续一系列MOD和二次开发。你可以在PC、MAC或移动手机平台(或其他支持平台)游玩。

项目地址：

HexGL是一款未来主义的快节奏赛车 游戏 ，由Thibaut Despoulain使用 HTML5、Javascript 和 WebGL构建，是对原始 Wipeout 和 F-Zero 系列的致敬。

项目地址：

Freeciv-web 是一款开源回合制策略 游戏 。它可以在任何支持 HTML5 的网络浏览器中播放，并具有深入的 游戏 玩法和多种 游戏 模式和选项。你的目标是建设城市，收集资源，组织政府，组建军队，最终目标是创造最好的文明。您可以在线与其他玩家（多人）对战，也可以自己与电脑对战。有带有等距图形的 HTML5 2D 版本和 Freeciv-web 的 3D WebGL 版本。

项目地址：

韦诺之战是一款开源的回合制战术策略 游戏 ，具有高度幻想主题，具有单人 游戏 和在线/热门多人战斗，为夺回韦诺的王位而进行一场绝望的战斗，或参与任何其他冒险。

项目地址：

OpenTomb 是经典古墓丽影引擎的开源重新实现，旨在播放所有经典时代古墓丽影 游戏 (1-5) 的关卡以及自定义 TRLE 关卡。该项目不使用任何原始古墓丽影代码，一切都是从头开始完全重新开发的。

项目地址：

由 Daemon 引擎驱动的 FPS/RTS 混合 游戏 （ioq3 和 XreaL 的组合）

项目地址：

对原版马里奥兄弟的重新混合本地多人 游戏 。

项目地址：

一款基于 VDrift 和 OGRE 的 3D 赛车 游戏 ，带有赛道编辑器。

项目地址：

在一个地图上创建你自己的城市。

项目地址：

使用Javascript 和 HTML5 编写的Three.js库构建的塔防 游戏 。

项目地址：

基于 Canvas 的 HTML5 游戏 ，玩家必须使用他的魔法水箱扑灭树木上的火，以拯救燃烧的森林。

项目地址：

Q4: 如何看待 HTML5 开源游戏引擎 Egret，HTML5 游戏开发的前景如何

Github上一搜一大把。当前最流行的几个Javascript物理引擎有、newton等：matter-js、PhysicsJS、verlet-js、box2d

Q5: H5开发小游戏用什么引擎好

Turbulenz

Turbulenz是一个开源的HTML5游戏引擎，提供了可以运行在Windows、MacOS、Linux上的SDK，允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能：异步资源加载、进行特效和粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。

优点：

1. 功能强大，同时支持2D和3D

2. 基于MIT协议的开源引擎

Construct2

Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏。版可以将游戏导出成HTML5。收费版本分为个人版（79英镑）和企业版（259英镑），可以导出所有平台的版本，同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元，需要升级到企业版。

优点：

1. 简单易用，可实时运行游戏

2. 强大的事件系统，可以不通过写代码来控制游戏逻辑

3. 提供了可编程扩展的接口

4. 提供了大量特效，支持物理效果

5. 支持所有平台

6. 完整的文档以及社区支持

缺点：

不如直接写代码灵活

ImpactJS

ImpactJS是一个基于JavaScript的HTML5游戏引擎，同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎，使用需要支付99美元。

优点：

1. 提供了灵活的关卡编辑器，可以快速构建游戏地图

2. 提供了强大的调试工具

3. 提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来，可以在iOS平台上获得与原生应用相近的效率

4. 文档齐全，有两本专门介绍ImpactJS开发的书

5. 支持物理效果

6. 支持自己编写插件来扩展

App Store游戏

1. Biolab Disaster

2. Drop JS

Cocos2d-html5

Cocos2d-html5是一款基于Cocos2d-x API的2D开源HTML5游戏引擎。它目前通过canvas进行渲染，将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护，行业领袖、HTML5大力推动者Google为这个项目提供支持。同时，Zynga、Google等大公司的工程师也参与到它的设计工作中。

优点：

1. 与Cocos2d的API类似，容易上手

2. 中文文档齐全，资料丰富

3. 基于MIT协议的开源引擎

H5edu教育html5开发解答