Hugging Face's logo

Spaces:
Nymbo
/
Game-Creator
Running

App Files Community
Omnibus commited on
Commit
05e0c58
•
1 Parent(s): 56e2022

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +168 -0
index.html ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Game Test</title>
6
+ <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
7
+ <style type="text/css">
8
+ body {
9
+ margin: 0;
10
+ }
11
+ </style>
12
+ </head>
13
+ <body>
14
+
15
+ <script type="text/javascript">
16
+ var config = {
17
+ type: Phaser.AUTO,
18
+ width: 800,
19
+ height: 600,
20
+ physics: {
21
+ default: 'arcade',
22
+ arcade: {
23
+ gravity: { y: 300 },
24
+ debug: false
25
+ }
26
+ },
27
+ scene: {
28
+ preload: preload,
29
+ create: create,
30
+ update: update
31
+ }
32
+ };
33
+ var player;
34
+ var stars;
35
+ var bombs;
36
+ var platforms;
37
+ var cursors;
38
+ var score = 0;
39
+ var gameOver = false;
40
+ var scoreText;
41
+ var game = new Phaser.Game(config);
42
+ const queryString = window.location.search;
43
+ const urlParams = new URLSearchParams(queryString);
44
+ const sky_img = urlParams.get("sky");
45
+ const platform_img = urlParams.get("platform");
46
+ const star_img = urlParams.get("star");
47
+ const bomb_img = urlParams.get("bomb");
48
+ const dude_img = urlParams.get("dude");
49
+
50
+ console.log(sky_img);
51
+ console.log(platform_img);
52
+ console.log(star_img);
53
+ console.log(bomb_img);
54
+ console.log(dude_img);
55
+
56
+ function preload ()
57
+ {
58
+ this.load.image('sky', sky_img);
59
+ this.load.image('ground', platform_img);
60
+ this.load.image('star', star_img);
61
+ this.load.image('bomb', bomb_img);
62
+ this.load.spritesheet('dude', dude_img, { frameWidth: 32, frameHeight: 48 });
63
+ }
64
+ function create ()
65
+ {
66
+ this.add.image(0, 0, 'sky').setOrigin(0,0);
67
+ platforms = this.physics.add.staticGroup();
68
+ platforms.create(400, 568, 'ground').setScale(2).refreshBody();
69
+ platforms.create(600, 400, 'ground');
70
+ platforms.create(50, 250, 'ground');
71
+ platforms.create(750, 220, 'ground');
72
+ player = this.physics.add.sprite(100, 450, 'dude');
73
+ player.setBounce(0.2);
74
+ player.setCollideWorldBounds(true);
75
+ this.anims.create({
76
+ key: 'left',
77
+ frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
78
+ frameRate: 10,
79
+ repeat: -1
80
+ });
81
+ this.anims.create({
82
+ key: 'turn',
83
+ frames: [ { key: 'dude', frame: 4 } ],
84
+ frameRate: 20
85
+ });
86
+ this.anims.create({
87
+ key: 'right',
88
+ frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
89
+ frameRate: 10,
90
+ repeat: -1
91
+ });
92
+ cursors = this.input.keyboard.createCursorKeys();
93
+ stars = this.physics.add.group({
94
+ key: 'star',
95
+ repeat: 11,
96
+ setXY: { x: 12, y: 0, stepX: 70 }
97
+ });
98
+ stars.children.iterate(function (child) {
99
+ child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
100
+ });
101
+ bombs = this.physics.add.group();
102
+ scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
103
+ this.physics.add.collider(player, platforms);
104
+ this.physics.add.collider(stars, platforms);
105
+ this.physics.add.collider(bombs, platforms);
106
+ this.physics.add.overlap(player, stars, collectStar, null, this);
107
+ this.physics.add.collider(player, bombs, hitBomb, null, this);
108
+ }
109
+ function update ()
110
+ {
111
+ if (gameOver)
112
+ {
113
+ return;
114
+ }
115
+ if (cursors.left.isDown)
116
+ {
117
+ player.setVelocityX(-160);
118
+ player.anims.play('left', true);
119
+ }
120
+ else if (cursors.right.isDown)
121
+ {
122
+ player.setVelocityX(160);
123
+ player.anims.play('right', true);
124
+ }
125
+ else
126
+ {
127
+ player.setVelocityX(0);
128
+ player.anims.play('turn');
129
+ }
130
+ if (cursors.up.isDown && player.body.touching.down)
131
+ {
132
+ player.setVelocityY(-330);
133
+ }
134
+ }
135
+ function collectStar (player, star)
136
+ {
137
+ star.disableBody(true, true);
138
+ // Add and update the score
139
+ score += 10;
140
+ scoreText.setText('Score: ' + score);
141
+ document.getElementById('my_score').innerHTML = score;
142
+ if (stars.countActive(true) === 0)
143
+ {
144
+ // A new batch of stars to collect
145
+ stars.children.iterate(function (child) {
146
+ child.enableBody(true, child.x, 0, true, true);
147
+ });
148
+ var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
149
+ var bomb = bombs.create(x, 16, 'bomb');
150
+ bomb.setBounce(1);
151
+ bomb.setCollideWorldBounds(true);
152
+ bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
153
+ bomb.allowGravity = false;
154
+ }
155
+ }
156
+ function hitBomb (player, bomb)
157
+ {
158
+ this.physics.pause();
159
+ player.setTint(0xff0000);
160
+ player.anims.play('turn');
161
+ gameOver = true;
162
+ }
163
+ </script>
164
+ <div>
165
+ <p id="my_score"></p>
166
+ </div>
167
+ </body>
168
+ </html>