最近发现一个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>
效果：
移动到右端后，会反向移动
注：案例来自官网，我只是加些注释
时间： 2025-01-01 21:01:19