arnekeller/tunnel-racer
1
0
Fork 0
mirror of https://gitlab.com/arnekeller/tunnel-racer.git synced 2024-11-22 15:04:57 +00:00
Code Issues Projects Releases Wiki Activity

Reformat code

Browse Source
This commit is contained in:
Arne Keller 2022-01-30 12:02:00 +01:00
parent afa224ab36
commit b19f45ada3
3 changed files with 403 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
game.html
View File

@ -10,7 +10,7 @@
<body> <body>
<div id="info"> <div id="info">
Score: <div id="score">0</div><br/> Score: <span id="score">0</span><br/>
<button id="set_head">Calibrate neutral position</button> <button id="set_head">Calibrate neutral position</button>
<p id="log"></p> <p id="log"></p>
</div> </div>

156
game.js
View File

@ -95,7 +95,7 @@ void main()
let frameCount = 0; let frameCount = 0;
function logger(text) { function logger(text) {
console.log(text);
} }
function init_gn() { function init_gn() {
@ -108,19 +108,27 @@ void main()
gn.init(args).then(function() { gn.init(args).then(function() {
var isAvailable = gn.isAvailable(); var isAvailable = gn.isAvailable();
if (!isAvailable.deviceOrientationAvailable) { if (!isAvailable.deviceOrientationAvailable) {
console.log({message:'Device orientation is not available.'}); console.log({
message: 'Device orientation is not available.'
});
} }
if (!isAvailable.accelerationAvailable) { if (!isAvailable.accelerationAvailable) {
console.log({message:'Device acceleration is not available.'}); console.log({
message: 'Device acceleration is not available.'
});
} }
if (!isAvailable.accelerationIncludingGravityAvailable) { if (!isAvailable.accelerationIncludingGravityAvailable) {
console.log({message:'Device acceleration incl. gravity is not available.'}); console.log({
message: 'Device acceleration incl. gravity is not available.'
});
} }
if (!isAvailable.rotationRateAvailable) { if (!isAvailable.rotationRateAvailable) {
console.log({message:'Device rotation rate is not available.'}); console.log({
message: 'Device rotation rate is not available.'
});
} }
start_gn(); start_gn();
@ -184,36 +192,25 @@ void main()
init_gn(); init_gn();
import * as THREE from './three.module.js'; import * as THREE from './three.module.js';
let scene, renderer;
// import { GUI } from './jsm/libs/dat.gui.module.js';
//import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';
//import { EffectComposer } from './three/examples/jsm/postprocessing/EffectComposer.js';
//import { RenderPass } from './three/examples/jsm/postprocessing/RenderPass.js';
//import { ShaderPass } from '/three/examples/jsm/postprocessing/ShaderPass.js';
//import { LuminosityShader } from '/three/examples/jsm/shaders/LuminosityShader.js';
//import { SobelOperatorShader } from '/three/examples/jsm/shaders/SobelOperatorShader.js';
let scene, renderer, composer;
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
let effectSobel;
const params = {
enable: true
};
const geometryCube = new THREE.BoxGeometry( 20, 20, 20 );
const geometrySphere = new THREE.SphereGeometry(11, 32, 32); const geometrySphere = new THREE.SphereGeometry(11, 32, 32);
const geometrySphere2 = new THREE.SphereGeometry(13, 32, 32);
const materialCube = new THREE.MeshBasicMaterial(); const materialCube = new THREE.MeshBasicMaterial();
const outlineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.BackSide } );
const customMaterial = new THREE.ShaderMaterial({ const customMaterial = new THREE.ShaderMaterial({
uniforms: uniforms: {
{ "c": {
"c": { type: "f", value: 0.8 }, type: "f",
"p": { type: "f", value: 2.4 }, value: 0.8
viewVector: { type: "v3", value: camera.position } },
"p": {
type: "f",
value: 2.4
},
viewVector: {
type: "v3",
value: camera.position
}
}, },
vertexShader: vertexShaderGlow, vertexShader: vertexShaderGlow,
//vertexColors: true, //vertexColors: true,
@ -231,9 +228,15 @@ void main()
texture.wrapS = THREE.RepeatWrapping; texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping;
const uniforms = { const uniforms = {
iTime: { value: 0 }, iTime: {
iResolution: { value: new THREE.Vector3(1, 1, 1) }, value: 0
iChannel0: { value: texture }, },
iResolution: {
value: new THREE.Vector3(1, 1, 1)
},
iChannel0: {
value: texture
},
}; };
const material = new THREE.ShaderMaterial({ const material = new THREE.ShaderMaterial({
vertexShader, vertexShader,
@ -242,11 +245,6 @@ void main()
}); });
const borderGeometry = new THREE.PlaneGeometry(1, 1); const borderGeometry = new THREE.PlaneGeometry(1, 1);
const positions = [];
const colors = [];
const sizes = [];
const color = new THREE.Color();
const cubes = []; const cubes = [];
const borders = []; const borders = [];
@ -255,6 +253,7 @@ void main()
document.getElementById("start").onclick = () => { document.getElementById("start").onclick = () => {
document.getElementById("start").style.zIndex = -10; document.getElementById("start").style.zIndex = -10;
document.getElementById("start").style.visibility = "hidden";
speed = 5.0; speed = 5.0;
score = 0; score = 0;
for (let i = 0; i < cubes.length; i++) { for (let i = 0; i < cubes.length; i++) {
@ -265,6 +264,14 @@ void main()
running = true; running = true;
} }
function gameOver() {
running = false;
document.getElementById("score").innerText = document.getElementById("score").innerText + " - Game Over!";
document.getElementById("start").style.zIndex = 0;
document.getElementById("start").style.visibility = "visible";
document.getElementById("start").innerText = "Restart";
}
function init() { function init() {
// //
@ -274,25 +281,6 @@ void main()
camera.position.set(0, 10, 25); camera.position.set(0, 10, 25);
camera.lookAt(scene.position); camera.lookAt(scene.position);
//const geometry = geometrySphere2;
//geometry.setAttribute( 'positioned', new THREE.Float32BufferAttribute( positions, 3 ) );
//geometry.setAttribute( 'glowColor', new THREE.Float32BufferAttribute( colors, 3 ) );
////geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ).setUsage( THREE.DynamicDrawUsage ) );
//const particleSystem = new THREE.Mesh( geometry, customMaterial );
//scene.add(particleSystem);
//
//
//const meshCube = new THREE.Mesh( geometryCube, materialCube );
//meshCube.position.z = -30;
//meshCube.position.x = 40;
//scene.add(meshCube);
//cubes.push(meshCube);
//
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight); scene.add(ambientLight);
@ -300,46 +288,12 @@ void main()
camera.add(pointLight); camera.add(pointLight);
scene.add(camera); scene.add(camera);
//
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
// postprocessing
//composer = new EffectComposer( renderer );
//const renderPass = new RenderPass( scene, camera );
//composer.addPass( renderPass );
// color to grayscale conversion
//const effectGrayScale = new ShaderPass( LuminosityShader );
//composer.addPass( effectGrayScale );
// you might want to use a gaussian blur filter before
// the next pass to improve the result of the Sobel operator
// Sobel operator
//effectSobel = new ShaderPass( SobelOperatorShader );
//effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
//effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
//composer.addPass( effectSobel );
//const controls = new OrbitControls( camera, renderer.domElement );
//controls.minDistance = 10;
//controls.maxDistance = 100;
//
//const gui = new GUI();
//gui.add( params, 'enable' );
//gui.open();
//
window.addEventListener('resize', onWindowResize); window.addEventListener('resize', onWindowResize);
@ -351,10 +305,6 @@ void main()
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
//composer.setSize( window.innerWidth, window.innerHeight );
//effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
//effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
} }
@ -384,10 +334,7 @@ void main()
} }
let dist_squared = (x1 - x2) ** 2 + (y1 - y2) ** 2 + (z1 - z2) ** 2; let dist_squared = (x1 - x2) ** 2 + (y1 - y2) ** 2 + (z1 - z2) ** 2;
if (dist_squared <= cubes[i].geometry.parameters.radius ** 2) { if (dist_squared <= cubes[i].geometry.parameters.radius ** 2) {
running = false; gameOver();
document.getElementById("score").innerText = document.getElementById("score").innerText + " - Game Over!";
document.getElementById("start").style.zIndex = 0;
document.getElementById("start").innerText = "Restart";
break; break;
} }
} }
@ -411,14 +358,6 @@ void main()
meshCube.add(outlineMesh); meshCube.add(outlineMesh);
scene.add(outlineMesh); scene.add(outlineMesh);
cubes.push(outlineMesh); cubes.push(outlineMesh);
//positions.push( meshCube.position.x );
//positions.push( meshCube.position.y );
//positions.push( meshCube.position.z );
//
//color.setHSL( Math.random(), 1.0, 0.5 );
//colors.push( color.r, color.g, color.b );
//sizes.push( 20 );
scene.add(meshCube); scene.add(meshCube);
cubes.push(meshCube); cubes.push(meshCube);
@ -477,8 +416,6 @@ void main()
scene.add(border); scene.add(border);
borders.push(border); borders.push(border);
} }
//console.log(borders[borders.length - 1].position.z - camera.position.z);
//console.log(borders[borders.length - 1] - camera.position.z);
for (let i = 0; i < borders.length; i++) { for (let i = 0; i < borders.length; i++) {
if (borders[i].position.z > camera.position.z + diameterOfTunnel + 50) { if (borders[i].position.z > camera.position.z + diameterOfTunnel + 50) {
scene.remove(borders[i]); scene.remove(borders[i]);
@ -487,4 +424,3 @@ void main()
} }
} }
} }

11
main.css
View File

@ -1,11 +1,16 @@
body { body {
margin: 0; margin: 0;
background-color: #000; background-color: #000;
color: #fff;
font-family: Monospace; font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none; overscroll-behavior: none;
font-size: xxx-large;
color: #fff;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
} }
#start { #start {
width: 50vw; width: 50vw;