const xAxis = new THREE.Vector3(1, 0, 0); const yAxis = new THREE.Vector3(0, 1, 0); const zAxis = new THREE.Vector3(0, 0, 1); var mountain = this; // Save the initial scene to restore later const sceneJSON = JSON.stringify(scene.toJSON()); var skierGroup; var skier; var directionalLight; const tuneMaxSkierRotationPerSecond = Math.PI; const tuneSkierRotation = 0.5; // Units per second const tuneMinSpeed = 2; const tuneMaxSpeed = 4; const tuneAcceleration = 2.5; const tuneMaxAngleForAcceleration = 90 // Angle from ahead var skierVelocity; const maxDirectionLeft = new THREE.Vector3(-1, 0, 0.1).normalize(); const maxDirectionRight = new THREE.Vector3(1, 0, 0.1).normalize(); // Improve the movement to move in the specified direction until movement resets // (I'm thinking kind of like drifting in Mario Kart) var turnX; const tuneTurn = 2; var newTurnX; const tuneNewTurnThreshold = 0.05; // var tuneStraightThreshold = 0.1; const tuneTurnThreshold = 0.13; // If the player is moving, this will have a value var lastInputX; var thresholdX; const turnMovementThreshold = 0.1; var movementX; const tuneTurnSpeed = 60; const tuneTurnAngle = 2; var movementDirection = undefined; var track; var lastTrackAddedAt; const addTrackEveryDelta = 0.01; var distanceMarker; var lastDistanceMarker; var lastDistanceMarkerAddedAt; const tuneDistanceMarkerSeparation = 1.5; var gate; var lastGate; var lastLastGate; var lastGateDirection; const distanceBetweenGates = 3.25; const tuneGateRangeX = [-1, 1]; const tuneGateDistanceX = 1.5; const tuneGateRangeZ = [-0.5, 0.5]; var nextGatePosition; var ground; var grounds; var groundLength; // Angle in degrees const groundAngles = [ {angle: 0, color: 0xebebeb}, {angle: 20, color: 0xe2e2e2}, ]; //var groundAngles = [ // {angle: 0, color: 0xebebeb}, // {angle: 10, color: 0xe2e2e2}, // {angle: 20, color: 0xdadada}, //]; // The next ground angles to choose from var nextGroundAngles; const tuneEndRaceGrounds = 16; var groundsCount; var endRaceGround; const tuneEndGroundColor = 0xC3FFE8; var lastCleanupAt; var cleanupObjects; const tuneCleanupEveryDelta = 1000; const tuneCleanupBehindSkier = 15 var paused; // Mode is 'race' or 'infinite' var mode; var time; const startMenu = document.getElementById('start-menu'); const playInfiniteGameButton = document.getElementById('play-infinite-game-button'); const playRaceGameButton = document.getElementById('play-race-game-button'); const pauseMenu = document.getElementById('pause-menu'); const pauseButton = document.getElementById('pause-button'); const resumeMenu = document.getElementById('resume-menu'); const resumeButton = document.getElementById('resume-button'); const quitButton = document.getElementById('quit-button'); const raceTimeMenu = document.getElementById('race-time-menu'); const raceTimeText = document.getElementById('race-time-text'); const raceEndMenu = document.getElementById('race-end-menu'); const newRaceButton = document.getElementById('new-race-button'); const endRaceButton = document.getElementById('end-race-button'); const endRaceTimeText = document.getElementById('end-race-time-text'); function startGame(gameMode) { mode = gameMode; // Restore the saved initial scene and camera const loader = new THREE.ObjectLoader(); const restoredScene = loader.parse(JSON.parse(sceneJSON)); // Update the scene and camera // Need to remove/add from/to the THREEjs object so that the pointers don't get messed up scene.children = restoredScene.children; mountain = scene.getObjectByName('Mountain'); playerCamera = mountain.getObjectByName('PerspectiveCamera'); player.setCamera(playerCamera); // Reset global vars skierGroup = mountain.getObjectByName('SkierGroup'); skier = mountain.getObjectByName('Skier'); directionalLight = scene.getObjectByName('DirectionalLight'); skierVelocity = new THREE.Vector3(0, 0, tuneMinSpeed); turnX = 0; newTurnX = 0; lastInputX = undefined; thresholdX = 0; movementX = 0; movementDirection = undefined; track = mountain.getObjectByName('Track'); lastTrackAddedAt = 0; distanceMarker = mountain.getObjectByName('DistanceMarkers'); lastDistanceMarker = distanceMarker; lastDistanceMarkerAddedAt = 0; gate = mountain.getObjectByName('GateGroup'); lastGate = gate; lastLastGate = gate; lastGateDirection = 'right'; nextGatePosition = generateNextGatePosition(); ground = mountain.getObjectByName('Ground'); grounds = [ground]; groundLength = ground.getObjectByName('GroundPlane').scale.y; nextGroundAngles = [...groundAngles]; groundsCount = 0; endRaceGround = undefined; lastCleanupAt = 0; cleanupObjects = []; paused = false; time = 0; } function findUndefined(object) { if (object.children.length === 0) { return false } if (object.children.findIndex((c) => !c) !== -1) { return object } return object.children.reduce((acc, child) => acc || findUndefined(child), false); } function checkUndefinedObjects(object) { let hasUndefined = false; // Check if the object itself is undefined if (object === undefined) { console.log('Found undefined object:', object); hasUndefined = true; } // Check if any properties of the object are undefined for (let key in object) { if (object.hasOwnProperty(key) && object[key] === undefined) { console.log(`Found undefined property '${key}' in object:`, object); hasUndefined = true; } } // Recursively check child objects if it is a THREE.Object3D or has children if (object instanceof THREE.Object3D && object.children) { for (let i = 0; i < object.children.length; i++) { if (checkUndefinedObjects(object.children[i])) { hasUndefined = true; } } } return hasUndefined; } function update(event) { // Don't do anything if the game's paused if (paused) return; checkUndefinedObjects(scene); // console.log('~~~ FIND UNDEF', findUndefined(scene)) var deltaSeconds = event.delta / 1000; time += deltaSeconds; const minutes = Math.floor(time/60); const seconds = time - (minutes*60); var timeStr = (minutes > 0 ? `${minutes}:` + (seconds < 10 ? '0' : '') : '') + seconds.toFixed(1); if (raceTimeText) raceTimeText.innerHTML = timeStr; var fps = 1 / deltaSeconds; if (fps < 55) console.log('~~~ low FPS', fps); // Check if the race is over if (mode === 'race') { if (endRaceGround && endRaceGround.position.z < skierGroup.position.z) { controllerEndRace(time); } } // Update velocity // if (movementX) { if (turnX) { // TODO: I wonder if I can have it scale non-linearly, so it turns more the most you move (less sensitive for small turns) // var angleFromAhead = skierVelocity.angleTo(new THREE.Vector3(0, 0, 1)); // Scale angle to be more sensitive the farther you turn // var angle = tuneTurnSpeed * movementX * deltaSeconds * Math.PI * (1 + (angleFromAhead * tuneTurnAngle)); // var angle = tuneTurnSpeed * movementX * deltaSeconds * Math.PI; // var adjustedTurnX = Math.abs(turnX) < tuneStraightThreshold // ? transform(Math.abs(turnX), [0, tuneStraightThreshold], [0, Math.abs(turnX)]) * Math.sign(turnX) // ? 0 // : (Math.abs(turnX) - tuneStraightThreshold) * Math.sign(turnX); var adjustedTurnX = Math.abs(turnX) < tuneTurnThreshold ? movementX * tuneTurnSpeed : turnX * tuneTurn; var angle = adjustedTurnX * deltaSeconds * Math.PI; // var angle = tuneTurn * turnX * deltaSeconds * Math.PI; // Don't let the skier turn uphill var maxAngleLeft = skierVelocity.angleTo(maxDirectionLeft); var maxAngleRight = skierVelocity.angleTo(maxDirectionRight); if (angle < -maxAngleLeft) { angle = maxAngleLeft; turnX = 0; } if (angle > maxAngleRight) { angle = maxAngleRight; turnX = 0; } // Don't let the skier turn too quickly // var maxAngle = 2 * Math.PI * deltaSeconds; var maxAngle = Math.PI * deltaSeconds; if ((angle < 0 && angle < -maxAngle) || (angle > 0 && angle > maxAngle)) { // TODO: in this case, I probably shouldn't reset the movementX, right? angle = angle < 0 ? -maxAngle : maxAngle; // movementX -= (maxAngle - angle) / 50 / deltaSeconds / Math.PI; // } else { // movementX = 0; } // Update angle skierVelocity.applyAxisAngle(skier.up, angle); movementX = 0; } // Update velocity speed const [skierGround, nextSkierGround] = getGroundForObject(skierGroup); var prevSpeed = skierVelocity.length(); var angleFromAhead = skierVelocity.angleTo(new THREE.Vector3(0, 0, 1)); // TODO: increase the acceleration given the ground angle // Apply drag to the acceleration based on the speed. At max speed, acceleration is 0 const steepnessMultiplier = 1 + (skierGround.rotation.x * 2); const maxSpeed = tuneMaxSpeed * steepnessMultiplier; const maxAcceleration = tuneAcceleration * steepnessMultiplier; var drag = transform(prevSpeed, [tuneMinSpeed, maxSpeed], [0, maxAcceleration]); var acceleration = transform(angleFromAhead, [0, tuneMaxAngleForAcceleration * 2.0 * Math.PI / 360.0], [maxAcceleration, 0]); var speed = prevSpeed + (deltaSeconds * (acceleration - drag)); skierVelocity.setLength(speed); skierVelocity.clampLength(tuneMinSpeed, tuneMaxSpeed); // Move skier const skierNextPosition = getPositionOnGround( skierGroup.position, skierVelocity.clone().multiplyScalar(deltaSeconds), skierGround, nextSkierGround ); const skierMovement = skierNextPosition.clone().sub(skierGroup.position); // const skierMovement = skierVelocity.clone().multiplyScalar(deltaSeconds).applyAxisAngle(xAxis, skierGround.rotation.x); skierGroup.position.add(skierMovement); // skierGroup.rotation.x = ease(skierGroup.rotation.x, skierGround.rotation.x, 0.3 * tuneMaxSkierRotationPerSecond * deltaSeconds); // Point the skier in the direction they're moving skier.rotation.x = ease(skier.rotation.x, skierGround.rotation.x, 0.4 * tuneMaxSkierRotationPerSecond * deltaSeconds); skier.rotation.y = skierVelocity.angleTo(new THREE.Vector3(0, 0, 1)) * Math.sign(skierVelocity.x); skier.rotation.z = ease( skier.rotation.z, clamp(-turnX * tuneSkierRotation * Math.PI, [-Math.PI/2*0.8, Math.PI/2*0.8]), tuneMaxSkierRotationPerSecond * deltaSeconds ); // Move mountain (keep the skier in the center of the screen) mountain.position.add(skierMovement.negate()); // Add tracks if (track && lastTrackAddedAt + addTrackEveryDelta <= event.time) { var newTrack = track.clone(); // newTrack.position.x = skier.position.x; newTrack.position.x = skierGroup.position.x; newTrack.position.y = skierGroup.position.y; newTrack.position.z = skierGroup.position.z; // Match the skier's rotation // newTrack.rotation.x = skierGroup.rotation.x; newTrack.rotation.x = skier.rotation.x; newTrack.rotation.y = skier.rotation.y; mountain.add(newTrack); lastTrackAdded = event.time; cleanupObjects.push(newTrack); } // Add Ground const lastGround = grounds[0]; var lastGroundWorldPosition = lastGround.getWorldPosition(new THREE.Vector3()); if (lastGroundWorldPosition.z < groundLength) { var newGround = lastGround.clone(); newGround.position.x = lastGate.position.x; var lastGroundEnd = lastGround.position.clone().add( new THREE.Vector3(0, 0, groundLength).applyAxisAngle(xAxis, lastGround.rotation.x) ); newGround.position.y = lastGroundEnd.y; newGround.position.z = lastGroundEnd.z; var groundAngle = nextGroundAngles[Math.floor(transform(Math.random(), [0,1], [0,nextGroundAngles.length]))]; newGround.rotation.x = groundAngle.angle / 360 * Math.PI * 2; var newGroundPlane = newGround.getObjectByName('GroundPlane'); var newGroundMaterial = newGroundPlane.material.clone(); newGroundMaterial.emissive.set(groundAngle.color); newGroundPlane.material = newGroundMaterial; mountain.add(newGround); // Prepend newGround to the list grounds.unshift(newGround); // Only save the last 5 grounds grounds = grounds.slice(0, 5); cleanupObjects.push(newGround); // Make it more likely to switch to another ground angle than stay at the same angle const groundAngleIndex = groundAngles.findIndex((a) => a.angle === groundAngle.angle); if (groundAngleIndex !== -1) { moreLikelyAngles = [...groundAngles]; moreLikelyAngles.splice(groundAngleIndex, 1); nextGroundAngles = [groundAngles[groundAngleIndex], ...moreLikelyAngles, ...moreLikelyAngles, ...moreLikelyAngles]; } else { nextGroundAngles = [...groundAngles]; } // (race mode) Update the end grounds groundsCount += 1; if (mode === 'race' && groundsCount === tuneEndRaceGrounds) { endRaceGround = newGround; const endGroundPlane = endRaceGround.getObjectByName('GroundPlane'); var endGroundMaterial = endGroundPlane.material.clone(); endGroundMaterial.emissive.set(tuneEndGroundColor); endGroundPlane.material = endGroundMaterial; } } // Add distance markers const lastDistanceMarkerWorldPosition = lastDistanceMarker.getWorldPosition(new THREE.Vector3()); if (lastDistanceMarkerWorldPosition.z < 5) { const [lastDistanceMarkerGround, nextLastDistanceMarkerGround] = getGroundForObject(lastDistanceMarker); const newDistanceMarkerYZ = getPositionOnGround( lastDistanceMarker.position, new THREE.Vector3(0, 0, tuneDistanceMarkerSeparation), lastDistanceMarkerGround, nextLastDistanceMarkerGround ); const newDistanceMarkerY = newDistanceMarkerYZ.y; const newDistanceMarkerZ = newDistanceMarkerYZ.z; var newDistanceMarker = distanceMarker.clone(); var afterGatePosition = newDistanceMarkerZ < lastGate.position.z ? lastLastGate.position : lastGate.position; var beforeGatePosition = newDistanceMarkerZ < lastGate.position.z ? lastGate.position : nextGatePosition; newDistanceMarker.position.x = transform( newDistanceMarkerZ, [afterGatePosition.z, beforeGatePosition.z], [afterGatePosition.x, beforeGatePosition.x] ); newDistanceMarker.position.y = newDistanceMarkerY; newDistanceMarker.position.z = newDistanceMarkerZ; mountain.add(newDistanceMarker); const [newDistanceMarkerGround, nextNewDistanceMarkerGround] = getGroundForObject(newDistanceMarker); newDistanceMarker.rotation.x = newDistanceMarkerGround.rotation.x; lastDistanceMarker = newDistanceMarker; cleanupObjects.push(newDistanceMarker); } // Add gates // TODO: fix the gates const lastGateWorldPosition = lastGate.getWorldPosition(new THREE.Vector3()); if (lastGateWorldPosition.z < 5) { const [lastGateGround, nextLastGateGround] = getGroundForObject(lastGate); const nextGatePositionYZ = getPositionOnGround( lastGate.position, new THREE.Vector3(0, 0, nextGatePosition.z-lastGate.position.z), lastGateGround, nextLastGateGround ); var newGate = gate.clone(); newGate.position.x = nextGatePosition.x; newGate.position.y = nextGatePositionYZ.y; newGate.position.z = nextGatePositionYZ.z; mountain.add(newGate); const [newGateGround, nextNewGateGround] = getGroundForObject(newGate); var newGateArrow = newGate.getObjectByName('Arrow'); if (lastGateDirection === 'right') { newGateArrow.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); } newGateArrow.rotation.x = newGateArrow.rotation.x + newGateGround.rotation.x; lastLastGate = lastGate; lastGate = newGate; lastGateDirection = lastGateDirection === 'left' ? 'right' : 'left'; nextGatePosition = generateNextGatePosition(); cleanupObjects.push(newGate); } // Cleanup resources if (lastCleanupAt + tuneCleanupEveryDelta < event.time) { cleanupObjects = cleanupObjects.reduce((acc, object) => { if (object.getWorldPosition(new THREE.Vector3()).z - skierGroup.getWorldPosition(new THREE.Vector3()).z < -tuneCleanupBehindSkier) { object.removeFromParent(); return acc; } else { return [...acc, object]; } }, []); lastCleanupAt = event.time; } } function generateNextGatePosition() { var gateRangeX = lastGateDirection === 'left' ? [lastGate.position.x, lastGate.position.x + tuneGateDistanceX] : [lastGate.position.x - tuneGateDistanceX, lastGate.position.x]; return new THREE.Vector3( transform(Math.random(), [0,1], gateRangeX), lastGate.position.y, lastGate.position.z + distanceBetweenGates + transform(Math.random(), [0,1], tuneGateRangeZ) ); } function transformOntoPlane(vector, plane) { return vector.clone().applyAxisAngle(xAxis, plane.rotation.x); } function transformOntoPlaneFromPlane(vector, plane, fromPlane) { return vector.clone().applyAxisAngle(xAxis, plane.rotation.x - fromPlane.rotation.x); } // position is in world position function getPositionOnGround(position, movement, ground, nextGround) { // const groundEndPosition = ground.getWorldPosition( // ground.position.clone().add(transformOntoPlane(new THREE.Vector3(0, 0, groundLength), ground))); const groundEndPosition = ground.position.clone().add(transformOntoPlane(new THREE.Vector3(0, 0, groundLength), ground)); const movementEndPositionOnGround = position.clone().add(transformOntoPlane(movement, ground)); if (movementEndPositionOnGround.z < groundEndPosition.z) { return movementEndPositionOnGround; } const endPositionOnGround = position.clone().lerp( movementEndPositionOnGround, (groundEndPosition.z-position.z)/(movementEndPositionOnGround.z-position.z) ); const movementAfterGround = transformOntoPlaneFromPlane( movementEndPositionOnGround.clone().sub(endPositionOnGround), nextGround, ground ); return endPositionOnGround.clone().add(movementAfterGround); } function getGroundForObject(object) { const objectWorldPosition = object.getWorldPosition(new THREE.Vector3()); const groundIndex = grounds.findIndex((ground) => { const groundWorldPosition = ground.getWorldPosition(new THREE.Vector3()); return objectWorldPosition.z > groundWorldPosition.z; }); return [grounds[groundIndex], grounds[groundIndex-1]]; } function transform(value, fromRange, toRange) { var [fromStart, fromEnd] = fromRange; var [toStart, toEnd] = toRange; var fromValue = value; if (fromValue < fromStart) fromValue = fromStart; if (fromValue > fromEnd) fromValue = fromEnd; var toValue = (((fromValue-fromStart) / (fromEnd-fromStart)) * (toEnd - toStart)) + toStart; if (toValue < toStart) fromValue = toStart; if (toValue > toEnd) fromValue = toEnd; return toValue; } function clamp(value, range) { var [min, max] = range; return Math.max(Math.min(value, max), min); } function ease(fromValue, toValue, maxDiff) { var diff = toValue - fromValue; var easeDiff = diff; if (Math.abs(diff) > maxDiff) { easeDiff = maxDiff * (Math.sign(diff) || 0); } return fromValue + easeDiff; } // Movement control with clicking function pointerdown(event) { lastInputX = event.clientX; } function pointerup(event) { lastInputX = undefined; movementX = 0; thresholdX = 0; movementDirection = undefined; turnX = 0; } function pointermove(event) { if (typeof lastInputX !== 'undefined') { // TODO: I noticed that Sophie always drags her finger down – I don't know if I want to encourage that since // eventually her finger is off the bottom of the screen. But, one idea is that I could make dragging down add to // the inputX in the turn direction var inputX = event.clientX - lastInputX; var normalizedInputX = inputX / window.innerWidth; turnX += normalizedInputX; // Reset turnX to start a new turn without having to lift up your finger if (Math.sign(normalizedInputX) !== Math.sign(turnX)) { if (Math.sign(normalizedInputX) !== Math.sign(newTurnX)) { newTurnX = normalizedInputX; } else { newTurnX += normalizedInputX; } } // TODO: have a threshold where the player is moving straight – before they start the next turn if (Math.abs(newTurnX) > tuneNewTurnThreshold) { turnX = newTurnX; newTurnX = 0; } // Start movement if (typeof movementDirection === 'undefined') { thresholdX += normalizedInputX; movementX += normalizedInputX; // Wait for the threshold before starting the turn if (thresholdX > turnMovementThreshold) { movementDirection = 'right'; } else if (thresholdX < -turnMovementThreshold) { movementDirection = 'left'; } // } else if (( // movementDirection === 'left' && normalizedInputX < 0 // ) || ( // movementDirection === 'right' && normalizedInputX > 0 // )) { } else { movementX += normalizedInputX; } // Update last input lastInputX = event.clientX; } } // Interact with the GUI -------------------------------------------------------------------------------- function hideGui(element) { if (element) element.style.display = 'none'; } function showGui(element) { if (element) element.style.display = 'block'; } // Start menu function initStartMenuGui() { showGui(startMenu); } function closeStartMenuGui() { hideGui(startMenu); } // Gameplay function initGameplayGui(gameMode) { showGui(pauseMenu); hideGui(resumeMenu); hideGui(raceEndMenu); if (gameMode === 'race') showGui(raceTimeMenu); else hideGui(raceTimeMenu); } function closeGameplayGui() { hideGui(pauseMenu); hideGui(resumeMenu); hideGui(raceTimeMenu); hideGui(raceEndMenu); } function controllerOpenStartMenu() { // Open with the start menu initStartMenuGui(); closeGameplayGui(); paused = true; } // 'race' or 'infinite' function controllerOpenGameplay(gameMode) { // TODO: start the game from scratch initGameplayGui(gameMode); closeStartMenuGui(); startGame(gameMode); } function controllerEndRace(raceTime) { paused = true; const minutes = Math.floor(raceTime/60); const seconds = raceTime - (minutes*60); var timeStr = (minutes > 0 ? `${minutes}:` + (seconds < 10 ? '0' : '') : '') + seconds.toFixed(2); if (endRaceTimeText) endRaceTimeText.innerHTML = timeStr; // TODO: show UI showGui(raceEndMenu); hideGui(pauseMenu); hideGui(raceTimeMenu); // For testing, restart the game after a few seconds if (!newRaceButton) setTimeout(() => controllerOpenGameplay('race'), 1000); } // Play game race mode if (playRaceGameButton) { playRaceGameButton.addEventListener('click', () => { controllerOpenGameplay('race'); }); } // Play game infinite mode if (playInfiniteGameButton) { playInfiniteGameButton.addEventListener('click', () => { controllerOpenGameplay('infinity'); }); } // New race mode game if (newRaceButton) { newRaceButton.addEventListener('click', () => { // TODO: start a new round controllerOpenGameplay('race'); }); } // End race game if (endRaceButton) { endRaceButton.addEventListener('click', () => { controllerOpenStartMenu(); }); } // Pause game if (pauseButton) { pauseButton.addEventListener('click', () => { paused = !paused; hideGui(pauseMenu); showGui(resumeMenu); }); } // Resume game if (resumeButton) { resumeButton.addEventListener('click', () => { paused = !paused; hideGui(resumeMenu); showGui(pauseMenu); }); } // Quit game if (quitButton) { quitButton.addEventListener('click', () => { controllerOpenStartMenu(); }); } function init() { // Start the game if (startMenu) { // Open with the start menu controllerOpenStartMenu(); } else { // Test mode – start without the menus controllerOpenGameplay('race'); } } function deepCopy(obj, hash = new WeakMap()) { // Return if it's null or undefined if (obj === null || obj === undefined) { return obj; } // Handle primitive types and functions if (typeof obj !== 'object' || typeof obj === 'function') { return obj; } // Handle circular references if (hash.has(obj)) { return hash.get(obj); } // Handle arrays if (Array.isArray(obj)) { const arr = []; hash.set(obj, arr); for (const element of obj) { arr.push(deepCopy(element, hash)); } return arr; } // Handle objects const copy = {}; hash.set(obj, copy); for (const key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepCopy(obj[key], hash); } } return copy; } // Add CSS to the canvas so mobile input works properly var sheet = window.document.styleSheets[0]; sheet.insertRule('canvas { touch-action: none; }', sheet.cssRules.length);