/
8_baddies.html
444 lines (397 loc) · 16.4 KB
/
8_baddies.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Baddies - Phaser Platformer series</title>
<script src="js/phaser.min.js"></script>
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 400,
transparent: true,
physics: {
default: "arcade",
arcade: {
gravity: { y: 300 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player,
baddie,
coins,
scoreCoin,
scoreCoinTimeline,
platforms,
cursors,
score = 0,
scoreText,
acceleration = 600,
jumpVelocity = -330,
wasStanding = false,
edgeTimer = 0,
jumping = false,
prevPos = 0,
yPos = 0,
touchJump = false,
touchJumpThreshold = 5,
touchSlider,
sliderBar,
sliderKnob,
touchMoving = false,
touchMoveThreshold = 3,
largeThumbMoveAcross = 25,
thumbSizeOffset = 60,
startX;
var game = new Phaser.Game(config);
function preload() {
this.load.setBaseURL("assets/");
this.load.image("ground", "platform.jpg");
this.load.image("coin", "coin.jpg");
this.load.image("hero", "hero.jpg");
this.load.image("baddie", "baddie.jpg");
this.load.image("logo", "digitherium-logo.jpg");
this.load.image("touch-slider", "touch-slider.png");
this.load.image("touch-knob", "touch-knob.png");
}
function create() {
var logo = this.add.sprite(config.width / 2, config.height / 2, 'logo');
logo.alpha = 0.4;
logo.setScale(0.5);
this.input.addPointer(1);
platforms = this.physics.add.staticGroup();
platforms.create(400, 400, "ground").setScale(2).refreshBody();
platforms.create(50, 240, "ground");
platforms.create(750, 140, "ground");
player = this.physics.add.sprite(100, 350, "hero");
player.setCollideWorldBounds(true);
buildTouchSlider(this);
//Set bounce to 0, so our hero just lands directly
player.setBounce(0);
//Set top speeds
player.body.maxVelocity.x = 200;
player.body.maxVelocity.y = 500;
baddie = this.physics.add.sprite(620, 352, 'baddie');
baddie.setCollideWorldBounds(true);
cursors = this.input.keyboard.createCursorKeys();
coins = this.physics.add.group({
key: "coin",
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
coins.children.iterate(function(child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
scoreCoin = this.add.sprite(30, 32, "coin");
scoreCoin.setOrigin(0.5, 0.5);
scoreCoin.scaleX = 0.5;
scoreCoin.scaleY = 0.5;
scoreText = this.add.text(46, 20, "0", { fontSize: "24px", fill: "#fff" });
this.physics.add.collider(player, platforms);
this.physics.add.collider(baddie, platforms);
this.physics.add.collider(coins, platforms);
this.physics.add.overlap(player, coins, collectCoin, null, this);
this.physics.add.overlap(player, baddie, hitBaddie, null, this);
}
function hitBaddie(player, baddie) {
//if the collision is on the baddies head
if (baddie.body.touching.up) {
// set baddie as being hit by removing physics
baddie.disableBody(false, false);
//make player jump up in the air a little bit
player.setVelocityY(jumpVelocity);
//animate baddie, fading out and getting bigger
var tween = this.tweens.add({
targets: baddie,
alpha: 0.3,
scaleX: 1.5,
scaleY: 1.5,
ease: 'Linear',
duration: 200,
onComplete: function() {
//remove the game object
destroyGameObject(baddie);
},
});
}
//otherwise you've hit baddie, but not on the head. This makes you die
else {
//set player to dead
player.disableBody(false, false);
//animate players death scene
var tween = this.tweens.add({
targets: player,
alpha: 0.3,
scaleX: 1.1,
scaleY: 1.1,
angle: 90,
x: player.x - 20,
y: player.y - 20,
ease: 'Linear',
duration: 200,
onComplete: function() {
restartGame(this);
},
onCompleteScope: this
});
}
}
function restartGame(game) {
game.scene.restart();
}
function buildTouchSlider(game) {
sliderBar = game.add.sprite(0, 0, "touch-slider");
sliderKnob = game.add.sprite(0, 0, "touch-knob");
touchSlider = game.add.container(100, 450);
touchSlider.add(sliderBar);
touchSlider.add(sliderKnob);
touchSlider.alpha = 0;
}
function moveLeft(acceleration) {
var standing = player.body.blocked.down || player.body.touching.down;
//if hero is on ground then use full acceleration
if (standing) {
player.setAccelerationX(-acceleration);
} else {
//if hero is in the air then accelerate slower
player.setAccelerationX(-acceleration / 3);
}
}
function moveRight(acceleration) {
var standing = player.body.blocked.down || player.body.touching.down;
//if hero is on ground then use full acceleration
if (standing) {
player.setAccelerationX(acceleration);
} else {
//if hero is in the air then accelerate slower
player.setAccelerationX(acceleration / 3);
}
}
function update() {
var standing = player.body.blocked.down || player.body.touching.down;
//if left key is down then move left
if (cursors.left.isDown) {
moveLeft(acceleration);
} else if (cursors.right.isDown) {
//same deal but for right arrow
moveRight(acceleration);
}
//if either touch pointer is down. Two thumbs, two pointers
if (this.input.pointer1.isDown || this.input.pointer2.isDown) {
//work out half way point of our game
var leftHalf = config.width / 2;
//Left hand side - horizontal movement
//if thumb is on the left hand side of the screen we are dealing with horizontal movement
if (this.input.pointer1.x < leftHalf || this.input.pointer2.x < leftHalf) {
//reset pointer variable
var myMovePointer = null;
//here we get the pointer that is being used on the left hand side of screen. Depends which thumb they touched screen with first.
if (this.input.pointer1.x < leftHalf && this.input.pointer1.isDown) {
myMovePointer = this.input.pointer1;
}
if (this.input.pointer2.x < leftHalf && this.input.pointer2.isDown) {
myMovePointer = this.input.pointer2;
}
//if we have an active touch pointer on the left hand side of the screen then...
if (myMovePointer) {
//if touchSlide is not already showing then
if (!touchSlider.alpha) {
//make it visible
touchSlider.alpha = 1;
//position touchSlider to be where the users thumb or finger is
touchSlider.x = myMovePointer.x;
//with the Y pos we add a thumbSizeOffset so it's above the users thumb not hidden under it
touchSlider.y = myMovePointer.y - thumbSizeOffset;
//set our start point and reset slider display
startX = myMovePointer.x;
sliderKnob.x = 0;
}
//if thumb has moved left or right of where we started then move
if (myMovePointer.x < startX || myMovePointer.x > startX) {
//work out how far thumb has moved. Is this a big enough movement?
var movement = 0;
if (myMovePointer.x < startX) movement = startX - myMovePointer.x;
if (myMovePointer.x > startX) movement = myMovePointer.x - startX;
//If move is significant enough then move our character
if (movement > touchMoveThreshold) {
//set flag as we are definitely moving
touchMoving = true;
//set slider knob position to be half way to edge
var sliderPos = 0;
//left
if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 4);
//right
if (myMovePointer.x > startX) sliderPos = sliderBar.width / 4;
//set acceleration to be an 8th of normal
var tmpAcceleration = acceleration / 8;
//if thumb has moved quite a lot, then go faster
if (movement > largeThumbMoveAcross) {
//the knob position should be at the edge as we're at full tilt
if (myMovePointer.x < startX) sliderPos = -(sliderBar.width / 2);
if (myMovePointer.x > startX) sliderPos = sliderBar.width / 2;
//acceleration is normal
tmpAcceleration = acceleration;
}
//tween slider knob to position we just worked out
var tween = this.tweens.add({
targets: sliderKnob,
x: sliderPos,
ease: "Power1",
duration: 300
});
if (myMovePointer.x < startX) moveLeft(tmpAcceleration);
if (myMovePointer.x > startX) moveRight(tmpAcceleration);
} else {
//If move is really, really small then we don't count it. Stop moving
//set moving flag to false
touchMoving = false;
//reset slider knob to center position
var tween = this.tweens.add({
targets: sliderKnob,
x: 0,
ease: "Power1",
duration: 300
});
}
}
}
}
//Right hand side - Touch Jumping
//if thumb is on the right hand side of the screen we are dealing with vertical movement - i.e. jumping.
if (this.input.pointer1.x > leftHalf || this.input.pointer2.x > leftHalf) {
//reset pointer variable
var myJumpPointer = null;
//get active touch pointer for this side of the screen
if (this.input.pointer1.x > leftHalf && this.input.pointer1.isDown) {
myJumpPointer = this.input.pointer1;
}
if (this.input.pointer2.x > leftHalf && this.input.pointer2.isDown) {
myJumpPointer = this.input.pointer2;
}
//if we have a touch pointer on right hand side of screen...
if (myJumpPointer) {
//store last y position of touch pointer
prevPos = yPos;
//get new position of touch pointer
yPos = myJumpPointer.y;
//if we have moved our thump upwards and it's more than our threshold then we set jump flag to true
if (prevPos - yPos > touchJumpThreshold) {
touchJump = true;
}
}
}
//neither thumb is down so reset touch movement variables and hide touchSlider
} else {
touchSlider.alpha = 0;
startX = 0;
touchMoving = false;
}
//if not moving left or right via keys or touch device...
if (!cursors.right.isDown && !cursors.left.isDown && !touchMoving) {
//if hero is close to having no velocity either left or right then set velocity to 0. This stops jerky back and forth as the hero comes to a halt. i.e. as we slow hero down, below a certain point we just stop them moving altogether as it looks smoother
if (
Math.abs(player.body.velocity.x) < 10 &&
Math.abs(player.body.velocity.x) > -10
) {
player.setVelocityX(0);
player.setAccelerationX(0);
} else {
//if our hero isn't moving left or right then slow them down
//this velocity.x check just works out whether we are setting a positive (going right) or negative (going left) number
player.setAccelerationX(
(player.body.velocity.x > 0 ? -1 : 1) * acceleration / 3
);
}
}
//get current time in seconds
var d = new Date();
var time = d.getTime();
//if we have just left the ground set edge time for 100ms time
if (!standing && wasStanding) {
edgeTimer = time + 100;
}
//if player is standing, or just fallen off a ledge (within our allowed grace time) and...
//either up key is press, or touchjump flag is set AND they are not already jumping then jump!
if (
(standing || time <= edgeTimer) &&
(cursors.up.isDown || touchJump) &&
!jumping
) {
player.setVelocityY(jumpVelocity);
jumping = true;
}
//if not pressing up key...
if (!cursors.up.isDown) {
//if player is touching ground / platform then reset jump parametrs
if (player.body.touching.down) {
jumping = false;
touchJump = false;
prevPos = 0;
}
}
wasStanding = standing;
}
function collectCoin(player, coin) {
//stop coin for being collected twice, as it will stick around on the screen as it animnates
coin.disableBody(false, false);
//tween coin to score coin in corner shrink
var tween = this.tweens.add({
targets: coin,
alpha: 0.3,
angle: 720,
x: scoreCoin.x,
y: scoreCoin.y,
scaleX: 0.5,
scaleY: 0.5,
ease: "Linear",
duration: 500,
onComplete: function() {
destroyGameObject(coin);
}
});
//check if we already have an animation
if (scoreCoinTimeline) {
//if animation isn't currently running, then run again
if (scoreCoinTimeline.progress == 1) {
animateScoreCoin(this);
}
} else {
//no animation to create one
animateScoreCoin(this);
}
score += 10;
scoreText.setText(score);
}
//rotate score coin and make bigger before shrinking again
function animateScoreCoin(game) {
scoreCoinTimeline = game.tweens.timeline({
targets: scoreCoin,
duration: 100,
tweens: [{
scaleX: 0.8,
scaleY: 0.8,
angle: "+=45"
},
{
scaleX: 0.5,
scaleY: 0.5,
angle: "+=45"
}
]
});
}
function destroyGameObject(gameObject) {
// Removes any game object from the screen
gameObject.destroy();
}
</script>
</body>
</html>