Viewing Program

Program Data

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

Title	Jump: The Game (3D) (v.1.1.1)
ID	5713600800538624
Created	8 months ago, 1713114930213
Updated	8 months ago, 1713203710236
Code	<html> <!-- Note: Jump 2 is coming soon, it will be faster, more efficient, harder, cooler, and have an actual storyline! Also, (this is for you, Dat) it will be WebGL only. Credit to Dipper98 for Cannon and Babylon.js tutorial https://www.khanacademy.org/computer-programming/babylonjscannonjs-tutorial/4610446517256192 The purple block is a checkpoint, reach it and it will activate. If Oh Noes gets confused, restart the program until it works. He will go away eventually, unless your computer is a potato. Also, if the text is not there in the home screen, restart the program. And yes, the Arctic is back! stay tuned for more! It is not finished yet, https://www.khanacademy.org/computer-programming/arctics-new-subscription-page/5615112867201024 The game may also pause at random points, just restart it. Fix log: 1.0.1: Fixed text bug 1.1.1: Fixed bugginess Vote log: 9 PM on April 14, 2024: 3rd page of the Hot list, 1 vote (dun dun duuunnnn) 10 AM on April 15, 2024: 4th on the Hot list, 18 votes --> <head> <meta charset="utf-8"> <title>Jump: The Game (3D) (v.1.1.1)</title> <script src='https://cdn.jsdelivr.net/npm/babylonjs@6.23.0/babylon.min.js'></script> <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=Permanent+Marker&display=swap" rel="stylesheet"> <script> var lose = false; </script> <style> .permanent-marker-regular { font-family: "Permanent Marker", cursive; font-weight: 400; font-style: normal; } body { overflow: hidden; margin: 0; background: gray; font-family: "Permanent Marker", cursive; text-align: center; } #renderCanvas { width: 600px; height: 600px; } #p {position:absolute; top: 20; font-size: 1em; visibility: visible;} .g{ border-color: white; text-align: center; } #div{ position:absolute; left: 300; top: 250; } #play{ position:absolute; left: 80; top: 300; border-color: white; background-color: black; color: white; width: 75%; height: 20%; font-size: 50; } #play:hover{ box-shadow: black 2px 2px; } </style> <script> var setKALoopTimeout = function() { this[["KAInfiniteLoopSetTimeout"]](Infinity); }; setKALoopTimeout(); </script> </head> <body><img style="position:absolute; left:-25px; top:430px;"src="https://www.khanacademy.org/computer-programming/my-logo/5625803381063680/4506918464438272.png"> <p id="p"></p> <button id="play" onclick="launch()">Play</button> <canvas id="renderCanvas"></canvas> <script> // document.getElementById("p").style.display = "none"; var checkX = 0; var checkY = 0; var checkZ = 0; var sunX = 0; var sunY = 50; var sunZ = 35 var x = 0; var DieCount = 0; var canPlay = false; function launch() { canPlay = true; document.getElementById("play").remove(); document.getElementById("p").style.left = "-30px"; document.getElementById("p").style.fontSize = "20px"; } /* / window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas'); canvas.getContext = function(type, data) { data.preserveDrawingBuffer = true; return HTMLCanvasElement.prototype.getContext.call(canvas, type, data); } const engine = new BABYLON.Engine(canvas, true); function run(){ const scene = new BABYLON.Scene(engine); const gravityVector = new BABYLON.Vector3(0,-20,0); scene.enablePhysics(gravityVector, new BABYLON.CannonJSPlugin()); var keys = {}; window.addEventListener('keydown', function(e) { keys[e.key] = true; }); window.addEventListener('keyup', function(e) { keys[e.key] = false; }); scene.clearColor = new BABYLON.Color3(0, 0.804, 1); const player = BABYLON.MeshBuilder.CreateSphere("player", {segments: 12, diameter: 2}, scene); player.physicsImpostor = new BABYLON.PhysicsImpostor(player, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 1, restitution: 0.9}, scene); let canJump = true; let cooldown = 50; let inCooldown = false; //From now on all the code will go here //Creates the camera //const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -5), scene); const camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(player.position.x, 10, player.position.z), scene); camera.attachControl(canvas, true); //Creates the light const light = new BABYLON.PointLight('light', new BABYLON.Vector3(0.3, 100, 0), scene); const light2 = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0.3, -2, 0), scene); //Make the cube function cubeCollide(p1X, p1Y, p1Z, p1W, p1H, p1D, p2X, p2Y, p2Z, p2W, p2H, p2D){ / p1X += p1W / 2; p1Y += p1H / 2; p1Z += p1D / 2; p2X += p2W / 2; p2Y += p2H / 2; p2Z += p2D / 2; / return(p1X + p1W / 2 > p2X - p2W && p1X - p1W / 2 < p2X + p2W && p1Y + p1H / 2 > p2Y - p2H && p1Y - p1H / 2 < p2Y + p2H && p1Z + p1D / 2 > p2Z - p2D && p1Z - p1D / 2 < p2Z + p2D); } function createBox(x, y, z, w, h, d, xRot, yRot, zRot, clr,m){ const Box = BABYLON.MeshBuilder.CreateBox('Box', {width: w, height: h, depth: d}, scene); Box.material = new BABYLON.StandardMaterial("BoxMaterial", scene); Box.material.diffuseColor = clr; Box.position = new BABYLON.Vector3(x, y, z); Box.rotation = new BABYLON.Vector3(xRot, yRot, zRot); Box.physicsImpostor = new BABYLON.PhysicsImpostor(Box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: m, restitution: 0.5}, scene); } function createSphere(x, y, z, s, d, clr){ const Sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {segments: s, diameter: d}, scene); Sphere.material = new BABYLON.StandardMaterial("sphereMaterial", scene); Sphere.material.diffuseColor = clr; Sphere.position = new BABYLON.Vector3(x, y, z); Sphere.physicsImpostor = new BABYLON.PhysicsImpostor(Sphere, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 1, restitution: 0.5}, scene); } function createCylinder(x, y, z, h, dt, db, xRot, yRot, zRot, clr, m){ const Cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: h, diameterTop:dt, diameterBottom:db}, scene); Cylinder.material = new BABYLON.StandardMaterial("cylinderMaterial", scene); Cylinder.material.diffuseColor = clr; Cylinder.position = new BABYLON.Vector3(x, y, z); Cylinder.rotation = new BABYLON.Vector3(xRot, yRot, zRot); Cylinder.physicsImpostor = new BABYLON.PhysicsImpostor(Cylinder, BABYLON.PhysicsImpostor.CylinderImpostor, {mass: m, restitution: 0.5}, scene); } function createTorus(x, y, z, d, t, xRot, yRot, zRot, clr){ const Torus = BABYLON.MeshBuilder.CreateTorus("torus", {diameter:d, thickness:t}, scene); Torus.material = new BABYLON.StandardMaterial("cylinderMaterial", scene); Torus.material.diffuseColor = clr; Torus.position = new BABYLON.Vector3(x, y, z); Torus.rotation = new BABYLON.Vector3(xRot, yRot, zRot); } createBox(0, -1.5, 0, 10, 0.1, 10, 0, 0.5, 0, new BABYLON.Color3(0.5, 0.5, 0.5),0); createSphere(1, 2, 0, 10, 1, new BABYLON.Color3(0.5, 0.9, 0.5)); createCylinder(0, 4, 1, 1, 1, 1, 0, 0, 0, new BABYLON.Color3(0.9, 0.5, 0.5)); createBox(0, -1, 1.5, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 0, 3, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 1, 4.5, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 2, 6, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 2, 8, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 2, 12, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 12, 8, 1, 0.5, 1, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 3, 10, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 3, 12, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 3, 14, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 18, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 22, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 26, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 6,30, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 4, 16, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 26, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.9, 0.5, 0.9), 0); createBox(0, 6,30, 1, 0.5, 2, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 4, 33, 1, 0.5, 0.5, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 34, 1, 0.5, 0.5, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 6, 35, 1, 0.5, 0.5, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 7, 37, 1, 0.5, 0.5, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 40, 1, 0.5, 1.5, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 5, 40, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(0, 6, 45, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(2, 7, 49, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 3, 55, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 4, 60, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 5, 65, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 6, 70, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 7, 75, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 8, 80, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 9, 85, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 10, 90, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 1, 93, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, -3, 95, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createBox(3, 0, 98, 1, 0.5, 3, 0, 0, 0, new BABYLON.Color3(0.5, 0.9, 0.9), 0); createSphere(0.5, 12, 0.5, 10, 1, new BABYLON.Color3(0.5, 0.9, 0.5)); createCylinder(0, 14, -1.5, 1, 1, 1, 0, 0, 0, new BABYLON.Color3(0.9, 0.5, 0.5)); scene.registerAfterRender(function() { x++; //Put all of your animations in here! createBox(sunX, sunY, sunZ, 5, 5, 5, 0, 0, 0, new BABYLON.Color3(0.9, 0.9, 0.2), 0); var vel = player.physicsImpostor.getLinearVelocity(); player.physicsImpostor.setLinearVelocity(vel.scale(.95)); var forward = camera.getFrontPosition(1).subtract(camera.position); forward.y = 0; forward = forward.normalize().scale(0.7); var backward = BABYLON.Vector3.TransformCoordinates(forward, BABYLON.Matrix.RotationY(Math.PI)); var left = BABYLON.Vector3.TransformCoordinates(forward, BABYLON.Matrix.RotationY((3 Math.PI) / 2)); var right = BABYLON.Vector3.TransformCoordinates(forward, BABYLON.Matrix.RotationY(Math.PI / 2)); if (keys.w) { player.applyImpulse(forward, player.getAbsolutePosition()); } if (keys.s) { player.applyImpulse(backward, player.getAbsolutePosition()); } if (keys.a) { player.applyImpulse(left, player.getAbsolutePosition()); } if (keys.d) { player.applyImpulse(right, player.getAbsolutePosition()); } if (keys.p){ player.position = new BABYLON.Vector3(7, 7, 0); } if(keys.r){ var pointC = true; } else {var pointC = false} camera.position = new BABYLON.Vector3(player.position.x, player.position.y+0.5, player.position.z); if (keys[' '] && canJump){ player.applyImpulse(new BABYLON.Vector3(0, 10, 0), player.getAbsolutePosition()); canJump = false; inCooldown = true; } if (inCooldown){ cooldown--; } if (cooldown <= 0){ inCooldown = false; canJump = true; cooldown = 50; } var checkpoint =[ 0, 5, 26, 1, 0.5, 2] if(cubeCollide(player.position.x,player.position.y,player.position.z,2,2,2,checkpoint[0],checkpoint[1],checkpoint[2],checkpoint[3],checkpoint[4],checkpoint[5])) {checkX = checkpoint[0]; checkY = checkpoint[1],checkZ = checkpoint[2]} camera.position = new BABYLON.Vector3(player.position.x, player.position.y+0.5, player.position.z); document.addEventListener("click", pointerLock); var a = player.position.z * 1; if(!pointC) { document.getElementById('p').innerHTML = "Points: " + parseInt(a); document.getElementById('p').style.left = 225; } else {document.getElementById('p').innerHTML = "Jump: The Game"; document.getElementById('p').style.left = 100 + "px"} console.log(parseInt(a)); if(player.position.y < -3) {lose=true} if(lose && DieCount < 3) { player.position.x = checkX; player.position.y = checkY+1.5; player.position.z = checkZ; lose = false; DieCount = DieCount +1; } if(player.position.y < -3 && DieCount == 3 \|\| player.position.y < -3&& DieCount > 3) {document.getElementById("p").innerHTML = "You Lose! \n Points: " + parseInt(a); document.getElementById("p").style.left = "50px" } if(a > 95) {document.getElementById("p").innerHTML = "You Win! \n Points: (who cares)" ; document.getElementById("p").style.left = "50px" } }); function pointerLock(){ canvas.requestPointerLock(); } return scene; } const scene = run(); engine.runRenderLoop(function(){ if(DieCount != 3 && canPlay \|\| DieCount < 3 && canPlay) { scene.render(); } }); if(!canPlay) { document.getElementById("p").innerHTML = "Jump!"; document.getElementById("p").style.left = "155px"; document.getElementById("p").style.top= "-20px"; document.getElementById("p").style.fontSize = "100px"; } else if (canPlay) { document.getElementById("play").remove(); document.getElementById("p").style.left = "50px"; document.getElementById("p").style.top= "-50px"; document.getElementById("p").style.fontSize = "50px"; } else {} //Make the cube }); </script> <script> </script> <script src = "https://cdn.jsdelivr.net/npm/cannon@0.6.2/build/cannon.min.js"></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvQ1Y-TCgw
Votes	24
Spin-Offs	3
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Arctic (offline)
Author Name	arcticka
Author ID	kaid_532204053528121557052555
Author Profile Access	COACH

Archive Data

Added	8 months ago, 1713206001844
Updated	8 months ago, 1713206001844
Source Deleted	unknown