forked from yardimli/phaser-snake-challenge
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart1.html
130 lines (106 loc) · 4.8 KB
/
part1.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//objet, size, rendering context, id of the DOM element,object containing four references to Phasers esential functions.
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky','assets/sky.png');
game.load.image('ground','assets/platform.png');
game.load.image('star','assets/star.png');
game.load.spritesheet('dude','assets/dude.png', 32, 48); //
}
var platforms;
var score = 0;
var scoreTest;
function create() {
// we're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// a simple background for our game
game.add.sprite(0, 0, 'sky');
// the platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// we will enable physics for any object that is created in this group
platforms.enableBody = true;
// here we create the ground. //left height from bottom
var ground = platforms.create(0, game.world.height - 64, 'ground');
// scale it to fit the width of the game (the original sprite is 40*32 in size)
ground.scale.setTo(2, 2);
// this stops it from falling away when you jump on it
ground.body.immovable = true;
// now let's create two ledges left, top
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// the player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// we need to enable physics on the player
game.physics.arcade.enable(player);
// player physics properties. guve the little guy a slight bounce(jump).
player.body.bounce.y = 0.2; //y=up down, x= left right(how hight the bounce)
player.body.gravity.y = 300; // the higher the value, the heavier your object feels and the quicker it falls
player.body.collideWorldBounds = true;
// our two animations, walking left and right.
// the 'left' animation uses frames 0, 1, 2 and 3 and runs at 10 frames per second.The 'true' parameter tells the animation to loop
player.animations.add('left', [0, 1, 2, 3], 2, true);
player.animations.add('right', [5, 6, 7, 8]), 10, true;
stars = game.add.group();
stars.enableBody = true;
// here we'll create 12 of them evenly spaced apart
for(var i =0; i <12; i++){
// create a star inside of the 'stars' group
var star = stars.create(i*70, 0, 'star'); //i*70 means they will spaced out in the scene 70px apart.
// let gravity do its thing
star.body.gravity.y = 100;
// this just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 +Math.random()*0.2;
scoreText = game.add.text(16, 16, 'Score:', {fontSize: '32px', fill: '#000'});
}
}
function update() {
// collide the player and the stars with the platforms, this is for prevent the player fall down to ledges and ground.
game.physics.arcade.collide(player, platforms);
// reset the players velocity (movement)
cursors= game.input.keyboard.createCursorKeys();
player.body.velocity.x= 0; // to set up the sppeed, so when you don't move the sprite, it will stop, but if you don't set up this, once you press left or right, when you stop pressing, it still runs.
if(cursors.left.isDown){
// move to the left
player.body.velocity.x = -150; //the higher the number(px) is, means the sprite moves faster
player.animations.play('left');
} else if (cursors.right.isDown) {
// move to the right
player.body.velocity.x = 150;
player.animations.play('right');
} else {
// stand still
player.animations.stop();
player.frame = 4; //frame is the source of the image of the sprite
}
// allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down){
player.body.velocity.y = -350;
}
game.physics.arcade.collide(stars, platforms);
game.physics.arcade.overlap(player, stars, collectStar, null, this);
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
// Add and update the score
score += 10;
scoreText.text= 'Score: ' + score;
}
}
</script>
</body>
</html>