Skip to content

Commit d312522

Browse files
committed
menambahkan score, gameover, play again
1 parent a932752 commit d312522

File tree

7 files changed

+118
-32
lines changed

7 files changed

+118
-32
lines changed

css/style.css

+25
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,29 @@ body {
88
display: block;
99
background: url(../img/background.jpg) no-repeat center center ;
1010
background-size: cover;
11+
}
12+
13+
#score {
14+
font-size: 7.5em;
15+
font-family: 'Courier New', Courier, monospace;
16+
font-weight: lighter;
17+
color: wheat;
18+
position: absolute;
19+
top: 10px;
20+
width: 100%;
21+
text-align: center;
22+
display:block;
23+
}
24+
25+
#game-over {
26+
font-size: 3.5em;
27+
font-family: 'Courier New', Courier, monospace;
28+
font-weight: bolder;
29+
color: wheat;
30+
position: absolute;
31+
width: 100%;
32+
top: 50%;
33+
text-align: center;
34+
margin: auto;
35+
display:none;
1136
}

index.html

+3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
<link rel="stylesheet" href="css/style.css" />
1010
</head>
1111
<body>
12+
<div id="score">0</div>
13+
<div id="game-over">Tekan 'ENTER' untuk main lagi</div>
1214
<canvas id="c"></canvas>
15+
1316
<script src="build/bundle.js"></script>
1417
</body>
1518
</html>

js/app.js

+59-16
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@ const THREE = require('three');
22
const Scene = require('./scene');
33
const Brick = require('./brick');
44
const Queue = require('./queue');
5-
const socket = require('socket.io-client')(window.location.host);
5+
// const socket = require('socket.io-client')(window.location.host);
66

77
//==================
88
//--Define command--
99
//==================
1010
const SPACE = 0;
1111
const PLAY = 1;
1212
const PAUSE = 2;
13-
const STOP = 3;
13+
const GAMEOVER = 3;
14+
const PLAYAGAIN = 4;
1415

1516
//==================
1617
//---Inisialisasi---
@@ -20,26 +21,37 @@ let bricks = new Queue();
2021
let brick = new Brick();
2122
let scale = new THREE.Vector3();
2223
let position = new THREE.Vector3();
23-
let command, startPos = 6.5, direction = 'x';
24-
let hue = 220;
24+
let command = PLAY, startPos = 6.5, direction = 'x';
25+
let hue = 0;
26+
let scoreValue = 0;
27+
var scoreDisplay = document.getElementById("score");
28+
var gameoverDisplay = document.getElementById("game-over");
2529

