HTML5 canvas游戏开发实战 4 : lufylegend开源库件

最新推荐文章于 2021-02-23 15:30:44 发布

CopperDong

最新推荐文章于 2021-02-23 15:30:44 发布

阅读量573

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/QFire/article/details/79274391

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

4.1 lufylegend库件简介

http://lufylegend.com/lufylegend

在lufylegend库件的使用步骤：

（1）引入lufylegend库件

（2）在HTML中创建一个<div>标签

（3）使用init函数进行初始化工作

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
</head>
<body>
  <div id="mylegend">loading...</div>
  <script type="text/javascript">
  	init(50, "mylegend", 500, 350, main);
  	function main() {
  		alert("lufylegend start");
  	}
  </script>   
</body>
</html>

4.2 图片的加载与显示

步骤：

（1）使用Lloader类加载图片数据

（2）将读取完的图片数据保存到LbitmapData中

（3）利用Lbitmap将图片显示到画板上。

  <script type="text/javascript">
  var loader;
  init(50, "mylegend", 500, 350, main);
  function main() {
  	loader = new LLoader();
  	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
  	loader.load("face.jpg", "bitmapData");
  }
  function loadBitmapdata(event) {
  	var bitmapdata = new LBitmapData(loader.content);
  	var bitmap = new LBitmap(bitmapdata);
  	addChild(bitmap);
  }
  </script>

LBitmapData对象：LBitmapData(image, x, y, width, height)
LBitmap对象：还可以控制图片的各种属性，如坐标、透明度、旋转、缩放等。

4.3 层的概念

让不同的图像按照先后顺序显示到屏幕上，lufylegend.js为canvas实现了层的概念，它就是LSprite对象。用法简单

var layer = new LSprite();

addChild(layer);

  <div id="mylegend">loading...</div>
  <script type="text/javascript">
  var loader;
  init(50, "mylegend", 500, 350, main);
  function main() {
  	loader = new LLoader();
  	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
  	loader.load("face.jpg", "bitmapData");
  }
  function loadBitmapdata(event) {
  	var bitmapdata = new LBitmapData(loader.content);
  	var bitmap = new LBitmap(bitmapdata);
  	var layer = new LSprite();
  	addChild(layer);
  	layer.addChild(bitmap);
  	layer.x = 50;
  	layer.y = 50;
  	layer.rotate = 60;
  }
  </script>

4.4 使用LGraphics对象绘图

绘制矩形：drawRect(thickness, lineColor, pointArray, isfill, color);

thickness：边框线宽
lineColor：边框颜色
pointArray：矩形范围数组【坐标x，坐标y，长，宽】
isfill：是否填充矩形
color：填充颜色

var graphics = new LGraphics();

graphics.drawRect(xxx);

绘制圆：drawArc(thickness, lineColor, pointArray, isfill, color);

thickness：边框线宽
lineColor：边框颜色
pointArray：矩形范围数组【坐标x，坐标y，半径，起始角度，结束角度，顺时针或逆时针】
isfill：是否填充
color：填充颜色

绘制任意多边形：drawVerticess(thickness, lineColor, vertices, isfill, color)

thickness：边框线宽
lineColor：边框颜色
vertices：顶点数组【】
isfill：是否填充矩形
color：填充颜色

使用Canvas的原始绘图函数进行绘图：LGlobal.canvas.xxxx

使用LSprite对象进行绘图：上面的绘图都可以使用LSprite对象中的graphics来实现。

layer.graphics.xxxx()

使用LGraphics对象绘制图片：

  <script type="text/javascript">
  var loader;
  init(50, "mylegend", 500, 350, main);
  function main() {
  	loader = new LLoader();
  	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
  	loader.load("face.jpg", "bitmapData");
  }
  function loadBitmapdata(event) {
  	var bitmapdata = new LBitmapData(loader.content);
  	var backlayer = new LSprite();
  	addChild(backlayer);
  	backlayer.graphics.beginBitmapFill(bitmapdata);
  	backlayer.graphics.drawArc(1, "#000", [110,80,50,0,Math.PI*2]);
  }
  </script>

4.5 文本

