{"components":[{"name":"App","type":"svelte","source":"\n\n\t

\n"},{"name":"MainScene","type":"svelte","source":"\n\n\n\n\n\n\n"},{"name":"ArcadeMachineScene","type":"svelte","source":"\n\n\n\n\n\t\n\n\t\n\t\t\n\t\n\n\t{#if nodes && materials}\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t\t\t{#if $tipsOpacity > 0}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{/if}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\t\t{#if $tipsOpacity > 0}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{/if}\n\t\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t{/if}\n\n\t\n\t{#if nodes}\n\t\t\n\t{/if}\n\n\t\n\t\n\n\t\n\t\n\n\t\n\t\n\n\n\n\n\n\t\n\t\n\n"},{"name":"useTimeout","type":"js","source":"import { onDestroy } from 'svelte';\nexport const useTimeout = () => {\n const timeoutHandlers = new Set();\n const timeout = (callback, ms) => {\n const handler = setTimeout(callback, ms);\n timeoutHandlers.add(handler);\n };\n onDestroy(() => {\n timeoutHandlers.forEach((handler) => clearTimeout(handler));\n });\n return {\n timeout\n };\n};\n"},{"name":"state","type":"js","source":"import { derived, get, writable } from 'svelte/store';\nimport { Color } from 'three';\nimport { levels } from './levels';\nconst state = writable('intro');\nconst levelIndex = writable(0);\nconst score = writable(0);\nconst gameOver = writable(false);\nconst playerPosition = writable(0);\nconst ballPosition = writable({\n x: 0,\n z: 0\n});\nconst baseColor = derived(state, (state) => {\n if (state === 'outro')\n return 'green';\n return 'red';\n});\nexport const gameState = {\n state,\n levelIndex,\n score,\n gameOver,\n playerPosition,\n ballPosition,\n baseColor\n};\nexport const restart = () => {\n reset();\n gameState.state.set('menu');\n};\nexport const reset = () => {\n gameState.state.set('intro');\n gameState.levelIndex.set(0);\n gameState.gameOver.set(false);\n gameState.score.set(0);\n gameState.playerPosition.set(0);\n gameState.ballPosition.set({\n x: 0,\n z: 0\n });\n};\nexport const nextLevel = () => {\n if (get(gameState.levelIndex) < levels.length - 1) {\n gameState.levelIndex.update((levelIndex) => levelIndex + 1);\n gameState.state.set('level-loading');\n }\n else {\n gameState.state.set('outro');\n }\n};\n/**\n * Optionally resets the game and starts it again\n */\nexport const startGame = () => {\n gameState.state.set('level-loading');\n};\nexport const blinkClock = writable(0);\n/**\n * Used for the light that emits the screen color and luminosity\n */\nexport const averageScreenColor = writable(new Color());\n"},{"name":"levels","type":"js","source":"export const levels = [\n {\n rows: 1,\n columns: 4\n },\n {\n rows: 1,\n columns: 8\n },\n {\n rows: 2,\n columns: 4\n },\n {\n rows: 1,\n columns: 12\n },\n {\n rows: 2,\n columns: 8\n },\n {\n rows: 3,\n columns: 6\n },\n {\n rows: 3,\n columns: 12\n },\n {\n rows: 4,\n columns: 16\n },\n {\n rows: 5,\n columns: 12\n },\n {\n rows: 5,\n columns: 16\n }\n];\n"},{"name":"stores","type":"js","source":"import { writable } from 'svelte/store';\nexport const gameScene = writable(undefined);\nexport const arcadeMachineScene = writable(undefined);\nexport const gameTexture = writable(undefined);\n"},{"name":"GameScene","type":"svelte","source":"\n\n\n\n\n\t\n\n\t\n\t\n\n\t\n\n\t\n\n\t\n\n\t{#if showIntro}\n\t\t\n\t{:else if showOutro}\n\t\t\n\t{:else}\n\t\t\n\t\t\n\t\t\n\t\t{#if showLevel}\n\t\t\t{#key $levelIndex}\n\t\t\t\t\n\t\t\t{/key}\n\t\t{/if}\n\t\t\n\t{/if}\n\n"},{"name":"Arena","type":"svelte","source":"\n\n\n\t\n\n\n\n\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\n\n\n\n"},{"name":"Ball","type":"svelte","source":"\n\n{#if $state === 'playing'}\n\t\n{:else if $state === 'game-over'}\n\t\n{:else}\n\t\n{/if}\n"},{"name":"BallOut","type":"svelte","source":"\n\n\n\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\n\n"},{"name":"DynamicBall","type":"svelte","source":"\n\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\n"},{"name":"config","type":"js","source":"export const arenaHeight = 8;\nexport const arenaWidth = 8;\nexport const arenaDepth = 1;\nexport const arenaBorderWidth = 0.2;\nexport const playerToBorderDistance = 0.5;\nexport const playerHeight = 0.2;\nexport const playerWidth = 2;\nexport const playerDepth = 1;\nexport const playerSpeed = 0.4;\nexport const blockGap = 0.1;\n"},{"name":"StaticBall","type":"svelte","source":"\n\n\n\t\n\t\n\n"},{"name":"Intro","type":"svelte","source":"\n\n\n\n\n\t\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\n\n\n{#if showPressSpaceToStart}\n\t\n\t\t\n\t\n{/if}\n"},{"name":"ThrelteLogo","type":"svelte","source":"\n\n\n\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\n"},{"name":"Level","type":"svelte","source":"\n\n{#each blocks as block, index (index)}\n\t onHit(block)} />\n{/each}\n"},{"name":"Block","type":"svelte","source":"\n\n\n\n\n\t\n\t\t dispatch('hit')}\n\t\t\tmass={1}\n\t\t>\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n"},{"name":"Outro","type":"svelte","source":"\n\n\n\n\n\t\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\n\n\n{#if showPressSpaceToStart}\n\t\n\t\t\n\t\n{/if}\n"},{"name":"Player","type":"svelte","source":"\n\n\n\n{#if player && player.geometry}\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n{/if}\n"},{"name":"UI","type":"svelte","source":"\n\n\n\t\n\t{#key `${[($mainUiTexts?.size.width ?? 6.5).toString(), ($mainUiTexts?.size.height ?? 2.5).toString()].join('')}`}\n\t\t\n\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\n\t{/key}\n\n\t\n\t\n\n\n\n\n\n\n\n\n\n"},{"name":"Intro","type":"svelte","source":"\n\n\n\n\n\t\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\n\n\n{#if showPressSpaceToStart}\n\t\n\t\t\n\t\n{/if}\n"},{"name":"state","type":"js","source":"import { derived, get, writable } from 'svelte/store';\nimport { Color } from 'three';\nimport { levels } from './levels';\nconst state = writable('intro');\nconst levelIndex = writable(0);\nconst score = writable(0);\nconst gameOver = writable(false);\nconst playerPosition = writable(0);\nconst ballPosition = writable({\n x: 0,\n z: 0\n});\nconst baseColor = derived(state, (state) => {\n if (state === 'outro')\n return 'green';\n return 'red';\n});\nexport const gameState = {\n state,\n levelIndex,\n score,\n gameOver,\n playerPosition,\n ballPosition,\n baseColor\n};\nexport const restart = () => {\n reset();\n gameState.state.set('menu');\n};\nexport const reset = () => {\n gameState.state.set('intro');\n gameState.levelIndex.set(0);\n gameState.gameOver.set(false);\n gameState.score.set(0);\n gameState.playerPosition.set(0);\n gameState.ballPosition.set({\n x: 0,\n z: 0\n });\n};\nexport const nextLevel = () => {\n if (get(gameState.levelIndex) < levels.length - 1) {\n gameState.levelIndex.update((levelIndex) => levelIndex + 1);\n gameState.state.set('level-loading');\n }\n else {\n gameState.state.set('outro');\n }\n};\n/**\n * Optionally resets the game and starts it again\n */\nexport const startGame = () => {\n gameState.state.set('level-loading');\n};\nexport const blinkClock = writable(0);\n/**\n * Used for the light that emits the screen color and luminosity\n */\nexport const averageScreenColor = writable(new Color());\n"}]}

Playground – Core – Three Arcade Game