Skip to content

Commit 8de9c6e

Browse files
jdnichollscjdnichollsc
committed
Add dragon example
1 parent 753e6ad commit 8de9c6e

File tree

7 files changed

+110
-9
lines changed

7 files changed

+110
-9
lines changed

‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense para saber los atributos posibles.
3+
// Mantenga el puntero para ver las descripciones de los existentes atributos.
4+
// Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎audio/dragon.mp3

64.8 KB
Binary file not shown.

‎audio/dragon.ogg

45.3 KB
Binary file not shown.

‎dragon.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const ionPhaser = document.querySelector('ion-phaser-ce')
2+
3+
ionPhaser.game = {
4+
width: '100%',
5+
height: '100%',
6+
renderer: Phaser.AUTO,
7+
state: {
8+
init: function () {
9+
this.stage.backgroundColor = '#fff'
10+
},
11+
preload: function () {
12+
this.load.crossOrigin = 'Anonymous'
13+
this.load.image('dragon', 'img/dragon.png')
14+
this.load.audio('dragon', ['audio/dragon.ogg', 'audio/dragon.mp3'])
15+
},
16+
create: function () {
17+
var points = []
18+
var imgCache = this.game.cache.getFrame('dragon')
19+
var length = imgCache.width / 20
20+
for (var i = 0; i < 20; i++) {
21+
points.push(new Phaser.Point(i * length, 0))
22+
}
23+
this.dragon = this.game.add.rope(-imgCache.width, this.game.world.centerY, 'dragon', null, points)
24+
this.dragon.aditionalInfo = {
25+
count: 0,
26+
direction: 'right',
27+
roar: true
28+
}
29+
this.dragon.updateAnimation = function () {
30+
this.aditionalInfo.count += 0.1
31+
for (var i = 0; i < this.points.length; i++) {
32+
this.points[i].y = Math.sin(i * 0.3 + this.aditionalInfo.count) * 10
33+
}
34+
}
35+
this.dragonRoar = this.add.audio('dragon')
36+
},
37+
update: function () {
38+
this.dragon.x += 3
39+
if (this.dragon.aditionalInfo.roar &&
40+
this.dragon.x > this.game.world.centerX) {
41+
this.dragon.aditionalInfo.roar = false
42+
this.dragonRoar.play()
43+
}
44+
}
45+
}
46+
};
47+
48+
(async () => {
49+
await window.customElements.whenDefined('ion-phaser-ce')
50+
51+
ionPhaser.initialize = true
52+
ionPhaser.getInstance()
53+
.then((i) => console.log(i))
54+
.catch((error) => console.error(error))
55+
})()

‎img/dragon.png

9.96 KB
Loading

‎index.html

+30-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>Proyecto 26</title>
8-
</head>
9-
<body>
10-
11-
</body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Proyecto 26</title>
8+
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
10+
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
12+
13+
<link rel="stylesheet" href="style.css" />
14+
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.13.3/phaser.min.js"></script>
16+
17+
<script type="module" src="https://unpkg.com/@ion-phaser-ce/[email protected]/dist/ion-phaser-ce/ion-phaser-ce.esm.js"></script>
18+
<script nomodule src="https://unpkg.com/@ion-phaser-ce/[email protected]/dist/ion-phaser-ce/ion-phaser-ce.js"></script>
19+
20+
<script type="module" src="https://unpkg.com/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js"></script>
21+
<script nomodule src="https://unpkg.com/@proyecto26/[email protected]/dist/animatable-component/animatable-component.js"></script>
22+
</head>
23+
<body>
24+
<ion-app>
25+
<ion-page class="page-home">
26+
<ion-content no-bounce class="content">
27+
<ion-phaser-ce initialize="false"></ion-phaser-ce>
28+
</ion-content>
29+
</ion-page>
30+
</ion-app>
31+
<script type="text/javascript" src="dragon.js"></script>
32+
</body>
1233
</html>

‎style.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.content, .page-home {
2+
height: 100%;
3+
border: 2px solid black;
4+
}
5+
6+
ion-phaser-ce {
7+
display: block;
8+
width: 100%;
9+
height: 100%;
10+
}

0 commit comments

Comments
 (0)