-
Notifications
You must be signed in to change notification settings - Fork 0
/
testIIo.html
192 lines (165 loc) · 5.87 KB
/
testIIo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
/* iio引擎的bug 不能用css为canvas设置长宽，不然影响canvas里面的内容*/
/* width: 400px;
height: 400px;*/
border: 2px solid rgb(157, 204, 136);
box-shadow: 0 0 10px #bbb;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400px" height="400px"></canvas>
<canvas id="canvas2" width="400px" height="400px"></canvas>
<canvas id="canvas3" width="400px" height="400px"></canvas>
</body>
<script src="iio-sdk/iioEngine-1.2.2.js"></script>
<script>
var app1 = function(io){
io.addObj(new iio.ioText('GudongUniversity!!', 20,40)
.setFont('20px Consolas')
.setFillStyle('black'))
var staticRect = io.addObj(new iio.ioRect(50,150,60)
.setFillStyle('blue')
.setStrokeStyle('#ddd'));
io.addObj(new iio.ioRect(150,150,60)
.setFillStyle('#00baff')
.setStrokeStyle('black')
.setShadow('rgb(150,150,150)',10,10,4)
.enableKinematics()
.setTorque(.05));
var moveRect = io.addObj(new iio.ioRect(50,250,60)
.enableKinematics()
.setFillStyle('#00baff')
.setVel(3,0)
.setBounds(0,io.canvas.width,io.canvas.height,0,function(obj){
obj.vel.x = -obj.vel.x ;
return true;
}));
// .setBound('left',0,function(obj){
// obj.vel.x = -obj.vel.x ;
// return true;
// })
// .setBound('right',io.canvas.width,function(obj){
// obj.vel.x = -obj.vel.x ;
// return true;
// }));
io.addToGroup('testGroup1',moveRect);
io.addToGroup('testGroup2',staticRect);
staticRect.setPos(300,250);
io.setCollisionCallback('testGroup1','testGroup2',function(rect1,rect2){
console.log('dfdfdf');
});
//下面两者createWithImage和addImage都使用callback来确保渲染img的时候img已经加载
//使用createWithImage，根据image的大小来设置shape的大小
var imgRect = new iio.ioRect(300,150)
.createWithImage('images/meteorBig.png',function(){
io.addObj(imgRect);
}).setImgRotation(-Math.PI/2);
//使用addImage，使image的大小适应shape的形状大小
var imgSquare = new iio.ioRect(300,50,100,50)
.addImage('images/meteorBig.png',function(){
io.addObj(imgSquare);
});
//测试zIndex顺序 ,v1.2.2有bug对addObj后面的zIndex有问题
io.addObj(new iio.ioRect(50,330,60).setFillStyle('green').setShadow('#000',0,0,10))
io.addObj(new iio.ioRect(90,330,60).setFillStyle('blue').setShadow('#000',0,0,10))
io.addObj(new iio.ioRect(130,330,60).setFillStyle('red').setShadow('#000',0,0,10))
io.addObj(new iio.ioRect(250,330,60).setFillStyle('green').setShadow('#000',0,0,10) ,-1);
io.addObj(new iio.ioRect(290,330,60).setFillStyle('blue').setShadow('#000',0,0,10) ,2);
io.addObj(new iio.ioRect(330,330,60).setFillStyle('red').setShadow('#000',0,0,10) ,0);
//不使用setFramerate所有物理运动就不会动
//全局刷新,区分app2的局部刷新。二者都可以在后面增加回调
io.setFramerate(40);
}; iio.start(app1, 'canvas1');
var app2 = function(io){
var grid = new iio.ioGrid(0,0,3,3,80);
//Most iio Objects have a draw function that ultimately gets called when they render
//grid.draw(io.context);
//give the grid to the ioAppManager (denoted as io)
io.addObj(grid);
var rect = new iio.ioRect(0,100,50,17).enableKinematics()
.setFillStyle('#888');
//move to the right 1px per update(那么在一个FPS60的帧率下，1s平移60px)
rect.setVel(5,0);
//rotate .1 radians every update
rect.setTorque(.1);
io.addObj(new iio.ioRect(150,150,60)
.setFillStyle('#00baff')
.setStrokeStyle('black')
.setShadow('rgb(150,150,150)',10,10,4)
.enableKinematics()
.setTorque(.05));
//特定的选择对某些对象进行刷新，而不是全局刷新
// 对单一对象刷新回调失败，bug？？
// v1.2.1是回调失败，使用1.2.2就木有问题了
io.setFramerate(40,rect,io.context,function(){
if(rect.pos.x > 400){
console.log('AAAAAA');
rect.setPos(100,0);
rect.setVel(0,2);
}
});
}; iio.start(app2,'canvas2');
var dot = function(x,y,ctx){
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI*2, true);
ctx.stroke();
ctx.closePath();
}
var app3 = function(io){
io.setBGColor('#ddd');
var head = new iio.ioRect(150,150)
.createWithImage('images/robot/robot_head.png',function(){
head.flipImage(true);
io.addObj(head);
});
var head2 = new iio.ioRect(150,150)
.createWithImage('images/robot/robot_head.png',function(){
io.addObj(head2);
});
var ball = new iio.ioCircle(250,100,50).setStrokeStyle('green').setFillStyle('black')
.enableKinematics()
.setAcc(0, 0.1)
.setBound('bottom', io.canvas.height, function(ball) {
ball.vel.y *= -(0.8 + (ball.radius / 300));
if(ball.pos.y > io.canvas.height-ball.radius) {
ball.pos.y = io.canvas.height-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;
})
io.addObj(ball);
io.setFramerate(60)
var flySrcs = ['images/fly_normal.png','images/fly_fly.png'];
var fly = new iio.ioRect(50,50).createWithAnim(flySrcs,function(){
//image onload code
//This is a great function to use when you have multiple animating objects that need to animate at different rates
io.setAnimFPS(6,fly);
});
//change the displayed image to the fly_fly one
//fly.setAnimIndex(1);
//advance to the next anim frame
//fly.nextAnimFrame();
/******* test inherit *********/
}; iio.start(app3,'canvas3');
</script>
</html>