<%@ 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. 体育成绩统计——20180801模拟赛T3

    体育成绩统计 / Score 题目描述 正所谓“无体育,不清华”.为了更好地督促同学们进行体育锻炼,更加科学地对同学们进行评价,五道口体校的老师们在体育成绩的考核上可谓是煞费苦心.然而每到学期期末时, ...

  2. Sharing Cookies --AtCoder

    题目描述 Snuke is giving cookies to his three goats.He has two cookie tins. One contains A cookies, and ...

  3. luogu P1941 飞扬的小鸟

    题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...

  4. hdu 4823 Energy Conversion 构造

    题目链接:HDU - 4823 魔法师百小度也有遇到难题的时候——现在,百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这种魔法文字需要耗费大量的能量和大量的脑力.过了许久,百小度终于读 ...

  5. delphi 按位运算 not and or xor shl shr

    delphi 按位运算 not and or xor shl shr unit Unit1;   interface   uses   Windows, Messages, SysUtils, Var ...

  6. CSS 布局整理（************************************************）

    1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div">&l ...

  7. mysqldumps 远程备份

    普通模式 mysqldump -uroot -ppassword -h10.26.114.25 -P3306 --databases databasename > XXX.sql 多条在一起模式 ...

  8. hql小经验

    hql如果查了子对象的属性,那么hql不允许子对象为空!

  9. 网站添加ico图标

    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...

  10. 在VS2013中打开Nuget

    1.工具→NuGet程序包管理器→程序包管理控制台 2.没有的话,就去  工具→扩展和更新   搜索nuget