jmgraph 3.2.19 → 3.2.20

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 (55) hide show
  1. package/README.md +174 -2
  2. package/dist/jmgraph.core.min.js +1 -1
  3. package/dist/jmgraph.core.min.js.map +1 -1
  4. package/dist/jmgraph.js +1640 -135
  5. package/dist/jmgraph.min.js +1 -1
  6. package/index.js +13 -2
  7. package/package.json +1 -1
  8. package/src/core/jmGraph.js +453 -4
  9. package/src/core/jmLayer.js +142 -0
  10. package/src/core/jmPath.js +55 -0
  11. package/src/shapes/jmEllipse.js +91 -0
  12. package/src/shapes/jmLabel.js +127 -15
  13. package/src/shapes/jmPolygon.js +129 -0
  14. package/src/shapes/jmStar.js +160 -0
  15. package/example/ball.html +0 -217
  16. package/example/base.html +0 -112
  17. package/example/canvas.html +0 -54
  18. package/example/cell.html +0 -284
  19. package/example/controls/arc.html +0 -129
  20. package/example/controls/arrowline.html +0 -78
  21. package/example/controls/bezier.html +0 -299
  22. package/example/controls/img.html +0 -97
  23. package/example/controls/label.html +0 -87
  24. package/example/controls/line.html +0 -173
  25. package/example/controls/prismatic.html +0 -63
  26. package/example/controls/rect.html +0 -64
  27. package/example/controls/resize.html +0 -112
  28. package/example/controls/test.html +0 -360
  29. package/example/es.html +0 -70
  30. package/example/es5module.html +0 -63
  31. package/example/heartarc.html +0 -116
  32. package/example/index.html +0 -47
  33. package/example/js/require.js +0 -5
  34. package/example/love/img/bling/bling.tps +0 -265
  35. package/example/love/img/bling.json +0 -87
  36. package/example/love/img/bling.tps +0 -295
  37. package/example/love/img/doc/bling.gif +0 -0
  38. package/example/love/img/love.json +0 -95
  39. package/example/love/img/love.tps +0 -315
  40. package/example/love/img/qq/qq.tps +0 -399
  41. package/example/love/img/qq.json +0 -242
  42. package/example/love/index.html +0 -40
  43. package/example/love/js/game.js +0 -558
  44. package/example/music.html +0 -211
  45. package/example/node/test.js +0 -138
  46. package/example/pdf.html +0 -187
  47. package/example/progress.html +0 -173
  48. package/example/pso.html +0 -148
  49. package/example/sort.html +0 -805
  50. package/example/tweenjs.html +0 -84
  51. package/example/webgl.html +0 -278
  52. package/example/xfj/img/dr_die.gif +0 -0
  53. package/example/xfj/index.html +0 -332
  54. package/example/xfj/shake.js +0 -49
  55. package/example/xfj/testori.html +0 -76
