跳转到内容


使用 html5/canvas 框架 easelJS 制作游戏的思路

easelJS html5 canvas

  • 您无法回复此主题
No replies to this topic

#1 冰力

    Administrator

  • 总版主
  • 1260 帖子数:

发表于 2015/01/04 00:04:40

作者:邹佳庆
微博:http://weibo.com/zoujiaqing/
原文:http://community.itbbs.cn/thread/758133/

今天看到这个easelJS,感觉还不错,兴趣上来了就写个demo。

文件总共3个:
  • index.html

  • easeljs-0.8.0.min.js

  • app.js
直接贴代码吧:)

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>easelJS demo</title>
	<script type="text/javascript" src="easeljs-0.8.0.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			GameLoader();
		}
	</script>
</head>
<body>
	<canvas id="gameStage" width="640" height="860" style="background-color: #FFFDDD;"></canvas>
</body>
</html>

app.js
function GameLoader()
{
	// 创建一个游戏舞台 gameStage
	var gameStage = new createjs.Stage("gameStage");

	// 调用一个容器
	var loadingLayer = new LoadingLayer();

	gameStage.addChild(loadingLayer);

	// 把 loadingLayer 删除
	//gameStage.removeChild(loadingLayer);

	gameStage.update();
}

function LoadingLayer()
{
	var layer = new createjs.Container();
	layer.name = "LoadingView";

	layer.height = 860;
	layer.width = 640;
	layer.y = 100;

	var Rect = new createjs.Shape();
	Rect.graphics.beginFill("green");
	Rect.graphics.drawRect(10, 10, 100, 100);

	layer.addChild(Rect);

	this.addChild(layer);
}

LoadingLayer.prototype = new createjs.Container();

其中 LoadingLayer 就是一个界面,如果你有多个界面可以创建多个 Layer 方法,这样方便管理和操作。

为了看的更清楚可以把文件都分开,我只是为了方便都写在一起了。

其实这个算不上什么游戏demo,只是一个大概的实现设计和准备工作。

上面的写法基本有点像 kineticJS 的写法,我习惯把 Container 叫做 Layer .... 应该是受到 cocos2d 影响了吧。

懒人直接看附件吧!

附加文件