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>