tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make the ships explode

Browse Source
This commit is contained in:
Tanner Collin 2021-03-22 00:20:39 +00:00
parent 8630a9b66c
commit 52691e8f0b
3 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/src/light.css
View File

@ -127,7 +127,7 @@ body {
@media (min-width: 650px) {
.footer-content {
transition: all 0.2s ease-in;
opacity: 0.25;
opacity: 0.5;
}
.footer-content:hover {

33
webclient/src/spaceport/Ship.js
View File

@ -20,12 +20,17 @@ export class Ship {
shipGeo,
new THREE.MeshStandardMaterial(this.direction > 0 ? 0xff0000 : 0x0000ff, { flatShading: true })
);
this.y = (Math.random() - 0.5) * 2;
this.x = (Math.random() - 0.5) * 2;
this.burstGeo = new THREE.SphereGeometry(0.1, 32, 32);
this.y = (Math.random() - 0.5) * 4;
this.x = (Math.random() - 0.5) * 4;
this.mesh.material.color.set(
new THREE.Color(`hsl(${direction > 0 ? 0 : 180},30%,40%)`)
);
this.mesh.material.opacity = 1;
this.mesh.position.y = this.y;
this.mesh.position.x = this.x;
this.mesh.position.z = (-475/4 - 6) * this.direction; //+ Math.random()
@ -52,11 +57,15 @@ export class Ship {
this.life -= deltaTime;
if (!this.flyIn) {
this.mesh.material.color.set(
new THREE.Color(`hsl(${this.direction > 0 ? 0 : 180},30%,20%)`)
);
const xs = Math.sin(this.life * 0.5 + this.x);
const yrot = Math.sin(this.life + this.x + (3.14/2 * this.direction));
this.mesh.position.y = this.y + Math.sin(this.life + this.y) * 0.2;
this.mesh.position.y = this.y + Math.sin(this.life + this.y) * 0.1;
this.mesh.position.x = this.x + xs * 0.15;
this.mesh.rotation.x = yrot * 0.15;
this.mesh.rotation.x = yrot * 0.05;
this.mesh.position.z += 0.01 * this.direction;
this.nextShot -= deltaTime;
if (this.nextShot <= 0) {
@ -65,17 +74,17 @@ export class Ship {
}
}
if (this.life < 0) {
const a = Math.abs(this.life);
this.mesh.position.z += a * 2 * this.direction;
this.mesh.scale.z = a * 4;
this.firing = false;
if (this.life < 0 && !this.flyin) {
this.mesh.geometry = this.burstGeo;
this.mesh.scale.x *= 1.1;
this.mesh.scale.y *= 1.1;
this.mesh.scale.z *= 1.1;
this.mesh.rotation.y = 0;
this.mesh.rotation.x = 0;
this.mesh.material.transparent = true;
this.mesh.material.opacity *= 0.95;
}
if (Math.abs(this.mesh.position.z > 475/2)) {
if (this.mesh.scale.x > 10) {
this.kill = true;
}
}

17
webclient/src/spaceport/scene.js
View File

@ -22,17 +22,22 @@ export const scene = ({ ref }) => {
const camera = new THREE.PerspectiveCamera(65, width / height, 0.01, 1000);
camera.position.set(5, 0.5, 1);
camera.lookAt(new THREE.Vector3(-9, 0, 3));
camera.position.set(5, 2, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
ref.current.appendChild(renderer.domElement);
const light = new THREE.DirectionalLight('#fff', 1);
light.position.x = 3;
light.position.z = 1;
scene.add(light);
const light1 = new THREE.DirectionalLight('#fff', 1);
light1.position.x = 3;
light1.position.z = 1;
scene.add(light1);
const light2 = new THREE.PointLight('#fff', 2);
light2.position.x = 5;
light2.position.y = 5;
light2.position.z = 1;
scene.add(light2);
let ships = [];
let bolts = [];