var xAxis = new THREE.Vector3(1, 0, 0); var yAxis = new THREE.Vector3(0, 1, 0); var zAxis = new THREE.Vector3(0, 0, 1); var skierGroup = this.getObjectByName('SkierGroup'); var skier = this.getObjectByName('Skier'); var directionalLight = scene.getObjectByName('DirectionalLight'); var tuneMaxSkierRotationPerSecond = Math.PI; var tuneSkierRotation = 0.5; // Units per second var tuneMinSpeed = 2; var tuneMaxSpeed = 4; var tuneAcceleration = 2.5; var tuneMaxAngleForAcceleration = 90 // Angle from ahead var skierVelocity = new THREE.Vector3(0, 0, tuneMinSpeed); var maxDirectionLeft = new THREE.Vector3(-1, 0, 0.1).normalize(); var 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 = 0; var tuneTurn = 2; var newTurnX = 0; var tuneNewTurnThreshold = 0.05; // var tuneStraightThreshold = 0.1; var tuneTurnThreshold = 0.13; // If the player is moving, this will have a value var lastInputX = undefined; var thresholdX = 0; var turnMovementThreshold = 0.1; var movementX = 0; var tuneTurnSpeed = 60; var tuneTurnAngle = 2; var movementDirection = undefined; var track = this.getObjectByName('Track'); var lastTrackAddedAt = 0; var addTrackEveryDelta = 0.01; var distanceMarker = this.getObjectByName('DistanceMarkers'); var lastDistanceMarker = distanceMarker; var lastDistanceMarkerAddedAt = 0; var tuneDistanceMarkerSeparation = 1.5; var gate = this.getObjectByName('GateGroup'); var lastGate = gate; var lastLastGate = gate; var lastGateDirection = 'right'; var distanceBetweenGates = 3.25; var tuneGateRangeX = [-1, 1]; var tuneGateDistanceX = 1.5; var tuneGateRangeZ = [-0.5, 0.5]; var nextGatePosition = generateNextGatePosition(); var ground = this.getObjectByName('Ground'); var grounds = [ground]; var groundLength = ground.getObjectByName('GroundPlane').scale.y; // Angle in degrees var 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 = [...groundAngles]; var lastCleanupAt = 0; var cleanupObjects = []; var tuneCleanupEveryDelta = 1000; var tuneCleanupBehindSkier = 15 var paused = false; // Mode is 'race' or 'infinite' var mode = 'infinite'; var time = 0; 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'); function update(event) { // Don't do anything if the game's paused if (paused) return; 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); // 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) this.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; this.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; this.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]; } } // 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; this.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; this.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'; } function initStartMenuGui() { showGui(startMenu); } function closeStartMenuGui() { hideGui(startMenu); } function initGameplayGui(gameMode) { showGui(pauseMenu); hideGui(resumeMenu); if (gameMode === 'race') showGui(raceTimeMenu); else hideGui(raceTimeMenu); } function closeGameplayGui() { hideGui(pauseMenu); hideGui(resumeMenu); hideGui(raceTimeMenu); } function controllerOpenStartMenu() { // Open with the start menu initStartMenuGui(); closeGameplayGui(); paused = true; } // 'race' or 'infinite' function controllerOpenGameplay(gameMode) { // TODO: start the game from scratch mode = gameMode; initGameplayGui(gameMode); closeStartMenuGui(); paused = false; } // Play game race mode if (playRaceGameButton) { playRaceGameButton.addEventListener('click', () => { controllerOpenGameplay('race'); }); } // Play game infinite mode if (playInfiniteGameButton) { playInfiniteGameButton.addEventListener('click', () => { controllerOpenGameplay('infinity'); }); } // 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(); }); } // Start the game if (startMenu) { // Open with the start menu controllerOpenStartMenu(); } else { // Test mode – start without the menus } // 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);