-
Notifications
You must be signed in to change notification settings - Fork 1
/
myplay.html
589 lines (567 loc) · 28.4 KB
/
myplay.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta https-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no, initial-scale=1">
<meta name = "format-detection" content = "telephone=no"><!--防止iOS网页中的数字被识别为电话号码-->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<title>金币大作战</title>
<script src="https://i2.Yongche.name/s/js/201712/flexible.js?1478153218"></script>
<style type="text/css">
* {margin: 0;padding: 0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;position: relative;}
ul,li{list-style: none;}
input{ outline: none; border:none;-webkit-appearance: none;}
.wrapper{width: 100%;height: 100%;}
.mask{position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; line-height: 0.67rem; font-size: 30px; background:rgba(0,0,0,0.6); display: none;}
.mask .container{margin: 1.70rem auto 0;width: 7.76rem;height: 12.0rem;background: url(<{asset:media/g2/M02/1B/3C/rBEBJVpsgt6IVu3qAAA4m4S8h3AAAK3pwDtm3AAADiz299.jpg}>);border: 0.08rem solid #fcd315;border-radius: 0.2rem;position: relative;color: #eca205;font-size: 0.346667rem;}
.mask .container .mask-title{ width:3.933333rem; height: 1.133333rem; font-size: 0.64rem; line-height: 1.0rem; text-align: center; border-radius: 0.24rem; margin: -0.533333rem auto 0; background: #fdd65f; border: 0.08rem solid #fcd315; border-radius: 0.2rem; color: #FFFFFF; }
.mask .close_btn{ margin: 0.2rem auto; width:37px; height: 37px; background: url(<{asset:media/g2/M02/1B/3C/rBEBJVpsgt6IdibaAAAK4o2vF1QAAK3pwDnPOsAAAr6941.png}>) no-repeat; background-size: 100%;}
.scrollwrapper{height: 11.0rem;overflow: scroll;}
#rule .rule-contain{ line-height: 0.506667rem; padding: 0 0.506667rem 0 0.8rem;}
#rule .rule-contain ul{list-style:decimal;margin-top: 0.15rem;}
#rule .rule-contain .rule-item{margin-bottom: 0.266667rem;}
#prize .prize-contain .noprize{font-size: 0.6rem;text-align: center;line-height: 1.3rem; padding-top: 2rem;}
#prize .prize-contain .prizelist{display: none;}
#prize .prize-contain .prizeitem{margin:0.8rem auto;width:5.906667rem;height:1.946667rem;padding: 0.2rem 0 0 2.8rem;font-size: 0.28rem;}
#prize .prize-contain .prize95{background: url(<{asset:media/g2/M02/1C/02/rBEBP1pwO-2IL5IQAAAS2l_y62AAAK6DwP91GAAABLy197.png}>) no-repeat; background-size: 100% 100%;}
#prize .prize-contain .prize90{background: url(<{asset:media/g2/M01/1C/02/rBEBP1pwO-2IIFweAAAPzJjH1aIAAK6EgMPauAAAA_k547.png}>) no-repeat; background-size: 100% 100%; }
#prize .prize-contain .prize85{ background: url(<{asset:media/g2/M01/1C/02/rBEBJVpwO-yIfxG0AAATOlAQekEAAK6EgMPV44AABNS668.png}>) no-repeat; background-size: 100% 100%; }
#prize .prize-contain .prizeitem-owner{ display: inline-block; max-width: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;}
#sharearrow .arrowbg{margin: 0.5rem auto; width: 8.0rem; height: 2.0rem; background: url(<{asset:media/g2/M04/1B/3F/rBEBJVpu1QuIGeKBAAAPO8ZBMjgAAK5AwP7dDcAAA9T083.png}>) no-repeat; background-size: 100%;}
.leadPage-mask{background: url(<{asset:media/g2/M02/1B/3C/rBEBJVpsgt6IRTWKAABMifFwiTgAAK3pwDtJqEAAEyh459.png}>); background-size: 100%;}
#close_leadPage{position: absolute; right: 0.8rem;top: 0.7rem;}
#over .over-contain .top-contain{margin-bottom: 0.69rem;height: 5.0rem;padding: 0.1px;}
#over .over-contain .winer{display: none;}
#over .over-contain .loser{font-size: 0.6rem; text-align: center; line-height: 1.3rem; padding: 1.3rem 0 0 0;display: none;}
#over .over-contain .gongxi{ margin: 0.33333rem auto 0; width:6.693333rem; height: 2.36rem; background: url(<{asset:media/g2/M02/1B/3C/rBEBP1psgt2IRvRVAACt4ep_JkcAAK3pwDt4esAAK35479.jpg}>); background-size: 100%; }
#over .over-contain .discount{ margin: 0.53rem auto 0; width:6.666667rem; height:2.306667rem; padding:0.5rem 0 0 3.2rem; }
#over .over-contain .discount95{ background: url(<{asset:media/g2/M02/1C/02/rBEBP1pwO-2IL5IQAAAS2l_y62AAAK6DwP91GAAABLy197.png}>) no-repeat; background-size: 100% 100%; }
#over .over-contain .discount90{ background: url(<{asset:media/g2/M01/1C/02/rBEBP1pwO-2IIFweAAAPzJjH1aIAAK6EgMPauAAAA_k547.png}>) no-repeat; background-size: 100% 100%; }
#over .over-contain .discount85{ background: url(<{asset:media/g2/M01/1C/02/rBEBJVpwO-yIfxG0AAATOlAQekEAAK6EgMPV44AABNS668.png}>) no-repeat; background-size: 100% 100%; }
#over .over-contain .line{ font-size: 0.453333rem; color: #a8a381; text-align: center; }
#over .over-contain #totalscore{ font-size: 0.8rem; }
#over .over-contain .playagin{ margin: 0.5rem auto ; width:4.93rem; height:0.986667rem; border-radius: 0.49rem; text-align: center; line-height: 0.986rem; font-size: 0.40rem; color: #f5f5f5; background: #ff5b5b; }
#over .over-contain .noagin{ background: #CCCCCC; }
#over .over-contain .sharetofriend{ margin: 0 auto; width:4.93rem; height:0.986rem; line-height: 0.986rem; text-align: center; font-size: 0.45rem; color: #ff5b5b; }
#loginMask .login-contain{ margin: 30% auto 0; width: 80%; height: auto; border-radius: 0.2rem; position: relative; color: #eca205; padding: 30px; background: #FFFFFF; }
.login-contain .login-title{ font-size: 22px; line-height: 54px; }
.login-contain .login-input{ margin-bottom: 12px; display: inline-block; width:95%; height:45px; border:1px solid #ccc; border-radius: 23px; font-size: 16px; padding-left: 12px; }
.login-contain .login-input-short{ width:50%; display: inline-block; vertical-align: top; margin-right: 5px; }
.login-contain .login-code{ width:40%; height:45px; font-size: 16px; display: inline-block; }
.login-contain .login-getmsgcode{ color: #FFFFFF; background: #E92C2A; border-radius: 23px; }
.login-contain .login-captchacode{ background: #CCCCCC; }
.login-contain .login-captchacode-wrapper{ display: none; }
.login-contain .login-btn{ width:95%; height:1.067rem; color: #FFFFFF; background: #E92C2A; border-radius: 0.5rem; font-size: 0.55rem; text-align: center; line-height: 1.067rem;}
/*错误提示吐司*/
.toast{ position: fixed; bottom : 35%; left: 10%; width: 80%; height: 40px; line-height: 40px; background: rgba(0,0,0,0.5); color: #fff; z-index: 30; text-align: center; border-radius: 10px;font-size: 16px;display: none;}
</style>
</head>
<body>
<div>
<div class="wrapper">
<div id="game"></div>
</div>
<div id="rule" class="mask rule-mask">
<div class="container rule-contain">
<div class="mask-title">活动规则</div>
<div class="scrollwrapper">
<ul>
<li class="rule-item">1.每位用户第一次进入游戏时获得一次免费游戏机会；</li>
<li class="rule-item">2.用户每打一次车，会获得一次游戏机会，邀请好友参加游戏后，双方各获得一次游戏机会，每个用户每天最多获得4次通过邀请得到的游戏机会，且每位用户只能在一天内被邀请一次；</li>
<li class="rule-item">3.当游戏开始后，在60秒内，左右滑动汽车，每得到一个金币加100分，撞到障碍物游戏结束；</li>
<li class="rule-item">4.游戏结束后，可根据所获得金币数所对应的积分获取奖励，所获奖品请在“我的奖品”页面查看；</li>
<li class="rule-item">5.奖品对应积分为：3000分可获得——9.5折优惠券一张，5000分可获得——9折优惠券一张，7000分以上可获得——8.5折优惠券一张，所获优惠券可用于用车费的部分抵扣，优惠券使用规则请参见易到App个人中心优惠券页面。</li>
<li class="rule-item">* 易到有权在法律允许的范围内进行解释</li>
</ul>
</div>
</div>
<div id="close_rule" class="close_btn"></div>
</div>
<div id="prize" class="mask prize-mask">
<div class="container prize-contain">
<div class="mask-title">我的奖品</div>
<div class="scrollwrapper">
<ul class="prizelist"></ul>
<div class="noprize">尚未获得奖品，<br/>赶快开始游戏吧</div>
</div>
</div>
<div id="close_prize" class="close_btn"></div>
</div>
<div id="over" class="mask over-mask">
<div class="container over-contain">
<div class="mask-title">游戏结束</div>
<div class="top-contain">
<div class="winer"><!--恭喜获得-->
<div class="gongxi"></div>
</div>
<div class="loser"><!--真遗憾-->
<div class="loser1">真遗憾</div>
<div class="loser2">离奖励就差一点了</div>
</div>
</div>
<div class="line totalscore">本次获得<span id="totalscore"></span>分</div>
<div class="line defeat">击败<span id="defeat"></span>%用户</div>
<div id="playagin" class="playagin ">再玩一次</div>
<div id="sharetofriend" class="sharetofriend">分享得游戏机会 ></div>
</div>
<div id="close_over" class="close_btn"></div>
</div>
<div id="leadPage" class="mask leadPage-mask">
<div id="close_leadPage" class="close_btn"></div>
</div>
<div class="toast"></div>
</div>
<script src="https://i3.Yongche.name/s/js/201801/myphaser2.6.min.js?1478153218"></script>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"> //<!--//DOM及接口请求-->
//活动规则页\我的奖励页\引导页\登录页--- “关闭按钮”
$(".close_btn").click(function(){
$('.mask').fadeOut(300);
})
//“再玩一次”
$("#playagin").click(function(){
$('#over').hide();
game.state.start('play');
})
//结束页关闭返回首页
$('#close_over').click(function(){
$('.mask').fadeOut(300);
game.state.start('created');
})
</script>
<script type="text/javascript"> //<!--//游戏逻辑-->
//点击屏幕任意位置，可拖动主角
//生成障碍和金币的方法合二为一
var width = window.innerWidth;
var height = window.innerHeight;
//var httpimg = 'https://www.yongche.com/media/get_image.php?media_id=';
//var httpimg = 'https://i1-testing.Yongche.org/media/';
var httpimg = 'https://i0.Yongche.name/media/';
var httpaudio = '//i0.yongche.name/';
var spicJson = {"frames":[{"filename":"coinbg","frame":{"x":2,"y":246,"w":225,"h":82},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":225,"h":82},"sourceSize":{"w":225,"h":82}},{"filename":"crash","frame":{"x":310,"y":514,"w":186,"h":153},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":186,"h":153},"sourceSize":{"w":186,"h":153}},{"filename":"garbagecan","frame":{"x":342,"y":404,"w":148,"h":108},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":6,"y":29,"w":148,"h":108},"sourceSize":{"w":162,"h":162}},{"filename":"myprizebtn","frame":{"x":210,"y":382,"w":130,"h":95},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":130,"h":95},"sourceSize":{"w":130,"h":95}},{"filename":"one","frame":{"x":210,"y":579,"w":84,"h":290},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":62,"y":4,"w":84,"h":290},"sourceSize":{"w":208,"h":298}},{"filename":"playcount","frame":{"x":210,"y":479,"w":98,"h":98},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":98,"h":98},"sourceSize":{"w":98,"h":98}},{"filename":"plus100","frame":{"x":2,"y":871,"w":45,"h":13},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":45,"h":13},"sourceSize":{"w":45,"h":13}},{"filename":"roadblock","frame":{"x":229,"y":250,"w":104,"h":130},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":29,"y":15,"w":104,"h":130},"sourceSize":{"w":162,"h":162}},{"filename":"rulesbtn","frame":{"x":229,"y":162,"w":117,"h":86},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":117,"h":86},"sourceSize":{"w":117,"h":86}},{"filename":"sharebtn","frame":{"x":2,"y":82,"w":346,"h":78},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":346,"h":78},"sourceSize":{"w":346,"h":78}},{"filename":"startbtn","frame":{"x":2,"y":2,"w":346,"h":78},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":346,"h":78},"sourceSize":{"w":346,"h":78}},{"filename":"stone","frame":{"x":350,"y":2,"w":160,"h":100},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":1,"y":32,"w":160,"h":100},"sourceSize":{"w":162,"h":162}},{"filename":"three","frame":{"x":350,"y":104,"w":158,"h":298},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":24,"y":0,"w":158,"h":298},"sourceSize":{"w":208,"h":298}},{"filename":"timerbg","frame":{"x":2,"y":162,"w":225,"h":82},"rotated":false,"trimmed":false,"spriteSourceSize":{"x":0,"y":0,"w":225,"h":82},"sourceSize":{"w":225,"h":82}},{"filename":"two","frame":{"x":2,"y":330,"w":206,"h":298},"rotated":false,"trimmed":true,"spriteSourceSize":{"x":0,"y":0,"w":206,"h":298},"sourceSize":{"w":208,"h":298}}],"meta":{"app":"http://www.texturepacker.com","version":"1.0","image":"spic.png","format":"RGBA8888","size":{"w":512,"h":1024},"scale":"1","smartupdate":"$TexturePacker:SmartUpdate:e9fd54ef0410952a79f755f7ac852be3$"}}
// 创建游戏实例
var game = new Phaser.Game(width, height, Phaser.AUTO, 'game',true);
game.resolution = window.devicePixelRatio;
// 定义场景
var states = {
// boot场景
boot: function(){
this.preload = function(){
// 加载游戏资源
game.load.crossOrigin = 'https://cms.yongche.com'; // 设置跨域
game.load.image('loadingbg', httpimg+'g2/M02/1B/3C/rBEBP1psgt2IQiGTAAAoFpSO9-sAAK3pwDtc0IAACgu105.png');
game.load.image('loadingbar', httpimg+'g2/M02/1A/29/rBEBP1psgt2IFDjJAAADk5OHafEAAKXpgP__FUAAAOr234.png');
},
this.create = function(){
//game.add.image(0,0,'loadingbg');
},
this.render = function(){
game.state.start('preload');
}
},
// 加载场景
preload: function() {
this.preload = function() {
var loadingbg = game.add.sprite(game.world.centerX,game.world.centerY,"loadingbg");
var loadingbar = game.add.sprite(0,0,"loadingbar");
loadingbar.reset(game.world.centerX-loadingbar.width/2,game.world.centerY);
loadingbg.anchor.setTo(0.5, 0.5);
loadingbar.anchor.setTo(0, -1.05);
game.load.setPreloadSprite(loadingbar);
// 加载游戏资源
game.load.crossOrigin = 'https://cms.yongche.com'; // 设置跨域
game.load.image('homepagebg', httpimg+'g2/M01/1C/04/rBEBP1pxgyeIE05HAAXMI327Te4AAK7DwCSJ8AABcw7461.png');//首页-背景
game.load.image('playbg', httpimg+'g2/M02/1C/0A/rBEBP1p1bO6INpQfAAyHmwBz6oQAAK9VwGfhwwADIez518.png');//游戏页-背景
game.load.atlas("spic", httpimg+"g2/M02/1C/0B/rBEBP1p1kY6ICQlTAAHlhv6pJOQAAK9dwHKeuoAAeWe249.png", null,spicJson);//精灵图
game.load.spritesheet('dude', httpimg+'g2/M04/1C/0A/rBEBP1p1XeaINgTsAAQ_1WywasIAAK9SgIGR0QABD_t853.png', 187, 299); //游戏页-游戏主角
game.load.spritesheet('coin', httpimg+'g2/M02/1B/3C/rBEBP1psgt2IIJy2AAA9w4g5HbIAAK3pwDnR-UAAD3b307.png', 81, 81); //游戏页-金币
game.load.spritesheet('mute-play', httpimg+'g2/M02/1B/3C/rBEBJVpsgt6IVvREAAANsPV9iJMAAK3pwDt1CMAAA3I754.png', 32, 23); //游戏页-静音及播放
game.load.audio('bgMusic', httpaudio+'s/download/201801/bgMusic1.mp3?1478153218'); //游戏页-背景音乐
game.load.audio('scoreMusic', httpaudio+'s/download/201801/addscore.mp3?1478153218'); //游戏页-加分音乐
game.load.audio('bombMusic', httpaudio+'s/download/201801/bombom.mp3?1478153218'); //游戏页-爆炸音乐
// 监听加载完毕事件
game.load.onLoadComplete.add(onLoad);
// 加载完毕回调方法
function onLoad() {
game.state.start('created');
}
}
},
// 开始场景
created: function() {
var button,muteButton;
this.create = function() {
//alert('create')
// 声音管理类
this.soundManager = game.sound;
// 添加背景
var bg = game.add.image(0, 0, 'homepagebg');
bg.width = game.world.width;
bg.height = game.world.height;
// 添加"活动规则"按钮
ruleButton = game.add.button(game.world.width -60-9 , 20,'spic', showRules, this, 'rulesbtn','rulesbtn', 'rulesbtn');
ruleButton.scale.set(0.5);
function showRules(){
$('#rule').fadeIn(100);
}
// 添加"我的奖品"按钮
prizeButton = game.add.button(16, 16,'spic', showPrizes, this, 'myprizebtn', 'myprizebtn', 'myprizebtn');
prizeButton.scale.set(0.5);
function showPrizes(){
$('#prize').fadeIn(100);
}
// 添加"开始游戏"按钮
startButton = game.add.button(game.world.centerX, game.world.height-90, 'spic', onStart, this,'startbtn','startbtn','startbtn');
startButton.scale.set(0.5);
startButton.anchor.setTo(0.5, 1);
function onStart(){
game.state.start('play');
}
// 添加"分享 "按钮
shareButton = game.add.button(game.world.centerX, game.world.height-35, 'spic', onShare, this, 'sharebtn', 'sharebtn', 'sharebtn');
shareButton.scale.set(0.5);
shareButton.anchor.setTo(0.5, 1);
function onShare(){
}
// 添加静音按钮 播放
muteButton = game.add.button(game.world.width-32-14, game.world.height-23-14, 'mute-play', onMute, this, 1, 1, 1);
this.judgeMute();
muteButton.anchor.setTo(0.5, 0.5);
function onMute(){
this.soundManager.mute = !this.soundManager.mute;
this.judgeMute();
}
},
this.judgeMute = function(update){
if(update){
if(this.soundManager.mute){
muteButton.angle = 0;
}else{
muteButton.angle += 1;
}
}else{
if(this.soundManager.mute){
muteButton.setFrames(0, 0,0);
}else{
muteButton.setFrames(1, 1,1);
}
}
}
},
// 游戏场景
play: function() {
var grassBeltWidth = 40,
scoreMusic,
bombMusic,
bgMusic,
muteButton,
preX = 0,
move_velocity = 200, // 障碍物和奖励的速度
minTouchDis = width/8, // x滑动的最小触发距离
obstaclesTypes = ['stone','roadblock','garbagecan'];
this.create = function(){
this.touching = false; // 是否正在触摸
this.isAllStop=false;
// 声音管理类
this.soundManager = game.sound;
// 添加背景音乐
if (!bgMusic) {
bgMusic = game.add.audio('bgMusic');
bgMusic.loopFull();
}
// 缓存其他音乐
scoreMusic = game.add.audio('scoreMusic');
bombMusic = game.add.audio('bombMusic');
// 添加背景 无限滚动
this.bg = game.add.tileSprite(0, 0, game.world.width, game.world.height, 'playbg');
game.physics.enable(this.bg, Phaser.Physics.ARCADE);
// 滚动背景的像素宽高
this.bgImg = game.cache.getImage('playbg');
this.bg.tileScale.x = game.world.width / this.bgImg.width;
this.bg.tileScale.y = game.world.height / this.bgImg.height;
//添加主角
this.car = this.game.add.sprite(game.world.centerX, game.world.height - 100, 'dude');
this.car.scale.set(0.5);
this.car.anchor.setTo(0.5, 0.5);
game.physics.arcade.enable(this.car);
this.car.body.setSize(123,210,32,13);
// 创建动画
this.car.animations.add('left', [4], 10, true);
this.car.animations.add('center', [0,1,2,3], 10, true);
this.car.animations.add('right', [5], 10, true);
this.car.animations.add('over', [6], 10, true);
this.car.animations.play('center');
// 创建一个group，包含coin stone roadblock garbagecan
this.obstacles = game.add.group();
this.obstacles.enableBody = true;
// 添加时间背景
var timerbg = game.add.image(19, 16,'spic', 'timerbg');
timerbg.scale.set(0.5);
// 添加时间
this.remainTime = 60;
var style = { font: "20px Arial", fill: "#ffffff" };
this.remainTimeText = this.game.add.text(62, 25, "01:00", style);
// 添加分数背景
var coinbg = game.add.image(game.world.width-19-112, 16, 'spic','coinbg');
coinbg.scale.set(0.5);
// 添加分数和金币数
this.score = 0;
var style = { font: "20px Arial", fill: "#ffffff" };
this.scoreText = this.game.add.text(game.world.width-19-90, 25, " "+this.score, style);
// 添加静音按钮 播放
muteButton = game.add.button(game.world.width-32-14, game.world.height-23-14, 'mute-play', onMute, this, 1, 1, 1);
this.judgeMute();
muteButton.anchor.setTo(0.5, 0.5);
function onMute(){
this.soundManager.mute = !this.soundManager.mute;
this.judgeMute();
}
// 监听滑动事件
this.game.input.addMoveCallback(this.moveCallback,this);
// 监听按下事件
game.input.onDown.add(this.onDownCb,this);
// 监听离开事件
this.game.input.onUp.add(this.onUpCb,this);
//第一次游戏展示引导页
var that = this;
var firstplay = window.localStorage.getItem("firstplay");
if(!firstplay){
$('#leadPage').fadeIn(100);
firstplay = window.localStorage.setItem("firstplay",true);
}else {
this.ThreeTwoOne();//321开始倒计时
}
$("#close_leadPage").click(function(){
$('#leadPage').fadeOut(100);
that.ThreeTwoOne();//321开始倒计时
})
},
this.update = function(){
this.judgeMute(1);
// 小车和障碍物的碰撞监听
game.physics.arcade.overlap(this.car, this.obstacles, this.crashCarFunc, null, this);
},
/*this.render = function() {
game.debug.bodyInfo(this.car, 32, 32);// 在坐标（32，32）位置显示文本debug信息
game.debug.body(this.car);// 绘制矩形body
this.obstacles.forEach(function(item){
game.debug.body(item);// 绘制矩形body
})
},*/
this.moveCallback = function(pointer, x, y, isTap) {
if (isTap || !touching) return
if(preX<x){//右划
this.car.animations.play('right');
}else if(preX==x){
this.car.animations.play('center');
}else if(preX>x){//向左
this.car.animations.play('left');
}
preX = x;
if( x <= grassBeltWidth + this.car.width/2){
this.car.x = grassBeltWidth + this.car.width/2;
}else if(x >= (game.world.width - grassBeltWidth - this.car.width/2)){
this.car.x = game.world.width - grassBeltWidth - this.car.width/2;
}else{
this.car.x = x;
}
},
this.onDownCb = function(pointer) {
touching = true;
},
this.onUpCb = function(pointer) {
touching = false;
if(this.isAllStop){
return
}
this.car.animations.play('center');
},
this.ThreeTwoOne = function(numImg){
var num =3;
var imgArr = ['one','two','three'];
var ThreeTwoOneTimer = game.time.events.loop(1000,function(){
if(num<=0){
game.time.events.remove(ThreeTwoOneTimer)
// 定时器，倒计时
this.reduceTimer = game.time.events.loop(500, this.timerCallback, this);
return
}
this.tweenImg(imgArr[num-1]);
num--;
},this)
},
this.tweenImg = function(numImg){
// 添加3,2,1图片
var goal = game.add.image(game.world.centerX, game.world.centerY,'spic', numImg);
goal.width = 0;
goal.height = 0;
goal.anchor.setTo(0.5,0.5);
goal.alpha = 0;
// 添加过渡效果
var showTween = game.add.tween(goal).to({
alpha: 1,
width : game.world.width/3,
height : game.world.width/3
}, 200, Phaser.Easing.Linear.None, true, 0, 0, false);
showTween.onComplete.add(function() {
var hideTween = game.add.tween(goal).to({
alpha: 0,
width : 0,
height : 0
}, 200, Phaser.Easing.Linear.None, true, 200, 0, false);
});
},
this.judgeMute = function(update){
if(update){
if(this.soundManager.mute){
muteButton.angle = 0;
}else{
muteButton.angle += 1;
}
}else{
if(this.soundManager.mute){
muteButton.setFrames(0, 0,0);
}else{
muteButton.setFrames(1, 1,1);
}
}
},
this.add_move_sprite = function(){
var starNum = Math.floor(Math.random()*10);
//console.log(starNum)
if(starNum <= 5){
this.addmystones('coin',1);
}else if(starNum <= 7){
this.addmystones('coin',2);
}else if(starNum <= 8){
this.addmystones('stone',1);
}else if(starNum <= 9){
this.addmystones('roadblock',1);
}else{
this.addmystones('garbagecan',1);
}
},
this.addmystones = function(type,n){
// 随机[0,2]的整数,确定下落的跑道
var num = Math.floor(Math.random()*3);
var halfRoadWidth = (game.world.width-grassBeltWidth*2)/6;
for(var i=0;i<n;i++){
var obstacle;
var y;
if(type==='coin'){
obstacle = this.obstacles.create(0, 0, type);
// 创建动画
obstacle.animations.add('jump', [0, 1,2,3], 8, true);
obstacle.animations.play('jump');
y = (70)*(n-i-1);
obstacle.body.setSize(63,50,10,5);
}else{
obstacle = this.obstacles.create(0, 0,'spic', type);
y = 0;
obstacle.body.setSize(140,130,10,10);
}
var x = grassBeltWidth+ halfRoadWidth*(num*2+1);
// 重新设置位置
obstacle.reset(x, y);
obstacle.type = type;
obstacle.width = 70;
obstacle.height= 70;
obstacle.anchor.setTo(0.5, 0.5);
// kill超出边界的障碍物
obstacle.checkWorldBounds = true;
obstacle.outOfBoundsKill = true;
}
},
this.timerCallback = function(){
this.add_move_sprite();
this.reduceTime();
},
this.reduceTime = function(){
this.remainTime -= 0.5;
var timeStr = parseInt(this.remainTime)<10 ? '0'+parseInt(this.remainTime) : parseInt(this.remainTime);
this.remainTimeText.text = "00:"+timeStr;
//随着时间进行，速度越来越快
var v = move_velocity + (60-this.remainTime)*20;
this.bg.autoScroll(0, v/(game.world.height / this.bgImg.height));
this.obstacles.forEachAlive(function(item){
item.body.velocity.y = v;
});
// 结束场景
if(this.remainTime <= 0){
this.allStopMove();
// 设置背景静止
this.bg.autoScroll(0, 0);
var that = this;
game.time.events.add(1000, function(){
$('#over').show();
}, this);
}
},
this.allStopMove = function(){
// 移除定时器
this.game.time.events.remove(this.reduceTimer);
//让星星和障碍停止运动
this.obstacles.forEach(function(item){
item.body.velocity.y = 0;
})
this.isAllStop = true;
//取消滑动监听，主角不可移动
this.game.input.deleteMoveCallback(this.moveCallback,this);
},
this.crashCarFunc = function(car, obstacle){
obstacle.kill();
var imageName = '';
if(obstacle.type==='coin'){
imageName = 'plus100';
// 更新分数
this.score += 1*100;
this.scoreText.text = this.score;
// 播放音效
scoreMusic.play();
}else{
// 设置背景静止
this.bg.autoScroll(0, 0);
this.car.animations.play('over');
imageName = 'crash';
this.allStopMove();
// 播放音效
bombMusic.play();
}
// 添加得分或碰撞图片
var goal = game.add.image(obstacle.x, obstacle.y,'spic', imageName);
goal.anchor.setTo(0.5, 0.5);
goal.alpha = 0;
// 添加过渡效果
var showTween = game.add.tween(goal).to({
alpha: 1,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
var that = this;
showTween.onComplete.add(function() {
var hideTween = game.add.tween(goal).to({
alpha: 0,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
hideTween.onComplete.add(function() {
goal.kill();
if(obstacle.type==='coin') return
game.time.events.add(1000, function(){
$('#over').show();
}, this);
});
});
}
}
};
// 添加场景到游戏示例中
Object.keys(states).map(function(key) {
game.state.add(key, states[key]);
});
// 启动游戏
game.state.start('boot');
</script>
</body>
</html>