<%@ 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. 2018年东北农业大学春季校赛 D wyh的迷宫【搜索】

    链接:https://www.nowcoder.com/acm/contest/93/D来源:牛客网 题目描述 给你一个n*m的迷宫,这个迷宫中有以下几个标识: s代表起点 t代表终点 x代表障碍物 ...

  2. 洛谷 P1426 小鱼会有危险吗【模拟/题意理解】

    题目描述 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%.有个极其邪恶的猎人在距离A处右边s米的地方,安装了一个隐蔽的探测器,探测器左右x米之内是 ...

  3. 构建更好的HashMap

    在7月份的那期 Java理论与实践(“并发集合类”)中,我们简单地回顾了可伸缩性的瓶颈,并讨论了怎么用共享数据结构的方法获得更高的并发性和吞吐量.有时候学习的最好方法是分析专家的成果,所以这个月我们将 ...

  4. 洛谷 P4256 公主の#19准备月考

    题目背景 公主在玩完游戏后,也要月考了.(就算是公主也要月考啊QWQ) 题目描述 公主的文综太差了,全校排名1100+(全校就1100多人),她分析了好久,发现她如果把所有时间放在选择题上,得分会比较 ...

  5. 批处理备份mysql数据

    客户服务器,需要每天定时备份数据库,没办法,bat走起! 代码如下: @echo off C: cd C:\***\***\mysql\bin set Ymd=%date:~,4%%date:~5,2 ...

  6. PHP实现RabbitMQ的Publish/Subscribe

    <?php /** * Created by PhpStorm. * User: 豆腐居士 * Date: 2018/5/30 * Time: 上午11:01 */ class AqiTask ...

  7. mysql数据对象

      学习目标:   了解掌握常见的几种数据库对象 学会如何创建具体的数据对象   mysql 常见的数据对象有哪些: DataBase/Schema Table Index View/Trigger/ ...

  8. Beginning Auto Layout Tutorial in iOS 7: Part 3

    How Auto Layout works 在使用auto layout之前,你可能总是使用initWithFrame或者frame, bounds or center属性. 使用约束的好处在于你不需 ...

  9. android windowSoftInputMode属性详解(转)

    activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一]当有焦点产生时,软键盘是隐藏还是显示 [二]是否减少活动 ...

  10. Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储

    Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...