<%@ 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练习)的更多相关文章

  1. 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  2. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  3. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  4. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  5. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  6. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  7. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. HTML5 Chart.js 框架

    HTML5 Chart.js 框架 版权声明:未经博主授权,内容严禁转载 ! Chart.js 概述: chart.js 是一个简单的.面向对象.为设计者开发者准备的图表绘制工具. 点击进入官方网址 ...

随机推荐

  1. Atom打开大文件卡死的问题替代方案

    无解,本身是网页的框架,所以直接换回ST或者Notepad++吧.

  2. ARM Linux系统调用的原理

    转载自:http://blog.csdn.net/hongjiujing/article/details/6831192 ARM Linux系统调用的原理 操作系统为在用户态运行的进程与硬件设备进行交 ...

  3. apache服务器日志及重启方法

    进入  lamp安装目录 ./ctlscript.sh restart 重启 实时查看日志 tail -f error_log 查看日志方法  404 及某天的方法cat access_log_201 ...

  4. 2017.2.16 开涛shiro教程-第十七章-OAuth2集成（二）客户端

    原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 开涛shiro教程-第十七章-OAuth2集成 3.客户端 客户端 ...

  5. 根据DatabaseMetaData确定数据库类型

    根据DatabaseMetaData确定数据库类型 DataSource dataSource = dataSourceTransactionManager.getDataSource(); conn ...

  6. maven 配置jetty插件

    <build>        <finalName>shiroweb</finalName>        <plugins>            & ...

  7. 原生JavaScript技巧大收集100个

    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...

  8. win10 只要打开文件对话框就卡死解决方法

    我电脑的问题是:win10系统,只要打开 文件对话框就卡死,假死,cpu100% 一直没有解决,但是只要把缩略图关了,就ok. 但是又想要留着缩略图,还是得显示,于是乎一直在找解决办法. 此方法好像可 ...

  9. Sql 复习3之存储管理

    一.事务管理 单个工作单元称为事务,我们将若干条sql命令组合在一起,形成存储过程.触发器等,利用存储过程和触发器可以进行事务管理. 二.编程基础介绍 主要有:函数.程序设计语句等. 程序设计语句: ...

  10. 云数据库 RDS 版怎么创建数据库和账号MySQL 5.7版

    若要使用云数据库RDS,您需要在实例中创建数据库和账号.对于MySQL 5.7版本的实例,您需要通过RDS控制台创建一个初始账号,然后可以通过数据管理(DMS)控制台创建和管理数据库.本文将主要介绍在 ...