jmgraph 3.2.19 → 3.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +311 -6
  2. package/dist/jmgraph.core.min.js +1 -1
  3. package/dist/jmgraph.core.min.js.map +1 -1
  4. package/dist/jmgraph.js +2022 -368
  5. package/dist/jmgraph.min.js +1 -1
  6. package/index.js +23 -25
  7. package/package.json +1 -1
  8. package/src/core/jmControl.js +199 -30
  9. package/src/core/jmFilter.js +150 -0
  10. package/src/core/jmGraph.js +207 -7
  11. package/src/core/jmLayer.js +142 -0
  12. package/src/core/jmPath.js +55 -0
  13. package/src/core/jmUtils.js +46 -37
  14. package/src/lib/webgl/base.js +10 -36
  15. package/src/lib/webgl/gradient.js +16 -3
  16. package/src/lib/webgl/index.js +5 -4
  17. package/src/lib/webgl/path.js +156 -33
  18. package/src/shapes/jmEllipse.js +91 -0
  19. package/src/shapes/jmLabel.js +126 -75
  20. package/src/shapes/jmPolygon.js +129 -0
  21. package/src/shapes/jmRect.js +107 -29
  22. package/src/shapes/jmStar.js +160 -0
  23. package/example/ball.html +0 -217
  24. package/example/base.html +0 -112
  25. package/example/canvas.html +0 -54
  26. package/example/cell.html +0 -284
  27. package/example/controls/arc.html +0 -129
  28. package/example/controls/arrowline.html +0 -78
  29. package/example/controls/bezier.html +0 -299
  30. package/example/controls/img.html +0 -97
  31. package/example/controls/label.html +0 -87
  32. package/example/controls/line.html +0 -173
  33. package/example/controls/prismatic.html +0 -63
  34. package/example/controls/rect.html +0 -64
  35. package/example/controls/resize.html +0 -112
  36. package/example/controls/test.html +0 -360
  37. package/example/es.html +0 -70
  38. package/example/es5module.html +0 -63
  39. package/example/heartarc.html +0 -116
  40. package/example/index.html +0 -47
  41. package/example/js/require.js +0 -5
  42. package/example/love/img/bling/bling.tps +0 -265
  43. package/example/love/img/bling.json +0 -87
  44. package/example/love/img/bling.tps +0 -295
  45. package/example/love/img/doc/bling.gif +0 -0
  46. package/example/love/img/love.json +0 -95
  47. package/example/love/img/love.tps +0 -315
  48. package/example/love/img/qq/qq.tps +0 -399
  49. package/example/love/img/qq.json +0 -242
  50. package/example/love/index.html +0 -40
  51. package/example/love/js/game.js +0 -558
  52. package/example/music.html +0 -211
  53. package/example/node/test.js +0 -138
  54. package/example/pdf.html +0 -187
  55. package/example/progress.html +0 -173
  56. package/example/pso.html +0 -148
  57. package/example/sort.html +0 -805
  58. package/example/tweenjs.html +0 -84
  59. package/example/webgl.html +0 -278
  60. package/example/xfj/img/dr_die.gif +0 -0
  61. package/example/xfj/index.html +0 -332
  62. package/example/xfj/shake.js +0 -49
  63. package/example/xfj/testori.html +0 -76
