ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
74 lines (64 loc) • 1.57 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>四处碰壁的小球</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
这个示例是一个小球的碰壁反弹动画，用到了系统的ticker模块，产生帧动画。<br>
</div>
<br><br>
</div>
<div id="canvas">
</div>
</body>
</html>
<script src="../common.js"></script>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var width = 300,height=400;
var ycc = new Ycc();
var canvas = ycc.createCanvas({width:width,height:height,dpiAdaptation:true});
document.getElementById("canvas").appendChild(canvas);
ycc.bindCanvas(canvas);
ycc.ticker.start();
var layer = ycc.layerManager.newLayer({enableFrameEvent:true});
var x = 0,y = 0;
var stepPx = 8;
var left = true;
var topTo = true;
var update = function () {
if(x<=0) left=true;
if(x>=width) left=false;
if(y<=0) topTo=true;
if(y>=height) topTo=false;
if(left)
x+=stepPx;
else
x-=stepPx;
if(topTo)
y+=stepPx;
else
y-=stepPx;
};
var circle = new Ycc.UI.Circle({point:new Ycc.Math.Dot(x,y),r:20});
layer.addUI(circle);
layer.onFrameComing = function () {
update();
layer.clear();
circle.point.x=x;
circle.point.y=y;
ycc.layerManager.reRenderAllLayerToStage();
}
</script>