@@ -1,558 +0,0 @@
1
-
2
-
3
- //游戏主体文件
4
- (function(win, doc){
5
- var width = win.innerWidth;
6
- var height = win.innerHeight;
7
- var gameState = 'init';//游戏状态,init=等待开始,play=进行中,pause=暂停, end=已结束
8
- var maxScore = 520;//最高得分
9
- var startButton = null;
10
- var tempSprites = [];//临时的精灵,很快就会消失的
11
- var resources = new resourcesLoader();
12
-
13
- load(function(){
14
- //初始化jmgraph
15
- var g = jmGraph.create('mycanvas', {
16
- width: width,
17
- height: height,
18
- autoRefresh: true,
19
- style: {
20
- fill: '#fff'
21
- }
22
- })
23
- init(g);
24
-
25
- var lastUpdateTime = Date.now();
26
- var stepTime = 1000 / 60;
27
- g.on('update', function(){
28
- var delta = Date.now() - lastUpdateTime - stepTime;
29
- lastUpdateTime = Date.now();
30
- gameLoop(delta);
31
- });
32
- });
33
-
34
- //资源加载
35
- function load(callback) {
36
- resources.add('map_background1', 'img/bg_1-min.jpg')
37
- .add('qq', "img/qq.json?201902132001")
38
- .add('love', "img/love.json?201902132001")
39
- .add('bling', "img/bling.json?201902132001")
40
- .load(callback);
41
- //异步调用音乐加载
42
- //loadSounds();
43
- }
44
-
45
- //游戏渲染逻辑
46
- function gameLoop(delta) {
47
- play(delta);
48
- }
49
-
50
- //更新游戏状态
51
- function play(delta) {
52
- map.update(delta);
53
- }
54
-
55
- function start() {
56
- gameState = 'play';
57
- map.start();
58
- heart.start();
59
- }
60
-
61
- function end() {
62
- gameState = 'end';
63
- startButton.visible = true;
64
- map.endText.visible = true;
65
- heart.end();
66
- }
67
-
68
- //初始化游戏,游戏界页,开始按钮等初始
69
- function init(g) {
70
- var loveRes = resources.cache['love'].textures;
71
- if(!startButton) {
72
- startButton = new sprite(g, loveRes['start_tap.png']);
73
-
74
- startButton.position = {x:(width-startButton.width)/2, y: (height-startButton.height)/2};
75
-
76
- startButton.on('touchend', function(e){
77
- start();
78
- this.visible = false;
79
- });
80
- g.children.add(startButton);
81
- }
82
- startButton.visible = true;
83
-
84
- map.init(g, loveRes); //初始化地图
85
- heart.init(g, loveRes); //初始化心气球
86
- }
87
-
88
- //心形对象
89
- var heart = (function(){
90
- return {
91
- vy: 6,
92
- init: function(g, res){
93
- if(!this.sprite) {
94
- this.sprite = new sprite(g, res['qq_head.png']);
95
- g.children.add(this.sprite);
96
- }
97
- this.sprite.position = {x: (width - this.sprite.width)/2, y:height - this.sprite.height};
98
- },
99
- start: function() {
100
- this.sprite.position = {x: (width - this.sprite.width)/2, y:height - this.sprite.height};
101
- this.sprite.canMove(true);
102
- },
103
- end: function() {
104
- this.sprite.canMove(false);
105
- },
106
- //碰撞检测
107
- hitTest: function(role) {
108
- return this.sprite && hitTestRectangle(this.sprite, role);
109
- }
110
- };
111
- })();
112
-
113
- //当前游戏地图
114
- //我们把整个地图画成一个大图
115
- //屏幕和角色相对于地图移动
116
- var map = (function(){
117
- var h = height * 5;
118
- return {
119
- width: width,
120
- height: h,
121
- //地图当前的偏移量,当画布在地图上移动时会修改此值
122
- offsetPosition: {
123
- x: 0,
124
- y: 0
125
- },
126
- sprites: [], //所有地图精灵
127
- init: function(g, res){
128
- if(!this.endText) {
129
- //放置碗
130
- for(var i=0;i<6;i++) {
131
- var p = new wan(g, res, 50*i+25, height * 3 + 400 + 10*i);
132
- this.sprites.push(p);
133
- g.children.add(p.sprite);
134
- }
135
- //放置花
136
- for(var i=0;i<6;i++) {
137
- var p = new flower(g, res, 40*i+25, height * 2 + 10*i);
138
- this.sprites.push(p);
139
- g.children.add(p.sprite);
140
- }
141
- //放置bob
142
- for(var i=0;i<6;i++) {
143
- var p = new bob(g, res, 45*i+25, height + 10*i);
144
- this.sprites.push(p);
145
- g.children.add(p.sprite);
146
- }
147
-
148
- this.endText = g.createShape('label',{
149
- text: 'END',
150
- position:{x: (this.width - 100)/2,y:60},
151
- style: {
152
- fontFamily: "Arial",
153
- fontSize: 46,
154
- fill: "blue",
155
- stroke: '#ff3300',
156
- textAlign : 'center',
157
- border: {
158
- left: 1,
159
- top: 1,
160
- right: 1,
161
- bottom: 1
162
- }
163
- }
164
- });
165
- }
166
- this.endText.visible = false;
167
- g.children.add(this.endText);
168
- },
169
- start: function() {
170
- //初始化位置
171
- this.offsetPosition = {
172
- x: 0,
173
- y: 0
174
- };
175
- this.endText.visible = false;
176
- for(var i=0;i<this.sprites.length;i++) {
177
- this.sprites[i].sprite.visible = true;
178
- this.sprites[i].update(0);
179
- }
180
- },
181
- //因为这里的精灵是相对于地图的,需要把坐标转换为canvas的
182
- update: function(delta){
183
- if(gameState == 'play') {
184
- this.move(0 , heart.vy);
185
-
186
- for(var i=0;i<this.sprites.length;i++) {
187
- this.sprites[i].update(delta);
188
- }
189
-
190
- if(this.offsetPosition.y >= this.height - height) {
191
- end();//结束游戏
192
- }
193
- }
194
- for(var i=tempSprites.length-1;i>=0; i--) {
195
- if(tempSprites[i].update) tempSprites[i].update(delta);
196
- }
197
- },
198
- //转为画布坐标
199
- toLocalPosition: function(p) {
200
- var x = p.position.x + this.offsetPosition.x;
201
- var y = p.position.y + height + this.offsetPosition.y - this.height;
202
- p.sprite.position = {x:x, y:y};
203
- },
204
- //开始移动
205
- move: function(x, y) {
206
- this.offsetPosition.x += x;
207
- this.offsetPosition.y += y;
208
- }
209
- }
210
- })();
211
-
212
- function wan(g, res, x, y) {
213
- this.position = {
214
- x: x,
215
- y: y
216
- };
217
- this.sprite = new sprite(g, res['wan.png']);
218
- this.sprite.visible = false;
219
- this.die = function() {
220
- this.sprite.visible = false;
221
- }
222
- this.hitEnd = function() {
223
- var score = new scoreSprite(g, 5, this.sprite.position.x, this.sprite.position.y);
224
- tempSprites.push(score);
225
- this.die();
226
- }
227
- this.update = function(delta) {
228
- if(!this.sprite.visible) return;
229
- map.toLocalPosition(this);
230
- //如果碰到当前精灵,则精灵死
231
- if(heart.hitTest(this.sprite)) {
232
- this.hitEnd();
233
- }
234
- }
235
- this.update(0);
236
- }
237
- function flower(g, res, x, y) {
238
- this.position = {
239
- x: x,
240
- y: y
241
- };
242
- this.sprite = new sprite(g, res['flower.png']);
243
- this.sprite.visible = false;
244
- this.die = function() {
245
- this.sprite.visible = false;
246
- }
247
- this.hitEnd = function() {
248
- var score = new scoreSprite(g, 10, this.sprite.position.x, this.sprite.position.y);
249
- tempSprites.push(score);
250
- this.die();
251
- }
252
- this.update = function(delta) {
253
- if(!this.sprite.visible) return;
254
- map.toLocalPosition(this);
255
- //如果碰到当前精灵,则精灵死
256
- if(heart.hitTest(this.sprite)) {
257
- this.hitEnd();
258
- }
259
- }
260
- this.update(0);
261
- }
262
- function bob(g, res, x, y) {
263
- this.position = {
264
- x: x,
265
- y: y
266
- };
267
- this.sprite = new sprite(g, res['bob.png']);
268
- this.sprite.visible = false;
269
- this.die = function() {
270
- this.sprite.visible = false;
271
- }
272
- this.hitEnd = function() {
273
- var score = new scoreSprite(g, 1, this.sprite.position.x, this.sprite.position.y);
274
- tempSprites.push(score);
275
- this.die();
276
- }
277
- this.update = function(delta) {
278
- if(!this.sprite.visible) return;
279
- map.toLocalPosition(this);
280
- //如果碰到当前精灵,则精灵死
281
- if(heart.hitTest(this.sprite)) {
282
- this.hitEnd();
283
- }
284
- }
285
- this.update(0);
286
- }
287
-
288
- //精灵
289
- function sprite(g, texture, x, y) {
290
- //创建一个image
291
- var img = g.createShape('image',{
292
- image: texture.img,
293
- width: texture.img.width,
294
- height: texture.img.height,
295
- position: {x: x,y: y}
296
- });
297
- if(texture.frame) {
298
- img.sourcePosition = {
299
- x: texture.frame.x||0,
300
- y: texture.frame.y||0
301
- };
302
- img.width = img.sourceWidth = texture.frame.w || texture.img.width;
303
- img.height = img.sourceHeight = texture.frame.h || texture.img.height;
304
- }
305
- return img;
306
- }
307
-
308
- //加分动画,飞到右上角就消失
309
- function scoreSprite(g, score, x, y) {
310
- this.txt = g.createShape('label',{
311
- text: '+' + score,
312
- position:{x: x,y: y},
313
- style: {
314
- fontFamily: "Arial",
315
- fontSize: 12,
316
- fill: "red",
317
- stroke: '#ff3300',
318
- textAlign : 'center'
319
- }
320
- });
321
- g.children.add(this.txt);
322
-
323
- var ox = width - x;
324
- var oy = y;
325
- var len = Math.sqrt(ox * ox + oy * oy);
326
- var speed = len / 80;
327
- this.vx = speed * ox / len;
328
- this.vy = speed * oy / len;
329
- this.update = function(delta) {
330
- this.txt.position.x += this.vx;
331
- this.txt.position.y -= this.vy;
332
- this.txt.needUpdate = true;
333
- if(this.txt.position.x >= width || this.txt.position.y <= 0) {
334
- this.die();
335
- }
336
- }
337
- this.die = function() {
338
- g.children.remove(this.txt);
339
- for(var i=tempSprites.length-1;i>=0; i--) {
340
- if(tempSprites[i] && tempSprites[i] == this) {
341
- tempSprites.splice(i, 1);
342
- break;
343
- }
344
- }
345
- }
346
- }
347
-
348
- //资源加载管理
349
- function resourcesLoader(){
350
- var cache = {};
351
- //加载器
352
- function load(queue, index, callback) {
353
- if(typeof index == 'function') {
354
- callback = index;
355
- index = 0;
356
- }
357
- var isArray = false;
358
- if(typeof queue == 'object' && typeof queue.length != 'undefined') {
359
- if(queue.length <= index) {
360
- callback && callback();
361
- return;
362
- }
363
- isArray = true;
364
- var obj = queue[index];
365
- }
366
- else {
367
- var obj = queue;
368
- }
369
- obj.name = obj.name || obj.url;
370
- if(!obj.type) {
371
- if(/\.json(\?|$)/i.test(obj.url)) {
372
- obj.type = 'json';
373
- }
374
- else {
375
- obj.type = 'img';
376
- }
377
- }
378
- if(obj.type == 'img') {
379
- var img = document.createElement('img');
380
- img.onload = function(){
381
- cache[obj.name] = {
382
- frame: {
383
- x: 0,
384
- y: 0,
385
- width: this.width,
386
- height: this.height
387
- },
388
- img: this
389
- };
390
- if(isArray) {
391
- load(queue, index+1, callback);
392
- return;
393
- }
394
- callback && callback(cache[obj.name]);
395
- };
396
- img.src = obj.url;
397
- }
398
- else {
399
- request(obj.url, function(ct) {
400
- if(!ct) {
401
- callback && callback();
402
- return;
403
- }
404
- var data = JSON.parse(ct);
405
- if(data.meta && data.meta.image) {
406
- load({
407
- name: obj.name,
408
- url: data.meta.image
409
- }, function(txt) {
410
- txt.textures = txt.textures||{};
411
- for(var name in data.frames) {
412
- var f = data.frames[name];
413
- if(!f) continue;
414
- txt.textures[name]=cache[name] = {
415
- frame: f.frame,
416
- img: txt.img
417
- };
418
- }
419
- if(isArray) {
420
- load(queue, index+1, callback);
421
- return;
422
- }
423
- callback && callback(data);
424
- });
425
- return;
426
- }
427
- if(isArray) {
428
- load(queue, index+1, callback);
429
- return;
430
- }
431
- callback && callback();
432
- });
433
- }
434
- }
435
- function resourceLoader() {
436
- this.loadQueue = [];
437
- this.isComplete = false;
438
- }
439
- //添加加载任务
440
- resourceLoader.prototype.add = function(name, url) {
441
- if(!url) url = name;
442
- var type = 'img';
443
- if(/\.json(\?|$)/i.test(url)) {
444
- type = 'json';
445
- }
446
- this.loadQueue.push({
447
- name: name,
448
- type: type,
449
- url: url
450
- });
451
- return this;
452
- }
453
- resourceLoader.prototype.load = function(callback){
454
- load(this.loadQueue, 0, ()=>{
455
- this.isComplete = true;
456
- callback && callback.call(this);
457
- });
458
- return this;
459
- }
460
-
461
-
462
- return {
463
- cache: cache,
464
- add: function(name, url){
465
- return new resourceLoader().add(name, url);
466
- }
467
- };
468
- };
469
-
470
- //请求网络资源
471
- function request(url, callback) {
472
- var xmlHttp;
473
- if (window.ActiveXObject) {
474
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
475
- }
476
- else if (window.XMLHttpRequest) {
477
- xmlHttp = new XMLHttpRequest();
478
- }
479
- if(!xmlHttp) {
480
- callback(null);
481
- return;
482
- }
483
- xmlHttp.onreadystatechange=function(e){
484
- if(this.readyState == 4) {
485
- if(this.status == 200) {
486
- callback&&callback(this.responseText||this.response);
487
- }
488
- else {
489
- callback&&callback();
490
- }
491
- }
492
- };
493
- xmlHttp.open("GET",url,true);
494
- xmlHttp.send(null);
495
- return xmlHttp;
496
- }
497
-
498
- //二个矩形是否有碰撞
499
- function hitTestRectangle(r1, r2) {
500
- var hitFlag, combinedHalfWidths, combinedHalfHeights, vx, vy, x1, y1, x2, y2, width1, height1, width2, height2;
501
- hitFlag = false;
502
-
503
- x1 = r1.x;
504
- x2 = r2.x;
505
- y1 = r1.y;
506
- y2 = r2.y;
507
- width1 = r1.width;
508
- width2 = r2.width;
509
- height1 = r1.height;
510
- height2 = r2.height;
511
- //如果对象有指定碰撞区域,则我们采用指定的坐标计算
512
- if(r1.hitArea) {
513
- x1 += r1.hitArea.x * map.scale;
514
- y1 += r1.hitArea.y * map.scale;
515
- width1 = r1.hitArea.width * map.scale;
516
- height1 = r1.hitArea.height * map.scale;
517
- }
518
- if(r2.hitArea) {
519
- x2 += r2.hitArea.x * map.scale;
520
- y2 += r2.hitArea.y * map.scale;
521
- width2 = r2.hitArea.width * map.scale;
522
- height2 = r2.hitArea.height * map.scale;
523
- }
524
-
525
- //中心坐标点
526
- r1.centerX = x1 + width1 / 2;
527
- r1.centerY = y1 + height1 / 2;
528
- r2.centerX = x2 + width2 / 2;
529
- r2.centerY = y2 + height2 / 2;
530
-
531
- //半宽高
532
- r1.halfWidth = width1 / 2;
533
- r1.halfHeight = height1 / 2;
534
- r2.halfWidth = width2 / 2;
535
- r2.halfHeight = height2 / 2;
536
-
537
- //中心点的X和Y偏移值
538
- vx = r1.centerX - r2.centerX;
539
- vy = r1.centerY - r2.centerY;
540
-
541
- //计算宽高一半的和
542
- combinedHalfWidths = r1.halfWidth + r2.halfWidth;
543
- combinedHalfHeights = r1.halfHeight + r2.halfHeight;
544
-
545
- //如果中心X距离小于二者的一半宽和
546
- if (Math.abs(vx) < combinedHalfWidths) {
547
- //如果中心V偏移量也小于半高的和,则二者碰撞
548
- if (Math.abs(vy) < combinedHalfHeights) {
549
- hitFlag = true;
550
- } else {
551
- hitFlag = false;
552
- }
553
- } else {
554
- hitFlag = false;
555
- }
556
- return hitFlag;
557
- };
558
- })(window, document);