import * as THREE from 'three'; import { applyStyles } from 'styles'; import { MobileControls } from 'MobileControls'; import { NewMultiplayerIntegration } from 'NewMultiplayerIntegration'; import { Colors } from 'Colors'; // Import TweenMax from CDN with Power2 included import 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'; export class GameScene { constructor(mountRef) { this.mountRef = mountRef; } init() { // Apply styles applyStyles(); // Create a container div for the game – it includes the header, score, // world (for the Three.js renderer), and messages. const container = document.createElement('div'); container.id = 'gameHolder'; container.className = 'game-holder'; container.innerHTML = `

Tap to Replay

Grab the blue pillsavoid the red ones

`; // Append the game container into the mount element. this.mountRef.current.appendChild(container); // Initialize the game code. this.initGame(); // Initialize mobile controls if needed const mobileControls = new MobileControls(container); const mobileControlsCleanup = mobileControls.init(); // Store in window for access in the game code window.mobileControls = mobileControls; // Return a cleanup function. return () => { window.removeEventListener('resize', this.handleWindowResize); // Clean up multiplayer if (window.game && window.game.multiplayerIntegration) { window.game.multiplayerIntegration.dispose(); } mobileControlsCleanup(); this.mountRef.current.removeChild(container); }; } initGame() { // Wrap the entire ported game code in an IIFE to avoid polluting the global scope. (function () { // Use imported Colors instead of local variable // GAME VARIABLES var game; var deltaTime = 0; var newTime = new Date().getTime(); var oldTime = new Date().getTime(); var ennemiesPool = []; var particlesPool = []; var particlesInUse = []; var multiplayerIntegration; function resetGame() { game = { speed: 0, initSpeed: 0.00035, baseSpeed: 0.00035, targetBaseSpeed: 0.00035, incrementSpeedByTime: 0.0000025, incrementSpeedByLevel: 0.000005, distanceForSpeedUpdate: 100, speedLastUpdate: 0, distance: 0, ratioSpeedDistance: 50, energy: 100, ratioSpeedEnergy: 3, level: 1, levelLastUpdate: 0, distanceForLevelUpdate: 1000, planeDefaultHeight: 100, planeAmpHeight: 80, planeAmpWidth: 75, planeMoveSensivity: 0.005, planeRotXSensivity: 0.0008, planeRotZSensivity: 0.0004, planeFallSpeed: 0.001, planeMinSpeed: 1.2, planeMaxSpeed: 1.6, planeSpeed: 0, planeCollisionDisplacementX: 0, planeCollisionSpeedX: 0, planeCollisionDisplacementY: 0, planeCollisionSpeedY: 0, seaRadius: 600, seaLength: 800, wavesMinAmp: 5, wavesMaxAmp: 20, wavesMinSpeed: 0.001, wavesMaxSpeed: 0.003, cameraFarPos: 500, cameraNearPos: 150, cameraSensivity: 0.002, coinDistanceTolerance: 15, coinValue: 3, coinsSpeed: 0.5, coinLastSpawn: 0, distanceForCoinsSpawn: 100, ennemyDistanceTolerance: 10, ennemyValue: 10, ennemiesSpeed: 0.6, ennemyLastSpawn: 0, distanceForEnnemiesSpawn: 50, status: 'playing', }; if (fieldLevel) fieldLevel.innerHTML = Math.floor(game.level); } // THREEJS RELATED VARIABLES var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, renderer, container, controls; // SCREEN & MOUSE VARIABLES var HEIGHT, WIDTH, mousePos = { x: 0, y: 0 }; function createScene() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; scene = new THREE.Scene(); aspectRatio = WIDTH / HEIGHT; fieldOfView = 50; nearPlane = 0.1; farPlane = 10000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane ); scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); camera.position.x = 0; // Adjust initial camera position based on device if (window.mobileControls && window.mobileControls.isMobile()) { camera.position.z = 240; // Further back for mobile } else { camera.position.z = 200; // Standard distance for desktop } camera.position.y = game.planeDefaultHeight; renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(WIDTH, HEIGHT); renderer.shadowMap.enabled = true; container = document.getElementById('world'); container.appendChild(renderer.domElement); window.addEventListener('resize', handleWindowResize, false); } function handleWindowResize() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); } function handleMouseMove(event) { var tx = -1 + (event.clientX / WIDTH) * 2; var ty = 1 - (event.clientY / HEIGHT) * 2; mousePos = { x: tx, y: ty }; } function handleTouchMove(event) { // If we're on mobile and using the joystick, don't process normal touch events if (window.mobileControls && window.mobileControls.isMobile() && window.mobileControls.joystickActive) { return; } event.preventDefault(); var tx = -1 + (event.touches[0].pageX / WIDTH) * 2; var ty = 1 - (event.touches[0].pageY / HEIGHT) * 2; mousePos = { x: tx, y: ty }; } function handleMouseUp(event) { if (game.status == 'waitingReplay') { resetGame(); hideReplay(); } } function handleTouchEnd(event) { if (game.status == 'waitingReplay') { resetGame(); hideReplay(); } } // LIGHTS var ambientLight, hemisphereLight, shadowLight; function createLights() { hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, 0.9); ambientLight = new THREE.AmbientLight(0xdc8874, 0.5); shadowLight = new THREE.DirectionalLight(0xffffff, 0.9); shadowLight.position.set(150, 350, 350); shadowLight.castShadow = true; shadowLight.shadow.camera.left = -400; shadowLight.shadow.camera.right = 400; shadowLight.shadow.camera.top = 400; shadowLight.shadow.camera.bottom = -400; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; shadowLight.shadow.mapSize.width = 4096; shadowLight.shadow.mapSize.height = 4096; scene.add(hemisphereLight); scene.add(shadowLight); scene.add(ambientLight); } var Pilot = function () { this.mesh = new THREE.Object3D(); this.mesh.name = 'pilot'; this.angleHairs = 0; var bodyGeom = new THREE.BoxGeometry(15, 15, 15); var bodyMat = new THREE.MeshPhongMaterial({ color: Colors.brown, flatShading: true, }); var body = new THREE.Mesh(bodyGeom, bodyMat); body.position.set(2, -12, 0); this.mesh.add(body); var faceGeom = new THREE.BoxGeometry(10, 10, 10); var faceMat = new THREE.MeshLambertMaterial({ color: Colors.pink }); var face = new THREE.Mesh(faceGeom, faceMat); this.mesh.add(face); var hairGeom = new THREE.BoxGeometry(4, 4, 4); var hairMat = new THREE.MeshLambertMaterial({ color: Colors.brown }); hairGeom.translate(0, 2, 0); var hairs = new THREE.Object3D(); this.hairsTop = new THREE.Object3D(); for (var i = 0; i < 12; i++) { var h = hairGeom.clone(); var col = i % 3; var row = Math.floor(i / 3); var startPosZ = -4; var startPosX = -4; h.translate(startPosX + row * 4, 0, startPosZ + col * 4); this.hairsTop.add(new THREE.Mesh(h, hairMat)); } hairs.add(this.hairsTop); var hairSideGeom = new THREE.BoxGeometry(12, 4, 2); hairSideGeom.translate(-6, 0, 0); var hairSideR = new THREE.Mesh(hairSideGeom, hairMat); var hairSideL = hairSideR.clone(); hairSideR.position.set(8, -2, 6); hairSideL.position.set(8, -2, -6); hairs.add(hairSideR); hairs.add(hairSideL); var hairBackGeom = new THREE.BoxGeometry(2, 8, 10); var hairBack = new THREE.Mesh(hairBackGeom, hairMat); hairBack.position.set(-1, -4, 0); hairs.add(hairBack); hairs.position.set(-5, 5, 0); this.mesh.add(hairs); var glassGeom = new THREE.BoxGeometry(5, 5, 5); var glassMat = new THREE.MeshLambertMaterial({ color: Colors.brown }); var glassR = new THREE.Mesh(glassGeom, glassMat); glassR.position.set(6, 0, 3); var glassL = glassR.clone(); glassL.position.z = -glassR.position.z; var glassAGeom = new THREE.BoxGeometry(11, 1, 11); var glassA = new THREE.Mesh(glassAGeom, glassMat); this.mesh.add(glassR); this.mesh.add(glassL); this.mesh.add(glassA); var earGeom = new THREE.BoxGeometry(2, 3, 2); var earL = new THREE.Mesh(earGeom, faceMat); earL.position.set(0, 0, -6); var earR = earL.clone(); earR.position.set(0, 0, 6); this.mesh.add(earL); this.mesh.add(earR); }; Pilot.prototype.updateHairs = function () { var hairs = this.hairsTop.children; for (var i = 0; i < hairs.length; i++) { var h = hairs[i]; h.scale.y = 0.75 + Math.cos(this.angleHairs + i / 3) * 0.25; } this.angleHairs += game.speed * deltaTime * 40; }; var AirPlane = function () { this.mesh = new THREE.Object3D(); this.mesh.name = 'airPlane'; var geomCabin = new THREE.BoxGeometry(80, 50, 50); var matCabin = new THREE.MeshPhongMaterial({ color: Colors.red, flatShading: true, }); // THREE.js r92+ doesn't expose vertices directly, must use BufferGeometry // Skip vertices manipulation for now var cabin = new THREE.Mesh(geomCabin, matCabin); cabin.castShadow = true; cabin.receiveShadow = true; this.mesh.add(cabin); var geomEngine = new THREE.BoxGeometry(20, 50, 50); var matEngine = new THREE.MeshPhongMaterial({ color: Colors.white, flatShading: true, }); var engine = new THREE.Mesh(geomEngine, matEngine); engine.position.x = 50; engine.castShadow = true; engine.receiveShadow = true; this.mesh.add(engine); var geomTailPlane = new THREE.BoxGeometry(15, 20, 5); var matTailPlane = new THREE.MeshPhongMaterial({ color: Colors.red, flatShading: true, }); var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane); tailPlane.position.set(-40, 20, 0); tailPlane.castShadow = true; tailPlane.receiveShadow = true; this.mesh.add(tailPlane); var geomSideWing = new THREE.BoxGeometry(30, 5, 120); var matSideWing = new THREE.MeshPhongMaterial({ color: Colors.red, flatShading: true, }); var sideWing = new THREE.Mesh(geomSideWing, matSideWing); sideWing.position.set(0, 15, 0); sideWing.castShadow = true; sideWing.receiveShadow = true; this.mesh.add(sideWing); var geomWindshield = new THREE.BoxGeometry(3, 15, 20); var matWindshield = new THREE.MeshPhongMaterial({ color: Colors.white, transparent: true, opacity: 0.3, flatShading: true, }); var windshield = new THREE.Mesh(geomWindshield, matWindshield); windshield.position.set(5, 27, 0); windshield.castShadow = true; windshield.receiveShadow = true; this.mesh.add(windshield); var geomPropeller = new THREE.BoxGeometry(20, 10, 10); // THREE.js r92+ doesn't expose vertices directly, must use BufferGeometry // Skip vertices manipulation for now var matPropeller = new THREE.MeshPhongMaterial({ color: Colors.brown, flatShading: true, }); this.propeller = new THREE.Mesh(geomPropeller, matPropeller); this.propeller.castShadow = true; this.propeller.receiveShadow = true; var geomBlade = new THREE.BoxGeometry(1, 80, 10); var matBlade = new THREE.MeshPhongMaterial({ color: Colors.brownDark, flatShading: true, }); var blade1 = new THREE.Mesh(geomBlade, matBlade); blade1.position.set(8, 0, 0); blade1.castShadow = true; blade1.receiveShadow = true; var blade2 = blade1.clone(); blade2.rotation.x = Math.PI / 2; blade2.castShadow = true; blade2.receiveShadow = true; this.propeller.add(blade1); this.propeller.add(blade2); this.propeller.position.set(60, 0, 0); this.mesh.add(this.propeller); var wheelProtecGeom = new THREE.BoxGeometry(30, 15, 10); var wheelProtecMat = new THREE.MeshPhongMaterial({ color: Colors.red, flatShading: true, }); var wheelProtecR = new THREE.Mesh(wheelProtecGeom, wheelProtecMat); wheelProtecR.position.set(25, -20, 25); this.mesh.add(wheelProtecR); var wheelTireGeom = new THREE.BoxGeometry(24, 24, 4); var wheelTireMat = new THREE.MeshPhongMaterial({ color: Colors.brownDark, flatShading: true, }); var wheelTireR = new THREE.Mesh(wheelTireGeom, wheelTireMat); wheelTireR.position.set(25, -28, 25); var wheelAxisGeom = new THREE.BoxGeometry(10, 10, 6); var wheelAxisMat = new THREE.MeshPhongMaterial({ color: Colors.brown, flatShading: true, }); var wheelAxis = new THREE.Mesh(wheelAxisGeom, wheelAxisMat); wheelTireR.add(wheelAxis); this.mesh.add(wheelTireR); var wheelProtecL = wheelProtecR.clone(); wheelProtecL.position.z = -wheelProtecR.position.z; this.mesh.add(wheelProtecL); var wheelTireL = wheelTireR.clone(); wheelTireL.position.z = -wheelTireR.position.z; this.mesh.add(wheelTireL); var wheelTireB = wheelTireR.clone(); wheelTireB.scale.set(0.5, 0.5, 0.5); wheelTireB.position.set(-35, -5, 0); this.mesh.add(wheelTireB); var suspensionGeom = new THREE.BoxGeometry(4, 20, 4); suspensionGeom.translate(0, 10, 0); var suspensionMat = new THREE.MeshPhongMaterial({ color: Colors.red, flatShading: true, }); var suspension = new THREE.Mesh(suspensionGeom, suspensionMat); suspension.position.set(-35, -5, 0); suspension.rotation.z = -0.3; this.mesh.add(suspension); this.pilot = new Pilot(); this.pilot.mesh.position.set(-10, 27, 0); this.mesh.add(this.pilot.mesh); this.mesh.castShadow = true; this.mesh.receiveShadow = true; }; // Make the airplane accessible globally within the game scope var globalAirplane; var Sky = function () { this.mesh = new THREE.Object3D(); this.nClouds = 20; this.clouds = []; var stepAngle = (Math.PI * 2) / this.nClouds; for (var i = 0; i < this.nClouds; i++) { var c = new Cloud(); this.clouds.push(c); var a = stepAngle * i; var h = game.seaRadius + 150 + Math.random() * 200; c.mesh.position.y = Math.sin(a) * h; c.mesh.position.x = Math.cos(a) * h; c.mesh.position.z = -300 - Math.random() * 500; c.mesh.rotation.z = a + Math.PI / 2; var s = 1 + Math.random() * 2; c.mesh.scale.set(s, s, s); this.mesh.add(c.mesh); } }; Sky.prototype.moveClouds = function () { for (var i = 0; i < this.nClouds; i++) { var c = this.clouds[i]; c.rotate(); } this.mesh.rotation.z += game.speed * deltaTime; }; var Sea = function () { var geom = new THREE.CylinderGeometry( game.seaRadius, game.seaRadius, game.seaLength, 40, 10 ); geom.rotateX(-Math.PI / 2); // In THREE.js r92+, mergeVertices is a static method on BufferGeometryUtils // For now, skip it as it's not critical // Convert buffer geometry to get vertices const positionAttribute = geom.getAttribute('position'); var l = positionAttribute.count; this.waves = []; for (var i = 0; i < l; i++) { // Access position attributes directly instead of vertices const x = positionAttribute.getX(i); const y = positionAttribute.getY(i); const z = positionAttribute.getZ(i); this.waves.push({ y: y, x: x, z: z, ang: Math.random() * Math.PI * 2, amp: game.wavesMinAmp + Math.random() * (game.wavesMaxAmp - game.wavesMinAmp), speed: game.wavesMinSpeed + Math.random() * (game.wavesMaxSpeed - game.wavesMinSpeed), }); } var mat = new THREE.MeshPhongMaterial({ color: Colors.blue, transparent: true, opacity: 0.8, flatShading: true, }); this.mesh = new THREE.Mesh(geom, mat); this.mesh.name = 'waves'; this.mesh.receiveShadow = true; }; Sea.prototype.moveWaves = function () { // In THREE.js r92+, we need to modify the position attribute directly const positionAttribute = this.mesh.geometry.getAttribute('position'); var l = positionAttribute.count; for (var i = 0; i < l; i++) { var vprops = this.waves[i]; // Update the position attribute directly positionAttribute.setX(i, vprops.x + Math.cos(vprops.ang) * vprops.amp); positionAttribute.setY(i, vprops.y + Math.sin(vprops.ang) * vprops.amp); vprops.ang += vprops.speed * deltaTime; } // Mark the attribute as needing an update positionAttribute.needsUpdate = true; }; var Cloud = function () { this.mesh = new THREE.Object3D(); this.mesh.name = 'cloud'; var geom = new THREE.BoxGeometry(20, 20, 20); var mat = new THREE.MeshPhongMaterial({ color: Colors.white }); var nBlocs = 3 + Math.floor(Math.random() * 3); for (var i = 0; i < nBlocs; i++) { var m = new THREE.Mesh(geom.clone(), mat); m.position.x = i * 15; m.position.y = Math.random() * 10; m.position.z = Math.random() * 10; m.rotation.z = Math.random() * Math.PI * 2; m.rotation.y = Math.random() * Math.PI * 2; var s = 0.1 + Math.random() * 0.9; m.scale.set(s, s, s); this.mesh.add(m); m.castShadow = true; m.receiveShadow = true; } }; Cloud.prototype.rotate = function () { for (var i = 0; i < this.mesh.children.length; i++) { var m = this.mesh.children[i]; m.rotation.z += Math.random() * 0.005; m.rotation.y += Math.random() * 0.002; } }; var Ennemy = function () { var geom = new THREE.TetrahedronGeometry(8, 2); var mat = new THREE.MeshPhongMaterial({ color: Colors.red, shininess: 0, specular: 0xffffff, flatShading: true, }); this.mesh = new THREE.Mesh(geom, mat); this.mesh.castShadow = true; this.angle = 0; this.dist = 0; }; var EnnemiesHolder = function () { this.mesh = new THREE.Object3D(); this.ennemiesInUse = []; }; EnnemiesHolder.prototype.spawnEnnemies = function () { var nEnnemies = game.level; for (var i = 0; i < nEnnemies; i++) { var ennemy; if (ennemiesPool.length) { ennemy = ennemiesPool.pop(); } else { ennemy = new Ennemy(); } ennemy.angle = -i * 0.1; ennemy.distance = game.seaRadius + game.planeDefaultHeight + (-1 + Math.random() * 2) * (game.planeAmpHeight - 20); ennemy.mesh.position.y = -game.seaRadius + Math.sin(ennemy.angle) * ennemy.distance; ennemy.mesh.position.x = Math.cos(ennemy.angle) * ennemy.distance; this.mesh.add(ennemy.mesh); this.ennemiesInUse.push(ennemy); } }; EnnemiesHolder.prototype.rotateEnnemies = function () { for (var i = 0; i < this.ennemiesInUse.length; i++) { var ennemy = this.ennemiesInUse[i]; ennemy.angle += game.speed * deltaTime * game.ennemiesSpeed; if (ennemy.angle > Math.PI * 2) ennemy.angle -= Math.PI * 2; ennemy.mesh.position.y = -game.seaRadius + Math.sin(ennemy.angle) * ennemy.distance; ennemy.mesh.position.x = Math.cos(ennemy.angle) * ennemy.distance; ennemy.mesh.rotation.z += Math.random() * 0.1; ennemy.mesh.rotation.y += Math.random() * 0.1; var diffPos = airplane.mesh.position .clone() .sub(ennemy.mesh.position.clone()); var d = diffPos.length(); if (d < game.ennemyDistanceTolerance) { particlesHolder.spawnParticles( ennemy.mesh.position.clone(), 15, Colors.red, 3 ); ennemiesPool.unshift(this.ennemiesInUse.splice(i, 1)[0]); this.mesh.remove(ennemy.mesh); game.planeCollisionSpeedX = (100 * diffPos.x) / d; game.planeCollisionSpeedY = (100 * diffPos.y) / d; ambientLight.intensity = 2; removeEnergy(); i--; } else if (ennemy.angle > Math.PI) { ennemiesPool.unshift(this.ennemiesInUse.splice(i, 1)[0]); this.mesh.remove(ennemy.mesh); i--; } } }; var Particle = function () { var geom = new THREE.TetrahedronGeometry(3, 0); var mat = new THREE.MeshPhongMaterial({ color: 0x009999, shininess: 0, specular: 0xffffff, flatShading: true, }); this.mesh = new THREE.Mesh(geom, mat); }; Particle.prototype.explode = function (pos, color, scale) { var _this = this; var _p = this.mesh.parent; this.mesh.material.color = new THREE.Color(color); this.mesh.material.needsUpdate = true; this.mesh.scale.set(scale, scale, scale); var targetX = pos.x + (-1 + Math.random() * 2) * 50; var targetY = pos.y + (-1 + Math.random() * 2) * 50; var speed = 0.6 + Math.random() * 0.2; TweenMax.to(this.mesh.rotation, speed, { x: Math.random() * 12, y: Math.random() * 12, }); TweenMax.to(this.mesh.scale, speed, { x: 0.1, y: 0.1, z: 0.1 }); TweenMax.to(this.mesh.position, speed, { x: targetX, y: targetY, delay: Math.random() * 0.1, ease: Power2.easeOut, onComplete: function () { if (_p) _p.remove(_this.mesh); _this.mesh.scale.set(1, 1, 1); particlesPool.unshift(_this); }, }); }; var ParticlesHolder = function () { this.mesh = new THREE.Object3D(); this.particlesInUse = []; }; ParticlesHolder.prototype.spawnParticles = function ( pos, density, color, scale ) { var nPArticles = density; for (var i = 0; i < nPArticles; i++) { var particle; if (particlesPool.length) { particle = particlesPool.pop(); } else { particle = new Particle(); } this.mesh.add(particle.mesh); particle.mesh.visible = true; particle.mesh.position.y = pos.y; particle.mesh.position.x = pos.x; particle.explode(pos, color, scale); } }; var Coin = function () { var geom = new THREE.TetrahedronGeometry(5, 0); var mat = new THREE.MeshPhongMaterial({ color: 0x009999, shininess: 0, specular: 0xffffff, flatShading: true, }); this.mesh = new THREE.Mesh(geom, mat); this.mesh.castShadow = true; this.angle = 0; this.dist = 0; }; var CoinsHolder = function (nCoins) { this.mesh = new THREE.Object3D(); this.coinsInUse = []; this.coinsPool = []; for (var i = 0; i < nCoins; i++) { var coin = new Coin(); this.coinsPool.push(coin); } }; CoinsHolder.prototype.spawnCoins = function () { var nCoins = 1 + Math.floor(Math.random() * 10); var d = game.seaRadius + game.planeDefaultHeight + (-1 + Math.random() * 2) * (game.planeAmpHeight - 20); var amplitude = 10 + Math.round(Math.random() * 10); for (var i = 0; i < nCoins; i++) { var coin; if (this.coinsPool.length) { coin = this.coinsPool.pop(); } else { coin = new Coin(); } this.mesh.add(coin.mesh); this.coinsInUse.push(coin); coin.angle = -i * 0.02; coin.distance = d + Math.cos(i * 0.5) * amplitude; coin.mesh.position.y = -game.seaRadius + Math.sin(coin.angle) * coin.distance; coin.mesh.position.x = Math.cos(coin.angle) * coin.distance; } }; CoinsHolder.prototype.rotateCoins = function () { for (var i = 0; i < this.coinsInUse.length; i++) { var coin = this.coinsInUse[i]; if (coin.exploding) continue; coin.angle += game.speed * deltaTime * game.coinsSpeed; if (coin.angle > Math.PI * 2) coin.angle -= Math.PI * 2; coin.mesh.position.y = -game.seaRadius + Math.sin(coin.angle) * coin.distance; coin.mesh.position.x = Math.cos(coin.angle) * coin.distance; coin.mesh.rotation.z += Math.random() * 0.1; coin.mesh.rotation.y += Math.random() * 0.1; var diffPos = airplane.mesh.position .clone() .sub(coin.mesh.position.clone()); var d = diffPos.length(); if (d < game.coinDistanceTolerance) { this.coinsPool.unshift(this.coinsInUse.splice(i, 1)[0]); this.mesh.remove(coin.mesh); particlesHolder.spawnParticles( coin.mesh.position.clone(), 5, 0x009999, 0.8 ); addEnergy(); i--; } else if (coin.angle > Math.PI) { this.coinsPool.unshift(this.coinsInUse.splice(i, 1)[0]); this.mesh.remove(coin.mesh); i--; } } }; var sea, airplane, sky, coinsHolder, ennemiesHolder, particlesHolder; function createPlane() { airplane = new AirPlane(); airplane.mesh.scale.set(0.25, 0.25, 0.25); airplane.mesh.position.y = game.planeDefaultHeight; scene.add(airplane.mesh); // Store the airplane in the global variable for multiplayer access globalAirplane = airplane; } function createSea() { sea = new Sea(); sea.mesh.position.y = -game.seaRadius; scene.add(sea.mesh); } function createSky() { sky = new Sky(); sky.mesh.position.y = -game.seaRadius; scene.add(sky.mesh); } function createCoins() { coinsHolder = new CoinsHolder(20); scene.add(coinsHolder.mesh); } function createEnnemies() { for (var i = 0; i < 10; i++) { var ennemy = new Ennemy(); ennemiesPool.push(ennemy); } ennemiesHolder = new EnnemiesHolder(); scene.add(ennemiesHolder.mesh); } function createParticles() { for (var i = 0; i < 10; i++) { var particle = new Particle(); particlesPool.push(particle); } particlesHolder = new ParticlesHolder(); scene.add(particlesHolder.mesh); } function initializeMultiplayer() { // Create the multiplayer integration using the new implementation // This will be initialized by the PlayerNameInput component // which handles player name entry and multiplayer setup if (window.mobileControls && window.mobileControls.isMobile()) { console.log("Mobile device detected - multiplayer will be initialized after player name entry"); } else { console.log("Desktop device detected - multiplayer will be initialized after player name entry"); } // Check if player has already joined const hasJoinedBefore = localStorage.getItem('hasJoined') === 'true'; // Get stored name from localStorage or use random name const storedName = localStorage.getItem('playerName'); // If player has already joined, initialize the multiplayer integration immediately if (hasJoinedBefore && storedName) { console.log("Player already joined, initializing multiplayer integration"); multiplayerIntegration = new NewMultiplayerIntegration(scene, globalAirplane); } // Set up global access for UI components if (!window.game) window.game = {}; window.game.scene = scene; window.game.airplane = globalAirplane; } function loop() { newTime = new Date().getTime(); deltaTime = newTime - oldTime; oldTime = newTime; if (game.status == 'playing') { if ( Math.floor(game.distance) % game.distanceForCoinsSpawn == 0 && Math.floor(game.distance) > game.coinLastSpawn ) { game.coinLastSpawn = Math.floor(game.distance); coinsHolder.spawnCoins(); } if ( Math.floor(game.distance) % game.distanceForSpeedUpdate == 0 && Math.floor(game.distance) > game.speedLastUpdate ) { game.speedLastUpdate = Math.floor(game.distance); game.targetBaseSpeed += game.incrementSpeedByTime * deltaTime; } if ( Math.floor(game.distance) % game.distanceForEnnemiesSpawn == 0 && Math.floor(game.distance) > game.ennemyLastSpawn ) { game.ennemyLastSpawn = Math.floor(game.distance); ennemiesHolder.spawnEnnemies(); } if ( Math.floor(game.distance) % game.distanceForLevelUpdate == 0 && Math.floor(game.distance) > game.levelLastUpdate ) { game.levelLastUpdate = Math.floor(game.distance); game.level++; if (fieldLevel) fieldLevel.innerHTML = Math.floor(game.level); game.targetBaseSpeed = game.initSpeed + game.incrementSpeedByLevel * game.level; } updatePlane(); updateDistance(); updateEnergy(); game.baseSpeed += (game.targetBaseSpeed - game.baseSpeed) * deltaTime * 0.02; game.speed = game.baseSpeed * game.planeSpeed; } else if (game.status == 'gameover') { game.speed *= 0.99; airplane.mesh.rotation.z += (-Math.PI / 2 - airplane.mesh.rotation.z) * 0.0002 * deltaTime; airplane.mesh.rotation.x += 0.0003 * deltaTime; game.planeFallSpeed *= 1.05; airplane.mesh.position.y -= game.planeFallSpeed * deltaTime; if (airplane.mesh.position.y < -200) { showReplay(); game.status = 'waitingReplay'; } } else if (game.status == 'waitingReplay') { } airplane.propeller.rotation.x += 0.2 + game.planeSpeed * deltaTime * 0.005; sea.mesh.rotation.z += game.speed * deltaTime; if (sea.mesh.rotation.z > 2 * Math.PI) sea.mesh.rotation.z -= 2 * Math.PI; ambientLight.intensity += (0.5 - ambientLight.intensity) * deltaTime * 0.005; coinsHolder.rotateCoins(); ennemiesHolder.rotateEnnemies(); sky.moveClouds(); sea.moveWaves(); // Update multiplayer if initialized if (multiplayerIntegration) { multiplayerIntegration.update(deltaTime); } renderer.render(scene, camera); requestAnimationFrame(loop); } function updateDistance() { game.distance += game.speed * deltaTime * game.ratioSpeedDistance; if (fieldDistance) fieldDistance.innerHTML = Math.floor(game.distance); var d = 502 * (1 - (game.distance % game.distanceForLevelUpdate) / game.distanceForLevelUpdate); if (levelCircle) levelCircle.setAttribute('stroke-dashoffset', d); } function updateEnergy() { game.energy -= game.speed * deltaTime * game.ratioSpeedEnergy; game.energy = Math.max(0, game.energy); if (energyBar) { energyBar.style.right = (100 - game.energy) + '%'; energyBar.style.backgroundColor = game.energy < 50 ? '#f25346' : '#68c3c0'; energyBar.style.animationName = game.energy < 30 ? 'blinking' : 'none'; } if (game.energy < 1) { game.status = 'gameover'; } } function addEnergy() { game.energy += game.coinValue; game.energy = Math.min(game.energy, 100); } function removeEnergy() { game.energy -= game.ennemyValue; game.energy = Math.max(0, game.energy); } function resetInstructions() { const instructions = document.getElementById('instructions'); const mobileInstructions = document.querySelector('.mobile-instructions'); const title = document.querySelector('.header h1'); const subtitle = document.querySelector('.header h2'); if (instructions) { instructions.style.display = 'flex'; TweenMax.to(instructions, 0.5, {opacity: 1}); } if (mobileInstructions) { mobileInstructions.style.display = 'block'; TweenMax.to(mobileInstructions, 0.5, {opacity: 1}); } if (title) { TweenMax.to(title, 0.5, {opacity: 1}); } if (subtitle) { TweenMax.to(subtitle, 0.5, {opacity: 1}); } } // Define the fadeOutInstructions function function fadeOutInstructions() { const instructions = document.getElementById('instructions'); const mobileInstructions = document.querySelector('.mobile-instructions'); const title = document.querySelector('.header h1'); const subtitle = document.querySelector('.header h2'); if (instructions) { TweenMax.to(instructions, 1.0, {opacity: 0, onComplete: function() { instructions.style.display = 'none'; }}); } if (mobileInstructions) { TweenMax.to(mobileInstructions, 1.0, {opacity: 0, onComplete: function() { mobileInstructions.style.display = 'none'; }}); } if (title) { TweenMax.to(title, 1.0, {opacity: 0, onComplete: function() { title.style.display = 'none'; }}); } if (subtitle) { TweenMax.to(subtitle, 1.0, {opacity: 0, onComplete: function() { subtitle.style.display = 'none'; }}); } } function updatePlane() { // Use joystick position on mobile, or mouse position otherwise var inputX = mousePos.x; var inputY = mousePos.y; // Check if this is the first interaction with significant input if (firstInteraction && (Math.abs(inputX) > 0.1 || Math.abs(inputY) > 0.1)) { fadeOutInstructions(); firstInteraction = false; } // Check if we should use mobile controls if (window.mobileControls && window.mobileControls.isMobile()) { const joystickPos = window.mobileControls.getPosition(); // Only override if joystick is being used (non-zero position) if (Math.abs(joystickPos.x) > 0.1 || Math.abs(joystickPos.y) > 0.1) { // Only update X position always, but Y position only when there's significant input inputX = joystickPos.x / 4; // Reduced sensitivity for smoother control // Only update Y position when there's actual vertical input if (Math.abs(joystickPos.y) > 0.1) { inputY = joystickPos.y / 4; // Reduced sensitivity for smoother control } else { // When no vertical input, maintain current height by setting inputY to neutral inputY = 0; } } } game.planeSpeed = normalize( inputX, -0.5, 0.5, game.planeMinSpeed, game.planeMaxSpeed ); var targetY = normalize( inputY, -0.75, 0.75, game.planeDefaultHeight - game.planeAmpHeight, game.planeDefaultHeight + game.planeAmpHeight ); var targetX = normalize( inputX, -1, 1, -game.planeAmpWidth * 0.7, -game.planeAmpWidth ); game.planeCollisionDisplacementX += game.planeCollisionSpeedX; targetX += game.planeCollisionDisplacementX; game.planeCollisionDisplacementY += game.planeCollisionSpeedY; targetY += game.planeCollisionDisplacementY; airplane.mesh.position.y += (targetY - airplane.mesh.position.y) * deltaTime * game.planeMoveSensivity; airplane.mesh.position.x += (targetX - airplane.mesh.position.x) * deltaTime * game.planeMoveSensivity; airplane.mesh.rotation.z = (targetY - airplane.mesh.position.y) * deltaTime * game.planeRotXSensivity; airplane.mesh.rotation.x = (airplane.mesh.position.y - targetY) * deltaTime * game.planeRotZSensivity; // Adjust camera FOV based on device type if (window.mobileControls && window.mobileControls.isMobile()) { // Wider FOV on mobile for better visibility camera.fov = 85; } else { // Original dynamic FOV for desktop camera.fov = normalize(mousePos.x, -1, 1, 40, 80); } camera.updateProjectionMatrix(); // Adjust camera vertical position if (window.mobileControls && window.mobileControls.isMobile()) { // More responsive camera movement for mobile - slightly higher view camera.position.y += (airplane.mesh.position.y + 20 - camera.position.y) * deltaTime * game.cameraSensivity; } else { // Standard camera follow for desktop camera.position.y += (airplane.mesh.position.y - camera.position.y) * deltaTime * game.cameraSensivity; } game.planeCollisionSpeedX += (0 - game.planeCollisionSpeedX) * deltaTime * 0.03; game.planeCollisionDisplacementX += (0 - game.planeCollisionDisplacementX) * deltaTime * 0.01; game.planeCollisionSpeedY += (0 - game.planeCollisionSpeedY) * deltaTime * 0.03; game.planeCollisionDisplacementY += (0 - game.planeCollisionDisplacementY) * deltaTime * 0.01; airplane.pilot.updateHairs(); } function showReplay() { if (replayMessage) replayMessage.style.display = 'block'; } function hideReplay() { if (replayMessage) replayMessage.style.display = 'none'; // Reset the instructions when restarting the game // Display everything again for the new game session resetInstructions(); // Make sure title and subtitle are visible and displayed const title = document.querySelector('.header h1'); const subtitle = document.querySelector('.header h2'); if (title) { title.style.display = 'block'; } if (subtitle) { subtitle.style.display = 'block'; } } function normalize(v, vmin, vmax, tmin, tmax) { var nv = Math.max(Math.min(v, vmax), vmin); var dv = vmax - vmin; var pc = (nv - vmin) / dv; var dt = tmax - tmin; var tv = tmin + pc * dt; return tv; } var fieldDistance = document.getElementById('distValue'); var energyBar = document.getElementById('energyBar'); var replayMessage = document.getElementById('replayMessage'); var fieldLevel = document.getElementById('levelValue'); var levelCircle = document.getElementById('levelCircleStroke'); function initGame() { resetGame(); createScene(); createLights(); createPlane(); createSea(); createSky(); createCoins(); createEnnemies(); createParticles(); document.addEventListener('mousemove', handleMouseMove, false); document.addEventListener('touchmove', handleTouchMove, false); document.addEventListener('mouseup', handleMouseUp, false); document.addEventListener('touchend', handleTouchEnd, false); // Initialize multiplayer after the plane is created initializeMultiplayer(); loop(); } // Add an initial game state flag to track first interaction let firstInteraction = true; function resetGame() { game = { speed: 0, initSpeed: 0.00035, baseSpeed: 0.00035, targetBaseSpeed: 0.00035, incrementSpeedByTime: 0.0000025, incrementSpeedByLevel: 0.000005, distanceForSpeedUpdate: 100, speedLastUpdate: 0, distance: 0, ratioSpeedDistance: 50, energy: 100, ratioSpeedEnergy: 3, level: 1, levelLastUpdate: 0, distanceForLevelUpdate: 1000, planeDefaultHeight: 100, planeAmpHeight: 80, planeAmpWidth: 75, planeMoveSensivity: 0.005, planeRotXSensivity: 0.0008, planeRotZSensivity: 0.0004, planeFallSpeed: 0.001, planeMinSpeed: 1.2, planeMaxSpeed: 1.6, planeSpeed: 0, planeCollisionDisplacementX: 0, planeCollisionSpeedX: 0, planeCollisionDisplacementY: 0, planeCollisionSpeedY: 0, seaRadius: 600, seaLength: 800, wavesMinAmp: 5, wavesMaxAmp: 20, wavesMinSpeed: 0.001, wavesMaxSpeed: 0.003, cameraFarPos: 500, cameraNearPos: 150, cameraSensivity: 0.002, coinDistanceTolerance: 15, coinValue: 3, coinsSpeed: 0.5, coinLastSpawn: 0, distanceForCoinsSpawn: 100, ennemyDistanceTolerance: 10, ennemyValue: 10, ennemiesSpeed: 0.6, ennemyLastSpawn: 0, distanceForEnnemiesSpawn: 50, status: 'playing', // Add mobile-specific camera settings mobileCameraDistance: 240, // Further back camera on mobile for better visibility }; if (fieldLevel) fieldLevel.innerHTML = Math.floor(game.level); // Reset first interaction flag when game is reset firstInteraction = true; // Reset instruction visibility resetInstructions(); } initGame(); })(); } }

theSkySurfer

surf the skies

Other games like this

About the SkySurfer (Multiplayer attempt 1)