近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/
可是没有基础的同学。看起来费劲。所以打算边学边记笔记,说明都在凝视中
效果:
移动到右端后,会反向移动
注:案例来自官网,我仅仅是加些凝视
可是没有基础的同学。看起来费劲。所以打算边学边记笔记,说明都在凝视中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>帧速率</title> <script src="js/lufylegend-1.9.7.js"></script> <script> //LInit初始化画布,第一个參数为帧速率,除数越大动画速率越快。能够自己改动试试 //随后的參数:divid,宽。高。回调函数 LInit(1000/20, "legend", 800, 480, main); var direction = 1; function main () { //新建层 var layer = new LSprite(); //加入层 addChild(layer); //在层上绘制一个矩形 //LGraphics 类包括一组可用来创建矢量形状的方法。 //drawRect 五个參数:线粗,线颜色。坐标及宽度,是否填充。填充颜色 layer.graphics.drawRect(1, "#ff0000", [0, 0, 100, 100], true, "#880088"); //layer上绑定ENTER_FRAME事件,以帧速率调用onframe函数 layer.addEventListener(LEvent.ENTER_FRAME,onframe); } function onframe(event){ var layer = event.currentTarget; //每一帧,横坐标增长/降低==向右/向左移动一像素,方向取决于direction的正负 layer.x += direction; //不停右移 if(layer.x < 0){ direction = 1; } //坐标大于700后,向左移 if(layer.x > 700){ direction = -1; } } </script> </head> <body> <div id="legend"></div> </body> </html>
移动到右端后,会反向移动
注:案例来自官网,我仅仅是加些凝视