Viewing Program

Program Data

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

Title	LeafersCraft v0.3 [Obby]
ID	5189226224271360
Created	1 days ago, 1743987304078
Updated	1 days ago, 1743987425684
Code	<!DOCTYPE html> <!-- LeafersCraft v0.3 Can you make it to the top of the platformer obby in SURVIVAL MODE? If you decide to make a platformer obby level and want to get featured in LeafersCraft v0.4, please let me know in the Tips & Thanks by sending a link to: -A spin-off of this program containing the Save Code along with difficulty level /10. 😊 Enjoyed this program? Consider subscribing to my Khan Academy website here: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 You can let me know how difficult the platformer obby was in the Tips & Thanks on Khan Academy, and whether or not you would like to see LeafersCraft become more of a platformer game w/ levels or building game w/ inventory, mobs, etc. 1340 lines of code HTML5, CSS3, JavaScript, JavaScript's WebGL2 API Released 8:55PM Sunday April 6 2025 --> <html lang="en"> <head> <meta http-equiv="Content-Language" content="en_US" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LeafersCraft v0.3 [Obby]</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=Jersey+20&family=Tiny5&family=VT323&display=swap" rel="stylesheet"> <style> html, body { background-image: linear-gradient(-3deg, rgb(161, 196, 157), rgb(2, 105, 38), rgb(1, 13, 0)); height: 100%; margin: 0; overflow: hidden; font-family: 'Jersey 20', sans-serif; } :focus { outline: 1px solid lime; } .scene { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #menuScene, #saveScene { background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; padding: 20px; box-sizing: border-box; } button { cursor: pointer; margin: 5px 0; padding: 15px; width: 200px; transition: all 0.1s; background: rgb(189, 189, 189); border: 2px solid #000; border-radius: 0px; transform: scale(1.2, 1); font-family: 'VT323', sans-serif; font-size: 22px; box-shadow: inset -2px -2px 0px rgb(92, 92, 92), inset 2px 2px 0px rgba(230, 230, 230); color: rgb(94, 94, 94); letter-spacing: 0px; } button:hover { background-color: rgb(9, 148, 25); color:rgb(217, 217, 217); box-shadow: inset -2px -2px 0px rgb(2, 97, 11), inset 2px 2px 0px rgba(7, 186, 25); } button:active { box-shadow: inset -2px -4px rgba(0, 0, 0, 0.4), inset 2px 2px rgba(255, 255, 255, 0.5); } textarea { width: 100%; font-family: monospace; padding: 5px; background-color: #343; color: #FFF; border: 1px solid #666; transition: all 0.1s; } textarea:focus { border: 1px solid #FFF; } #gameScene { background: #000; } canvas { display: block; width: 100%; height: 100%; } #fpsElem { position: absolute; top: 0; right: 0; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px; font-family: monospace; } #inventory { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 1000; } #healthBar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: 300px; height: 25px; background: #222; border: 2px solid #222; z-index: 1001; } #healthFill { height: 100%; background: rgb(0, 176, 35); width: 100%; } a { color: #90CAF9; text-decoration: none; } a:hover { text-decoration: none; border-bottom: 1px solid #90CAF9; } </style> </head> <body> <div id="menuScene" class="scene" style="display: block;"> <h1 style='text-shadow: 0px 4px 0px rgba(0,255,0,0.25); margin-bottom:0px;margin-top:0px;letter-spacing: 1px; transform: scale(1,1); font-size: 10vw; font-family: "Jersey 20", sans-serif; color: rgb(123, 209, 134);'> LEAFERS<span style='color: rgb(137, 245, 209);'>CRAFT</span><sup style='font-family: "VT323", monospace; font-size: 3vw;'>v0.3</sup> </h1> <button id="startGameBtn">Start Creative</button> <br/> <button id="startSurvivalBtn">Start Survival</button> <br/> <button onclick='showScene(howScene);'>How to Play</button> <h3 style='margin: 5px 0;'>Load Save</h3> <textarea id="loadData" rows="5" placeholder="Paste saved game data here"></textarea> <button id="loadGameBtn">Load Game</button> </div> <div id='howScene' class='scene' style='text-align:center;'> <p style='font-family:monospace;line-height:24px;color:#FFF;margin: 30px;'> WASD to move. In Creative: Q or SHIFT to fly down, Z or SPACE to fly up.<br> In Survival: SPACE to jump, gravity and fall damage apply.<br> Use mouse to look around. Press Esc to pause.<br> Inventory keys 1-9 to change block color in Creative mode, you can use Creative mode as a level builder for a platformer game on Survival.<br> Once loading is finished, click on the canvas to lock the cursor.<br>If you die in Survival mode, you will respawn.<br><br> LeafersCraft is a <em>WebGL2</em> building game made by Eldiiar Bekbolotov, also known as <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>@LeaferStudios</a> </p> <button onclick='showScene(menuScene);'>Back to Menu</button> </div> <div id="gameScene" class="scene"> <div id="healthBar" style="display: none;"> <div id="healthFill"></div> </div> <canvas id="glcanvas" tabindex="0"></canvas> <div id="cursor" style='user-select:none;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2em; color: white; pointer-events: none; z-index: 10000;'> +</div> <div id="coords" style='position: absolute;top: 0;left: 0;padding: 5px;font-size: 1em;color: white;background: rgba(0, 0, 0, 0.5);z-index: 10000;font-family: "VT323", monospace;'> x: 0, y: 0, z: 0</div> <div id='fpsElem'></div> <div id="pauseMenu" style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 11000;'> <button id="resumeBtn" style='margin: 10px;'>Resume Game</button> <button id="pauseSaveBtn" style='margin: 10px;'>Save Game</button> <button id="backToMenuBtn" style='margin: 10px;'>Back to Menu</button> </div> </div> <div id="saveScene" class="scene"> <h1>Save Game</h1> <textarea id="saveData" rows="5" placeholder="Save data will appear here"></textarea> <button id="copyBtn" style='margin: 10px;'>Copy to Clipboard</button> <button id="saveBackBtn" style='margin: 10px;'>Back to Game</button> </div> <div id="loading" style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 2em; z-index: 9999;visibility:hidden;'> Loading...</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> <script type> var blockEdits = {"0,27,0":{"x":1,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"0,7,10":{"x":0,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-1,7,10":{"x":-1,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-2,7,10":{"x":-2,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,7,10":{"x":-3,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"2,7,10":{"x":2,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"2,7,9":null,"-4,7,10":{"x":-4,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"3,7,10":{"x":3,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,7,10":{"x":4,"y":7,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,7,9":{"x":4,"y":7,"z":9,"color":[0.5,0.5,0.5,1],"type":"custom"},"5,7,8":null,"4,7,8":{"x":4,"y":7,"z":8,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,7,7":{"x":4,"y":7,"z":7,"color":[0.5,0.5,0.5,1],"type":"custom"},"3,7,6":null,"4,6,6":{"x":4,"y":6,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,7,6":{"x":4,"y":7,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,5":{"x":4,"y":8,"z":5,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,4":{"x":4,"y":8,"z":4,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,3":{"x":4,"y":8,"z":3,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,2":{"x":4,"y":8,"z":2,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,1":{"x":4,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"3,8,1":{"x":3,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"2,8,1":{"x":2,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"1,7,1":{"x":1,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"1,8,1":{"x":1,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"0,7,1":{"x":0,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"0,8,1":{"x":0,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-2,7,1":{"x":-2,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-1,7,1":{"x":-1,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-1,8,1":{"x":-1,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-2,8,1":{"x":-2,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,1":{"x":-4,"y":6,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,5,1":{"x":-3,"y":5,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,6,0":null,"-2,6,1":{"x":-2,"y":6,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,6,1":{"x":-3,"y":6,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,7,1":{"x":-3,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,8,1":{"x":-3,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,1":{"x":-4,"y":7,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,1":{"x":-4,"y":8,"z":1,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,2":{"x":-4,"y":6,"z":2,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,3":{"x":-4,"y":6,"z":3,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,4":{"x":-4,"y":7,"z":4,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,5,4":{"x":-4,"y":5,"z":4,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,4":{"x":-4,"y":6,"z":4,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,5":{"x":-4,"y":6,"z":5,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,2":{"x":-4,"y":7,"z":2,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,3":{"x":-4,"y":7,"z":3,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,5":{"x":-4,"y":7,"z":5,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,6":{"x":-4,"y":6,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,6":{"x":-4,"y":7,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,6,7":{"x":-4,"y":6,"z":7,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,7":{"x":-4,"y":7,"z":7,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,8":{"x":-4,"y":7,"z":8,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,7,9":{"x":-4,"y":7,"z":9,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,2":{"x":-4,"y":8,"z":2,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,3":{"x":-4,"y":8,"z":3,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,4":{"x":-4,"y":8,"z":4,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,5":{"x":-4,"y":8,"z":5,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,6":{"x":-4,"y":8,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,7":{"x":-4,"y":8,"z":7,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,8":{"x":-4,"y":8,"z":8,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,9":{"x":-4,"y":8,"z":9,"color":[0.5,0.5,0.5,1],"type":"custom"},"-4,8,10":{"x":-4,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-3,8,10":{"x":-3,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-2,8,10":{"x":-2,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"-1,8,10":{"x":-1,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"0,8,10":{"x":0,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"1,8,10":{"x":1,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"2,8,10":{"x":2,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"3,8,10":{"x":3,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,10":{"x":4,"y":8,"z":10,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,9":{"x":4,"y":8,"z":9,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,8":{"x":4,"y":8,"z":8,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,7":{"x":4,"y":8,"z":7,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,8,6":{"x":4,"y":8,"z":6,"color":[0.5,0.5,0.5,1],"type":"custom"},"4,9,10":{"x":4,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"4,9,9":{"x":4,"y":9,"z":9,"color":[1,0.5,0,1],"type":"custom"},"4,9,8":{"x":4,"y":9,"z":8,"color":[1,0.5,0,1],"type":"custom"},"4,9,7":{"x":4,"y":9,"z":7,"color":[1,0.5,0,1],"type":"custom"},"4,9,6":{"x":4,"y":9,"z":6,"color":[1,0.5,0,1],"type":"custom"},"4,9,5":{"x":4,"y":9,"z":5,"color":[1,0.5,0,1],"type":"custom"},"4,9,4":{"x":4,"y":9,"z":4,"color":[1,0.5,0,1],"type":"custom"},"4,9,3":{"x":4,"y":9,"z":3,"color":[1,0.5,0,1],"type":"custom"},"4,9,2":{"x":4,"y":9,"z":2,"color":[1,0.5,0,1],"type":"custom"},"4,9,1":{"x":4,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"3,9,1":{"x":3,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"2,9,1":{"x":2,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"1,9,1":{"x":1,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"0,9,1":{"x":0,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-1,9,1":{"x":-1,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-2,9,1":{"x":-2,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-3,9,1":{"x":-3,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-4,9,1":{"x":-4,"y":9,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-4,9,2":{"x":-4,"y":9,"z":2,"color":[1,0.5,0,1],"type":"custom"},"-4,9,3":{"x":-4,"y":9,"z":3,"color":[1,0.5,0,1],"type":"custom"},"-4,9,4":{"x":-4,"y":9,"z":4,"color":[1,0.5,0,1],"type":"custom"},"-4,9,5":{"x":-4,"y":9,"z":5,"color":[1,0.5,0,1],"type":"custom"},"-4,9,6":{"x":-4,"y":9,"z":6,"color":[1,0.5,0,1],"type":"custom"},"-4,9,7":{"x":-4,"y":9,"z":7,"color":[1,0.5,0,1],"type":"custom"},"-4,9,8":{"x":-4,"y":9,"z":8,"color":[1,0.5,0,1],"type":"custom"},"-3,9,9":null,"-4,9,10":{"x":-4,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"-4,9,9":{"x":-4,"y":9,"z":9,"color":[1,0.5,0,1],"type":"custom"},"-3,9,10":{"x":-3,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"-2,9,10":{"x":-2,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"-1,9,10":{"x":-1,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"3,9,10":{"x":3,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"2,9,10":{"x":2,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"1,9,10":{"x":1,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"0,9,10":{"x":0,"y":9,"z":10,"color":[1,0.5,0,1],"type":"custom"},"1,10,1":null,"0,10,1":{"x":0,"y":10,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-1,10,1":null,"0,10,0":null,"-4,10,1":{"x":-4,"y":10,"z":1,"color":[1,0.5,0,1],"type":"custom"},"-2,10,1":{"x":-2,"y":10,"z":1,"color":[1,0.5,0,1],"type":"custom"},"2,10,1":{"x":2,"y":10,"z":1,"color":[1,0.5,0,1],"type":"custom"},"4,10,1":{"x":4,"y":10,"z":1,"color":[1,0.5,0,1],"type":"custom"},"4,10,3":{"x":4,"y":10,"z":3,"color":[1,0.5,0,1],"type":"custom"},"4,10,5":{"x":4,"y":10,"z":5,"color":[1,0.5,0,1],"type":"custom"},"4,10,7":{"x":4,"y":10,"z":7,"color":[1,0.5,0,1],"type":"custom"},"4,10,9":{"x":4,"y":10,"z":9,"color":[1,0.5,0,1],"type":"custom"},"3,10,10":{"x":3,"y":10,"z":10,"color":[1,0.5,0,1],"type":"custom"},"1,10,10":null,"-1,10,10":{"x":-1,"y":10,"z":10,"color":[1,0.5,0,1],"type":"custom"},"-3,10,10":{"x":-3,"y":10,"z":10,"color":[1,0.5,0,1],"type":"custom"},"-4,10,9":{"x":-4,"y":10,"z":9,"color":[1,0.5,0,1],"type":"custom"},"-4,10,7":{"x":-4,"y":10,"z":7,"color":[1,0.5,0,1],"type":"custom"},"-4,10,5":{"x":-4,"y":10,"z":5,"color":[1,0.5,0,1],"type":"custom"},"-4,10,3":{"x":-4,"y":10,"z":3,"color":[1,0.5,0,1],"type":"custom"},"3,7,2":null,"3,7,4":null,"3,7,3":null,"2,7,3":null,"2,7,2":null,"2,6,4":null,"3,6,5":null,"2,6,5":null,"1,6,4":null,"1,6,5":null,"0,6,4":null,"0,6,5":null,"-1,6,5":null,"-2,6,5":null,"-3,6,5":null,"-2,6,6":null,"-3,6,6":null,"-1,6,6":null,"0,6,6":null,"1,6,6":null,"2,6,6":null,"3,6,6":null,"-2,6,4":null,"-1,6,4":null,"-1,6,3":null,"-1,6,2":null,"0,6,3":null,"0,6,2":null,"1,6,3":null,"1,6,2":null,"2,6,3":null,"2,6,2":null,"3,6,2":null,"3,6,3":null,"3,6,4":{"x":3,"y":6,"z":4,"color":[0,0,1,1],"type":"custom"},"-1,6,7":null,"-2,6,7":null,"-3,6,7":null,"-3,6,8":null,"-2,6,8":null,"-1,6,8":null,"0,6,7":null,"0,6,8":null,"1,6,7":null,"1,6,8":null,"2,6,7":null,"2,6,8":null,"3,6,7":null,"3,6,8":null,"2,6,9":null,"3,6,9":null,"1,6,9":null,"0,6,9":null,"-1,6,9":null,"-2,6,9":null,"-3,6,9":null,"3,7,5":{"x":3,"y":7,"z":5,"color":[0,0,1,1],"type":"custom"},"3,8,6":null,"3,9,7":null,"3,8,9":{"x":3,"y":8,"z":9,"color":[0,0,1,1],"type":"custom"},"3,8,8":{"x":3,"y":8,"z":8,"color":[0,0,1,1],"type":"custom"},"3,5,6":null,"3,5,7":null,"3,4,6":{"x":3,"y":4,"z":6,"color":[0,0,1,1],"type":"custom"},"3,4,7":{"x":3,"y":4,"z":7,"color":[0,0,1,1],"type":"custom"},"2,9,9":null,"1,9,9":{"x":1,"y":9,"z":9,"color":[0,0,1,1],"type":"custom"},"-1,10,9":{"x":-1,"y":10,"z":9,"color":[0,0,1,1],"type":"custom"},"-3,10,7":{"x":-3,"y":10,"z":7,"color":[0,0,1,1],"type":"custom"},"-3,10,5":{"x":-3,"y":10,"z":5,"color":[0,0,1,1],"type":"custom"},"-4,11,5":{"x":-4,"y":11,"z":5,"color":[0,0,1,1],"type":"custom"},"-5,11,5":null,"-5,12,5":{"x":-5,"y":12,"z":5,"color":[0,0,1,1],"type":"custom"},"-6,12,5":null,"-6,13,5":{"x":-6,"y":13,"z":5,"color":[0,0,1,1],"type":"custom"},"-6,13,6":null,"-7,14,6":{"x":-7,"y":14,"z":6,"color":[0,0,1,1],"type":"custom"},"-8,15,6":{"x":-8,"y":15,"z":6,"color":[0,0,1,1],"type":"custom"},"-9,15,6":{"x":-9,"y":15,"z":6,"color":[1,1,0,1],"type":"custom"},"-10,15,6":{"x":-10,"y":15,"z":6,"color":[1,1,0,1],"type":"custom"},"-9,15,5":{"x":-9,"y":15,"z":5,"color":[1,1,0,1],"type":"custom"},"-10,15,5":{"x":-10,"y":15,"z":5,"color":[1,1,0,1],"type":"custom"},"-8,15,7":null,"-9,15,7":{"x":-9,"y":15,"z":7,"color":[1,1,0,1],"type":"custom"},"-10,15,7":{"x":-10,"y":15,"z":7,"color":[1,1,0,1],"type":"custom"},"-11,15,6":null,"-12,15,6":{"x":-12,"y":15,"z":6,"color":[0,0,1,1],"type":"custom"},"-13,15,6":null,"-14,16,6":null,"-14,15,6":null,"-15,15,6":null,"-16,15,6":{"x":-16,"y":15,"z":6,"color":[0,0,1,1],"type":"custom"},"-14,15,7":{"x":-14,"y":15,"z":7,"color":[0,0,1,1],"type":"custom"},"-17,15,6":null,"-18,15,6":null,"-18,15,5":{"x":-18,"y":15,"z":5,"color":[0,0,1,1],"type":"custom"},"-19,15,5":null,"-20,15,5":null,"-20,15,6":{"x":-20,"y":15,"z":6,"color":[0,0,1,1],"type":"custom"},"-4,10,8":null,"-20,15,7":null,"-20,15,8":{"x":-20,"y":15,"z":8,"color":[0,1,0,1],"type":"custom"},"-20,15,9":null,"-20,15,10":null,"-20,16,10":null,"-20,16,11":null,"-20,16,12":null,"-20,17,13":null,"-20,17,12":{"x":-20,"y":17,"z":12,"color":[0,1,0,1],"type":"custom"},"-20,17,14":null,"-20,18,14":null,"-19,16,10":{"x":-19,"y":16,"z":10,"color":[0,1,0,1],"type":"custom"},"-21,18,14":{"x":-21,"y":18,"z":14,"color":[0,1,0,1],"type":"custom"},"-21,19,15":null,"-22,19,15":null,"-20,19,15":{"x":-20,"y":19,"z":15,"color":[0,1,0,1],"type":"custom"},"-21,19,16":null,"-22,19,16":null,"-20,19,16":null,"-21,19,14":null,"-19,19,15":null,"-18,19,15":null,"-17,19,15":null,"-16,19,15":null,"-18,20,15":{"x":-18,"y":20,"z":15,"color":[0,1,0,1],"type":"custom"},"-15,19,16":null,"-15,20,16":null,"-15,21,16":null,"-15,20,15":null,"-14,20,16":null,"-16,20,16":null,"-14,21,16":null,"-16,21,16":{"x":-16,"y":21,"z":16,"color":[0,1,0,1],"type":"custom"},"-14,22,16":{"x":-14,"y":22,"z":16,"color":[0,1,0,1],"type":"custom"},"-13,22,16":{"x":-13,"y":22,"z":16,"color":[0,1,0,1],"type":"custom"},"-14,22,17":{"x":-14,"y":22,"z":17,"color":[0,1,0,1],"type":"custom"},"-13,22,17":{"x":-13,"y":22,"z":17,"color":[0,1,0,1],"type":"custom"},"-14,22,15":{"x":-14,"y":22,"z":15,"color":[0,1,0,1],"type":"custom"},"-13,22,15":{"x":-13,"y":22,"z":15,"color":[0,1,0,1],"type":"custom"},"-12,22,16":null,"-11,22,16":null,"-11,23,16":{"x":-11,"y":23,"z":16,"color":[1,0,0,1],"type":"custom"},"-10,24,16":null,"-9,24,16":null,"-9,25,16":null,"-8,25,16":{"x":-8,"y":25,"z":16,"color":[1,0,0,1],"type":"custom"},"-7,25,16":null,"-9,24,17":{"x":-9,"y":24,"z":17,"color":[1,0,0,1],"type":"custom"},"-7,25,15":null,"-7,25,14":null,"-6,25,14":null,"-6,26,14":{"x":-6,"y":26,"z":14,"color":[1,0,0,1],"type":"custom"},"-6,26,13":null,"-5,26,13":null,"-5,27,13":null,"-4,27,13":{"x":-4,"y":27,"z":13,"color":[1,0,0,1],"type":"custom"},"-4,27,12":null,"-3,27,12":null,"-3,28,12":null,"-3,28,11":{"x":-3,"y":28,"z":11,"color":[1,0,0,1],"type":"custom"},"-3,29,11":null,"-3,28,10":{"x":-3,"y":28,"z":10,"color":[1,0,0,1],"type":"custom"},"-3,28,9":{"x":-3,"y":28,"z":9,"color":[1,0,0,1],"type":"custom"},"-3,28,8":null,"-3,28,7":null,"-3,28,6":null,"-3,28,5":null,"-3,28,4":null,"-3,28,3":{"x":-3,"y":28,"z":3,"color":[1,0,0,1],"type":"custom"},"-4,28,3":{"x":-4,"y":28,"z":3,"color":[1,0,0,1],"type":"custom"},"-2,28,3":{"x":-2,"y":28,"z":3,"color":[1,0,0,1],"type":"custom"},"-2,28,2":{"x":-2,"y":28,"z":2,"color":[1,0,0,1],"type":"custom"},"-3,28,2":{"x":-3,"y":28,"z":2,"color":[1,0,0,1],"type":"custom"},"-4,29,2":null,"-4,28,2":{"x":-4,"y":28,"z":2,"color":[1,0,0,1],"type":"custom"},"-3,27,3":{"x":-3,"y":27,"z":3,"color":[1,0,0,1],"type":"custom"},"-3,27,4":{"x":-3,"y":27,"z":4,"color":[1,0,0,1],"type":"custom"},"-4,27,14":{"x":-4,"y":27,"z":14,"color":[1,0,0,1],"type":"custom"},"-6,26,15":{"x":-6,"y":26,"z":15,"color":[1,0,0,1],"type":"custom"},"2,7,17":null,"-3,7,16":null,"-8,13,18":null,"-2,7,18":null,"-8,24,17":null,"-7,26,15":{"x":-7,"y":26,"z":15,"color":[1,0,0,1],"type":"custom"},"-3,28,1":null,"-3,28,0":{"x":-3,"y":28,"z":0,"color":[1,0.5,0,1],"type":"custom"},"-3,28,-1":{"x":-3,"y":28,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"-3,29,-1":null,"-3,28,-2":null,"-2,28,-1":null,"-2,28,0":null,"-2,28,-2":null,"-2,29,-2":{"x":-2,"y":29,"z":-2,"color":[1,0.5,0,1],"type":"custom"},"-2,29,-1":null,"-2,29,0":{"x":-2,"y":29,"z":0,"color":[1,0.5,0,1],"type":"custom"},"-2,30,0":null,"-2,30,-1":null,"-2,30,-2":null,"-1,30,-2":{"x":-1,"y":30,"z":-2,"color":[1,0.5,0,1],"type":"custom"},"-1,30,-1":{"x":-1,"y":30,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"-1,30,0":null,"-1,31,-1":null,"-1,31,-2":null,"0,31,-2":null,"0,31,-1":{"x":0,"y":31,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"1,31,-1":null,"2,31,-1":null,"3,31,-1":null,"4,31,-1":{"x":4,"y":31,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"5,31,-1":{"x":5,"y":31,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"6,31,-1":{"x":6,"y":31,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"4,32,-1":{"x":4,"y":32,"z":-1,"color":[1,0.5,0,1],"type":"custom"},"-1,6,19":{"x":-1,"y":6,"z":19,"color":[0.6,0.3,0,1],"type":"custom"},"-1,5,19":{"x":-1,"y":5,"z":19,"color":[0.6,0.3,0,1],"type":"custom"},"-1,7,19":{"x":-1,"y":7,"z":19,"color":[0,1,0,1],"type":"custom"},"-19,5,14":{"x":-19,"y":5,"z":14,"color":[0,1,0,1],"type":"custom"},"-19,6,14":{"x":-19,"y":6,"z":14,"color":[0,1,0,1],"type":"custom"},"7,31,-1":null,"8,31,-1":null,"9,31,-1":null,"10,31,-1":null,"10,31,0":null,"10,31,1":null,"11,31,1":null,"10,31,2":null,"11,31,2":null,"11,31,3":{"x":11,"y":31,"z":3,"color":[1,0.5,0,1],"type":"custom"},"12,31,2":{"x":12,"y":31,"z":2,"color":[1,0.5,0,1],"type":"custom"},"13,31,2":null,"13,31,3":{"x":13,"y":31,"z":3,"color":[1,0.5,0,1],"type":"custom"},"11,31,4":null,"13,31,4":null,"12,31,4":{"x":12,"y":31,"z":4,"color":[1,0.5,0,1],"type":"custom"},"14,31,3":null,"14,32,3":null,"15,31,3":null,"15,32,3":{"x":15,"y":32,"z":3,"color":[1,0.5,0,1],"type":"custom"},"16,32,3":null,"16,33,3":null,"15,33,3":null,"15,33,4":{"x":15,"y":33,"z":4,"color":[1,0.5,0,1],"type":"custom"},"15,33,5":null,"15,34,5":{"x":15,"y":34,"z":5,"color":[1,0.5,0,1],"type":"custom"},"14,34,5":null,"15,35,5":null,"14,35,5":{"x":14,"y":35,"z":5,"color":[1,0.5,0,1],"type":"custom"},"14,35,6":null,"14,36,6":{"x":14,"y":36,"z":6,"color":[1,0.5,0,1],"type":"custom"},"13,36,6":null,"13,37,6":{"x":13,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"12,37,6":null,"11,37,6":null,"10,37,6":null,"9,37,6":{"x":9,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"8,37,6":{"x":8,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"7,37,6":null,"6,37,6":null,"5,37,6":null,"4,37,6":null,"3,37,6":{"x":3,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"3,37,7":{"x":3,"y":37,"z":7,"color":[1,0.5,0,1],"type":"custom"},"2,37,6":{"x":2,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"2,37,7":{"x":2,"y":37,"z":7,"color":[1,0.5,0,1],"type":"custom"},"1,37,6":{"x":1,"y":37,"z":6,"color":[1,0.5,0,1],"type":"custom"},"1,37,7":{"x":1,"y":37,"z":7,"color":[1,0.5,0,1],"type":"custom"},"-9,16,5":null,"2,37,8":{"x":2,"y":37,"z":8,"color":[0.6,0.3,0,1],"type":"custom"},"1,37,8":null,"2,37,9":null,"2,37,10":null,"1,37,10":{"x":1,"y":37,"z":10,"color":[0.6,0.3,0,1],"type":"custom"},"0,37,10":null,"-1,37,10":null,"-1,37,11":null,"-2,37,11":null,"-3,37,11":null,"-3,37,10":null,"-3,38,11":null,"-3,38,10":null,"-3,38,9":null,"-3,39,9":null,"-1,37,12":{"x":-1,"y":37,"z":12,"color":[0.6,0.3,0,1],"type":"custom"},"-2,38,13":{"x":-2,"y":38,"z":13,"color":[0.6,0.3,0,1],"type":"custom"},"-3,39,11":{"x":-3,"y":39,"z":11,"color":[0.6,0.3,0,1],"type":"custom"},"-3,40,9":{"x":-3,"y":40,"z":9,"color":[0.6,0.3,0,1],"type":"custom"},"-3,40,8":null,"-3,40,7":null,"-3,40,6":null,"-3,40,5":null,"-3,41,5":{"x":-3,"y":41,"z":5,"color":[0.6,0.3,0,1],"type":"custom"},"-4,41,5":null,"-5,41,5":null,"-3,41,4":{"x":-3,"y":41,"z":4,"color":[0.6,0.3,0,1],"type":"custom"},"-3,41,3":{"x":-3,"y":41,"z":3,"color":[0.6,0.3,0,1],"type":"custom"},"-4,41,4":{"x":-4,"y":41,"z":4,"color":[0.6,0.3,0,1],"type":"custom"},"-5,41,4":null,"-5,42,4":{"x":-5,"y":42,"z":4,"color":[0.6,0.3,0,1],"type":"custom"},"-6,42,4":null,"-6,43,4":{"x":-6,"y":43,"z":4,"color":[0.6,0.3,0,1],"type":"custom"},"-6,43,5":null,"-6,44,5":null,"-6,44,6":null,"-6,45,6":{"x":-6,"y":45,"z":6,"color":[0.6,0.3,0,1],"type":"custom"},"-6,45,7":null,"-6,46,7":{"x":-6,"y":46,"z":7,"color":[0.6,0.3,0,1],"type":"custom"},"7,8,3":null,"-6,46,8":null,"-6,47,8":null,"-6,48,8":null,"-6,48,9":null,"-6,48,10":{"x":-6,"y":48,"z":10,"color":[0.6,0.3,0,1],"type":"custom"},"-6,49,10":null,"-6,47,9":{"x":-6,"y":47,"z":9,"color":[0.6,0.3,0,1],"type":"custom"},"-6,47,10":null,"-7,44,4":{"x":-7,"y":44,"z":4,"color":[0.6,0.3,0,1],"type":"custom"},"-7,48,10":null,"-8,48,10":null,"-9,48,10":null,"-10,48,10":{"x":-10,"y":48,"z":10,"color":[0.6,0.3,0,1],"type":"custom"},"-10,48,9":{"x":-10,"y":48,"z":9,"color":[0.6,0.3,0,1],"type":"custom"},"-10,48,11":{"x":-10,"y":48,"z":11,"color":[0.6,0.3,0,1],"type":"custom"},"-11,48,9":{"x":-11,"y":48,"z":9,"color":[0.6,0.3,0,1],"type":"custom"},"-11,48,10":{"x":-11,"y":48,"z":10,"color":[0.6,0.3,0,1],"type":"custom"},"-11,48,11":{"x":-11,"y":48,"z":11,"color":[0.6,0.3,0,1],"type":"custom"},"-12,48,10":null,"-13,48,10":null,"-14,48,10":null,"-14,49,10":{"x":-14,"y":49,"z":10,"color":[0,0,0,1],"type":"custom"},"-15,49,10":{"x":-15,"y":49,"z":10,"color":[0,0,0,1],"type":"custom"},"-15,50,10":{"x":-15,"y":50,"z":10,"color":[1,1,1,1],"type":"custom"},"-15,49,11":{"x":-15,"y":49,"z":11,"color":[0,0,0,1],"type":"custom"},"-16,49,10":{"x":-16,"y":49,"z":10,"color":[0,0,0,1],"type":"custom"},"-16,49,11":{"x":-16,"y":49,"z":11,"color":[0,0,0,1],"type":"custom"},"-15,49,9":{"x":-15,"y":49,"z":9,"color":[0,0,0,1],"type":"custom"},"-16,49,9":{"x":-16,"y":49,"z":9,"color":[0,0,0,1],"type":"custom"},"-14,49,11":{"x":-14,"y":49,"z":11,"color":[0,0,0,1],"type":"custom"},"-14,49,9":{"x":-14,"y":49,"z":9,"color":[0,0,0,1],"type":"custom"}}; </script> <script type> var MAX_CHUNK = 2; var menuScene = document.getElementById("menuScene"), gameScene = document.getElementById("gameScene"), saveScene = document.getElementById("saveScene"), pauseMenu = document.getElementById("pauseMenu"), howScene = document.getElementById("howScene"), healthBar = document.getElementById("healthBar"); function showScene(scene) { [menuScene, gameScene, saveScene, howScene].forEach(function(s) { s.style.display = "none"; }); scene.style.display = "block"; } var gameRunning = false, animationFrameId; var gameMode = "creative"; var playerHealth = 100; var maxHealth = 100; var survivalInventory = {}; var fallStartY = null; var isFalling = false; var GRAVITY = -20; var JUMP_VELOCITY = 8; var verticalVelocity = 0; var onGround = false; var breakingBlock = null; var breakTimer = 0; var breakTimeRequired = 0.75; var canvas = document.getElementById('glcanvas'); canvas.setAttribute("tabindex", "0"); var gl = canvas.getContext('webgl2', { preserveDrawingBuffer: true }); if (!gl) { alert('Your browser does not support WebGL2'); } var projectionMatrix = mat4.create(); function updateProjection() { var fieldOfView = 70.5; var aspect = canvas.clientWidth / canvas.clientHeight; var zNear = 0.1, zFar = 1000.0; mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); } function resizeCanvas() { canvas.width = gameScene.clientWidth; canvas.height = gameScene.clientHeight; gl.viewport(0, 0, canvas.width, canvas.height); updateProjection(); } resizeCanvas(); window.addEventListener('resize', resizeCanvas); var fpsElem = document.getElementById('fpsElem'), fpsFrames = 0, fpsTime = 0, avgFPS = 0; gl.clearColor(0.1, 0.2, 0.1, 1.0); gl.enable(gl.DEPTH_TEST); var vsSource = "#version 300 es\n" + "precision highp float;\n" + "in vec3 aVertexPosition;\n" + "in vec4 aVertexColor;\n" + "in vec3 aVertexNormal;\n" + "in vec2 aTextureCoord;\n" + "uniform mat4 uVP;\n" + "out vec4 vColor;\n" + "out vec3 vNormal;\n" + "out vec2 vTextureCoord;\n" + "void main(void) {\n" + " gl_Position = uVP * vec4(aVertexPosition, 1.0);\n" + " vColor = aVertexColor;\n" + " vNormal = aVertexNormal;\n" + " vTextureCoord = aTextureCoord;\n" + "}"; var fsSource = "#version 300 es\n" + "precision highp float;\n" + "in vec4 vColor;\n" + "in vec3 vNormal;\n" + "in vec2 vTextureCoord;\n" + "uniform vec3 uLightDirection;\n" + "uniform sampler2D uSampler;\n" + "out vec4 fragColor;\n" + "void main(void) {\n" + " float light = max(dot(normalize(vNormal), uLightDirection), 0.4);\n" + " vec4 texColor = texture(uSampler, vTextureCoord);\n" + " fragColor = mix(vColor, texColor, 0.4) * light;\n" + "}"; function compileShader(gl, source, type) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('Shader compile error:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } var vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER); var fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { console.error('Program link error:', gl.getProgramInfoLog(shaderProgram)); } gl.useProgram(shaderProgram); var programInfo = { attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'), vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'), vertexNormal: gl.getAttribLocation(shaderProgram, 'aVertexNormal'), textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'), }, uniformLocations: { uVP: gl.getUniformLocation(shaderProgram, 'uVP'), uLightDirection: gl.getUniformLocation(shaderProgram, 'uLightDirection'), uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'), }, }; gl.uniform3fv(programInfo.uniformLocations.uLightDirection, [0, 1, 0]); var baseBlockColors = { grass: [34, 139, 34], dirt: [101, 67, 33], stone: [128, 128, 128], treeTrunk: [101, 50, 33], treeLeaves: [0, 128, 0], bush: [0, 100, 0], custom: [200, 200, 200] }; function generateTintedNoise(baseColor) { var pattern = []; var baseR = baseColor[0], baseG = baseColor[1], baseB = baseColor[2]; for (var y = 0; y < 16; y++) { var row = new Uint8Array(16 * 4); for (var x = 0; x < 16; x++) { var variation = 0.1 + Math.random() * 0.8; var r = Math.max(0, Math.min(255, Math.round(baseR * variation))); var g = Math.max(0, Math.min(255, Math.round(baseG * variation))); var b = Math.max(0, Math.min(255, Math.round(baseB * variation))); var index = x * 4; row[index] = r; row[index + 1] = g; row[index + 2] = b; row[index + 3] = 255; } pattern.push(row); } return pattern; } var blockTextures = { grass: generateTintedNoise(baseBlockColors.grass), dirt: generateTintedNoise(baseBlockColors.dirt), stone: generateTintedNoise(baseBlockColors.stone), treeTrunk: generateTintedNoise(baseBlockColors.treeTrunk), treeLeaves: generateTintedNoise(baseBlockColors.treeLeaves), bush: generateTintedNoise(baseBlockColors.bush), custom: generateTintedNoise(baseBlockColors.custom) }; function createTextureAtlas(gl, textures) { var blockTypes = Object.keys(textures).sort(); var numTypes = blockTypes.length; var atlasCols = Math.ceil(Math.sqrt(numTypes)); var atlasRows = Math.ceil(numTypes / atlasCols); var blockSize = 12; var atlasWidth = atlasCols * blockSize; var atlasHeight = atlasRows * blockSize; var atlasData = new Uint8Array(atlasWidth * atlasHeight * 4); var atlasCoords = {}; for (var i = 0; i < numTypes; i++) { var type = blockTypes[i]; var pattern = textures[type]; var col = i % atlasCols; var row = Math.floor(i / atlasCols); var xOffset = col * blockSize; var yOffset = row * blockSize; atlasCoords[type] = { u0: xOffset / atlasWidth, v0: yOffset / atlasHeight, u1: (xOffset + blockSize) / atlasWidth, v1: (yOffset + blockSize) / atlasHeight }; for (var y = 0; y < blockSize; y++) { var rowPattern = pattern[y]; for (var x = 0; x < blockSize; x++) { var atlasX = xOffset + x; var atlasY = yOffset + y; var index = (atlasY * atlasWidth + atlasX) * 4; var pixelIndex = x * 4; atlasData[index + 0] = rowPattern[pixelIndex]; atlasData[index + 1] = rowPattern[pixelIndex + 1]; atlasData[index + 2] = rowPattern[pixelIndex + 2]; atlasData[index + 3] = rowPattern[pixelIndex + 3]; } } } var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, atlasWidth, atlasHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, atlasData); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); return { texture: tex, coords: atlasCoords }; } var atlas = createTextureAtlas(gl, blockTextures); var detailTexture = atlas.texture; var atlasCoords = atlas.coords; var cubeVertices = new Float32Array([ -0.5, -0.5, 0.5, 0,0,0,0, 0,0,1, 0,0, 0.5, -0.5, 0.5, 0,0,0,0, 0,0,1, 1,0, 0.5, 0.5, 0.5, 0,0,0,0, 0,0,1, 1,1, -0.5, 0.5, 0.5, 0,0,0,0, 0,0,1, 0,1, 0.5, -0.5, -0.5, 0,0,0,0, 0,0,-1, 0,0, -0.5, -0.5, -0.5, 0,0,0,0, 0,0,-1, 1,0, -0.5, 0.5, -0.5, 0,0,0,0, 0,0,-1, 1,1, 0.5, 0.5, -0.5, 0,0,0,0, 0,0,-1, 0,1, -0.5, 0.5, 0.5, 0,0,0,0, 0,1,0, 0,0, 0.5, 0.5, 0.5, 0,0,0,0, 0,1,0, 1,0, 0.5, 0.5, -0.5, 0,0,0,0, 0,1,0, 1,1, -0.5, 0.5, -0.5, 0,0,0,0, 0,1,0, 0,1, -0.5, -0.5, -0.5, 0,0,0,0, 0,-1,0, 0,0, 0.5, -0.5, -0.5, 0,0,0,0, 0,-1,0, 1,0, 0.5, -0.5, 0.5, 0,0,0,0, 0,-1,0, 1,1, -0.5, -0.5, 0.5, 0,0,0,0, 0,-1,0, 0,1, 0.5, -0.5, 0.5, 0,0,0,0, 1,0,0, 0,0, 0.5, -0.5, -0.5, 0,0,0,0, 1,0,0, 1,0, 0.5, 0.5, -0.5, 0,0,0,0, 1,0,0, 1,1, 0.5, 0.5, 0.5, 0,0,0,0, 1,0,0, 0,1, -0.5, -0.5, -0.5, 0,0,0,0, -1,0,0, 0,0, -0.5, -0.5, 0.5, 0,0,0,0, -1,0,0, 1,0, -0.5, 0.5, 0.5, 0,0,0,0, -1,0,0, 1,1, -0.5, 0.5, -0.5, 0,0,0,0, -1,0,0, 0,1, ]); var cubeIndices = new Uint16Array([ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9,10, 8,10,11, 12,13,14, 12,14,15, 16,17,18, 16,18,19, 20,21,22, 20,22,23, ]); function Chunk(gl, chunkX, chunkZ) { this.chunkX = chunkX; this.chunkZ = chunkZ; this.blocks = terrainGen(chunkX, chunkZ); this.vao = gl.createVertexArray(); this.vertexBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer(); this.indexCount = 0; this.generateBuffers(gl); } Chunk.prototype.generateBuffers = function(gl) { var vertices = []; var indices = []; var vertexOffset = 0; var i, j; for (var b = 0; b < this.blocks.length; b++) { var block = this.blocks[b]; var texInfo = atlasCoords[block.type] \|\| atlasCoords["custom"]; for (i = 0; i < cubeVertices.length; i += 12) { vertices.push( cubeVertices[i] + block.x, cubeVertices[i+1] + block.y, cubeVertices[i+2] + block.z, block.color[0], block.color[1], block.color[2], block.color[3], cubeVertices[i+7], cubeVertices[i+8], cubeVertices[i+9] ); var baseU = cubeVertices[i+10]; var baseV = cubeVertices[i+11]; var newU = texInfo.u0 + baseU * (texInfo.u1 - texInfo.u0); var newV = texInfo.v0 + baseV * (texInfo.v1 - texInfo.v0); vertices.push(newU, newV); } for (j = 0; j < cubeIndices.length; j++) { indices.push(cubeIndices[j] + vertexOffset); } vertexOffset += 24; } this.indexCount = indices.length; gl.bindVertexArray(this.vao); var stride = 12 * 4; gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, gl.FLOAT, false, stride, 0); gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor); gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, gl.FLOAT, false, stride, 3 * 4); gl.enableVertexAttribArray(programInfo.attribLocations.vertexNormal); gl.vertexAttribPointer(programInfo.attribLocations.vertexNormal, 3, gl.FLOAT, false, stride, 7 * 4); gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord); gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, stride, 10 * 4); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); gl.bindVertexArray(null); }; Chunk.prototype.update = function(gl) { this.blocks = terrainGen(this.chunkX, this.chunkZ); this.generateBuffers(gl); }; Chunk.prototype.draw = function(gl) { gl.bindVertexArray(this.vao); gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0); gl.bindVertexArray(null); }; function pseudoRandom(x, z) { var n = x * 374761393 + z * 668265263; n = (n ^ (n >> 13)) >>> 0; return (n % 1000) / 1000; } function pushB(blocks, block) { var key = block.x + "," + block.y + "," + block.z; if (key in blockEdits) { if (blockEdits[key] === null) return; return; } blocks.push(block); } function terrainGen(chunkX, chunkZ) { var CHUNK_SIZE = 16; var blocks = []; var treeChance = 0.005; var bushChance = 0.001; var cx, cz, wx, wz, maxHeight, cy, key, r, trunkColor, leafColor; for (cx = 0; cx < CHUNK_SIZE; cx++) { for (cz = 0; cz < CHUNK_SIZE; cz++) { wx = (chunkX << 4) + cx; wz = (chunkZ << 4) + cz; maxHeight = Math.floor(5 + noise(wx, wz) * 5); for (cy = 0; cy < maxHeight; cy++) { key = wx + "," + cy + "," + wz; if (key in blockEdits) { if (blockEdits[key] === null) continue; blocks.push(blockEdits[key]); } else { var blockInfo = getBlockType(cy, maxHeight); blocks.push({ x: wx, y: cy, z: wz, color: blockInfo.color, type: blockInfo.type }); } } for (var editKey in blockEdits) { var parts = editKey.split(','); var ex = Number(parts[0]), ey = Number(parts[1]), ez = Number(parts[2]); if (ex === wx && ez === wz && ey >= maxHeight) { var edit = blockEdits[editKey]; if (edit !== null) blocks.push(edit); } } if (maxHeight > 0) { var topBlock = getBlockType(maxHeight - 1, maxHeight); if (topBlock.type === 'grass') { r = pseudoRandom(wx, wz); if (r < treeChance) { trunkColor = [0.55, 0.27, 0.07, 1.0]; leafColor = [0.0, 0.8, 0.0, 1.0]; pushB(blocks, { x: wx, y: maxHeight + 0, z: wz, color: trunkColor, type: 'treeTrunk' }); pushB(blocks, { x: wx, y: maxHeight + 1, z: wz, color: trunkColor, type: 'treeTrunk' }); pushB(blocks, { x: wx, y: maxHeight + 2, z: wz, color: trunkColor, type: 'treeTrunk' }); pushB(blocks, { x: wx - 1, y: maxHeight + 3, z: wz - 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx - 1, y: maxHeight + 3, z: wz, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx - 1, y: maxHeight + 3, z: wz + 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx, y: maxHeight + 3, z: wz - 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx, y: maxHeight + 3, z: wz, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx, y: maxHeight + 3, z: wz + 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx + 1, y: maxHeight + 3, z: wz - 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx + 1, y: maxHeight + 3, z: wz, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx + 1, y: maxHeight + 3, z: wz + 1, color: leafColor, type: 'treeLeaves' }); pushB(blocks, { x: wx, y: maxHeight + 4, z: wz, color: leafColor, type: 'treeLeaves' }); } else if (r < treeChance + bushChance) { var bushColor = [0.0, 0.8, 0.0, 1.0]; pushB(blocks, { x: wx, y: maxHeight, z: wz, color: bushColor, type: 'bush' }); pushB(blocks, { x: wx + 1, y: maxHeight, z: wz, color: bushColor, type: 'bush' }); pushB(blocks, { x: wx, y: maxHeight, z: wz + 1, color: bushColor, type: 'bush' }); pushB(blocks, { x: wx + 1, y: maxHeight, z: wz + 1, color: bushColor, type: 'bush' }); } } } } } return blocks; } function noise(x, z) { var total = 0; for (var i = 0; i < 3; i++) { total += ((Math.sin(x * 0.1 * Math.pow(2, i)) * Math.cos(z * 0.1 * Math.pow(2, i)) + 1) / 2) * Math.pow(0.5, i); } return Math.max(total / (1 + 0.5 + 0.25), 0.3); } function getBlockType(y, maxHeight) { if (y === maxHeight - 1) return { color: [0.149, 0.640, 0.0384, 1], type: 'grass' }; else if (y > maxHeight - 4) return { color: [0.59, 0.29, 0.0, 1.0], type: 'dirt' }; else return { color: [0.5, 0.5, 0.5, 1.0], type: 'stone' }; } var chunks = {}; var VIEW_DISTANCE = 5; function updateChunks() { var chunkX = player.x >> 4; var chunkZ = player.z >> 4; var threshold = VIEW_DISTANCE + 4; for (var key in chunks) { var parts = key.split(','); var x = Number(parts[0]), z = Number(parts[1]); if (Math.abs(x - chunkX) > threshold \|\| Math.abs(z - chunkZ) > threshold) { delete chunks[key]; } } var x, z, key; for (x = chunkX - VIEW_DISTANCE; x <= chunkX + VIEW_DISTANCE; x++) { if (Math.abs(x) > MAX_CHUNK) continue; for (z = chunkZ - VIEW_DISTANCE; z <= chunkZ + VIEW_DISTANCE; z++) { if (Math.abs(z) > MAX_CHUNK) continue; key = x + "," + z; if (!(key in chunks)) { chunks[key] = new Chunk(gl, x, z); } } } } var player = { x: 0, y: 8, z: 4 }; var yaw = Math.PI, pitch = 0; var keysPressed = {}; window.addEventListener('keydown', function(event) { keysPressed[event.key] = true; }); window.addEventListener('keyup', function(event) { keysPressed[event.key] = false; }); canvas.addEventListener('click', function() { canvas.requestPointerLock(); canvas.focus(); }); document.addEventListener('pointerlockchange', function() { if (document.pointerLockElement === canvas) document.addEventListener('mousemove', onMouseMove); else document.removeEventListener('mousemove', onMouseMove); }); function onMouseMove(event) { yaw -= event.movementX * 0.002; pitch -= event.movementY * 0.002; pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch)); } var playerHalf = { x: 0.3, y: 0.8, z: 0.3 }; var blockHalf = 0.5; function updatePlayer(deltaTime) { var acc = 20, dec = 30, maxSpeed = 10; var currMovef = player.currMovef \|\| 0, currMover = player.currMover \|\| 0; var targetMovef = 0, targetMover = 0; if (keysPressed['w'] \|\| keysPressed['ArrowUp']) targetMovef = maxSpeed; if (keysPressed['s'] \|\| keysPressed['ArrowDown']) targetMovef = -maxSpeed; if (keysPressed['a'] \|\| keysPressed['ArrowLeft']) targetMover = -maxSpeed; if (keysPressed['d'] \|\| keysPressed['ArrowRight']) targetMover = maxSpeed; if (targetMovef !== currMovef) { currMovef = (targetMovef > currMovef) ? Math.min(currMovef + acc * deltaTime, targetMovef) : Math.max(currMovef - acc * deltaTime, targetMovef); } else { currMovef = (currMovef > 0) ? Math.max(0, currMovef - dec * deltaTime) : (currMovef < 0) ? Math.min(0, currMovef + dec * deltaTime) : 0; } if (targetMover !== currMover) { currMover = (targetMover > currMover) ? Math.min(currMover + acc * deltaTime, targetMover) : Math.max(currMover - acc * deltaTime, targetMover); } else { currMover = (currMover > 0) ? Math.max(0, currMover - dec * deltaTime) : (currMover < 0) ? Math.min(0, currMover + dec * deltaTime) : 0; } var forward = [-Math.sin(yaw), 0, -Math.cos(yaw)]; var right = [Math.cos(yaw), 0, -Math.sin(yaw)]; var dx = forward[0] * currMovef * deltaTime + right[0] * currMover * deltaTime; var dz = forward[2] * currMovef * deltaTime + right[2] * currMover * deltaTime; var newX = player.x + dx; if (!checkCollision(newX, player.y, player.z)) { player.x = newX; } var newZ = player.z + dz; if (!checkCollision(player.x, player.y, newZ)) { player.z = newZ; } if (gameMode === "survival") { if (player.y < -10) { playerHealth = 0; updateHealthBar(); } if (keysPressed[' '] && onGround) { verticalVelocity = JUMP_VELOCITY; onGround = false; } if (!onGround && verticalVelocity < 0) { if (!isFalling) { fallStartY = player.y; isFalling = true; } } else { if (isFalling) { var fallDistance = fallStartY - player.y; if (fallDistance > 3) { playerHealth -= 20; updateHealthBar(); } else if (fallDistance > 6) { playerHealth -= 50; updateHealthBar(); } else if (fallDistance > 10) { playerHealth -= 90; updateHealthBar(); } isFalling = false; } } if (playerHealth <= 0) { playerHealth = maxHealth; player.x = 0; player.y = 8; player.z = 4; verticalVelocity = 0; survivalInventory = {}; updateSurvivalInvDisplay(); updateHealthBar(); } verticalVelocity += GRAVITY * deltaTime; var potentialY = player.y + verticalVelocity * deltaTime; if (!checkCollision(player.x, potentialY, player.z)) { player.y = potentialY; onGround = false; } else { verticalVelocity = 0; onGround = true; } } else { var currDy = player.currDy \|\| 0, targetDy = 0; if (keysPressed[' '] \|\| keysPressed['z']) targetDy = maxSpeed; if (keysPressed['Shift'] \|\| keysPressed['q']) targetDy = -maxSpeed; if (targetDy !== currDy) { currDy = (targetDy > currDy) ? Math.min(currDy + acc * deltaTime, targetDy) : Math.max(currDy - acc * deltaTime, targetDy); } else { currDy = (currDy > 0) ? Math.max(0, currDy - dec * deltaTime) : (currDy < 0) ? Math.min(0, currDy + dec * deltaTime) : 0; } if (!checkCollision(player.x, player.y + currDy * deltaTime, player.z)) { player.y += currDy * deltaTime; } player.currDy = currDy; } player.currMovef = currMovef; player.currMover = currMover; } function checkCollision(x, y, z) { var chunkX = x >> 4, chunkZ = z >> 4; var dx, dz; for (var ddx = -1; ddx <= 1; ddx++) { for (var ddz = -1; ddz <= 1; ddz++) { var key = (chunkX+ddx) + "," + (chunkZ+ddz); if (key in chunks) { var blocksArr = chunks[key].blocks; for (var i = 0; i < blocksArr.length; i++) { var block = blocksArr[i]; if (Math.abs(block.x - x) < (playerHalf.x + blockHalf) && Math.abs(block.y - y) < (playerHalf.y + blockHalf) && Math.abs(block.z - z) < (playerHalf.z + blockHalf)) { return true; } } } } } return false; } function getCameraRay() { var origin = [player.x, player.y, player.z]; var cosPitch = Math.cos(pitch); var dir = [ -Math.sin(yaw) * cosPitch, Math.sin(pitch), -Math.cos(yaw) * cosPitch ]; return { origin: origin, direction: dir }; } function aabb(origin, dir, min, max) { var tmin = -Infinity, tmax = Infinity; for (var i = 0; i < 3; i++) { if (Math.abs(dir[i]) < 1e-6) { if (origin[i] < min[i] \|\| origin[i] > max[i]) return null; } else { var t1 = (min[i] - origin[i]) / dir[i]; var t2 = (max[i] - origin[i]) / dir[i]; if (t1 > t2) { var tmp = t1; t1 = t2; t2 = tmp; } tmin = Math.max(tmin, t1); tmax = Math.min(tmax, t2); if (tmin > tmax) return null; } } return tmin >= 0 ? tmin : null; } function raycast() { var cam = getCameraRay(); var origin = cam.origin, direction = cam.direction; var closest = { t: Infinity, block: null, faceNormal: null }; var chunkX = player.x >> 4, chunkZ = player.z >> 4; var dx, dz, key, blocksArr, i, block; for (var ddx = -1; ddx <= 1; ddx++) { for (var ddz = -1; ddz <= 1; ddz++) { key = (chunkX+ddx) + "," + (chunkZ+ddz); if (key in chunks) { blocksArr = chunks[key].blocks; for (i = 0; i < blocksArr.length; i++) { block = blocksArr[i]; var min = [block.x - 0.5, block.y - 0.5, block.z - 0.5]; var max = [block.x + 0.5, block.y + 0.5, block.z + 0.5]; var t = aabb(origin, direction, min, max); if (t !== null && t < closest.t) { var hitPoint = [ origin[0] + direction[0] * t, origin[1] + direction[1] * t, origin[2] + direction[2] * t ]; var faceNormal = [0, 0, 0]; for (var j = 0; j < 3; j++) { if (Math.abs(hitPoint[j] - min[j]) < 0.1) faceNormal[j] = -1; else if (Math.abs(hitPoint[j] - max[j]) < 0.1) faceNormal[j] = 1; } closest = { t: t, block: block, faceNormal: faceNormal }; } } } } } return closest.block ? closest : null; } var placeholderBlock = null; var buildRadius = 16; function updatePlaceholder() { var hit = raycast(); if (hit) { var dx = hit.block.x - player.x; var dz = hit.block.z - player.z; if (Math.hypot(dx, dz) <= buildRadius) { placeholderBlock = { x: hit.block.x, y: hit.block.y, z: hit.block.z }; return; } } placeholderBlock = null; } var blockColorMap = { '1': [1,0,0,1], '2': [1,0.5,0,1], '3': [1,1,0,1], '4': [0,1,0,1], '5': [0,0,1,1], '6': [0.6,0.3,0,1], '7': [0,0,0,1], '8': [1,1,1,1], '9': [0.5,0.5,0.5,1] }; var currentBlockColor = blockColorMap['1']; var selectedSlot = 1; function makeInv() { var inventoryDiv = document.createElement("div"); inventoryDiv.id = "inventory"; if (gameMode === "creative") { for (var i = 1; i <= 9; i++) { var slot = document.createElement("div"); slot.className = "inventory-slot"; slot.dataset.slot = i; slot.style.width = "30px"; slot.style.height = "30px"; slot.style.boxSizing = "border-box"; slot.style.cursor = "pointer"; var colorArr = blockColorMap[i.toString()]; var r = Math.floor(colorArr[0] * 255); var g = Math.floor(colorArr[1] * 255); var b = Math.floor(colorArr[2] * 255); var a = colorArr[3]; slot.style.backgroundColor = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; slot.style.border = '2px solid black'; slot.style.outline = (i === selectedSlot) ? "2px solid white" : "2px solid transparent"; slot.addEventListener("click", (function(i) { return function() { selectedSlot = i; currentBlockColor = blockColorMap[i.toString()]; updateInventorySelection(); }; })(i)); inventoryDiv.appendChild(slot); } } else { for (var type in survivalInventory) { var slot = document.createElement("div"); slot.className = "inventory-slot"; slot.dataset.type = type; slot.style.width = "30px"; slot.style.height = "30px"; slot.style.boxSizing = "border-box"; slot.style.cursor = "pointer"; slot.style.backgroundColor = "rgba(150,150,150,1)"; slot.style.border = '2px solid black'; slot.innerText = survivalInventory[type]; slot.addEventListener("click", function() { currentBlockColor = null; selectedSlot = this.dataset.type; }); inventoryDiv.appendChild(slot); } } var existingInv = document.getElementById("inventory"); if (existingInv) existingInv.remove(); document.getElementById('gameScene').appendChild(inventoryDiv); } function updateInventorySelection() { var slots = document.querySelectorAll(".inventory-slot"); for (var i = 0; i < slots.length; i++) { var slot = slots[i]; if (slot.dataset.slot && parseInt(slot.dataset.slot, 10) === selectedSlot) { slot.style.outline = "2px solid white"; } else { slot.style.outline = "2px solid transparent"; } } } makeInv(); window.addEventListener('keydown', function(event) { if (gameMode === "creative" && blockColorMap[event.key]) { currentBlockColor = blockColorMap[event.key]; selectedSlot = parseInt(event.key, 10); updateInventorySelection(); } }); canvas.addEventListener('mousedown', function(event) { event.preventDefault(); var hit = raycast(); function findChunkForBlock(block) { var chunkX = block.x >> 4; var chunkZ = block.z >> 4; return chunks[chunkX + "," + chunkZ]; } if (event.button === 0) { if (gameMode === "creative") { if (hit) { var dx = hit.block.x - player.x; var dz = hit.block.z - player.z; if (Math.hypot(dx, dz) > buildRadius) return; var key = hit.block.x + "," + hit.block.y + "," + hit.block.z; blockEdits[key] = null; var chunk = findChunkForBlock(hit.block); if (chunk) chunk.update(gl); } } else { if (hit) { breakingBlock = hit.block; breakTimer = 0; } } } else if (event.button === 2) { var placePos = null; if (hit) { placePos = { x: hit.block.x + hit.faceNormal[0], y: hit.block.y + hit.faceNormal[1], z: hit.block.z + hit.faceNormal[2] }; } else if (placeholderBlock) { placePos = placeholderBlock; } if (placePos) { var dx = placePos.x - player.x; var dz = placePos.z - player.z; if (Math.hypot(dx, dz) > buildRadius) return; if (gameMode === "creative") { var key = Math.round(placePos.x) + "," + Math.round(placePos.y) + "," + Math.round(placePos.z); blockEdits[key] = { x: Math.round(placePos.x), y: Math.round(placePos.y), z: Math.round(placePos.z), color: currentBlockColor \|\| (placePos.y > 12 ? [0.4,0.8,0.2,1.0] : (placePos.y > 8 ? [0.59,0.29,0.0,1.0] : [0.5,0.5,0.5,1.0])), type: 'custom' }; var chunkKey = Math.floor(placePos.x/16) + "," + Math.floor(placePos.z/16); if (chunkKey in chunks) chunks[chunkKey].update(gl); } else { if (selectedSlot && survivalInventory[selectedSlot] > 0) { var key = Math.round(placePos.x) + "," + Math.round(placePos.y) + "," + Math.round(placePos.z); blockEdits[key] = { x: Math.round(placePos.x), y: Math.round(placePos.y), z: Math.round(placePos.z), color: [0.4,0.8,0.2,1.0], type: selectedSlot }; survivalInventory[selectedSlot]--; updateSurvivalInvDisplay(); var chunkKey = Math.floor(placePos.x/16) + "," + Math.floor(placePos.z/16); if (chunkKey in chunks) chunks[chunkKey].update(gl); } } } } }); canvas.addEventListener('mouseup', function(event) { if (gameMode === "survival" && event.button === 0) { breakingBlock = null; breakTimer = 0; } }); canvas.addEventListener('contextmenu', function(e) { e.preventDefault(); }); var placeholderVAO = gl.createVertexArray(); gl.bindVertexArray(placeholderVAO); var placeholderBuffer = gl.createBuffer(); var placeholderVertices = new Float32Array([ -0.5,-0.5,-0.5, 0.5,-0.5,-0.5, 0.5,0.5,-0.5, -0.5,0.5,-0.5, -0.5,-0.5,0.5, 0.5,-0.5,0.5, 0.5,0.5,0.5, -0.5,0.5,0.5 ]); gl.bindBuffer(gl.ARRAY_BUFFER, placeholderBuffer); gl.bufferData(gl.ARRAY_BUFFER, placeholderVertices, gl.STATIC_DRAW); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, gl.FLOAT, false, 0, 0); gl.bindVertexArray(null); var placeholderIndices = new Uint16Array([ 0,1, 1,2, 2,3, 3,0, 4,5, 5,6, 6,7, 7,4, 0,4, 1,5, 2,6, 3,7 ]); var placeholderIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, placeholderIndexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, placeholderIndices, gl.STATIC_DRAW); function drawPlaceholder(vpMatrix) { if (!placeholderBlock) return; var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, [placeholderBlock.x, placeholderBlock.y, placeholderBlock.z]); var mvp = mat4.create(); mat4.multiply(mvp, vpMatrix, modelMatrix); gl.uniformMatrix4fv(programInfo.uniformLocations.uVP, false, mvp); gl.bindVertexArray(placeholderVAO); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, placeholderIndexBuffer); gl.drawElements(gl.LINES, placeholderIndices.length, gl.UNSIGNED_SHORT, 0); gl.bindVertexArray(null); } function updateHealthBar() { var healthFill = document.getElementById("healthFill"); healthFill.style.width = (playerHealth / maxHealth * 100) + "%"; } function updateSurvivalInvDisplay() { var invDiv = document.getElementById("inventory"); invDiv.innerHTML = ""; for (var type in survivalInventory) { var slot = document.createElement("div"); slot.className = "inventory-slot"; slot.dataset.type = type; slot.style.width = "30px"; slot.style.height = "30px"; slot.style.boxSizing = "border-box"; slot.style.cursor = "pointer"; slot.style.backgroundColor = "rgba(150,150,150,1)"; slot.style.border = '2px solid black'; slot.innerText = survivalInventory[type]; slot.addEventListener("click", function() { currentBlockColor = null; selectedSlot = this.dataset.type; }); invDiv.appendChild(slot); } } var gameTime = 0; function updateDayNightCycle(deltaTime) { gameTime += deltaTime; var dayLength = 60; if (gameTime > dayLength) { gameTime %= dayLength; } var angle = (gameTime / dayLength) * 2 * Math.PI; var sunDir = [Math.sin(angle), Math.cos(angle), 0]; gl.useProgram(shaderProgram); gl.uniform3fv(programInfo.uniformLocations.uLightDirection, sunDir); var dayClear = [0.5, 0.7, 1.0, 1.0]; var nightClear = [0.05, 0.05, 0.2, 1.0]; var brightness = Math.max(Math.cos(angle), 0.2); var clearColor = []; for (var i = 0; i < 4; i++) { clearColor[i] = nightClear[i] + (dayClear[i] - nightClear[i]) * brightness; } gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]); } function drawScene() { gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); var viewMatrix = mat4.create(); mat4.rotateX(viewMatrix, viewMatrix, -pitch); mat4.rotateY(viewMatrix, viewMatrix, -yaw); mat4.translate(viewMatrix, viewMatrix, [-player.x, -player.y, -player.z]); var vpMatrix = mat4.create(); mat4.multiply(vpMatrix, projectionMatrix, viewMatrix); gl.uniformMatrix4fv(programInfo.uniformLocations.uVP, false, vpMatrix); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, detailTexture); gl.uniform1i(programInfo.uniformLocations.uSampler, 0); for (var key in chunks) { var chunk = chunks[key]; var dx = (chunk.chunkX << 4) - player.x; var dz = (chunk.chunkZ << 4) - player.z; if (dx * dx + dz * dz > (VIEW_DISTANCE * 16) * (VIEW_DISTANCE * 16)) continue; chunk.draw(gl); } updatePlaceholder(); drawPlaceholder(vpMatrix); updateCoords(); fpsFrames++; fpsTime += deltaTime; if (fpsTime >= 1.0) { avgFPS = fpsFrames; fpsFrames = 0; fpsTime = 0; document.getElementById("loading").style.visibility = "hidden"; } fpsElem.innerText = "FPS: " + avgFPS; if (gameMode === "survival" && breakingBlock) { breakTimer += deltaTime; if (breakTimer >= breakTimeRequired) { var key = breakingBlock.x + "," + breakingBlock.y + "," + breakingBlock.z; blockEdits[key] = null; var chunkX = breakingBlock.x >> 4; var chunkZ = breakingBlock.z >> 4; var chunk = chunks[chunkX + "," + chunkZ]; if (chunk) chunk.update(gl); survivalInventory[breakingBlock.type] = (survivalInventory[breakingBlock.type] \|\| 0) + 1; updateSurvivalInvDisplay(); breakingBlock = null; breakTimer = 0; } } } function updateCoords() { var coordsDiv = document.getElementById("coords"); coordsDiv.innerText = "x: " + player.x.toFixed(1) + ", y: " + player.y.toFixed(1) + ", z: " + player.z.toFixed(1); } function saveWorld() { setTimeout(function() { var saveObj = { player: player, edits: blockEdits, mode: gameMode, health: playerHealth, inv: survivalInventory }; document.getElementById("saveData").value = JSON.stringify(saveObj); }, 0); } function loadWorld(saveObj) { var oldInv = document.getElementById("inventory"); if (oldInv) oldInv.remove(); makeInv(); if (saveObj.player) player = saveObj.player; blockEdits = saveObj.edits \|\| {}; gameMode = saveObj.mode \|\| "creative"; if (gameMode === "survival") { playerHealth = saveObj.health \|\| maxHealth; survivalInventory = saveObj.inv \|\| {}; healthBar.style.display = "block"; updateHealthBar(); } else { healthBar.style.display = "none"; } for (var key in chunks) { chunks[key].update(gl); } } var lastTime = performance.now() * 0.001; var deltaTime = 0; function gameLoop(currentTime) { if (!gameRunning) return; currentTime = 0.001; deltaTime = currentTime - lastTime; lastTime = currentTime; updateDayNightCycle(deltaTime); updatePlayer(deltaTime); updateChunks(); drawScene(); animationFrameId = requestAnimationFrame(gameLoop); } document.getElementById("startGameBtn").addEventListener("click", function() { gameMode = "creative"; healthBar.style.display = "none"; var oldInv = document.getElementById("inventory"); if (oldInv) oldInv.remove(); makeInv(); showScene(gameScene); gameRunning = true; lastTime = performance.now() 0.001; animationFrameId = requestAnimationFrame(gameLoop); pauseMenu.style.display = "none"; canvas.focus(); resizeCanvas(); }); document.getElementById("startSurvivalBtn").addEventListener("click", function() { gameMode = "survival"; playerHealth = maxHealth; survivalInventory = {}; verticalVelocity = 0; onGround = false; healthBar.style.display = "block"; updateHealthBar(); var oldInv = document.getElementById("inventory"); if (oldInv) oldInv.remove(); makeInv(); showScene(gameScene); gameRunning = true; lastTime = performance.now() * 0.001; animationFrameId = requestAnimationFrame(gameLoop); pauseMenu.style.display = "none"; canvas.focus(); resizeCanvas(); }); document.onpointerlockchange = function() { if (document.pointerLockElement !== canvas) { pauseMenu.style.display = "flex"; } }; document.getElementById("loadGameBtn").addEventListener("click", function() { try { var data = document.getElementById("loadData").value; var saveObj = JSON.parse(data); loadWorld(saveObj); showScene(gameScene); gameRunning = true; lastTime = performance.now() * 0.001; animationFrameId = requestAnimationFrame(gameLoop); pauseMenu.style.display = "none"; canvas.focus(); resizeCanvas(); } catch(e) { alert("Invalid save data!"); } }); document.addEventListener("keydown", function(event) { if (gameScene.style.display === "block" && event.key === "Escape") { if (pauseMenu.style.display === "flex") { pauseMenu.style.display = "none"; canvas.requestPointerLock(); } else { pauseMenu.style.display = "flex"; document.exitPointerLock(); } } }); document.getElementById("resumeBtn").addEventListener("click", function() { pauseMenu.style.display = "none"; canvas.requestPointerLock(); }); document.getElementById("backToMenuBtn").addEventListener("click", function() { gameRunning = false; cancelAnimationFrame(animationFrameId); showScene(menuScene); document.exitPointerLock(); }); document.getElementById("pauseSaveBtn").addEventListener("click", function() { setTimeout(function() { saveWorld(); showScene(saveScene); document.exitPointerLock(); }, 0); }); document.getElementById("copyBtn").addEventListener("click", function() { var saveText = document.getElementById("saveData"); saveText.select(); document.execCommand("copy"); alert("Copied to clipboard!"); }); document.getElementById("saveBackBtn").addEventListener("click", function() { showScene(gameScene); pauseMenu.style.display = "flex"; }); </script> </body> </html> <!-- © 2025 Eldiiar Bekbolotov First released on the Khan Academy Computing Platform (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) -->
Folds	28,159,162,1352
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIeOrvKbCQw
Votes	2
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Eldiiar Bekbolotov
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	23 hours ago, 1743987688463
Updated	23 hours ago, 1743987688463
Source Deleted	unknown