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>

 

你可能感兴趣的:(html5)