menambahkan score, gameover, play again

fandykun · fandykun · commit d3125224dd6e · 2019-12-07T12:45:55.000+07:00
diff --git a/css/style.css b/css/style.css
@@ -8,4 +8,29 @@ body {
     display: block;
     background: url(../img/background.jpg) no-repeat center center ;
     background-size: cover;
+}
+
+#score {
+    font-size: 7.5em;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: lighter;
+    color: wheat;
+    position: absolute;
+	top: 10px;
+	width: 100%;
+	text-align: center;
+	display:block;
+}
+
+#game-over {
+    font-size: 3.5em;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bolder;
+    color: wheat;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    text-align: center;
+    margin: auto;
+	display:none;
 }
diff --git a/index.html b/index.html
@@ -9,7 +9,10 @@
     <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
+    <div id="score">0</div>
+    <div id="game-over">Tekan 'ENTER' untuk main lagi</div>
     <canvas id="c"></canvas>
+
     <script src="build/bundle.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -2,15 +2,16 @@ const THREE = require('three');
 const Scene = require('./scene');
 const Brick = require('./brick');
 const Queue = require('./queue');
-const socket = require('socket.io-client')(window.location.host);
+// const socket = require('socket.io-client')(window.location.host);
 
 //==================
 //--Define command--
 //==================
 const SPACE = 0;
 const PLAY = 1;
 const PAUSE = 2;
-const STOP = 3;
+const GAMEOVER = 3;
+const PLAYAGAIN = 4;
 
 //==================
 //---Inisialisasi---
@@ -20,26 +21,37 @@ let bricks = new Queue();
 let brick = new Brick();
 let scale = new THREE.Vector3();
 let position = new THREE.Vector3();