2630
function init() {
31+
// Mengatur parameter warna berdasarkan nilai hue-nya
32+
hue = Math.floor(Math.random() * 360);
33+
34+
// Disable view gameover
35+
gameoverDisplay.style.display = "none";
36+
2737
// Membuat tumpukan awal hingga
2838
// bagian bawah tertutupi
2939
for(let i = -14;i < 0; i++) {
3040
brick = new Brick({
3141
position: new THREE.Vector3(0, i, 0),
32-
direction: 'z'
42+
direction: 'z',
43+
color: "hsl(" + hue +", 100%, 50%)"
3344
});
34-
45+
3546
bricks.push(brick);
3647
scene.add(brick.build);
3748
}
3849

3950
// Tumpukan paling atas
4051
brick = new Brick({
4152
position: new THREE.Vector3(0, 0, startPos),
42-
direction: 'z'
53+
direction: 'z',
54+
color: "hsl(" + hue +", 100%, 50%)"
4355
});
4456

4557
bricks.push(brick);
@@ -56,18 +68,22 @@ function animate() {
5668
}
5769

5870
function loop() {
71+
brick = bricks.back();
5972
switch (command) {
6073
// Balok melakukan update
6174
case PLAY:
62-
brick = bricks.back();
6375
brick.move();
6476
break;
77+
78+
case PAUSE:
79+
break;
80+
6581
// Balok berhenti, memotong, dan stop
6682
// sesuai kondisi
6783
case SPACE:
6884
brick.stop();
6985
prevBrick = bricks.get(bricks.size() - 2);
70-
86+
7187
// Jika balok masih bisa memotong, maka loop lanjut
7288
if(brick.cut(prevBrick)) {
7389
bricks.set(brick);
@@ -105,25 +121,44 @@ function loop() {
105121
// Menambahkan balok baru
106122
// Membuang balok lama
107123
scene.add(topBrick.build);
108-
scene.remove(bricks.front().build);
124+
scene.remove(bricks.front().name);
109125
bricks.pop();
110126
bricks.push(topBrick);
111127

112128
// Mengatur parameter warna agar dinamis,
113129
// berdasarkan tingkat nilai Hue-nya.
114130
hue = (hue + 5) % 360;
115131

132+
// Update score
133+
scoreValue++;
134+
scoreDisplay.innerHTML = scoreValue;
135+
116136
// mengembalikan state menjadi play
117137
command = PLAY;
118138
}
119139
// Jika balok tidak bisa memotong (game over)
120140
else {
121-
command = STOP;
141+
command = GAMEOVER;
122142
}
123143
break;
124-
case STOP:
125-
144+
case GAMEOVER:
145+
// Drop semua block
146+
for(let i = 0;i < bricks.size(); i++)
147+
scene.remove(bricks.items[i].name);
148+
bricks.clear();
149+
150+
// Enable view gameover
151+
gameoverDisplay.style.display = "block";
126152
break;
153+
case PLAYAGAIN:
154+
// re-inisialisasi semua block
155+
init();
156+
157+
// reset score
158+
scoreValue = 0;
159+
scoreDisplay.innerHTML = scoreValue;
160+
161+
command = PLAY;
127162
default:
128163
break;
129164
}
@@ -142,9 +177,17 @@ animate();
142177
function onKeyDown(event) {
143178
switch (event.code) {
144179
case "Space":
145-
command = SPACE;
180+
if(command == PLAY)
181+
command = SPACE;
146182
break;
147-
183+
case "KeyP":
184+
if(command == PLAY)
185+
command = PAUSE;
186+
else if(command == PAUSE)
187+
command = PLAY;
188+
case "Enter":
189+
if(command == GAMEOVER)
190+
command = PLAYAGAIN;
148191
default:
149192
break;
150193
}
@@ -168,7 +211,7 @@ function handleOrientation(event) {
168211
beta: Math.round(event.beta),
169212
gamma: Math.round(event.gamma)
170213
}
171-
socket.emit('deviceOrientation', orientation);
214+
// socket.emit('deviceOrientation', orientation);
172215
}
173216

174217
window.addEventListener('touchstart', onTouchEvent);

js/brick.js

+5
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class Brick {
2525
this.material = new THREE.MeshLambertMaterial( { color: this.params.color } );
2626

2727
this.mesh = new THREE.Mesh( this.geometry, this.material );
28+
this.mesh.name = this.mesh.uuid;
2829
this.mesh.castShadow = this.params.castShadow;
2930
this.mesh.receiveShadow = this.params.receiveShadow;
3031
this.mesh.position.copy(this.params.position);
@@ -37,6 +38,10 @@ class Brick {
3738
return this.mesh;
3839
}
3940

41+
get name() {
42+
return this.mesh.name;
43+
}
44+
4045
get position() {
4146
return this.mesh.position;
4247
}

js/queue.js

+4
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ class Queue {
4646
size() {
4747
return this.items.length;
4848
}
49+
50+
clear() {
51+
return this.items.length = 0;
52+
}
4953
}
5054

5155
module.exports = Queue;

js/scene.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,20 @@ class Scene {
7373
}
7474

7575
/**
76+
*
7677
* @param {THREE.Object3D} object
7778
*/
7879
add(object) {
7980
this.scene.add(object);
8081
}
8182

82-
remove(object) {
83-
this.scene.remove(object);
83+
/**
84+
*
85+
* @param {String} object Name dari THREE.Object3D
86+
*/
87+
remove(objectName) {
88+
var selectedObject = this.scene.getObjectByName(objectName);
89+
this.scene.remove(selectedObject);
8490
}
8591

8692
render() {

server.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ app.get('/', function (req, res) {
2828
//=================
2929
//-----Socket------
3030
//=================
31-
io.on('connection', function(socket) {
32-
socket.on('join', function(room) {
33-
socket.join(room);
34-
socket.on('update', function(data) {
35-
console.log(data);
36-
// socket.broadcast.to(room).emit('update', data);
37-
socket.to(room).emit('update', data);
38-
// console.log(data);
39-
});
40-
});
31+
// io.on('connection', function(socket) {
32+
// socket.on('join', function(room) {
33+
// socket.join(room);
34+
// socket.on('update', function(data) {
35+
// console.log(data);
36+
// // socket.broadcast.to(room).emit('update', data);
37+
// socket.to(room).emit('update', data);
38+
// // console.log(data);
39+
// });
40+
// });
4141

42-
socket.on('disconnect', function() {
43-
console.log('A user disconnected');
44-
});
45-
});
42+
// socket.on('disconnect', function() {
43+
// console.log('A user disconnected');
44+
// });
45+
// });

0 commit comments

Comments
 (0)