HTML5(lufylegend.js练习)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5-lufyLegend测试</title>
<script type="text/javascript" src="js/lufylegend-1.5.1.min.js"></script>
<script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var layermap = 400;
var loader = "";
var annimation = "";
var layer = "";
/**
50 -游戏 加载速度
"mylegend" div的id
500,500 游戏 界面的宽和高
main 初始化完成后调用次函数
**/
init(50,"mylegend",500,500,main); function main(){
//使用Lloader类加载图片数据
loader = new LLoader();
loader.load("image/chara.png", "bitmapData");
//图片数据加载完成后执行loadbitMapData函数
loader.addEventListener(LEvent.COMPLETE, loadbitMapData);
} function loadbitMapData(){
//LBitmapData用来保存和读取image数据的
var bitmapData = new LBitmapData(loader.content,0,0,64,64);
//LBitmap用来显示图片的
var bitmap = new LBitmap(bitmapData);
//坐标组 分割出每个小图片的坐标值 可顺序显示每个图片的坐标
var list = LGlobal.divideCoordinate(256, 256, 4, 4);
//层的概念
layer = new LSprite();
annimation = new LAnimation(layer, bitmapData, list);
//layer.addChild(bitmap);
//设定层的 x,y,旋转以及透明度
//layer.x = 0;
//layer.y = 0;
//layer.rotate = 180;
//layer.alpha = 0.5;
//显示
addChild(layer);
//LGraphics()的使用
//var g = new LGraphics();
//var g = layer.graphics;
//用LGraphic画矩形
//g.drawRect(1, "#ccc",[50,50,100,100]);
//g.drawRect(1, "#ccc",[50,50,100,100],true,"red");
//用LGraphic画圆形
//g.drawArc(1, "#ddd", [30,30,10,0,360*Math.PI/180,true], true, "blue");
// layer.addEventListener(LEvent.ENTER_FRAME, onframe);
// layer.addEventListener(LKeyboardEvent.KEY_DOWN, onframe);
//增加键盘事件
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, onframe); }
function onframe(event){ var code = event.keyCode;
if(code == 37){// <- 左键
//读取第几行(改变行)
annimation.setAction(1);
layer.x-=5;
if(layer.x<=0){
layer.x = 0;
}
}else if(code == 38){ // 上键
annimation.setAction(3);
layer.y-=5;
if(layer.y<=0){
layer.y = 0;
} }else if(code == 39){ //右键
annimation.setAction(2);
layer.x+=5;
if(layer.x>=layermap){
layer.x = layermap;
} }else if(code == 40){//下键
annimation.setAction(0);
layer.y+=5;
if(layer.y>=layermap){
layer.y = layermap;
} }
/*
var action = annimation.getAction();
switch(action[0]){
case 0 :
layer.y+=15;
if(layer.y>=layermap){
annimation.setAction(2);
}
break;
case 1 :
layer.x-=5;
if(layer.x<=0){
annimation.setAction(0);
}
break;
case 2 :
layer.x+=5;
if(layer.x>=layermap){
annimation.setAction(3);
}
break;
case 3 :
layer.y-=5;
if(layer.y<=0){
annimation.setAction(1);
}
break;
} */
//将播放图片的序列号加1(改变列)
annimation.onframe(); } });
</script>
</head>
<body>
<div id="mylegend">loading...</div>
</body>
</html>
HTML5(lufylegend.js练习)的更多相关文章
- 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
前言 本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML5 Chart.js 框架
HTML5 Chart.js 框架 版权声明:未经博主授权,内容严禁转载 ! Chart.js 概述: chart.js 是一个简单的.面向对象.为设计者开发者准备的图表绘制工具. 点击进入官方网址 ...
随机推荐
- Codeforces Gym100735 D.Triangle Formation (KTU Programming Camp (Day 1) Lithuania, Birˇstonas, August 19, 2015)
日常训练题解 D.Triangle Formation You are given N wooden sticks. Your task is to determine how many triang ...
- ansible-playbook启动的多种方式
#quick start ## start the playbook with no password, it will run "sudo su - root" at the t ...
- apache url rewrite问题
apache RewriteEngine Your browser sent a request that this server could not understand http://www.ra ...
- Docking For WPF–AvalonDock
桌面程序的应用,不可避免的就会用到大量的布局控件,之前的一个项目也想过去做类似于Visual Studio的那种灵活的布局控件,也就是界面上的控件能够实现拖拽放置.隐藏.窗口化等一系列的操作,但由于开 ...
- 【hibernate】hibernate不同版本的命名策略
===================================================hibernate 4命名策略如下================================ ...
- Assembly.CreateInstance和Activator.CreateInstance
本来是在设计模式中的工厂方法,在实现抽象工厂时,用到了一直都不熟悉的反射. namespace Factory { public abstract class Factory { public abs ...
- WEB API 返回类型设置为JSON 【转】
http://blog.sina.com.cn/s/blog_60ba16ed0102uzc7.html web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返 ...
- python 查询，子查询以及1对多查询
1.添加数据: # 方法1:对象.save() book = Book(**kwargs) book.save() # 方法2:类.create(**kwargs) Book.create(**kwa ...
- php猴子吃桃
<?php header("content-type:text/html;charset=utf-8"); /* 有一堆桃子,猴子第一天吃了其中的一半,并再多吃了一个! 以后 ...
- odoo图片显示
如果在odoo客户端展示图片, 可以用 url( data:image/png;base64, 图片base64编码过的内容) 展示, 例如 url(data:image/png;ba ...