-let command, startPos = 6.5, direction = 'x';
-let hue = 220;
+let command = PLAY, startPos = 6.5, direction = 'x';
+let hue = 0;
+let scoreValue = 0;
+var scoreDisplay = document.getElementById("score");
+var gameoverDisplay = document.getElementById("game-over");
 
 function init() {
+    // Mengatur parameter warna berdasarkan nilai hue-nya
+    hue = Math.floor(Math.random() * 360);
+
+    // Disable view gameover
+    gameoverDisplay.style.display = "none";
+
     // Membuat tumpukan awal hingga
     // bagian bawah tertutupi
     for(let i = -14;i < 0; i++) {
         brick = new Brick({
             position: new THREE.Vector3(0, i, 0),
-            direction: 'z'
+            direction: 'z',
+            color: "hsl(" + hue +", 100%, 50%)"
         });
-    
+
         bricks.push(brick);
         scene.add(brick.build);
     }
 
     // Tumpukan paling atas
     brick = new Brick({
         position: new THREE.Vector3(0, 0, startPos),
-        direction: 'z'
+        direction: 'z',
+        color: "hsl(" + hue +", 100%, 50%)"
     });
 
     bricks.push(brick);
@@ -56,18 +68,22 @@ function animate() {
 }
 
 function loop() {
+    brick = bricks.back();
     switch (command) {
         // Balok melakukan update
         case PLAY:
-            brick = bricks.back();
             brick.move();
             break;
+
+        case PAUSE:
+            break;
+
         // Balok berhenti, memotong, dan stop
         // sesuai kondisi
         case SPACE:
             brick.stop();
             prevBrick = bricks.get(bricks.size() - 2);
-            
+    
             // Jika balok masih bisa memotong, maka loop lanjut
             if(brick.cut(prevBrick)) {
                 bricks.set(brick);
@@ -105,25 +121,44 @@ function loop() {
                 // Menambahkan balok baru
                 // Membuang balok lama
                 scene.add(topBrick.build);
-                scene.remove(bricks.front().build);
+                scene.remove(bricks.front().name);
                 bricks.pop();
                 bricks.push(topBrick);
                 
                 // Mengatur parameter warna agar dinamis,
                 // berdasarkan tingkat nilai Hue-nya.
                 hue = (hue + 5) % 360;
 
+                // Update score
+                scoreValue++;
+                scoreDisplay.innerHTML = scoreValue;
+
                 // mengembalikan state menjadi play
                 command = PLAY;
             }
             // Jika balok tidak bisa memotong (game over)
             else {
-                command = STOP;
+                command = GAMEOVER;
             }
             break;
-        case STOP:
-            
+        case GAMEOVER:
+            // Drop semua block
+            for(let i = 0;i < bricks.size(); i++)
+                scene.remove(bricks.items[i].name);
+            bricks.clear();
+
+            // Enable view gameover
+            gameoverDisplay.style.display = "block";
             break;
+        case PLAYAGAIN:
+            // re-inisialisasi semua block
+            init();
+
+            // reset score
+            scoreValue = 0;
+            scoreDisplay.innerHTML = scoreValue;
+
+            command = PLAY;
         default:
             break;
     }
@@ -142,9 +177,17 @@ animate();
 function onKeyDown(event) {
     switch (event.code) {
         case "Space":
-            command = SPACE;
+            if(command == PLAY)
+                command = SPACE;
             break;
-        
+        case "KeyP":
+            if(command == PLAY)
+                command = PAUSE;
+            else if(command == PAUSE)
+                command = PLAY;
+        case "Enter":
+            if(command == GAMEOVER)
+                command = PLAYAGAIN;
         default:
             break;
     }
@@ -168,7 +211,7 @@ function handleOrientation(event) {
         beta: Math.round(event.beta),
         gamma: Math.round(event.gamma)
     }
-    socket.emit('deviceOrientation', orientation);
+    // socket.emit('deviceOrientation', orientation);
 }
 
 window.addEventListener('touchstart', onTouchEvent);
diff --git a/js/brick.js b/js/brick.js
@@ -25,6 +25,7 @@ class Brick {
         this.material = new THREE.MeshLambertMaterial( { color: this.params.color } );
         
         this.mesh = new THREE.Mesh( this.geometry, this.material );
+        this.mesh.name = this.mesh.uuid;
         this.mesh.castShadow = this.params.castShadow;
         this.mesh.receiveShadow = this.params.receiveShadow;
         this.mesh.position.copy(this.params.position);
@@ -37,6 +38,10 @@ class Brick {
         return this.mesh;
     }
 
+    get name() {
+        return this.mesh.name;
+    }
+
     get position() {
         return this.mesh.position;
     }
diff --git a/js/queue.js b/js/queue.js
@@ -46,6 +46,10 @@ class Queue {
     size() {
         return this.items.length;
     }
+
+    clear() {
+        return this.items.length = 0;
+    }
 }
 
 module.exports = Queue;
diff --git a/js/scene.js b/js/scene.js
@@ -73,14 +73,20 @@ class Scene {
     }
 
     /**
+     * 
      * @param {THREE.Object3D} object 
      */
     add(object) {
         this.scene.add(object);
     }
 
-    remove(object) {
-        this.scene.remove(object);
+    /**
+     * 
+     * @param {String} object Name dari THREE.Object3D 
+     */
+    remove(objectName) {
+        var selectedObject = this.scene.getObjectByName(objectName);
+        this.scene.remove(selectedObject);
     }
 
     render() {
diff --git a/server.js b/server.js
@@ -28,18 +28,18 @@ app.get('/', function (req, res) {
 //=================
 //-----Socket------
 //=================
-io.on('connection', function(socket) {
-  socket.on('join', function(room) {
-    socket.join(room);
-    socket.on('update', function(data) {
-      console.log(data);
-      // socket.broadcast.to(room).emit('update', data);
-      socket.to(room).emit('update', data);
-      // console.log(data);
-    });
-  });
+// io.on('connection', function(socket) {
+//   socket.on('join', function(room) {
+//     socket.join(room);
+//     socket.on('update', function(data) {
+//       console.log(data);
+//       // socket.broadcast.to(room).emit('update', data);
+//       socket.to(room).emit('update', data);
+//       // console.log(data);
+//     });
+//   });
 
-  socket.on('disconnect', function() {
-    console.log('A user disconnected');
-  });
-});
+//   socket.on('disconnect', function() {
+//     console.log('A user disconnected');
+//   });
+// });

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,10 @@ class Queue {`
`46`	`46`	`size() {`
`47`	`47`	`return this.items.length;`
`48`	`48`	`}`
	`49`	`+`
	`50`	`+ clear() {`
	`51`	`+ return this.items.length = 0;`
	`52`	`+ }`
`49`	`53`	`}`
`50`	`54`
`51`	`55`	`module.exports = Queue;`