package/example/tweenjs.html DELETED
@@ -1,84 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <script type="text/javascript" src="../dist/jmgraph.min.js"></script>
7
- <script src="//code.createjs.com/1.0.0/tweenjs.min.js"></script>
8
- </head>
9
- <body style="margin:10px auto;">
10
- <div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000;"></div>
11
- </body>
12
- </html>
13
-
14
- <script type="text/javascript">
15
- //初始化jmgraph
16
- var g = jmGraph.create('mycanvas', {
17
- height: 600
18
- });
19
- init(g);
20
-
21
- //实时更新画布
22
- function update() {
23
-
24
- if(g.needUpdate) g.redraw();
25
- requestAnimationFrame(update);
26
- }
27
- update();
28
-
29
- function init(graph){
30
- var style = {
31
- stroke:'rgb(120,20,80)',
32
- lineWidth:6,
33
- close:true,
34
- zIndex:1
35
- };
36
- var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
37
- bg.addStop(0,'green');
38
- bg.addStop('0.2','blue');
39
- bg.addStop(0.8,'yellow');
40
- bg.addStop(1,'red');
41
- style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
42
- style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
43
- var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
44
-
45
- arc.bind('mouseover',function(evt) {
46
- this.style.stroke = 'rgba(88,200,155,0.5)';
47
- });
48
- arc.bind('mouseleave',function(evt) {
49
- this.style.stroke = 'rgb(120,20,80)';
50
- });
51
-
52
- //arc.bind('touchstart',function(evt) {
53
- //this.style.stroke = 'rgba(88,200,155,0.5)';
54
- //graph.refresh();
55
- //});
56
-
57
- graph.children.add(arc);
58
- arc.canMove(true);
59
-
60
- style = g.util.clone(style);
61
- style.stroke = 'rgb(255,255,255)';
62
- style.close=false;
63
- style.zIndex = 3;
64
- delete style.shadow;
65
- delete style.fill;
66
-
67
- var step = Math.PI / 25;
68
- var bluestop = 0.5;
69
- var bluedir = 0;
70
- var yellowstop = 0.8;
71
- var yellowdir = 0;
72
- var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
73
- arc.children.add(childarc);
74
-
75
- createjs.Tween.get(childarc, { loop: true })
76
- .to({ startAngle: Math.PI*2, endAngle: Math.PI*7/3 }, 5000, createjs.Ease.getPowInOut(2))
77
- .to({ startAngle: 0, endAngle: Math.PI / 3 }, 5000, createjs.Ease.getPowInOut(4));
78
-
79
- createjs.Tween.get(arc.center, { loop: true })
80
- .to({ x: graph.width - 200}, 5000, createjs.Ease.getPowInOut(2))
81
- .to({ x: 250}, 5000, createjs.Ease.getPowInOut(4));
82
-
83
- }
84
- </script>
package/example/webgl.html DELETED
@@ -1,278 +0,0 @@
1
- <body>
2
- <canvas id="cvs" width="600" height="600" style="border: dashed 1px red">
3
- 你的浏览器不支持画布元素
4
- </canvas>
5
- <canvas id="cvs2d" width="600" height="600" style="border: dashed 1px red">
6
- 你的浏览器不支持画布元素
7
- </canvas>
8
- <script type="module">
9
- import {
10
- createProgram,
11
- writeVertexAttrib
12
- } from '../src/lib/webgl/core/program.js';
13
-
14
- import {
15
- createFloat32Buffer,
16
- createUint16Buffer,
17
- deleteBuffer,
18
- } from '../src/lib/webgl/core/buffer.js';
19
-
20
- import {
21
- create2DTexture
22
- } from '../src/lib/webgl/core/texture.js';
23
-
24
- //获取画布元素
25
- var cvs = document.getElementById('cvs');
26
- //获取到元素的上下文环境对象
27
- var gl = cvs.getContext('webgl');
28
-
29
- const width = gl.canvas.width;
30
- const height = gl.canvas.height;
31
- gl.viewport(0, 0, width, height)
32
- // 设置 webgl 视口，将 -1 到 1 映射为 canvas 上的坐标
33
- const program = createProgram(gl, `
34
- attribute vec4 a_position;
35
- attribute vec2 aPointIndex;
36
- attribute vec4 aColor;
37
- attribute vec2 aTextCoord;
38
- uniform vec2 aCenterPoint;
39
- uniform vec2 aLineStart;
40
- uniform vec2 aLineEnd;
41
- uniform float aTotalPointCount;
42
- varying vec4 vColor;
43
- varying vec2 vTextCoord;
44
-
45
- vec4 translatePosition(in vec4 point, float x, float y) {
46
- point.x = (point.x-x)/x;
47
- point.y = (y-point.y)/y;
48
- return point;
49
- }
50
-
51
- vec4 pointToPos(vec2 start, vec2 end, float index) {
52
- float len = sqrt(pow(end.x - start.x, 2.0) + pow(end.y - start.y, 2.0));
53
-
54
- float x = start.x + (end.x - start.x)/10.0 * index;
55
- float y = start.y + (end.y - start.y)/10.0 * index;
56
- return vec4(x, y, 0.0, 0.0);
57
- }
58
-
59
- vec4 ceilPosition(vec4 pos) {
60
- return vec4(pos.xy/10000.0, pos.zw);
61
- }
62
-
63
- void main() {
64
- gl_PointSize = 10.0;
65
- //vec4 pos = pointToPos(aLineStart, aLineEnd, aPointIndex.x);
66
- vec4 pos = ceilPosition(a_position);//translatePosition(a_position, aCenterPoint.x, aCenterPoint.y);
67
- gl_Position = pos;
68
- vColor = aColor;
69
- vTextCoord = aTextCoord;
70
- }
71
-
72
- `,`
73
- precision highp float;
74
- uniform vec4 u_color;
75
- uniform sampler2D uSample;
76
- varying vec4 vColor;
77
- varying vec2 vTextCoord;
78
-
79
- void main() {
80
- //float r = distance(gl_PointCoord, vec2(0.5, 0.5));
81
- //根据距离设置片元
82
- //if(r <= 0.5){
83
- // 方形区域片元距离几何中心半径小于0.5，像素颜色设置红色
84
- gl_FragColor = u_color;
85
- //}else {
86
- // 方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉：
87
- // discard;
88
- //}
89
- //gl_FragColor = u_color;
90
- }
91
-
92
- `);
93
- //texture2D(uSample, vTextCoord)
94
-
95
-
96
-
97
- const colors = [Math.random(),Math.random(),Math.random(),1];
98
- let points = [6667, 0, 5851, 3196, 3602, 5610, 472, 5555, 680];
99
- const uvpoints = [];
100
-
101
- const center = {
102
- x: width / 2,
103
- y: height / 2
104
- };
105
-
106
-
107
- let colorStop = [Math.random(),Math.random(),Math.random(),1];
108
- for(let r=0; r<=Math.PI*2;r += 0.5) {
109
- const cos = Math.cos(r);
110
- const sin = Math.sin(r);
111
- const x = (cos * 200) + center.x;
112
- const y = (sin * 200) + center.y;
113
- //points.push(Number(((cos * 200)/center.x).toFixed(4)), Number(((sin * 200) / center.y).toFixed(4)));
114
- let ux = (cos + 1)/2;
115
- //if(ux < 0.5) ux = ux/2;
116
-
117
- let uy = (sin + 1) / 2;
118
- //if(uy < 0.5) uy = uy/2;
119
-
120
- uvpoints.push(ux, uy);
121
- colors.push(...colorStop);
122
- }
123
- //points.push(points[0], points[1]);
124
- //uvpoints.push(uvpoints[0], uvpoints[1]);
125
- //colors.push(...colorStop);
126
-
127
- /*
128
- colorStop = [Math.random(),Math.random(),Math.random(),1];
129
- const lastLen = points.length;
130
- for(let r=0; r<=Math.PI*2;r += 0.1) {
131
- points.push((Math.cos(r) * 200) / center.x, (Math.sin(r) * 200) / center.y);
132
- colors.push(...colorStop);
133
- }
134
- points.push(points[lastLen], points[lastLen+1]);
135
- colors.push(...colorStop);*/
136
-
137
- if(program.uniforms.u_color) {
138
- //const colorLocation = gl.getUniformLocation(program.program, 'u_color') // 获取 u_color 变量位置
139
- gl.uniform4f(program.uniforms.u_color.location, 0.0, 1.0, 0.0, 1) // 设置它的值
140
- }
141
- if(program.uniforms.aLineEnd) {
142
- gl.uniform2f(program.uniforms.aLineEnd.location, 100.0, 50.0) // 设置它的值
143
- }
144
- if(program.uniforms.aLineStart) {
145
- gl.uniform2f(program.uniforms.aLineStart.location, 305.0, 500.0) // 设置它的值
146
- }
147
- if(program.uniforms.aTotalPointCount) {
148
- gl.uniform1f(program.uniforms.aTotalPointCount.location, 100); // 设置它的值
149
- }
150
- if(program.uniforms.aCenterPoint) {
151
- gl.uniform2f(program.uniforms.aCenterPoint.location, center.x, center.y); // 设置它的值
152
- }
153
-
154
- //先创建一个缓存对象
155
- if(program.attrs.a_position) {
156
- var vertexBuffer = createFloat32Buffer(gl, points);
157
- writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
158
- //deleteBuffer(gl, vertexBuffer);
159
- }
160
-
161
- if(program.attrs.aPointIndex) {
162
- const pointIndexs = [];
163
- for(let i=0;i<100;i++) {
164
- pointIndexs.push(i);
165
- }
166
- var pointIndexBuffer = createFloat32Buffer(gl, pointIndexs);
167
- writeVertexAttrib(gl, pointIndexBuffer, program.attrs.aPointIndex, 1, 0, 0);
168
- }
169
- //先创建一个缓存对象
170
- var colorBuffer = createFloat32Buffer(gl, colors);
171
- writeVertexAttrib(gl, colorBuffer, program.attrs.aColor, 4, 4, 0);
172
- //deleteBuffer(gl, colorBuffer);
173
- //const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
174
- //const uSample = gl.getUniformLocation(program, 'uSample');
175
-
176
- //先创建一个缓存对象
177
- //var textCoordBuffer = createFloat32Buffer(gl, uvpoints);
178
- //writeVertexAttrib(gl, textCoordBuffer, program.attrs.aTextCoord, 2, 2, 0);
179
-
180
-
181
- // 纹理
182
- /*var img = new Image();
183
-
184
- img.onload = function(){
185
- draw();
186
- };
187
- img.src = 'qrcode.jpg';*/
188
-
189
- //points = [-0.8, 0.5, 0, 0.5,0.6,0,0,-0.6, -0.5];
190
-
191
- draw();
192
-
193
- function draw() {
194
- /*var texture = create2DTexture(gl, img);
195
-
196
- if(program.uniforms.uSample) {
197
- gl.uniform1i(program.uniforms.uSample.location, 0) // 纹理单元传递给着色器
198
- }*/
199
-
200
-
201
-
202
-
203
-
204
- gl.clearColor(1, 1, 1, 1) // 设置清空颜色缓冲时的颜色值
205
- gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区，也就是清空画布
206
-
207
- if(program.uniforms.u_color) {
208
- gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
209
- }
210
-
211
- vertexBuffer = createFloat32Buffer(gl, points);
212
- writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
213
-
214
- /*gl.drawArrays( // 从数组中绘制图元
215
- gl.TRIANGLES, // 渲染三角形
216
- 0, // 从数组中哪个点开始渲染
217
- 3 // 需要用到多少个点，三角形的三个顶点
218
- );
219
- gl.drawArrays( // 从数组中绘制图元
220
- gl.TRIANGLES, // 渲染三角形
221
- 3, // 从数组中哪个点开始渲染
222
- 3 // 需要用到多少个点，三角形的三个顶点
223
- );*/
224
- //gl.drawArrays(gl.TRIANGLE, 0, points.length/2);
225
- gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
226
- //gl.drawArrays(gl.TRIANGLE_STRIP, 0, points.length/2);
227
- //gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
228
- //gl.drawArrays(gl.LINE_LOOP, 0, points.length/2);
229
- //gl.drawArrays(gl.POINTS, 0, points.length/2);
230
- //gl.drawArrays(gl.LINES, 0, points.length/2);
231
-
232
- //deleteBuffer(gl, vertexBuffer);
233
- //deleteBuffer(gl, colorBuffer);
234
- //deleteBuffer(gl, textCoordBuffer);
235
-
236
-
237
-
238
- //console.log(1,vertexBuffer);
239
-
240
-
241
-
242
- if(program.uniforms.u_color) {
243
- gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
244
- }
245
-
246
- //setTimeout(() => {
247
-
248
- vertexBuffer = createFloat32Buffer(gl, points);
249
- console.log(0, vertexBuffer);
250
- writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
251
- console.log(5, vertexBuffer.buffer);
252
- gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
253
-
254
- deleteBuffer(gl, vertexBuffer);
255
- //}, 2000);
256
-
257
- draw2d(points);
258
-
259
- //setTimeout(draw, 1000)
260
- }
261
-
262
- function draw2d(points) {
263
- var cvs = document.getElementById("cvs2d");
264
- var ctx = cvs.getContext("2d");
265
-
266
- ctx.strokeStyle = "rgba(0, 255, 0, 1)";
267
-
268
- ctx.beginPath();
269
- ctx.moveTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
270
- for(let i=2;i<points.length;i+=2) {
271
- ctx.lineTo(points[i]/10000 * center.x + center.x, center.y - points[i+1]/10000 * center.y);
272
- }
273
- ctx.lineTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
274
- ctx.stroke();
275
- ctx.closePath();
276
- }
277
- </script>
278
- </body>
package/example/xfj/img/dr_die.gif DELETED
Binary file
package/example/xfj/index.html DELETED
@@ -1,332 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>小飞机</title>
5
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
6
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
7
- <meta content="yes" name="apple-mobile-web-app-capable">
8
- <meta content="black" name="apple-mobile-web-app-status-bar-style">
9
- <script type="text/javascript" src="shake.js?2"></script>
10
- <script type="text/javascript" src="../../index.js"></script>
11
- <!--<script type="text/javascript" src="../../dist/jmGraph.min.js"></script> -->
12
- <style>
13
- html,body {
14
- margin:0;
15
- padding:0;
16
- width:100%;
17
- height:100%;
18
- overflow: hidden;
19
- -webkit-user-select: none; /* Chrome all / Safari all */
20
- -moz-user-select: none; /* Firefox all */
21
- -ms-user-select: none; /* IE 10+ */
22
- /* No support for these yet, use at own risk */
23
- -o-user-select: none;
24
- user-select: none;
25
- }
26
- #mycanvas {
27
- background-color:#000;
28
- position: absolute;
29
- width: 100%;
30
- height: 100%;
31
- }
32
- </style>
33
- </head>
34
- <body >
35
- <div style='display:none;'><img src="img/fj_ico.png" /></div>
36
- <div id="mycanvas">
37
- </div>
38
-
39
- </body>
40
- <script type="text/javascript">
41
- var graph;
42
- var sources = [
43
- 'img/bg.jpg',
44
- 'img/fj1.png',
45
- 'img/zd1.png',
46
- 'img/dr1.png'
47
- ];
48
- window.onerror = function(msg,url,line,col,err) {
49
- //alert(msg);
50
- }
51
- //初始化jmgraph
52
- jmGraph('mycanvas').then((g)=>{
53
- //jmUtils.bindEvent(window,'resize',resize);
54
- graph = g;
55
- init(g);
56
-
57
- //实时更新画布
58
- function update() {
59
- if(g.needUpdate) {
60
- var t1 = Date.now();
61
- g.redraw();
62
-
63
- var t2 = Date.now();
64
- console.log('update:'+(t2-t1));
65
- }
66
- requestAnimationFrame(update);
67
- }
68
- update();
69
- });
70
- //初始化
71
- function init(g) {
72
- //背景
73
- var bg1 = g.createShape('image',{
74
- width: '100%',
75
- height: '100%',
76
- position: {x:0,y:-g.height},
77
- image: sources[0]
78
- });
79
- g.children.add(bg1);
80
- var bg2 = g.createShape('image',{
81
- width: '100%',
82
- height: '100%',
83
- position: {x:0,y:0},
84
- image: sources[0]
85
- });
86
- g.children.add(bg2);
87
- /*var bg3 = g.createShape('image',{
88
- width: '100%',
89
- height: '100%',
90
- position: {x:0,y:'100%'},
91
- image: sources[0]
92
- });
93
- g.children.add(bg3);*/
94
-
95
- var log = g.createShape('label', {
96
- position: {x:0,y:0},
97
- width: 200,
98
- height: 50,
99
- style: {
100
- stroke: '#fff',
101
- fill: '#fff',
102
- zIndex: 100000,
103
- border:{left:1,top:1,right:1,bottom:1}
104
- }
105
- });
106
- g.children.add(log);
107
-
108
- var mainRole = new fj(g);
109
-
110
-
111
- var touchLastPosition = {x:0,y:0};
112
- g.bind('touchmove', function(arg){
113
- var offsetx = arg.position.x;// - touchLastPosition.x;
114
- var offsety = arg.position.y;// - touchLastPosition.y;
115
- mainRole.move(offsetx-30, offsety-30);
116
- });
117
- g.bind('touchstart', function(arg){
118
- touchLastPosition.x = arg.position.x;
119
- touchLastPosition.y = arg.position.y;
120
- });
121
-
122
- var drCreateTime = Date.now();
123
- setInterval(function(){
124
-
125
- if(Date.now()-drCreateTime > 100) {
126
- new dr1(g, {
127
- x: Math.random() * (g.width-20),
128
- y: -60
129
- });
130
- drCreateTime = Date.now();
131
- }
132
- var gbSpeed = 1;
133
- //背景滚动
134
- bg1.position.y += gbSpeed;
135
- bg2.position.y += gbSpeed;
136
- if(bg1.position.y >= g.height) {
137
- bg1.position.y = -g.height;
138
- }
139
- if(bg2.position.y >= g.height) {
140
- bg2.position.y = -g.height;
141
- }
142
- var t1 = Date.now();
143
- g.children.each(function(i,dr){
144
- if(dr && dr.isDR && dr.role.state == 1) {
145
- if(dr.position.y > g.height) {
146
- dr.die && dr.die();
147
- return;
148
- }
149
- var bound = dr.getBounds();
150
- g.children.each(function(j,zd){
151
- if(zd && zd.isZD) {
152
- var zdbounds = zd.getBounds();
153
- if(zdbounds.top <= bound.bottom && zdbounds.bottom > bound.bottom && zdbounds.right > bound.left && zdbounds.left < bound.right) {
154
- dr.die && dr.die();
155
- if(!zd.isBob) g.children.remove(zd);//如果不是超级炸弹，则子弹也消失
156
- return false;
157
- }
158
- }
159
- },true);
160
-
161
- //如果敌人还活着，则向前走一步
162
- if(dr.role.state == 1) {
163
- dr.role.move();
164
- }
165
-
166
- if(mainRole.state !==0 && dr.role.state == 1) {
167
- var meBound = mainRole.shape.getBounds();
168
- if(bound.bottom >= meBound.top+5 && bound.top < meBound.bottom && bound.right > meBound.left+8 && bound.left < meBound.right-8) {
169
-
170
- mainRole.die();
171
- }
172
- }
173
- }
174
- },true);
175
- var t2 = Date.now();
176
- console.log('dr:' + (t2-t1));
177
-
178
- }, 30);
179
-
180
-
181
- var dev = new devicemotion();
182
- var lastDevOpt = null;
183
- var lastDevTime = Date.now();
184
- dev.bindShake({
185
- handler: function(opt){
186
- if(opt) {
187
- if(Date.now()-lastDevTime < 50) return;
188
- var gamma = opt.gamma || (opt.x*10);
189
- var beta = opt.beta || (-opt.y*10);
190
- var alpha = opt.alpha || (opt.z*10);
191
-
192
- var x =Math.floor((gamma+20)/40*g.width/10) * 10;
193
- var y = mainRole.shape.position.y;
194
-
195
- log.value = 'x:' + x + ',y:' + y;
196
- if(!isNaN(x) && !isNaN(y)) mainRole.move(x,y);
197
-
198
- }
199
- else {
200
- //alert(JSON.stringify(opt));
201
- }
202
- lastDevOpt = opt;
203
- }
204
- });
205
-
206
- }
207
-
208
- function fj(g) {
209
- this.shape = g.createShape('image',{
210
- width: 60,
211
- height: 60,
212
- position: {x: g.width/2-20, y: g.height-100},
213
- image: sources[1],
214
- style: {
215
- rotation: {
216
- point: {x: '50%', y: '50%'},
217
- angle: Math.PI
218
- }
219
- }
220
- });
221
- g.children.add(this.shape);
222
-
223
- this.state = '1';//活着，2=死了
224
-
225
- var self = this;
226
- var lastZDTime = Date.now();
227
- var bobTime = Date.now();//大炸弹出现时间
228
- //不断地发射子弹
229
- this.inter = setInterval(function(){
230
-
231
- if(self.state == '1' && Date.now() - lastZDTime > 160) {
232
- var w = 20;
233
- var h = 20;
234
- if(Date.now() - bobTime > 20000) {
235
- w = 600;
236
- bobTime = Date.now();
237
- }
238
- var zd = g.createShape('image',{
239
- width: w,
240
- height: h,
241
- position: {x: self.shape.position.x + 30 - w/2, y: self.shape.position.y - h},
242
- image: sources[2]
243
- });
244
-
245
- if(w > 20) {
246
- zd.isBob = true;
247
- }
248
- zd.isZD = true;
249
- g.children.add(zd);
250
- lastZDTime = Date.now();
251
- }
252
- var t1 = Date.now();
253
- g.children.each(function(i,z){
254
- if(z&&z.isZD) {
255
- z.position.y -= 1;
256
- if(z.position.y <= 0) {
257
- g.children.remove(z);
258
- }
259
- }
260
-
261
- }, true);
262
- var t2 = Date.now();
263
- console.log('fire:' + (t2-t1));
264
- }, 5);
265
-
266
- this.die = function() {
267
- clearInterval(this.inter);
268
- this.shape.visible = false;
269
- alert('你死了');
270
- this.state = 0;
271
- }
272
-
273
- //移动
274
- this.move = function(x, y) {
275
- var pos = this.shape.position;
276
-
277
- if(x <= -30) x = -30;
278
- else if(x >= g.width-30) x = g.width-30;
279
-
280
- if(y <= 0) y = 0;
281
- else if(y >= g.height - 60) y = g.height - 60;
282
-
283
- pos.x = x;
284
- pos.y = y;
285
- }
286
- }
287
-
288
- function dr1(g, pos){
289
-
290
- this.speed = Math.random()+ 0.5;
291
- var size = 30 * this.speed;
292
-
293
- this.shape = g.createShape('image',{
294
- width: size,
295
- height: size,
296
- position: pos,
297
- image: sources[3]
298
- });
299
- this.shape.style.zIndex = size;
300
-
301
- g.children.add(this.shape);
302
- this.shape.role = this;
303
- this.shape.isDR = true;
304
- this.state = 1;
305
-
306
-
307
- this.shape.die = function(){
308
-
309
- var self = this;
310
- //var ms = src.match(/dr1_die(\d+)\.png/);
311
- /*var index = 1;
312
- if(ms && ms.length>1){
313
- index = Number(ms[1])+1;
314
- } */
315
- this.image = 'img/dr_die.gif';
316
-
317
- this.role.state = 0;
318
- clearInterval(this.role.inter);
319
-
320
- setTimeout(function(){
321
- g.children.remove(self);
322
- }, 1000);
323
-
324
- }
325
-
326
- var that = this;
327
- this.move = function(){
328
- this.shape.position.y+=this.speed;
329
- }
330
- }
331
- </script>
332
- </html>