<%@ 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. (7)python tkinter-菜单栏

    菜单栏 Menu f = tkinter.Menu(root) root['menu']=f f.add_command(label='菜单')# f.add_command(label='关于') ...

  2. (21)python lambda表达式

    lambda表达式是一个匿名函数 通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用 最简单的例子 add = lambda x,y : x + y print add(3,5) #out ...

  3. dhlin-vim-wiki

    记录vim中常用的几个操作 入门指南 $ vimtutor vim中是区分大小写 vim中移动光标 h 向左移动 j 向下移动 k 向上移动 l 向右移动 其实使用方向键也是能移动的,但是熟悉后再一些 ...

  4. Longest Increasing Subsequence - LeetCode

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  5. Loj #6244. 七选五

    link: https://loj.ac/problem/6244 让我们设B=N-K,再设F(P)为从1~P+B中选P个数(有序的),且这P个数是一个错排(即不存在一个i使得 i=Ai ,其中A是选 ...

  6. iOS使用MD5 - 字符串加密至MD5&获取文件MD5

    iOS 字符串加密至MD5 + (NSString *) md5:(NSString *)str { unsigned ]; CC_MD5( cStr, strlen(cStr), result ); ...

  7. HTML5 Canvas 绘制加拿大枫叶旗

    这段代码比较简单,中间的枫叶使用了图片,因为没找到画法: <!DOCTYPE html> <html lang="utf-8"> <meta http ...

  8. MySQL的备份与恢复具体解释

    MySQL数据备份 在mySQL里面,有逻辑备份和物理备份.逻辑备份最大长处是对于各种存储引擎,都能够使用相同的方法来备份. 而物理备份则不同.不同的存储引擎有着不同的备份方法. 逻辑备份与恢复 备份 ...

  9. struts2获取服务器临时目录

      CreateTime--2017年9月7日08:57:39 Author:Marydon struts2获取服务器(tomcat.WebLogic)的临时目录 需要导入: import java. ...

  10. 【Python】合并（拼接）字符串

    在很多情况下,我们都需要合并字符串.例如:需要将姓氏与名字存储在不同的变量中,然后显示的时候再将他们合二为一 first_name = 'oliver' last_name = 'smith' ful ...