HTML5(lufylegend.js练习)

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 <title>HTML5-lufyLegend测试</title>
  8 <script type="text/javascript" src="js/lufylegend-1.5.1.min.js"></script>
  9 <script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>
 10 <script type="text/javascript" src="js/jquery.js"></script>
 11 <script type="text/javascript">
 12     $(function(){
 13         var layermap = 400;
 14         var loader = "";
 15         var annimation = "";
 16         var layer = "";
 17         /**
 18             50 -游戏 加载速度  
 19             "mylegend" div的id
 20             500,500 游戏 界面的宽和高
 21             main 初始化完成后调用次函数
 22         **/
 23         init(50,"mylegend",500,500,main);
 24         
 25         function main(){
 26             //使用Lloader类加载图片数据
 27             loader = new LLoader();
 28             loader.load("image/chara.png", "bitmapData");
 29             //图片数据加载完成后执行loadbitMapData函数
 30             loader.addEventListener(LEvent.COMPLETE, loadbitMapData);
 31         }
 32         
 33         function loadbitMapData(){
 34             //LBitmapData用来保存和读取image数据的
 35             var bitmapData = new LBitmapData(loader.content,0,0,64,64);
 36             //LBitmap用来显示图片的
 37             var bitmap = new LBitmap(bitmapData);
 38             //坐标组 分割出每个小图片的坐标值 可顺序显示每个图片的坐标
 39             var list = LGlobal.divideCoordinate(256, 256, 4, 4);
 40             //层的概念
 41             layer = new LSprite();
 42             annimation = new LAnimation(layer, bitmapData, list);
 43             //layer.addChild(bitmap);
 44             //设定层的 x,y,旋转以及透明度
 45             //layer.x = 0;
 46             //layer.y = 0;
 47             //layer.rotate = 180;
 48             //layer.alpha = 0.5;
 49             //显示
 50             addChild(layer);
 51             //LGraphics()的使用
 52             //var g = new LGraphics();
 53             //var g = layer.graphics;
 54             //用LGraphic画矩形
 55             //g.drawRect(1, "#ccc",[50,50,100,100]);
 56             //g.drawRect(1, "#ccc",[50,50,100,100],true,"red");
 57             //用LGraphic画圆形
 58             //g.drawArc(1, "#ddd", [30,30,10,0,360*Math.PI/180,true], true, "blue");
 59         //    layer.addEventListener(LEvent.ENTER_FRAME, onframe);
 60         //    layer.addEventListener(LKeyboardEvent.KEY_DOWN, onframe);
 61         //增加键盘事件
 62         LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, onframe);
 63             
 64         }
 65         function onframe(event){
 66             
 67             var code = event.keyCode;
 68             if(code == 37){// <- 左键
 69                 //读取第几行(改变行)
 70                 annimation.setAction(1);
 71                 layer.x-=5;
 72                 if(layer.x<=0){
 73                     layer.x = 0;
 74                 }
 75             }else if(code == 38){ // 上键
 76                 annimation.setAction(3);
 77                 layer.y-=5;
 78                 if(layer.y<=0){
 79                     layer.y = 0;
 80                 }
 81                 
 82             }else if(code == 39){ //右键
 83                 annimation.setAction(2);
 84                 layer.x+=5;
 85                 if(layer.x>=layermap){
 86                     layer.x = layermap;
 87                 }
 88                 
 89             }else if(code == 40){//下键
 90                 annimation.setAction(0);
 91                 layer.y+=5;
 92                 if(layer.y>=layermap){
 93                     layer.y = layermap;
 94                 }
 95                 
 96             }
 97             /*
 98             var action = annimation.getAction();
 99             switch(action[0]){
100             case 0 :
101                 layer.y+=15;
102                 if(layer.y>=layermap){
103                     annimation.setAction(2);
104                 }
105                 break;
106             case 1 :
107                 layer.x-=5;
108                 if(layer.x<=0){
109                     annimation.setAction(0);
110                 }
111                 break;
112             case 2 :
113                 layer.x+=5;
114                 if(layer.x>=layermap){
115                     annimation.setAction(3);
116                 }
117                 break;
118             case 3 :
119                 layer.y-=5;
120                 if(layer.y<=0){
121                     annimation.setAction(1);
122                 }
123                 break;
124             } */
125             //将播放图片的序列号加1(改变列)
126             annimation.onframe();
127             
128         }
129         
130     });
131 </script>
132 </head>
133 <body>
134     <div id="mylegend">loading...</div>
135 </body>
136 </html>