Skip to content

Commit 0a6399f

Browse files
balajmariusbalajmarius
committed
refactor + added tutorial
1 parent f99c87a commit 0a6399f

4 files changed

Lines changed: 92 additions & 23 deletions

File tree

‎src/helpers/controls.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ class Controls {
88
this.fire = this.fire.bind(this)
99
this.goLeft = this.goLeft.bind(this)
1010
this.goRight = this.goRight.bind(this)
11+
this.restart = this.restart.bind(this)
1112

1213
this.left = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT)
1314
this.right = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT)
@@ -17,11 +18,20 @@ class Controls {
1718
this.left.onDown.add(this.goLeft)
1819
this.right.onDown.add(this.goRight)
1920
this.spacebar.onDown.add(this.fire)
21+
this.enter.onDown.add(this.restart)
22+
}
23+
24+
restart() {
25+
if (!this.player.dead) {
26+
return
27+
}
28+
29+
this.game.state.start('play')
2030
}
2131

2232
fire() {
2333
if (this.player.dead) {
24-
return this.game.state.start('play')
34+
return
2535
}
2636

2737
this.player.fire()

‎src/states/loading.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
import { PLAYER, BUGS } from '../shared/config'
22

33
class Loading extends Phaser.State {
4-
create() {
5-
this.preloader.classList.add('hide')
6-
this.game.state.start('play')
4+
constructor() {
5+
super()
6+
7+
this.start = this.start.bind(this)
8+
}
9+
10+
create() {
11+
this.message.innerHTML = 'Press <strong>ENTER</strong> to start'
12+
13+
this.enter = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER)
14+
this.enter.onDown.add(this.start)
715
}
816

917
preload() {
10-
this.preloader = document.querySelector('.preloader')
18+
this.loader = document.querySelector('.loader')
19+
this.message = this.loader.querySelector('.loader__message')
1120

1221
this.game.load.image('case', 'images/ui/case.png')
22+
this.game.load.image('texture', 'images/ui/texture.png')
1323
this.game.load.image('bullets', 'images/sprites/bullets.png')
14-
this.game.load.image('background', 'images/sprites/background.png')
24+
this.game.load.image('background', 'images/sprites/background.png')
1525

1626
this.game.load.spritesheet('octocat-body', 'images/sprites/octocat-body.png', PLAYER.width, PLAYER.height)
1727
this.game.load.spritesheet('octocat-tentacles', 'images/sprites/octocat-tentacles.png', PLAYER.width, PLAYER.height)
@@ -28,6 +38,11 @@ class Loading extends Phaser.State {
2838

2939
this.game.load.bitmapFont('digital', 'fonts/digital.png', 'fonts/digital.xml');
3040
}
41+
42+
start() {
43+
this.game.state.start('play')
44+
this.loader.classList.add('loader--is-started')
45+
}
3146
}
3247

3348
export default Loading

‎static/index.html‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,22 @@
1111

1212
<body>
1313
<div class="game">
14-
<div class="preloader">Loading, please wait...</div>
15-
<div class="case"></div>
16-
<div class="screen">
17-
<div class="texture"></div>
18-
<div id="game"></div>
14+
<div class="loader">
15+
<p class="loader__message">Loading, please wait...</p>
16+
<ul>
17+
<li><strong>&larr;</strong> - move left</li>
18+
<li><strong>&rarr;</strong> - move right</li>
19+
<li><strong>SPACEBAR</strong> - fire</li>
20+
<li><strong>ENTER</strong> - start</li>
21+
</ul>
1922
</div>
20-
</div>
23+
24+
<div class="game__case"></div>
25+
<div class="game__screen">
26+
<div id="game"></div>
27+
</div>
28+
</div>
29+
2130
<script src="//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>
2231
<script type="text/javascript" src="build/bundle.js"></script>
2332
</body>

‎static/style/style.css‎

Lines changed: 46 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,27 @@ table {
4040
border-collapse: collapse;
4141
border-spacing: 0;
4242
}
43+
44+
/* _ _ _ _
45+
__ ___ _ __ _ __ (_) |_| | |
46+
/ _/ _ \ ' \| ' \| | _|_ _|
47+
\__\___/_|_|_|_|_|_|_|\__| |_|
48+
*/
49+
4350
body {
4451
color: #000000;
4552
font-family: 'Anonymous Pro', Helvetica, Arial, sans-serif;
4653
font-size: 18px;
4754
text-transform: uppercase;
4855
}
56+
4957
.game {
5058
width: 771px;
5159
position: relative;
5260
margin: 0 auto;
5361
}
54-
.case {
62+
63+
.game__case {
5564
z-index: 200;
5665
position: relative;
5766
width: 771px;
@@ -60,24 +69,27 @@ body {
6069
background-repeat: no-repeat;
6170
background-position: center top;
6271
}
63-
.screen {
72+
73+
.game__screen {
6474
overflow: hidden;
6575
width: 400px;
6676
height: 300px;
6777
position: absolute;
6878
left: 190px;
6979
top: 130px;
7080
}
71-
.texture {
72-
z-index: 100;
73-
position: absolute;
81+
82+
.game__screen::before {
83+
top: 0;
7484
left: 0;
7585
right: 0;
76-
top: 0;
7786
bottom: 0;
87+
z-index: 100;
88+
position: absolute;
7889
background: url('../images/ui/texture.png');
7990
}
80-
.preloader {
91+
92+
.loader {
8193
z-index: 400;
8294
position: fixed;
8395
text-transform: uppercase;
@@ -90,18 +102,41 @@ body {
90102
top: 0;
91103
bottom: 0;
92104
left: 0;
93-
right: 0;
105+
right: 0;
94106
}
95-
.preloader::before {
107+
108+
.loader::before {
96109
content: "/";
97110
display: inline-block;
98111
margin-bottom: 30px;
99112
animation: spinner 500ms infinite;
100113
}
101-
.hide {
102-
visibility: hidden;
114+
115+
.loader p,
116+
.loader li {
117+
margin-bottom: 15px;
118+
display: block;
119+
}
120+
121+
.loader strong {
122+
border-radius: 3px;
123+
padding: 3px 10px;
124+
border: 1px solid #000000;
125+
}
126+
127+
.loader ul {
128+
margin-top: 25px;
129+
}
130+
131+
.loader li::last-of-type {
132+
margin-bottom: 0px;
133+
}
134+
135+
.loader--is-started {
103136
opacity: 0;
137+
visibility: hidden;
104138
}
139+
105140
@keyframes spinner {
106141
0% {
107142
content: "/";

0 commit comments

Comments
 (0)