iio Engine 快速開發HTML5應用程式

html5 engine app iio

freelab 2013-10-12 22:05:39 ‧ 2427 瀏覽

分享至

<a href="">About iio Engine</a>
iio is an Open Source Initiative

The iio Engine was created to streamline the process of developing HTML5 applications. The ownership of the iio Engine rests in the hands of the open source community. Contributions to the core library and additions to its collection of extension packages are always welcome. New branches and merges are managed through Github.
iio Engine 可以協助開發者，快速發展HTML5應用程式。

1.首先下載iio Engine SDK:點我下載iio Engine SDK

2.iio Engine的**Hello iio!!**
程式碼如下:

<!doctype html>
  
    <script type="text/javascript" src="iioEngine.min.js"></script>
    <script type="text/javascript">
 
        Helloiio = function(io){
 
          io.addObj(new iio.Text('Hello iio!!', io.canvas.center)
              .setFont('30px Consolas')
              .setTextAlign('center')
              .setFillStyle('black'));
 
        }; iio.start(Helloiio);
 
    </script>

3.點擊滑鼠不斷掉落的掉落的圓球
程式碼如下:

<!doctype html>
  
    <script type="text/javascript" src="../core/iioEngine.js"></script>
    <script type="text/javascript">

        //author: Tyilo https://github.com/sbiermanlytle/iioengine/pull/5
        var Ball = function() {
            this.Ball.apply(this, arguments);
        };

        iio.inherit(Ball, iio.Circle);
        Ball.prototype._super = iio.Circle.prototype;
        Ball.prototype.Ball = function(r, startPos, color, floor) {
            this._super.Circle.call(this, startPos, r);
        	this.setFillStyle(color)
        		.enableKinematics()
        		.setAcc(0, 0.1)
        		.setBound('bottom', floor, function(ball) {
        			ball.vel.y *= -(0.8 + (ball.radius / 300));
        
        			if(ball.pos.y > floor-ball.radius) {
        				ball.pos.y = floor-ball.radius;
        			}
        			if(ball.vel.y > 0) {
        				ball.vel.y = 0;
        			} else if(-ball.vel.y < ball.acc.y) {
        				ball.acc.y = -ball.vel.y;
        				if(ball.acc.y < 0.00001) {
        					if(!ball.isRemoving) {
        						setTimeout(function() {
        							io.rmvObj(ball);
        						}, 3000);
        
        						ball.isRemoving = true;
        					}
        				}
        			}
        			return true;
        		});
        
        	this.startPos = startPos;
        	this.color = color;
        	this.isRemoving = false;
        };
        Ball.prototype.clone = function() {
        	return new Ball(this.radius, this.startPos, this.color);
        };
        
        var BallApp = function(io) {
        	function randomColor() {
        		var color = '#';
        		for(var i = 0; i < 6; i++) {
        			color += iio.getRandomInt(1, 16).toString(16);
        		}
        		return color;
        	}
        
        	window.addEventListener('mouseup', function(event) {
        		var point = new iio.Vec(event.x, event.y);
        		if(event.button != 2) {
        			var ball = new Ball(iio.getRandomInt(10, 30), point, randomColor(), io.canvas.height);
        			io.addToGroup('balls', ball);
        		} else {
        			var balls = io.getGroup('balls');
        			for(var i = 0; i < balls.length; i++) {
        				if(balls[i].contains(point)) {
        					io.rmvObj(balls[i]);
        				}
        			}
        		}
        	});
        	
        	io.addObj(new iio.Text('請用滑鼠左鍵點一下畫面的任何位置，看看效果^^', io.canvas.center)
        		.setFont('30px Consolas')
        		.setFillStyle('black')
        		.setTextAlign('center'));
        	
        	io.setFramerate(60);
        };

        iio.start(BallApp);
    </script>

4.點我下載iio Quick Start Guide