LTextField对象是专门用于显示文本信息的一个对象

  <script type="text/javascript">
  var loader;
  init(50, "mylegend", 500, 350, main);
  function main() {
  	var layer = new LSprite();
  	addChild(layer);
  	var field = new LTextField();
  	field.text = "Hello World";
  	layer.addChild(field);
  }ss
  </script>

4.6 事件

addEventListener可以为各种事件添加侦听

鼠标：鼠标按下（LMouseEvent.MOUSE_DOWN）、鼠标弹起（LMouseEvent.MOUSE_UP）和鼠标移动（LMouseEvent.MOUSE_MOVE）

循环事件：按照指定间隔时间不断重复地广播某事件。用LEvent.ENTER_FRAME来添加侦听循环事件。

layer.addEventListener(LEvent.ENTER_FRAME, onframe);

键盘事件：LKeyboardEvent.KEY_DOWN、LKeyboardEvent.KEY_UP和LKeyboardEvent.KEY_PRESS

由于键盘事件需要加载到window上，所以加载的时候与前面讲述的方法会稍微有些变化

  <div id="mylegend">loading...</div>
  <script type="text/javascript">
  init(50, "mylegend", 500, 350, main);
  var field;
  function main() {
  	var layer = new LSprite();
  	layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
  	addChild(layer);
  	sfield = new LTextField();
  	field.text = "Wait Click!";
  	layer.addChild(field);
  	LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, downshow);
  	LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_UP, upshow);
  }
  function downshow(event) {
  	field.text = event.keyCode + " Down!";
  }
  function upshow(event) {
  	field.text = event.keyCode + " Up!";
  }
  </script>

4.7 按钮

lufylegend内置了LButton类来添加按钮

LButton(DisplayObject_up, DisplayObject_over)

DisplayObject_up：代表按钮默认up状态的对象，当鼠标不在按钮上，按钮就处于这个状态。
DisplayObject_over：当鼠标移动到按钮上时按钮的状态，鼠标离开时按钮又回到up状态。

4.8 动画

利用LAnimation类和循环事件，可以很轻松地实现一组动画的播放。

LAnimation(layer, data, list)

layer：LSprite对象
data：LBitmapData对象
list：一个存储坐标的二维数组

准备一个二维的坐标数组，如16个小图片的坐标。

LGlobal.divideCoordinate(width, height, row, col)

使用setAction函数可以改变播放图片的行号和列号。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
</head>
<body>
  <div id="mylegend">loading...</div>
  <script type="text/javascript">
  init(200, "mylegend", 500, 350, main);
  var loader, anime, layer;
  function main() {
  	loader = new LLoader();
  	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
  	loader.load("chara.png", "bitmapData");
  }
  function loadBitmapdata(event) {
  	var bitmapdata = new LBitmapData(loader.content, 0, 0, 64, 64);
  	var list = LGlobal.divideCoordinate(256, 256, 4, 4);
  	//
  	layer = new LSprite();
  	addChild(layer);
  	anime = new LAnimation(layer, bitmapdata, list);
  	layer.addEventListener(LEvent.ENTER_FRAME, onframe);
  }
  function onframe(event) {
  	var action = anime.getAction();
  	switch(action[0]) {
  		case 0:
  		layer.y += 5;
  		if (layer.y >= 200) {
  			anime.setAction(2);
  		}
  		break;
  		case 1:
  		layer.x -= 5;
  		if (layer.x <= 0) {
  			anime.setAction(0);
  		}
  		break;
  		case 2:
  		layer.x += 5;
  		if (layer.x >= 200) {
  			anime.setAction(3);
  		}
  		break;
  		case 3:
  		layer.y -= 5;
  		if (layer.y <= 0) {
  			anime.setAction(1);
  		}
  		break;
  	}
  	anime.onframe();
  }
  </script>   
</body>
</html>

CopperDong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas游戏开发实战 4 : lufylegend开源库件

4.1 lufylegend库件简介 http://lufylegend.com/lufylegend 在lufylegend库件的使用步骤：（1）引入lufylegend库件（2）在HTML中创建一个标签（3）使用init函数进行初始化工作 loading... init(50, "mylegend", 500, 350, ma
复制链接

扫一扫