Skip to content

Commit 2688402

Browse files
ranggakdranggakd
committed
temp physijs
1 parent 5f254f1 commit 2688402

File tree

4 files changed

+241
-7
lines changed

4 files changed

+241
-7
lines changed

‎js/app.js

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
const THREE = require('three');
22
const Scene = require('./scene');
33
const Brick = require('./brick');
4+
// const FallingBrick = require('./fallingbrick');
45
const Queue = require('./queue');
56
const socket = require('socket.io-client')(window.location.host);
7+
const Physijs = require('physijs-webpack/browserify');
68

79
//==================
810
//--Define command--
@@ -19,6 +21,8 @@ const PLAYAGAIN = 4;
1921
var scene = new Scene();
2022
let bricks = new Queue();
2123
let brick = new Brick();
24+
// let fallingbricks = new Queue;
25+
// let fallingbrick = new FallingBrick();
2226
let scale = new THREE.Vector3();
2327
let position = new THREE.Vector3();
2428
let command = PLAY, startPos = 6.5, direction = 'x';
@@ -88,6 +92,7 @@ socket.on('deviceOrientation', function(data) {
8892
//--Algoritma permainan--
8993
//=======================
9094
function animate() {
95+
scene.simulate();
9196
requestAnimationFrame(() => {animate()});
9297
loop();
9398
}
@@ -115,14 +120,19 @@ function loop() {
115120

116121
case PAUSE:
117122
break;
118-
119123
// Balok berhenti, memotong, dan stop
120124
// sesuai kondisi
125+
121126
case SPACE:
122127
prevBrick = bricks.get(bricks.size() - 2);
123128

124129
// Jika balok masih bisa memotong, maka loop lanjut
125130
if(brick.cut(prevBrick)) {
131+
// Balok baru berupa potongan akan dapat efek Physijs
132+
// var fallingbrick = new FallingBrick(prevBrick.params);
133+
// fallingbricks.push(fallingbrick);
134+
// scene.add(fallingbrick.build);
135+
126136
bricks.set(brick);
127137

128138
// Untuk setiap stepnya, balok yang lama turun 1 kotak
@@ -175,6 +185,12 @@ function loop() {
175185
}
176186
// Jika balok tidak bisa memotong (game over)
177187
else {
188+
// Balok akan dapat efek Physijs
189+
// var fallingbrick = new FallingBrick(prevBrick.params);
190+
// fallingbricks.push(fallingbrick);
191+
// scene.remove(prevBrick.name);
192+
// scene.add(fallingbrick.build);
193+
178194
command = GAMEOVER;
179195
var gameover = new Audio('../sound/gameover.mp3');
180196
gameover.play();
@@ -186,6 +202,11 @@ function loop() {
186202
scene.remove(bricks.items[i].name);
187203
bricks.clear();
188204

205+
// // Drop semua falling block
206+
// for(let i = 0;i < fallingbricks.size(); i++)
207+
// scene.remove(fallingbricks.items[i].name);
208+
// fallingbricks.clear();
209+
189210
// Enable view gameover
190211
gameoverDisplay.style.display = "block";
191212
break;

‎js/brick.js

+24-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
const THREE = require('three');
22
const Physijs = require('physijs-webpack/browserify');
33

4-
// 'use strict';
5-
// Physijs.scripts.worker = '/js/physijs_worker.js';
6-
// Physijs.scripts.ammo = '/js/ammo.js';
7-
84
class Brick {
95
static speed = 0.07;
106

@@ -28,6 +24,9 @@ class Brick {
2824
this.params = Object.assign(defaultParam, param);
2925
this.speed = Brick.speed;
3026

27+
// Inisiasi sementara passing u/ remained params ke FallingBrick
28+
this.prevParams = Object.assign(defaultParam, param);
29+
3130
this.geometry = new THREE.BoxGeometry(this.params.size.x, this.params.size.y, this.params.size.z);
3231
this.material = new THREE.MeshLambertMaterial( { color: this.params.color } );
3332

@@ -127,6 +126,26 @@ class Brick {
127126
// dari potongannya, maka error / gameover (return false)
128127
if(curScale.x < Math.abs(diffX)
129128
|| curScale.z < Math.abs(diffZ) ) {
129+
// this.prevParams = Object.assign(
130+
// this.prevParams,
131+
// {
132+
// size: prevBrick.scale,
133+
// position: new THREE.Vector3(
134+
// diffX/2,
135+
// 1,
136+
// diffZ/2
137+
// ),
138+
// scale: new THREE.Vector3(
139+
// Math.abs(diffX),
140+
// 1,
141+
// Math.abs(diffZ)
142+
// ),
143+
// castShadow: true,
144+
// receiveShadow: true,
145+
// color: prevBrick.color,
146+
// direction: prevBrick.direction,
147+
// }
148+
// );
130149
Brick.resetSpeed();
131150
return false;
132151
}
@@ -159,7 +178,7 @@ class Brick {
159178
else if(this.position.x <= -batas)
160179
this.position.x = -batas;
161180

162-
// this.position.x += this.speed;
181+
// this.mesh.position.x += this.speed;
163182
this.physijs_box.position.x += this.speed;
164183
break;
165184
// Jika bergerak di-sumbu 'z'

‎js/fallingbrick.js

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
const THREE = require('three');
2+
const Physijs = require('physijs-webpack/browserify');
3+
4+
class FallingBrick {
5+
static speed = 0.07;
6+
7+
constructor(param = {}) {
8+
//===============
9+
//---Parameter---
10+
//===============
11+
var defaultParam = {
12+
size: new THREE.Vector3(1, 1, 1),
13+
position: new THREE.Vector3(0, 0, 0),
14+
scale: new THREE.Vector3(5, 1, 5),
15+
castShadow: true,
16+
receiveShadow: true,
17+
color: "hsl(220, 100%, 50%)",
18+
direction: 'x',
19+
}
20+
21+
// Melakukan assign dari parameter
22+
// ke default parameter agar nilai parameter
23+
// di dalam class berubah
24+
this.params = Object.assign(defaultParam, param);
25+
this.speed = FallingBrick.speed;
26+
27+
this.geometry = new THREE.BoxGeometry(this.params.size.x, this.params.size.y, this.params.size.z);
28+
this.material = new THREE.MeshLambertMaterial( { color: this.params.color } );
29+
30+
// Physics mesh
31+
this.physijs_material = Physijs.createMaterial(
32+
this.material,
33+
.7,
34+
.3
35+
);
36+
this.physijs_box = new Physijs.BoxMesh(
37+
this.geometry,
38+
this.physijs_material
39+
);
40+
this.physijs_box.collisions = 0;
41+
this.physijs_box.name = this.physijs_box.uuid;
42+
this.physijs_box.castShadow = this.params.castShadow;
43+
this.physijs_box.receiveShadow = this.params.receiveShadow;
44+
this.physijs_box.position.copy(this.params.position);
45+
this.physijs_box.scale.copy(this.params.scale);
46+
console.log(this.physijs_box);
47+
48+
// this.mesh = new THREE.Mesh( this.geometry, this.material );
49+
// this.mesh.name = this.mesh.uuid;
50+
// this.mesh.castShadow = this.params.castShadow;
51+
// this.mesh.receiveShadow = this.params.receiveShadow;
52+
// this.mesh.position.copy(this.params.position);
53+
// this.mesh.scale.copy(this.params.scale);
54+
}
55+
56+
static increaseSpeed() {
57+
FallingBrick.speed += 0.001;
58+
this.speed = FallingBrick.speed;
59+
}
60+
61+
static resetSpeed() {
62+
FallingBrick.speed = 0.07;
63+
}
64+
65+
// Karena scene me-render mesh,
66+
// agar lebih mudah memanggilnya dibuat fungsi saja
67+
get build() {
68+
// return this.mesh;
69+
return this.physijs_box;
70+
}
71+
72+
get name() {
73+
// return this.mesh.name;
74+
return this.physijs_box.name;
75+
}
76+
77+
get position() {
78+
// return this.mesh.position;
79+
return this.physijs_box.position;
80+
}
81+
82+
/**
83+
* @param {THREE.Vector3} newPosition
84+
*/
85+
set position(newPosition) {
86+
this.position.copy(newPosition);
87+
}
88+
89+
get scale() {
90+
// return this.mesh.scale;
91+
return this.physijs_box.scale;
92+
}
93+
94+
/**
95+
* @param {THREE.Vector3} newScale
96+
*/
97+
set scale(newScale) {
98+
this.scale.copy(newScale);
99+
}
100+
101+
down() {
102+
// this.mesh.position.y -= 1;
103+
this.physijs_box.position.y -= 1;
104+
}
105+
106+
/**
107+
* @param {Brick} prevBrick Balok sebagai perbandingan saat ini dengan sebelumnya
108+
* @returns {boolean} Kondisi apakah dia masih bisa memotong atau tidak
109+
*/
110+
cut(prevBrick)
111+
{
112+
var prevPosition = prevBrick.position;
113+
var curScale = this.scale;
114+
var curPosition = this.position;
115+
116+
var diffX = curPosition.x - prevPosition.x;
117+
var diffZ = curPosition.z - prevPosition.z;
118+
119+
console.log("x : " + diffX, curScale.x);
120+
console.log("Z : " + diffZ, curScale.z);
121+
122+
// Jika ukuran saat ini lebih kecil
123+
// dari potongannya, maka error / gameover (return false)
124+
if(curScale.x < Math.abs(diffX)
125+
|| curScale.z < Math.abs(diffZ) ) {
126+
FallingBrick.resetSpeed();
127+
return false;
128+
}
129+
130+
curScale.x -= Math.abs(diffX);
131+
curPosition.x -= (diffX/2);
132+
curScale.z -= Math.abs(diffZ);
133+
curPosition.z -= (diffZ/2);
134+
135+
FallingBrick.increaseSpeed();
136+
this.scale.copy(curScale);
137+
return true;
138+
}
139+
140+
/**
141+
* Melakukan move object sesuai arah
142+
* pada sumbu cartesian 'x' dan 'z'
143+
*/
144+
move() {
145+
const batas = 6.5;
146+
147+
switch (this.params.direction) {
148+
// Jika bergerak di-sumbu 'x'
149+
case 'x':
150+
if(this.position.x >= batas || this.position.x <= -batas)
151+
this.speed = -this.speed;
152+
153+
if(this.position.x >= batas)
154+
this.position.x = batas;
155+
else if(this.position.x <= -batas)
156+
this.position.x = -batas;
157+
158+
// this.position.x += this.speed;
159+
this.physijs_box.position.x += this.speed;
160+
break;
161+
// Jika bergerak di-sumbu 'z'
162+
case 'z':
163+
if(this.position.z >= batas || this.position.z <= -batas)
164+
this.speed = -this.speed;
165+
166+
if(this.position.z >= batas)
167+
this.position.z = batas;
168+
else if(this.position.z <= -batas)
169+
this.position.z = -batas;
170+
171+
// this.mesh.position.z += this.speed;
172+
this.physijs_box.position.z += this.speed;
173+
break;
174+
default:
175+
break;
176+
}
177+
}
178+
179+
}
180+
181+
module.exports = FallingBrick;

‎js/scene.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const THREE = require('three');
22
const OrbitControls = require('three-orbitcontrols');
3+
const Physijs = require('physijs-webpack/browserify');
34

45
class Scene {
56
constructor(param = {}) {
@@ -22,7 +23,15 @@ class Scene {
2223
//===============
2324
//-----Scene-----
2425
//===============
25-
this.scene = new THREE.Scene();
26+
// this.scene = new THREE.Scene();
27+
28+
// Physijs scene
29+
this.scene = new Physijs.Scene();
30+
this.scene.setGravity(new THREE.Vector3(0, -45, 0));
31+
addEventListener(
32+
'update',
33+
function(){scene.simulate();}
34+
);
2635

2736
//==================
2837
//-----Renderer-----
@@ -98,6 +107,10 @@ class Scene {
98107
this.renderer.render(this.scene, this.camera);
99108
}
100109

110+
simulate() {
111+
this.scene.simulate();
112+
}
113+
101114
onWindowResize() {
102115
const frustumSize = 64;
103116
this.renderer.setSize(window.innerWidth, window.innerHeight);

0 commit comments

Comments
 (0)