<%@ 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. BZOJ3631(树链剖分)

    差不多可以说是树链剖分的模板题了,直接维护即可. #include <bits/stdc++.h> using namespace std; #define REP(i,n) for(in ...

  2. 1219 骑士游历（棋盘DP）

    1997年  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解    题目描述 Description 设有一个n*m的棋盘(2≤n≤50,2≤m≤50),如 ...

  3. 模糊测试工具Simple Fuzzer

    模糊测试工具Simple Fuzzer   模糊测试是一种不同于渗透测试的漏洞检测方式.它向目标系统发送各种非预期的输入,然后通过监视异常结果来发现漏洞.Kali Linux虽然作为渗透测试系统平台, ...

  4. 2016北京集训测试赛（十六）Problem A: 任务安排

    Solution 这道题告诉我们, 不能看着数据范围来推测正解的时间复杂度. 事实证明, 只要常数足够小, \(5 \times 10^6\)也是可以跑\(O(n \log n)\)算法的!!! 这道 ...

  5. UVA 133“The Dole Queue”（循环报数处理技巧）

    •参考资料 [1]:紫书P82 •题意(by紫书) 按照被选中的次序输出这 n 个人的编号: 如果A和B选中的是同一个人,输出一个这个人的编号: 输出格式:输出的每个编号占3个字节,不够3个字节在前面 ...

  6. 列表pagesize修改每页显示的数量失效

    ◇系统错误修复工具 >> 检测微表正确性 原因是删除一些数据导致记录与实际数据不符 转自:http://bbs.dedecms.com/269491.html

  7. z pre-pass 相关问题的讨论

    z pre-pass 是指在渲染流程中,第一个pass先画一张深度buffer出来,得到需要绘制的最前面这层深度,用这个在接下来的pass中做深度剔出,这样在第二个pass中会省略很多绘制. 这项技术 ...

  8. MySQL开发36条军规

    转载地址:http://blog.itpub.net/22664653/viewspace-723506/ 写在前面的话: 总是在灾难发生后,才想起容灾的重要性: 总是在吃过亏后,才记得曾经有人提醒过 ...

  9. [转]MySQL的简单使用和JDBC示例

    MySql简单操作 //启动mysql net start mysql //登陆 mysql -u root -p //创建建数据库 create database mydb; create data ...

  10. PHP之面向对象学习

    1.类 Class lio{ Public Protect Private Function __constructor(){} } 2.类的实例化 <? php class lio{ //定义 ...