Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Stack \| 3D Game
ID	6373007871754240
Created	3 years ago, 1666099220851
Updated	3 years ago, 1666189977869
Code	<!DOCTYPE html> <html> <!-- Sub? https://www.khanacademy.org/cs/i/6689856021905408 Three.js: 3D Library Cannon.js: Physics library Thumbnail.js: Thumbnail Credits belong where they are due. Snippets of code were copied from a tutorial on youtube. --> <head> <meta charset="utf-8"> <title>Stack \| 3D Game</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet"> </head> <body> <style> body { margin: 0; color: white; font-family: sans-serif; font-family: 'Inter', sans-serif; overflow: hidden; } #intro { position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background-color: rgba(20, 20, 20, 0.6); } #intro .content { width: 350px; } #score { position: absolute; font-weight: 4rem; left: 30px; bottom: 30px; } </style> <div id="intro"> <div class="content"> <p>Stack the blocks on top of each other</p> <p>Press any key to begin =)</p> </div> </div> <h1 id="score">0</h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js'></script> <script type="module"> let camera, scene, renderer, world; let lTime = 0; let stack = [], fall = []; let play = true, end = false; const score = document.getElementById("score"); const intro = document.getElementById("intro"); // Initialize CannonJS world = new CANNON.World(); world.gravity.set(0, -10, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 40; // Initialize ThreeJs const width = 10; const height = width; camera = new THREE.OrthographicCamera( width / -2, width / 2, height / 2, height / -2, ); camera.position.set(4, 4, 4); camera.lookAt(0, 0, 0); scene = new THREE.Scene(); //Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const dirLight = new THREE.DirectionalLight(0xffffff, 0.6); dirLight.position.set(10, 20, 0); scene.add(dirLight); function startGame() { play = false; end = false; stack.length = 0; if (intro) intro.style.display = "none"; if (world) { while (world.bodies.length > 0) { world.remove(world.bodies[0]); } } if (scene) { while (scene.children.find((c) => c.type == "Mesh")) { const mesh = scene.children.find((c) => c.type == "Mesh"); scene.remove(mesh); } addLayer(0, 0, 3, 3); addLayer(-10, 0, 3, 3, "x"); } if (camera) { camera.position.set(4, 4, 4); } } function addLayer(x, z, width, depth, direction) { const y = stack.length; const layer = generateBox(x, y, z, width, depth, false); layer.direction = direction; stack.push(layer); } function addOverhang(x, z, width, depth) { const y = (stack.length - 1); const overhang = generateBox(x, y, z, width, depth, true); fall.push(overhang); } function generateBox(x, y, z, width, depth, falls) { const geometry = new THREE.BoxGeometry(width, 1, depth); const material = new THREE.MeshLambertMaterial({ color: `rgb(84,43,206)`, //wireframe:true }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); scene.add(mesh); const shape = new CANNON.Box( new CANNON.Vec3(width / 2, 1 / 2, depth / 2) ); let mass = falls; mass = width / 3; mass = depth / 3; const body = new CANNON.Body({mass, shape}); body.position.set(x, y, z); world.addBody(body); return { threejs: mesh, cannonjs: body, width, depth }; } function cutBox(topLayer, overlap, size, delta) { const direction = topLayer.direction; const newWidth = direction == "x" ? overlap : topLayer.width; const newDepth = direction == "z" ? overlap : topLayer.depth; topLayer.width = newWidth; topLayer.depth = newDepth; topLayer.threejs.scale[direction] = overlap / size; topLayer.threejs.position[direction] -= delta / 2; topLayer.cannonjs.position[direction] -= delta / 2; const shape = new CANNON.Box( new CANNON.Vec3(newWidth / 2, 1 / 2, newDepth / 2) ); topLayer.cannonjs.shapes = []; topLayer.cannonjs.addShape(shape); } function eventHandler() { if (play) startGame(); else splitBlock(); } function splitBlock() { if (end) return; const topLayer = stack[stack.length - 1]; const previousLayer = stack[stack.length - 2]; const direction = topLayer.direction; const size = direction == "x" ? topLayer.width : topLayer.depth; const delta = topLayer.threejs.position[direction] - previousLayer.threejs.position[direction]; const overlap = size - Math.abs(delta); if (overlap > 0) { cutBox(topLayer, overlap, size, delta); const blockShift = (overlap / 2 + Math.abs(delta) / 2) * Math.sign(delta); const overhangX = direction == "x" ? topLayer.threejs.position.x + blockShift : topLayer.threejs.position.x; const overhangZ = direction == "z" ? topLayer.threejs.position.z + blockShift : topLayer.threejs.position.z; const overhangWidth = direction == "x" ? Math.abs(delta) : topLayer.width; const overhangDepth = direction == "z" ? Math.abs(delta) : topLayer.depth; addOverhang(overhangX, overhangZ, overhangWidth, overhangDepth); const nextX = direction == "x" ? topLayer.threejs.position.x : -10; const nextZ = direction == "z" ? topLayer.threejs.position.z : -10; const newWidth = topLayer.width; const newDepth = topLayer.depth; const nextDirection = direction == "x" ? "z" : "x"; if (score) score.innerText = stack.length - 1; addLayer(nextX, nextZ, newWidth, newDepth, nextDirection); } else { missedTheSpot(); } } function missedTheSpot() { const topLayer = stack[stack.length - 1]; addOverhang( topLayer.threejs.position.x, topLayer.threejs.position.z, topLayer.width, topLayer.depth ); world.remove(topLayer.cannonjs); scene.remove(topLayer.threejs); end = true; return; } function animation(time) { if (lTime) { const timePassed = time - lTime; const speed = 0.008; const topLayer = stack[stack.length - 1]; const previousLayer = stack[stack.length - 2]; const play = !end; if (play) { topLayer.threejs.position[topLayer.direction] += speed * timePassed; topLayer.cannonjs.position[topLayer.direction] += speed * timePassed; } if (topLayer.threejs.position[topLayer.direction] > 10) { missedTheSpot(); } if (camera.position.y < 1 * (stack.length - 2) + 5) { camera.position.y += speed * timePassed; } world.step(timePassed / 500); fall.forEach((element) => { element.threejs.position.copy(element.cannonjs.position); element.threejs.quaternion.copy(element.cannonjs.quaternion); }); renderer.render(scene, camera); } lTime = time; } addLayer(0, 0, 3, 3); renderer = new THREE.WebGLRenderer(); renderer.setSize(600, 600); renderer.setAnimationLoop(animation); document.body.appendChild(renderer.domElement); window.addEventListener("mousedown", eventHandler); window.addEventListener("keydown", eventHandler); </script> <script type = 'thumbnail.js' name = 'thumbnail'> const img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/640px-Stack_Overflow_icon.svg.png') function title(x,y,s) { pushMatrix(); translate(x,y); scale(s); strokeCap(ROUND); strokeWeight(2); stroke(26, 0, 128,150); //S fill(16, 0, 191,50); beginShape(); vertex(114,100); vertex(95,108); vertex(93,94); vertex(88,96); vertex(88,110); vertex(113,113); vertex(116,155); vertex(76,149); vertex(76,119); vertex(87,125); vertex(87,118); vertex(74,113); vertex(72,86); vertex(108,72); bezierVertex(113,79,115,93,114,100); endShape(); //T fill(34, 128, 204,50); beginShape(); vertex(166,77); vertex(118,83); vertex(118,94); vertex(133,95); vertex(134,154); vertex(150,163); vertex(147,96); vertex(166,99); vertex(166,77); endShape(); //A fill(56, 0, 161,50); beginShape(); vertex(182,91); vertex(209,73); vertex(226,147); vertex(206,153); vertex(205,144); vertex(193,145); bezierVertex(193,153,190,157,189,158); vertex(168,164); bezierVertex(170,142,179,106,182,91); endShape(); fill(240); triangle(193,137,196,110,205,135); //C fill(0, 82, 140,50); beginShape(); vertex(273,57); vertex(226,73); bezierVertex(226,103,233,128,237,137); vertex(278,134); vertex(273,111); vertex(258,118); vertex(252,77); vertex(278,79); bezierVertex(278,65,275,58,273,57); endShape(); //K fill(88, 49, 143,50); beginShape(); vertex(318,79); vertex(307,68); vertex(291,141); vertex(304,137); vertex(307,121); vertex(317,141); vertex(340,146); vertex(318,107); vertex(355,83); vertex(330,82); vertex(315,92); vertex(318,79); endShape(); popMatrix(); } draw = () => { background(240); image(img, 0, 0, 600,600) fill(240,150) rect(300,300,600,600) title(-70,90,1.8) } </script> <canvas style = 'display: none;' name = 'ski'></canvas> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.5.1/ski.js'></script> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/thumbnail.js@1.0.0/main.js'></script> <!-- <script> --> </body> </html>
Folds	25,54,56,61,68,307,309,420
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOOy-IapCww
Votes	203
Spin-Offs	32
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Astro
Author Name	astro.ka
Author ID	kaid_4391100538307580650220212
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739457172274
Updated	10 months ago, 1739457182091
Source Deleted	unknown