Viewing Program

Program Data

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

Title	[FIXED] Underground Escape Demo [Chadtober/Khantober]
ID	5429431308304384
Created	2 months ago, 1729001959133
Updated	2 months ago, 1729089525662
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>[FIXED] Underground Escape Demo [Chadtober/Khantober]</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet"> <style> body { margin:0; overflow:hidden; font-family:"Noto Sans"; } { transition: 0.5s ease; } img { width: 300px; height: 300px; margin: auto; } /canvas{/ / background:rgb(10, 10, 10);/ /}/ #play{ position:fixed; top:263px; left:178px; width:250px; height:100px; font-size:80px; background:rgb(176, 176, 176); border-radius: 10px; border:none; } #play:hover{ background:rgb(125, 125, 125); /background-image: rgba(0,0,0,10%) url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Domica_Cave_22.jpg/220px-Domica_Cave_22.jpg);/ } #sub{ position:fixed; top:405px; left:392px; width:171px; height:92px; font-size:80px; background:rgb(176, 176, 176); border-radius: 10px; border:none; } #sub:hover{ background:rgb(125, 125, 125); /background-image: rgba(0,0,0,10%) url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Domica_Cave_22.jpg/220px-Domica_Cave_22.jpg);/ } #how{ position:fixed; top:405px; left:36px; width:171px; height:92px; font-size:80px; background:rgb(176, 176, 176); border-radius: 10px; border:none; } #how:hover{ background:rgb(125, 125, 125); /background-image: rgba(0,0,0,10%) url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Domica_Cave_22.jpg/220px-Domica_Cave_22.jpg);/ } </style> <!--all code int this script tag made before contest--> <style> @keyframes rotate{ 0%{ transform:rotateY(0deg); } 90%{ transform:rotateY(0deg); } 100%{ transform:rotateY(-1060deg); } } #logo{ animation: rotate 4.5s ease-out infinite; transition: .3s ease; display:block; position:fixed; right:2px; bottom:2px; border-radius:24px; width:52px; height:52px; } #logo:hover{ width:56px; height:56px; } </style> </head> <body> <canvas id = "canvas"></canvas> <!--next 3 lines made before contest--> <a target="_blank" href="http://www.khanacademy.org/profile/Vicioustrex"> <img id="logo" src="https://www.khanacademy.org/computer-programming/new-program/6026284286918656/4854135780065280.png"width="52"> </a> <button id = "play">Play</button> <a target = "blank" href = "https://www.khanacademy.org/computer-programming/vicioustrexs/5318030875082752" ><button id = "sub">Sub</button></a> <button id = "how" onClick = "alert('move with the arrow keys or wsad dont fall of the map!!')">How</button> <script type> var sssxxx = false; </script> <script type>//<script> function program(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var buttons = [document.getElementById('how'),document.getElementById('play'),document.getElementById('sub')]; canvas.width = 600 canvas.height = 600 canvas.style.background = "black" var mousex = 0; var mousey = 0; var clicked = false; var keys = {}; window.addEventListener("keydown", (e) => { e.preventDefault(); keys[e.key] = true; }) window.addEventListener("keyup", (e) => { delete keys[e.key]; }) window.addEventListener("mousemove", (e) => { mousex = e.x; mousey = e.y; }) window.addEventListener('click', (e) => { clicked = true }); function line(x1, y1, x2, y2){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); ctx.closePath(); } function stickman(x, y, s, speed, color){ ctx.save(); ctx.translate(-31 + x,-100 + (90 - Math.sin(numFrames/7.5) 15)+y); ctx.scale(s,s) ctx.strokeStyle = color; ctx.lineWidth = "7"; line(200,143,200,240); ctx.fillStyle = 'rgba(0,0,0,0)' ctx.beginPath(); ctx.ellipse(200, 121, 20, 20, 0, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.save(); ctx.translate(200, 240); ctx.rotate(1.0 + Math.sin(numFrames/speed) * 0.15 * Math.PI); line(0,0,40,40); ctx.save(); ctx.translate(40, 40); ctx.rotate(1.0 + Math.sin(numFrames/speed) * 0.25 * Math.PI); line(0,0,40,40); ctx.save(); ctx.translate(40, 40); ctx.rotate(1.7 + Math.sin(numFrames/speed) * 0.10 * Math.PI); line(0,0,-20,-20); ctx.restore(); ctx.restore(); ctx.restore(); ctx.save(); ctx.translate(200, 240); ctx.rotate(1.0 - Math.sin(numFrames/speed) * 0.15 * Math.PI); line(0,0,40,40); ctx.save(); ctx.translate(40, 40); ctx.rotate(1.0 - Math.sin(numFrames/speed) * 0.25 * Math.PI); line(0,0,40,40); ctx.save(); ctx.translate(40, 40); ctx.rotate(1.7 - Math.sin(numFrames/speed) * 0.10 * Math.PI); line(0,0,-20,-20); ctx.restore(); ctx.restore(); ctx.restore(); ctx.save(); ctx.translate(200, 154); ctx.rotate(1.0 - Math.sin(numFrames/speed) * 0.15 * Math.PI); line(0,0,40,40); line(40,40,83,20); line(83,20,90,15); ctx.restore(); ctx.save(); ctx.translate(200, 154); ctx.rotate(1.0 + Math.sin(numFrames/speed) * 0.15 * Math.PI); line(0,0,40,40); line(40,40,83,20); line(83,20,90,15); ctx.restore(); ctx.restore(); } var score = 0; function coll(x1, y1, w1, h1, x2, y2, w2, h2){ return x1 + w1 > x2 && x2 + w2 > x1 && y1 + h1 > y2 && y2 + h2 > y1 } class Player{ constructor (x,y){ this.x = x; this.y = y; this.w = 23; this.h = 75; this.speed = 3; this.jump_power = this.speed * 3.5; this.can_jump = false; this.x_vel = 0; this.y_vel = 0; this.grav = 0.4; this.dir = "right" } move(){ this.prev_x = this.x; this.prev_y = this.y; this.x += this.x_vel; this.y += this.y_vel; this.x_vel = 0; this.y_vel += this.grav; if(keys.ArrowUp && this.can_jump \|\| keys.w && this.can_jump){ this.y_vel = -this.jump_power; this.can_jump = false; } if(keys.ArrowLeft \|\| keys.a){ this.x_vel -= this.speed; this.dir = "left" } if(keys.ArrowRight \|\| keys.d){ this.x_vel += this.speed; this.dir = "right" } } draw(){ if(this.dir === "right"){ stickman(this.x, this.y, 0.2, 15, "white") }else{ ctx.save() ctx.translate(this.w+this.x, this.y); ctx.scale(-1, 1); stickman(0, 0, 0.2, 15, "white") ctx.restore() } } coll(obs){ if(this.x + this.w > 600){ this.x = 600-this.w; } if(coll(this.x, this.y, this.w, this.h, obs.x, obs.y, obs.w, obs.h)){ if(this.prev_y + this.h <= obs.y){ this.y = obs.y - this.h; this.y_vel = 0; this.can_jump = true; } else if(this.prev_y >= obs.y + obs.h){ this.y = obs.y + obs.h; this.y_vel = 0; } else if(this.prev_x + this.w <= obs.prev_x){ this.x = obs.x - this.w; // this.x_vel = 0; } else if(this.prev_x >= obs.x + obs.w){ this.x = obs.x + obs.w; this.x_vel = 0; } } } } var player = new Player(200,200); class block{ constructor (x,y){ this.x = x; this.y = y; this.w = 30; this.h = 30; } draw(){ ctx.fillStyle = "rgb(77, 77, 77)" ctx.fillRect(this.x, this.y, this.w, this.h); ctx.fillStyle = "rgb(46, 45, 46)" ctx.fillRect(this.x+2, this.y+15, this.w/4, this.h/4); ctx.fillRect(this.x, this.y+5, this.w/5, this.h/6); ctx.fillRect(this.x+24, this.y+5, this.w/5, this.h/6); ctx.fillStyle = "rgb(184, 184, 184)" ctx.fillRect(this.x+15, this.y, this.w/5, this.h/6); ctx.fillRect(this.x+15, this.y+27, this.w/5, this.h/7); this.prev_x = this.x; this.x -=2.1; } coll(){ } } class Block{ constructor (x,y){ this.x = x; this.y = y; this.w = 30; this.h = 30; } draw(){ ctx.fillStyle = "rgb(77, 77, 77)" ctx.fillRect(this.x, this.y, this.w, this.h); ctx.fillStyle = "rgb(46, 45, 46)" ctx.fillRect(this.x+2, this.y+15, this.w/4, this.h/4); ctx.fillRect(this.x, this.y+5, this.w/5, this.h/6); ctx.fillRect(this.x+24, this.y+5, this.w/5, this.h/6); ctx.fillStyle = "rgb(184, 184, 184)" ctx.fillRect(this.x+15, this.y, this.w/5, this.h/6); ctx.fillRect(this.x+15, this.y+27, this.w/5, this.h/7); this.prev_x = this.x; this.x -=2.1; } coll(){ } } class Lava{ constructor (x,y){ this.x = x; this.y = y; this.w = 30; this.h = 30; } draw(){ ctx.fillStyle = "rgb(247, 5, 73)" ctx.fillRect(this.x, this.y, this.w, this.h); this.prev_x = this.x; this.x -=2.1; } coll(){ if(coll(player.x,player.y,player.w,player.h,this.x,this.y,this.w,this.h)){ scene = 'loose' player.y = 200 } } } //chal·lenge var challenges = [ [ " p", "", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " #########", " ", "", " ##### #####", "#########LLLLL######", ], [ " p", "", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ##", " ###", " ####", " ", " ", " ##", " ##### #####", "######### ######", ], [ " p", "", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ####", " ", " ", " ", " ###", " ", " ", "#### ", ], [ " p", "", "LLLLLLLLLLLLLLLLLL", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ####", " ", " ", " ", " ###", " ", " ", "##########LLLL####", ] ]; var challenge = 0; var blocks = [] var check = 0; var Blocks = []; for(var i = 0; i < 22; i++){ Blocks.push(new Block(i30, 400)); } function level(x){ challenge = Math.round(Math.random() challenges.length) for(var i = 0; i < challenges[challenge].length; i++){ for(var j = 0; j < challenges[challenge][i].length; j++){ switch(challenges[challenge][i][j]){ case '#': blocks.push(new block(x + (j30), i30)) break; case 'L': blocks.push(new Lava(x + (j30), i30)) break; } } } } var xx = 600; function drawit(x){ for(var i = x; i < x+6;i ++){ level(i * 600); } } drawit(0); var drawitnum = 0; function sant1(x){ ctx.save(); ctx.translate(x,0); ctx.fillStyle = "rgb(115, 115, 115)" ctx.save() ctx.translate(0,-38); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 179); ctx.lineTo(900,0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.save(); ctx.translate(900,643) ctx.scale(-1,-1); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 179); ctx.lineTo(900,0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.restore(); } function sant2(x){ ctx.save(); ctx.translate(x,0); ctx.fillStyle = "rgb(87, 87, 87)" ctx.save() ctx.translate(-120,-59); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 298); ctx.quadraticCurveTo(927, 338, 926, 200); ctx.quadraticCurveTo(927, 113, 1007, 0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.save(); ctx.translate(969,675) ctx.scale(-1,-1); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 298); ctx.quadraticCurveTo(927, 338, 926, 200); ctx.quadraticCurveTo(927, 113, 1007, 0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.restore(); } function sant3(x){ ctx.save(); ctx.fillStyle = "rgb(51, 50, 51)" ctx.translate(x,0); ctx.save() ctx.translate(-283,-101); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 298); ctx.quadraticCurveTo(927, 338, 926, 200); ctx.quadraticCurveTo(927, 113, 1007, 0); ctx.quadraticCurveTo(1150, 131, 1190, 246); ctx.lineTo(1190,0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.save(); ctx.translate(1304,721) ctx.scale(-1,-1); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 179); ctx.quadraticCurveTo(40, 148, 53, 84); ctx.quadraticCurveTo(91, 9, 185, 84); ctx.quadraticCurveTo(206, 95, 253, 211); ctx.quadraticCurveTo(278, 335, 320, 222); ctx.quadraticCurveTo(318, 226, 371, 111); ctx.quadraticCurveTo(434, 52, 513, 111); ctx.quadraticCurveTo(560, 204, 560, 265); ctx.quadraticCurveTo(560, 449, 632, 369); ctx.quadraticCurveTo(647, 354, 686, 216); ctx.quadraticCurveTo(800, -31, 840, 97); ctx.quadraticCurveTo(869, 254, 900, 298); ctx.quadraticCurveTo(927, 338, 926, 200); ctx.quadraticCurveTo(927, 113, 1007, 0); ctx.quadraticCurveTo(1150, 131, 1190, 246); ctx.quadraticCurveTo(1244, 303, 1325, 0); ctx.fill(); ctx.closePath(); ctx.restore(); ctx.restore(); } var backgxs = [0,0,0] var numFrames = 0; var scene = "home" function button(x, y, w, h,sceene){ if(mousex > x && mousex < x + w && mousey > y && mousey < y + h && clicked){ scene = sceene; } } function reset(){ player.y = 0 os = score if(score > hs){ hs = score } score = 0; } function game(){ score ++; ctx.fillStyle = "white" // ctx.fillRect(0,0,23,75); // stickman(0, 0, 0.2, 15, "black") ctx.font = "20px Noto Sans" ctx.fillText("Score:" + score, 10, 20); // ctx.fillText("check" + check, 10, 40); // ctx.fillText("xx" + xx, 10, 60); player.draw(); player.move(); if(player.x + player.w < 0){ reset(); scene = "loose" player.x = 200; } for(var i = 0; i < blocks.length; i++){ blocks[i].draw(); blocks[i].coll(); player.coll(blocks[i]); if(blocks[i].x < -70){ blocks.splice(i, 1); i--; } } check +=2; if(check % 600 === 0){ drawitnum += 1; drawit(drawitnum); } if(player.y > 600){ reset(); scene = "loose" } } function home(){ ctx.fillStyle = "white" button(177,262,250,102,"game"); button(35,404,174,93,"how"); ctx.fillstyle = "black" ctx.font = "92px Noto Sans" ctx.fillText("Underground",4,85) ctx.fillText("Escape",175,179) player.draw(); player.move(); for(var i = 0; i < Blocks.length; i++){ Blocks[i].draw(); player.coll(Blocks[i]); if(Blocks[i].x < -25){ Blocks[i].x = 600; } } } var os = 0; var hs = 0; function loose(){ ctx.fillStyle = "white" button(177,262,250,102,"game"); ctx.fillstyle = "black" ctx.font = "65px Noto Sans" ctx.fillText("You Lost ):",168,107) ctx.fillText("Play Again?",158,187) ctx.font = "25px Noto Sans" ctx.fillText("Last Score: " + os + " High Score: " + hs,106,580) player.draw(); player.move(); for(var i = 0; i < Blocks.length; i++){ Blocks[i].draw(); player.coll(Blocks[i]); if(Blocks[i].x < -25){ Blocks[i].x = 600; } } } function draw(){ ctx.clearRect(0,0,600,600) sant3(backgxs[2]); sant3(backgxs[2]+900); sant2(backgxs[1]); sant2(backgxs[1]+900); sant1(backgxs[0]); sant1(backgxs[0]+900); switch(scene) { case "home": buttons[0].style.display = "block" buttons[1].style.display = "block" buttons[2].style.display = "block" home(); break; case "game": buttons[0].style.display = "none" buttons[1].style.display = "none" buttons[2].style.display = "none" game(); break; case "loose": buttons[0].style.display = "block" buttons[1].style.display = "block" buttons[2].style.display = "block" loose(); break; } backgxs[0]--; backgxs[1]-=0.8; backgxs[2]-=0.5; if(backgxs[0] <= -900){ backgxs[0] = 0; } if(backgxs[1] <= -900){ backgxs[1] = 0; } if(backgxs[2] <= -900){ backgxs[2] = 0; } clicked = false; numFrames ++; } window.setInterval(draw,10); sssxxx = true; } program(); </script> <script type> if(!sssxxx){ // alert("Oops there is a problem with the program :( please reload :)") } </script> <!--screen size check script made before contest--> <script type> if (window.innerWidth < 600\|\|window.innerHeight < 600) { document.body.style.backgroundColor = "rgb(250, 195, 200)"; document.body.innerHTML = ` <h1 style = "color:rgb(156, 5, 53);font-family:"Noto Sans";padding:5%;font-size:400%;text-align:center;"id = "errer">Invalid screen size! Please go <a style = "color:rgb(255,0,0);"href="https://www.khanacademy.org/computer-programming/new-webpage/5429431308304384?width=600&height=600" target="_blank">here</a> to view.</h1> ` } </script> </body> </html> <script type> /** @subpage: https://www.khanacademy.org/computer-programming/vicioustrexs/5318030875082752 @leaderboard{ #1 EasyPeasy123z - 338098 #2 Vicioustrex - 24601 #3 TD Overlord - 14312 #4 Cheesecake Programming - 6492 #5 Cyan Spirit - 5929 } @todo{ @fixgamplay } */ </script> <div> <!-- Contest: Underground! I have completed 100% of Khan Academy's 'Intro to HTML/CSS' and have been programming for ~24 months. I would prefer to be placed in the [Intermediate] bracket TODO: - Fill out statements above - Save your entry as a spin-off of this program - Have fun! --> </div> <!-- #1 Vicioustrex - 8092 -->
Folds	1,882,897,899
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvjn8HSCQw
Votes	20
Spin-Offs	2
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6509703024001024","title":"Contest: Underground - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustre𝑥 BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	2 days ago, 1735937678828
Updated	2 days ago, 1735937678828
Source Deleted	unknown