Viewing Program

Program Data

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

Title	To The Highest Star(TTHS)
ID	4942524245262336
Created	16 days ago, 1734968215683
Updated	16 days ago, 1734990785029
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>To The Highest Star(TTHS)</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sanst\|Mulish&display=swap" rel="stylesheet"> <style> * { transition: 0.5s ease; } @keyframes fadeAway { from { opacity: 100%; display: block; } to { opacity: 0%; display: none; } } @keyframes fadeIn { from { opacity: 0%; display: block; } to { opacity: 100%; display: block; } } body { margin: 0px; padding: 0px; overflow: hidden; font-family: "Mulish", monospace; } #logo { position: fixed; top: -50px; right: 5px; border-radius: 51px; z-index: 20; } #logo:hover { border-radius: 10px; width: 10%; } #play { bottom: 180px; right: 0px; width: 270px; height: 100px; } #play:hover{ width:300px; } #how { bottom: 90px; right: 0px; width: 230px; height: 90px; } #how:hover{ width:250px; } #sub { bottom: 0px; right: 0px; width: 190px; height: 90px; } #sub:hover{ width:200px; } #shop { bottom: 0px; left: 0px; width: 150px; height: 70px; font-size:50px; } #shop:hover{ width:200px; } #retry { bottom: calc(40% - 30px); left: calc(50% - 100px); width: 200px; height: 60px; font-size:40px; backdrop-filter:blur(10px); padding:1% 3%; color:white; background:rgba(222, 222, 222,20%); border:solid 2px rgba(255, 255, 255, 20%); border-radius: 0 25px 0 25px; } #retry:hover{ background:rgba(255, 255, 255,21%); left: calc(50% - 125px); width:250px; border-radius: 25px 0px 25px 0px; } #back{ top: 0px; left: 0px; width: 130px; height: 60px; font-size:50px; opacity: 90%; } #back:hover{ width:150px; } button{ backdrop-filter: blur(5px); border: none; color: black; opacity: 80%; z-index: 5; position: fixed; font-size: 80px; background: rgb(1, 50, 74); /border-radius: 10px/ } button:hover { background: rgb(4, 72, 191); opacity: 100%; cursor:pointer; } #tex-canvas { display: none; } #background-canvas { background: rgb(214, 167, 214); width: 600px; display: none; } #canvas { position: fixed; left: 0px; top: 0px; z-index: 1; cursor:none; } div{ position: fixed; top:0px; left:5%; width:90%; height:600px; z-index:4; color:white; font-size: 40px; padding-top:110px; text-align:center; backdrop-filter:blur(5px); } div a{ color:rgb(3, 230, 255); font-size: 130%; } div a:hover{ font-size: 135%; } #loading{ top:0px; left:0%; width:100%; background:black; z-index:30; } </style> </head> <body> <img src="https://cdn.kastatic.org/images/throbber-full.gif" width="500"> <canvas id="tex-canvas"></canvas> <canvas id="background-canvas"></canvas> <canvas id="canvas"></canvas> <div id = "how-page"> You are tasked with the mission defeat every last ship and be the last one standing. Don't get shot down or crash. Move with the arrow keys or wad and space to fire don't fail complete your mission or don't come back. </div> <div id = "sub-page"> <a target = "_blank" href = "https://www.khanacademy.org/computer-programming/vicioustrexs-subpage-20/5318030875082752">Sub to Vicioustrex</a><br><br> <a target = "_blank" href = "https://www.khanacademy.org/computer-programming/chickenfarmer2009s-new-subpage/6181465531793408">Sub to Chickenfarmer</a> </div> <div id = "loading"> <h1>Loading fun...</h1> </div> <button id="how">How</button> <!--<button id="shop">Shop</button>--> <button id="sub">Sub</button> <button id="play" >Play</button> <button id = "back">Back</button> <button id = "retry">Retry</button> <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="50"> </a> <div style="position:fixed;left:0px;bottom:0px;width:1px;height:1px;"> </div> <script type> //<script> <-- restart button //set stuff up function pro() { let tex_canvas = document.getElementById('tex-canvas') let tex_ctx = tex_canvas.getContext('2d'); tex_canvas.width = 600; tex_canvas.height = 1000; //Basically PJS function random(min, max) { return min + Math.random() * (max - min); } //PJS function ellipse(x, y, w, h) { tex_ctx.beginPath(); tex_ctx.ellipse(x, y, w / 2, h / 2, 0, 0, 2 * Math.PI); tex_ctx.fill(); tex_ctx.closePath(); }; //Not PJS function stroke_ellipse(x, y, w, h) { tex_ctx.beginPath(); tex_ctx.ellipse(x, y, w / 2, h / 2, 0, 0, 2 * Math.PI); tex_ctx.fill(); tex_ctx.stroke(); tex_ctx.closePath(); } //create planets and such //red one tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.ellipse(100, 100, 100, 100, 0, 0, 2 * Math.PI); tex_ctx.lineTo(0, 100); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(4px)"; tex_ctx.fillStyle = "red" tex_ctx.fillRect(0, 0, 600, 600); for (var i = 0; i < 200; i++) { tex_ctx.fillStyle = "rgba(255, 153, 0,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(255, 0, 43,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(255, 157, 0,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); } /// reset clip to default tex_ctx.restore(); //blue one tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.ellipse(300, 100, 100, 100, 0, 0, 2 * Math.PI); tex_ctx.lineTo(0, 100); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(4px)"; tex_ctx.fillStyle = "blue" tex_ctx.fillRect(0, 0, 600, 600); for (var i = 200; i < 400; i++) { tex_ctx.fillStyle = "rgba(60, 255, 0,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(17, 0, 255,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(0, 255, 217,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); } /// reset clip to default tex_ctx.restore(); //black one tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.ellipse(500, 100, 100, 100, 0, 0, 2 * Math.PI); tex_ctx.lineTo(0, 100); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(4px)"; tex_ctx.fillStyle = "black" tex_ctx.fillRect(0, 0, 600, 600); for (var i = 400; i < 600; i++) { tex_ctx.fillStyle = "rgba(255, 255, 255,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(255, 153, 0,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(79, 79, 79,0.3)" ellipse(i, random(-0, 200), random(5, 100), random(5, 50)); } /// reset clip to default tex_ctx.restore(); //another blue one tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.ellipse(300, 300, 100, 100, 0, 0, 2 * Math.PI); tex_ctx.lineTo(0, 100); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(3.5px)"; tex_ctx.fillStyle = "blue" tex_ctx.fillRect(0, 0, 600, 600); for (var i = 200; i < 600; i++) { tex_ctx.fillStyle = "rgba(0, 255, 68,0.3)" ellipse(i, random(200, 400), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(255, 255, 255,0.3)" ellipse(i, random(200, 400), random(5, 100), random(5, 50)); tex_ctx.fillStyle = "rgba(20, 8, 250,0.3)" ellipse(i, random(200, 400), random(5, 100), random(5, 50)); } /// reset clip to default tex_ctx.restore(); //gray one tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.ellipse(500, 300, 100, 100, 0, 0, 2 * Math.PI); tex_ctx.lineTo(0, 100); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(2px)"; tex_ctx.fillStyle = "rgb(64, 64, 64)" tex_ctx.fillRect(400, 200, 200, 200); tex_ctx.save(); tex_ctx.translate(400, 0); tex_ctx.fillStyle = "rgb(112, 110, 112)"; tex_ctx.beginPath(); tex_ctx.moveTo(0, 240); tex_ctx.quadraticCurveTo(1, 204, 50, 200); tex_ctx.quadraticCurveTo(51, 218, 122, 223); tex_ctx.quadraticCurveTo(174, 228, 206, 278); tex_ctx.quadraticCurveTo(120, 333, 38, 296); tex_ctx.quadraticCurveTo(-6, 284, 0, 240); tex_ctx.fill(); tex_ctx.closePath(); tex_ctx.restore() tex_ctx.fillStyle = "rgb(97, 97, 97)"; tex_ctx.beginPath(); tex_ctx.moveTo(400, 366); tex_ctx.quadraticCurveTo(401, 204, 450, 380); tex_ctx.quadraticCurveTo(451, 330, 522, 279); tex_ctx.quadraticCurveTo(574, 228, 606, 321); tex_ctx.quadraticCurveTo(520, 333, 438, 296); tex_ctx.quadraticCurveTo(406, 284, 400, 240); tex_ctx.fill(); tex_ctx.closePath(); tex_ctx.fillStyle = "rgb(46, 46, 46)"; tex_ctx.beginPath(); tex_ctx.moveTo(400, 462); tex_ctx.quadraticCurveTo(401, 234, 582, 435); tex_ctx.fill(); tex_ctx.closePath(); let grad = tex_ctx.createLinearGradient(400, 200, 600, 400); grad.addColorStop(1, 'rgb(255, 174, 0)'); grad.addColorStop(0, 'rgb(245, 51, 12)'); tex_ctx.lineWidth = "6" tex_ctx.strokeStyle = grad; //https://status.khanacademy.org/?_gl=118xxpe9_gaMTQzMjA2NzY0My4xNzMzOTQ4MTk0_ga_19G17DJYEEMTczNDAxNzEwMy43LjEuMTczNDAyNTk4Ni4wLjAuMA.. tex_ctx.beginPath(); tex_ctx.moveTo(524, 392); tex_ctx.lineTo(506, 380); tex_ctx.lineTo(500, 359); tex_ctx.lineTo(480, 359); tex_ctx.lineTo(459, 332); tex_ctx.stroke(); tex_ctx.closePath(); tex_ctx.beginPath(); tex_ctx.moveTo(495, 315); tex_ctx.lineTo(524, 319); tex_ctx.lineTo(532, 298); tex_ctx.lineTo(565, 293); tex_ctx.lineTo(587, 275); tex_ctx.lineTo(676, 275); tex_ctx.stroke(); tex_ctx.closePath(); tex_ctx.beginPath(); tex_ctx.moveTo(469, 290); tex_ctx.lineTo(490, 268); tex_ctx.lineTo(490, 268); tex_ctx.lineTo(481, 239); tex_ctx.lineTo(506, 219); tex_ctx.lineTo(494, 192); tex_ctx.stroke(); tex_ctx.closePath(); tex_ctx.beginPath(); tex_ctx.moveTo(408, 241); tex_ctx.lineTo(425, 268); tex_ctx.lineTo(413, 291); tex_ctx.lineTo(413, 311); tex_ctx.lineTo(407, 331); tex_ctx.lineTo(416, 349); tex_ctx.lineTo(416, 384); tex_ctx.stroke(); tex_ctx.closePath(); /// reset clip to default tex_ctx.restore(); //asteroid tex_ctx.save(); tex_ctx.beginPath(); tex_ctx.moveTo(0, 240); tex_ctx.quadraticCurveTo(1, 204, 50, 200); tex_ctx.quadraticCurveTo(51, 218, 122, 223); tex_ctx.quadraticCurveTo(174, 228, 171, 278); tex_ctx.quadraticCurveTo(120, 333, 38, 296); tex_ctx.quadraticCurveTo(-6, 284, 0, 240); tex_ctx.closePath(); tex_ctx.clip(); tex_ctx.filter = "blur(2px)"; tex_ctx.fillStyle = "rgb(64, 64, 64)" tex_ctx.fillRect(0, 200, 200, 200); for (var i = 0; i < 200; i += random(1, 5)) { let size = random(10, 25); tex_ctx.lineWidth = size / 10 tex_ctx.strokeStyle = "rgb(110, 110, 110)" tex_ctx.fillStyle = "rgba(46, 46, 46)" stroke_ellipse(i, random(200, 400), size, size); } /// reset clip to default tex_ctx.restore(); tex_ctx.save(); tex_ctx.translate(0, 400) tex_ctx.fillStyle = "black" tex_ctx.fillRect(0, 0, 600, 600) tex_ctx.filter = "blur(5px)" for (var i = 0; i < 500; i++) { if(i % 10 === 0){ tex_ctx.fillStyle = "rgb(127, 5, 250, 0.3)" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() 600, Math.random() * 600, Math.random() * 25, Math.random() * 25, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() tex_ctx.fillStyle = "rgb(250, 156, 5, 0.3)" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() * 600, Math.random() * 600, Math.random() * 50, Math.random() * 50, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() } } for (var i = 0; i < 500; i++) { if(i % 10 === 0){ tex_ctx.fillStyle = "rgb(250, 151, 3, 0.3)" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() * 600, Math.random() * 600, Math.random() * 25, Math.random() * 25, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() tex_ctx.fillStyle = "rgb(250, 5, 230, 0.3)" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() * 600, Math.random() * 600, Math.random() * 50, Math.random() * 50, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() } } tex_ctx.filter = "blur(0.5px)" for (var i = 0; i < 500; i++) { var rad = Math.random() * 1.5 tex_ctx.fillStyle = "white" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() * 600, Math.random() * 600, rad, rad, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() } for (var i = 0; i < 500; i++) { var rad = Math.random() * 1.5 tex_ctx.fillStyle = "white" tex_ctx.beginPath(); tex_ctx.ellipse(Math.random() * 600, Math.random() * 600, rad, rad, 0, 0, 2 * Math.PI); tex_ctx.fill() tex_ctx.closePath() } tex_ctx.filter = "none" tex_ctx.restore() } pro(); </script> <script type> //background setup function back() { let background_canvas = document.getElementById('background-canvas') let background_images = document.getElementById('tex-canvas') let b_ctx = background_canvas.getContext('2d'); background_canvas.width = 2000; background_canvas.height = 2000; //defined this twice XD function random(min, max) { return min + Math.random() * (max - min) } let size = 0 //create our whole background // b_ctx.fillRect(0,0,2000,2000); for (let i = 0; i < 2000; i += random(70, 500)) { size = random(30, 90) b_ctx.drawImage(background_images, 0, 0, 200, 200, i, random(0, 2000), size, size); } for (let i = 0; i < 2000; i += random(70, 500)) { size = random(30, 90) b_ctx.drawImage(background_images, 200, 0, 200, 200, i, random(0, 2000), size, size); } for (let i = 0; i < 2000; i += random(70, 500)) { size = random(30, 90) b_ctx.drawImage(background_images, 400, 0, 200, 200, i, random(0, 2000), size, size); } for (let i = 0; i < 2000; i += random(70, 500)) { size = random(30, 90) b_ctx.drawImage(background_images, 200, 200, 200, 200, i, random(0, 2000), size, size); } for (let i = 0; i < 2000; i += random(70, 500)) { size = random(30, 90) b_ctx.drawImage(background_images, 400, 200, 200, 200, i, random(0, 2000), size, size); } // b_ctx.fillstyle = 'rgba(0,0,0,2%)' // b_ctx.fillRect(1000,0,2000,2000) } back(); </script> <script type> //actual game function tths(what) { //make canvas let canvas = document.getElementById('canvas'); //the play button let play_button = document.getElementById('play'); let ctx = canvas.getContext('2d'); let vis = false; let how_page = document.getElementById('how-page'); let sub_page = document.getElementById('sub-page'); let back_b = document.getElementById('back'); let retry = document.getElementById('retry'); retry.style.display = "none" retry.addEventListener("click", (e) => { restart(); trans(2); }) let blockSize = 120; //the scene let scene = 1 let sceneToGo = 4; let isTransing = false; let blocks = []; //just right canvas.width = window.innerWidth; canvas.height = window.innerHeight; back_b.style.display = 'none' //create things for the transition function block(x, y){ this.x = x; this.y = y; this.life = 300; this.has = false; this.needSP = false; }; //allow them to exist block.prototype.exist = function(){ //none of them off the canvas if(this.x > canvas.width \|\| this.y > canvas.height){ this.needSP = true; } //draw them ctx.fillStyle = "black"; ctx.globalAlpha = this.life / 255; ctx.fillRect(this.x, this.y, blockSize, blockSize); ctx.globalAlpha = 1; //need to go away eventaully this.life -= 4; //new scene if(this.x >= window.innerWidth - blockSize * 2 && this.y >= window.innerHeight - blockSize * 2){ scene = sceneToGo; vis = true; if(scene === 1){ back_b.style.display = 'none' } if(scene === 1 \|\| scene === 2){ how_page.style.display = "none" sub_page.style.display = "none" how_page.style.animation = 'fadeAway 1s 1'; sub_page.style.animation = 'fadeAway 1s 1'; } } //no more block if(this.life < 0){ this.needSP = true; } //add more blocks if(this.life < 290 && this.has === false){ this.has = true; blocks.push(new block(this.x + blockSize, this.y), new block(this.x, this.y + blockSize)); } }; how_page.style.display = "none" sub_page.style.display = "none" //transitioning function trans(scen){ if(!isTransing){ isTransing = true; sceneToGo = scen; blocks.push(new block(0, 0)) if(scen != 1){ back_b.style.display = "block" back_b.style.animation = 'fadeIn 1s 1'; } retry.style.display = "none" if(scen !== 1){ //hide play button document.getElementById('play').style.display = 'none' //hide how button document.getElementById('how').style.display = 'none' //hide sub button document.getElementById('sub').style.display = 'none' //play button fade away document.getElementById('play').style.animation = 'fadeAway 1s 1'; //how button fade away document.getElementById('how').style.animation = 'fadeAway 1s 1'; //sub button fade away document.getElementById('sub').style.animation = 'fadeAway 1s 1'; }else{ //show play button document.getElementById('play').style.display = 'block' //hide how button document.getElementById('how').style.display = 'block' //hide sub button document.getElementById('sub').style.display = 'block' //play button fade away document.getElementById('play').style.animation = 'fadeIn 1s 1'; //how button fade away document.getElementById('how').style.animation = 'fadeIn 1s 1'; //sub button fade away document.getElementById('sub').style.animation = 'fadeIn 1s 1'; } } } //Allow the clicking of buttons! play_button.addEventListener("click", (e) => { trans(2) }) document.getElementById("how").addEventListener("click", (e) => { trans(3) }) document.getElementById("sub").addEventListener("click", (e) => { trans(4) }) back_b.addEventListener("click", (e) => { trans(1) }) //stuff for snake mouse thing let mousetx = [0,0,0,0,0,0,0,0,0,0]; let mousety = [0,0,0,0,0,0,0,0,0,0]; //width of and height canvas = width and height of page //canvas background = black canvas.style.background = "black"; //get canvas context //get the images let img = document.getElementById('tex-canvas') //get the background image let background_img = document.getElementById('background-canvas') //math function to use function dist(x1, y1, x2, y2) { return Math.hypot(x2 - x1, y2 - y1); } //mouse X and Y let mousex = 0; let mousey = 0; //is clicked? let clicked = false; //helps keys let keys = {}; //if key down window.addEventListener("keydown", (e) => { e.preventDefault(); keys[e.key] = true; }) //if key up window.addEventListener("keyup", (e) => { delete keys[e.key]; }) //if mouse moved window.addEventListener("mousemove", (e) => { mousex = e.x; mousey = e.y; }) //if you click window.addEventListener('click', (e) => { clicked = true }); //3rd time defining this lol we are much silly function random(min, max) { return min + Math.random() * (max - min); }; //number of frames let num_frames = 0; //works like PJS quad(); var quad = function(x1, y1, x2, y2, x3, y3, x4, y4) { ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.lineTo(x1, y1); ctx.fill(); ctx.stroke(); }; //Works like PJS triangle(); var triangle = function(x1, y1, x2, y2, x3, y3) { ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x1, y1); ctx.fill(); ctx.stroke(); }; //works like PJS line() var line = function(x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); }; //decently simple, like a rect. var gradient = function(x, y, w, h, colo1, colo2) { var grad = ctx.createLinearGradient(x, x, w, h); grad.addColorStop(0, colo1); grad.addColorStop(1, colo2); ctx.fillStyle = grad; ctx.fillRect(x, y, w, w); }; //base for the spaceships, extra designs are added for each type. var spaceShipBase = function(x, y, scal, activated,color) { ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal); ctx.fillStyle = "rgb(110, 110, 110)"; ctx.strokeStyle = "rgba(255, 255, 255, 0)"; //main body ctx.save(); ctx.beginPath(); triangle(100, 100, 110, 130, 90, 130); quad(110, 130, 110, 190, 90, 190, 90, 130); quad(60, 150, 140, 150, 107, 170, 93, 170); quad(90, 180, 110, 180, 120, 190, 80, 190); ctx.closePath(); ctx.clip(); //texturize it ctx.lineWidth = 0; var c = 160; var x1 = 100; for (var i = 100; i < 135; i++) { ctx.fillStyle = "rgb(" + c + ", " + c + ", " + c + ")"; ctx.fillRect(i, 100, 1, 100); ctx.fillRect(x1, 100, 1, 100) x1--; c -= 3; } ctx.restore(); //outlines ctx.strokeStyle = "rgb(150, 150, 150)"; ctx.lineWidth = 1.5; line(100, 100, 110, 130); line(110, 130, 110, 150); line(110, 150, 140, 150); line(140, 150, 110, 169); line(110, 169, 110, 180); line(110, 180, 121, 190); line(121, 190, 80, 190); line(80, 190, 90, 180); line(90, 180, 90, 169); line(90, 169, 62, 150); line(62, 150, 90, 150); line(90, 150, 90, 125); line(90, 127, 100, 100); //booster stuff in the back idk ctx.strokeStyle = "rgba(0, 0, 0, 0)"; var a = 0.5; for (var i = 190; i < 210; i++) { ctx.globalAlpha = a; ctx.fillStyle = color; ctx.fillRect(80, i, 42, 1); a -= 0.03; }; ctx.globalAlpha = 1; ctx.restore(); }; //aka enemies var policeShip = function(x, y, scal) { ctx.lineWidth = "1" ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal); ctx.strokeStyle = "rgba(255, 255, 255, 0)"; ctx.fillStyle = "gray"; ctx.fillRect(90, 109, 3, 20); ctx.fillRect(107, 109, 3, 20); spaceShipBase(0, 0, 1, true, "rgba(255, 0, 0)"); ctx.fillStyle = "red"; ctx.strokeStyle = "rgb(168, 168, 168)"; quad(95, 125, 105, 125, 108, 140, 92, 140); ctx.fillStyle = "rgba(255, 255, 255, 0.5"; //little glint of something idk ctx.filter = "blur(1px)"; ctx.beginPath(); ctx.ellipse(102, 133, 3, 7, 0, 0, Math.PI * 2) ctx.fill(); ctx.closePath(); ctx.filter = 'none'; ctx.strokeStyle = "rgba(255, 255, 255, 0)"; ctx.fillStyle = "gray"; ctx.fillRect(70, 130, 5, 20); ctx.fillRect(125, 130, 5, 20); ctx.restore(); }; //pirate ships, aka you var pirateShip = function(x, y, scal) { ctx.lineWidth = "1" ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal); spaceShipBase(0, 0, 1, true, "rgba(0, 225, 255)"); ctx.fillStyle = "blue"; ctx.strokeStyle = "rgb(168, 168, 168)"; triangle(98, 111, 98, 135, 92, 135); triangle(102, 111, 102, 135, 108, 135); ctx.fillStyle = "gray"; ctx.strokeStyle = "rgba(0, 0, 0, 0)"; ctx.fillRect(90, 109, 3, 20); ctx.fillRect(107, 109, 3, 20); ctx.fillRect(70, 140, 3, 10); ctx.fillRect(80, 140, 3, 10); ctx.fillRect(117, 140, 3, 10); ctx.fillRect(127, 140, 3, 10); ctx.restore(); }; //things you shoot var missile = function(x, y, scal) { ctx.lineWidth = "1" ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal) //main body ctx.fillStyle = "rgb(255, 255, 255)"; ctx.strokeStyle = "rgba(0, 0, 0, 0)"; ctx.beginPath(); quad(200, 130, 205, 130, 205, 150, 200, 150) quad(200, 140, 205, 140, 210, 145, 195, 145) triangle(200, 130, 202.5, 120, 205, 130) ctx.closePath(); ctx.save(); ctx.clip(); //texturize ctx.lineWidth = 0; var c = 160; var x1 = 100; for (var i = 195; i < 210; i++) { ctx.fillStyle = "rgb(" + c + ", " + c + ", " + c + ")"; ctx.fillRect(i, 97, 1, 100); ctx.fillRect(x1, 100, 1, 100) x1--; c -= 10; } ctx.restore(); //lil boost ctx.strokeStyle = "rgba(0, 0, 0, 0)"; var a = 0.5; for (var i = 150; i < 170; i++) { ctx.globalAlpha = a; ctx.fillStyle = "rgba(0, 225, 255)"; ctx.fillRect(200, i, 5, 1); a -= 0.03; }; ctx.globalAlpha = 1; ctx.restore(); }; //loading ctx.fillStyle = "white" ctx.font = "120px Noto Sans" ctx.fillText("Loading...", 25, 250) //hexagons. Fun fact: There is a PJS function called hex(). Idk what it does though. function hex(x,y){ ctx.save() ctx.beginPath(); ctx.moveTo(0 + x, 18 + y); ctx.lineTo(30 + x, 0 + y) ctx.lineTo(61 + x, 18 + y) ctx.lineTo(61 + x, 52 + y) ctx.lineTo(30 + x, 70 + y) ctx.lineTo(0 + x, 52 + y) ctx.lineTo(0 + x, 18 +y ); ctx.stroke(); ctx.closePath(); ctx.restore() } //Friends! let names = "Vicioustrex v,Chickenfarmer2009 v,Eyeinthesky v,Vortex v,RealCodingPro v,Washington v,Mathlete11 v,Leo2009 v,RedSus v,Hunter Hill v,Panda15 v,Bearkirb v,Yokiebob v,cwalsh1223 v,The Former Wizard of Oz v,Hokeycat v,Snacker Davis v,ThatWhiteGuy364 v,awesomeorion v,sugarnlight v,~The Wolf~ v,Karthikeya K v,Arden Dragon v,Pineapples v,ASBackup v,LeaferStudios v,Obi the khan v,3DA Games v,bumblebee v,Falling Dragon™ v,LZR v,Adriana ✧･ﾟ:* :･ﾟ✧ v,Ez Majora v,Aruna Starquest (Charlie) v,VVhiteTiger v,Cheesecake Programming v,LJ v,Wynder v,JJP v,BTDProductions v,$c@∫∑∑$ v,Crowsinanacreousvoid v,MaXX v,kiaantolia v,Hellomyolive v,Primosaur v,Lgcarnahan v,Rpcarnahan v,Live.Sadat v,Duke v,Norwegian Pathways v,CodeNinja v,emvalle10 v,PurpleDinosaur v,JSCoder v,Arctic Fox v,Clover v,inSYNC ,vJackson H v,TheLegoMango v,Fireball v,//I'M BOB v,🐺The Wolf Dude🐺 v,iza v,YA v,Samurai Warrior v,Reflex v,Lore v,Nobody v,Behemoth v,Boazon v,- S p a r t a - v,Arlene".split(" v,") let particles = []; //particle class class particle{ //build it constructor(x,y,xdir,ydir,c,s) { this.X = x; this.Y = y; this.Color = c; this.size = s; this.x_vel = xdir; this.y_vel = ydir; this.trans = random(220, 255); this.s = 0.5; } //draw it draw() { ctx.save() ctx.translate(this.X, this.Y); ctx.rotate(Math.tan(num_framesthis.X/100)); ctx.fillStyle = "rgba(" + this.Color + this.trans/255 + ")" ctx.fillRect(0-this.size/2, 0 - this.size/2, this.size, this.size); ctx.restore(); } //change it update() { this.X += this.x_vel; this.Y += this.y_vel; this.trans -= random(0, 5); this.size -= this.s; } } //bullet/missile function since this is canvas I can use classes class bullet { constructor(x, y, r) { this.x = x; this.y = y; this.y_vel = 0; this.x_vel = 0; this.speed = 8; this.rotate = r this.time = 0; //is it dead? this.dead = false this.a = false; } //draw it draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotate * Math.PI); missile(-102, -70, 0.5); ctx.restore(); } //update update() { if (this.a) { if (dist(this.x, this.y, Player.x, Player.y) < 200) { this.dead = true; Player.health -= 200 } } this.time++; if (this.time > 200) { //so we can remove it from the array this.dead = true; } this.x_vel = Math.sin(this.rotate * 3.14) * this.speed; this.y_vel = -Math.cos(this.rotate * 3.14) * this.speed; this.x += this.x_vel; this.y += this.y_vel; if(dist(Player.x, Player.y, this.x, this.y) < 600){ this.draw(); } } } //arrays for things let asteroids = []; let bullets = []; let Player; let notifs = []; //Ai function it works like this: it choses a random point on the map and goes there, then it goes to another random point and if it gets within a certan range of the player or another bot it goes torwardes it and starts shooting which is a prety realistic movement at least its how I move class AI { //build it. Goodness that's a lot of this constructor(x, y, type) { this.x = x; this.y = y; this.width = 10; this.height = 20; this.type = type; this.rotate = 0; this.y_vel = 0; this.x_vel = 0; this.speed = 5; this.gotox = random(-1000, 5500) this.gotoy = random(-1000, 5500) this.um1 = 0; this.um2 = 0; this.health = 100; this.name = names[random(0, names.length-1)] this.Ideal_rotate = 0; } //draw it draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotate * Math.PI); ctx.fillStyle = "white" ctx.fillRect(0 - this.width / 2, 0 - this.height / 2, this.width, this.height) policeShip(-50, -70, 0.5) ctx.restore(); ctx.strokeStyle = "rgb(122, 122, 122)" ctx.lineWidth = "5" ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.stroke(); ctx.closePath(); ctx.fillStyle = "red" } //make all the cool stuff happen move() { this.um1 = this.gotox - this.x; this.um2 = this.gotoy - this.y; this.Ideal_rotate = Math.atan2(this.um2, this.um1); if(this.Ideal_rotate > this.rotate){ this.rotate += 0.02 }else if(this.Ideal_rotate < this.rotate){ this.rotate -= 0.02 } //close to the player? if (dist(this.x, this.y, Player.x, Player.y) < 500 && dist(this.x, this.y, Player.x, Player.y) > 50) { //add particles if(num_frames % 10 === 0){ particles.push(new particle(this.x, this.y, this.x_vel / 2, -this.y_vel / 2, "255, 60, 0,", 4)); } //make it go to the player this.gotox = Player.x; this.gotoy = Player.y; //make it shoot if (num_frames % 15 === 0) { bullets.push(new bullet(this.x + Math.sin(this.rotate * 3.14) * 25, this.y - Math.cos(this.rotate * 3.14) * 25, this.rotate)) } } //loop through the other AI to see if they're close. Fight them if so. for (var i = 0; i < Ais.length; i++) { if (dist(this.x, this.y, Ais.x, Ai.y) < 500) { this.gotox = Ai.x; this.gotoy = Ai.y; if (num_frames % 15 === 0) { bullets.push(new bullet(this.x + Math.sin(this.rotate * 3.14) * 25, this.y - Math.cos(this.rotate * 3.14) * 25, this.rotate)) } } } } //update stuff update() { this.x_vel = Math.sin(this.rotate * 3.14) * this.speed; this.y_vel = -Math.cos(this.rotate * 3.14) * this.speed; //new destination if (dist(this.gotox, this.gotoy, this.x, this.y) < 10) { this.gotox = random(-1000, 6000) this.gotoy = random(-1000, 6000) } //no go off canvas! if (this.x < -1050) { this.x = -1050 } if (this.x > 6050) { this.x = 6050 } if (this.y < -1050) { this.y = -1050 } if (this.y > 6050) { this.y = 6050 } this.x += this.x_vel; this.y += this.y_vel; if(dist(Player.x, Player.y, this.x, this.y) < 600){ this.draw(); } this.move(); } } //Player class player { //build it constructor(x, y, type) { this.x = x; this.y = y; this.width = 10; this.height = 20; this.type = type; this.rotate = 0; this.y_vel = 0; this.x_vel = 0; this.speed = 5; this.health = 100; } //draw it draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotate * Math.PI); ctx.fillStyle = "white" ctx.fillRect(0 - this.width / 2, 0 - this.height / 2, this.width, this.height) pirateShip(-50, -70, 0.5) ctx.restore(); } //make things work move() { //movement and such if (keys.w \|\| keys.ArrowUp) { if (this.speed < 6) { this.speed += 0.1 } } else { if (this.speed > 1.5) { this.speed -= 0.1 } } if (keys.s \|\| keys.ArrowDown) { this.x_vel = -Math.sin(this.rotate * 3.14) * this.speed; this.y_vel = Math.cos(this.rotate * 3.14) * this.speed; } if (keys.ArrowLeft \|\| keys.a) { this.rotate -= 0.02 } if (keys.ArrowRight \|\| keys.d) { this.rotate += 0.02 } } //Change things update() { //add particles if(num_frames % 15 === 0){ particles.push(new particle(this.x, this.y, this.x_vel/2,-this.y_vel/2, "100, 160, 255,", 4)); } //allow shooting if (keys[" "] && num_frames % 20 === 0) { bullets.push(new bullet(this.x + Math.sin(this.rotate * 3.14) * 25, this.y - Math.cos(this.rotate * 3.14) * 25, this.rotate)) } if(this.health < 100){ this.health+=0.01; } //loop through bullets and see if we got hit for (var j = 0; j < bullets.length; j++) { if (dist(this.x, this.y, bullets[j].x, bullets[j].y) < 20) { bullets.splice(j, 1) j--; for(var f = 0; f < 5; f++){ this.health -= 2 //add particles particles.push(new particle(this.x, this.y, random(-1,1),random(-1,1), "150, 100, 100,", 4)); } } } this.x_vel = Math.sin(this.rotate * 3.14) * this.speed; this.y_vel = -Math.cos(this.rotate * 3.14) * this.speed; this.x += this.x_vel; this.y += this.y_vel; //player no go off canvas! if (this.x < -1050) { this.x = -1050 } if (this.x > 6050) { this.x = 6050 } if (this.y < -1050) { this.y = -1050 } if (this.y > 6050) { this.y = 6050 } //do things this.draw(); this.move(); this.x_vel = 0; this.y_vel = 0; } } //make our player and other such things Player = new player(300, 300, "daf"); let Ai = new AI(300, 300, "daf"); let Ais = []; for (var i = 0; i < 20; i++) { Ais.push(new AI(random(-1000, 6000), random(-1000, 6000), "daf")) } //make asteroid class asteroid { //build constructor(x, y) { this.x = x; this.y = y; this.s = random(100, 200); this.rotate = random(0, 2); this.y_vel = 0; this.x_vel = 0; this.speed = 5; this.health = 100; } //draw them draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotate * Math.PI); ctx.drawImage(img, 0, 200, 200, 200, this.x, this.y, this.s, this.s) ctx.restore(); } //move them? move() { } //update them update() { this.x += this.x_vel; this.y += this.y_vel; if(dist(Player.x, Player.y, this.x, this.y) < 600){ this.draw(); } this.move(); } } //add lotsa random asteroids for(var i = 0; i < 20;i ++){ asteroids.push(new asteroid(random(-1000,6000),random(-1000, 6000))) } //draw our lil minimap function mini_map(){ ctx.save() ctx.translate(0, 500); ctx.fillStyle = "black" ctx.fillRect(0,0,100,100); ctx.save() ctx.translate(20,20) for (var i = 0; i < Ais.length; i++) { ctx.fillStyle = "red" ctx.beginPath(); ctx.ellipse(Ais[i].x / 100, Ais[i].y / 100, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); } ctx.fillStyle = "green" ctx.beginPath(); ctx.ellipse(Player.x / 100, Player.y / 100, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); ctx.restore() ctx.restore(); } //we all lose sometimes function restart(){ Player.health = 100; Ais.length = 0; for (var i = 0; i < 20; i++) { Ais.push(new AI(random(-1000, 6000), random(-1000, 6000), "daf")) } } //functions for drawing the title text function t(){ ctx.beginPath(); ctx.moveTo(20, 70); ctx.lineTo(30, 60); ctx.lineTo(66, 46); ctx.lineTo(85, 46); ctx.lineTo(91, 54); ctx.lineTo(91, 63); ctx.lineTo(69, 71); ctx.lineTo(69, 76); ctx.lineTo(88, 116); ctx.lineTo(88, 123); ctx.lineTo(76, 131); ctx.lineTo(71, 127); ctx.lineTo(52, 84); ctx.lineTo(45, 85); ctx.lineTo(34, 88); ctx.lineTo(25, 84); ctx.lineTo(22, 67); ctx.stroke(); ctx.closePath(); } function o(){ ctx.beginPath(); ctx.moveTo(106, 70); ctx.lineTo(118, 51); ctx.lineTo(134, 46); ctx.lineTo(157, 46); ctx.lineTo(163, 57); ctx.lineTo(170, 85); ctx.lineTo(159, 98); ctx.lineTo(142, 104); ctx.lineTo(125, 104); ctx.lineTo(110, 89); ctx.lineTo(106, 69); ctx.stroke(); ctx.closePath(); } function h(){ ctx.beginPath(); ctx.moveTo(299, 85); ctx.lineTo(299, 31); ctx.lineTo(304, 20); ctx.lineTo(315, 20); ctx.lineTo(317, 26); ctx.lineTo(317, 53); ctx.lineTo(336, 45); ctx.lineTo(336, 22); ctx.lineTo(346, 20); ctx.lineTo(350, 24); ctx.lineTo(353, 28); ctx.lineTo(355, 52); ctx.lineTo(355, 85); ctx.lineTo(351, 94); ctx.lineTo(342, 93); ctx.lineTo(342, 63); ctx.lineTo(321, 67); ctx.lineTo(319, 75); ctx.lineTo(319, 95); ctx.lineTo(303, 95); ctx.lineTo(298, 80); ctx.stroke(); ctx.closePath(); } function I(){ ctx.save(); ctx.translate(78,71); ctx.scale(0.9,0.9); ctx.rotate(0.1) ctx.beginPath(); ctx.moveTo(20, 74); ctx.lineTo(30, 66); ctx.lineTo(66, 50); ctx.lineTo(85, 46); ctx.lineTo(91, 54); ctx.lineTo(91, 63); ctx.lineTo(69, 71); ctx.lineTo(69, 76); ctx.lineTo(85, 109); ctx.lineTo(104, 104); ctx.lineTo(104, 117); ctx.lineTo(88, 123); ctx.lineTo(76, 131); ctx.lineTo(63, 137); ctx.lineTo(58, 126); ctx.lineTo(70, 120); ctx.lineTo(52, 84); ctx.lineTo(45, 85); ctx.lineTo(45, 85); ctx.lineTo(34, 88); ctx.lineTo(25, 84); ctx.lineTo(22, 67); ctx.stroke(); ctx.closePath(); ctx.restore(); } function G(){ ctx.beginPath(); ctx.moveTo(203, 143); ctx.lineTo(223, 143); ctx.lineTo(237, 143); ctx.lineTo(237, 171); ctx.lineTo(232, 180); ctx.lineTo(197, 180); ctx.lineTo(185, 176); ctx.lineTo(185, 123); ctx.lineTo(195, 115); ctx.lineTo(225, 115); ctx.lineTo(232, 121); ctx.lineTo(223, 126); ctx.lineTo(201, 127); ctx.lineTo(201, 141); ctx.stroke(); ctx.closePath(); ctx.moveTo(224, 152); ctx.lineTo(199, 155); ctx.lineTo(199, 167); ctx.lineTo(224, 166); ctx.lineTo(224, 150); ctx.stroke(); ctx.closePath(); } function e(){ ctx.beginPath(); ctx.moveTo(383, 21); ctx.lineTo(418, 21); ctx.lineTo(423, 28); ctx.lineTo(423, 35); ctx.lineTo(392, 35); ctx.lineTo(392, 47); ctx.lineTo(421, 47); ctx.lineTo(421, 60); ctx.lineTo(392, 60); ctx.lineTo(392, 78); ctx.lineTo(421, 78); ctx.lineTo(424, 82); ctx.lineTo(424, 93); ctx.lineTo(382, 93); ctx.lineTo(378, 88); ctx.lineTo(378, 26); ctx.lineTo(384, 22); ctx.stroke(); ctx.closePath(); } function s(){ ctx.beginPath(); ctx.moveTo(424, 127); ctx.lineTo(413, 111); ctx.lineTo(391, 111); ctx.lineTo(385, 120); ctx.lineTo(385, 124); ctx.lineTo(407, 153); ctx.lineTo(407, 158); ctx.lineTo(382, 171); ctx.lineTo(382, 179); ctx.lineTo(418, 170); ctx.lineTo(418, 144); ctx.lineTo(400, 124); ctx.lineTo(408, 124); ctx.lineTo(424, 127); ctx.stroke(); ctx.closePath(); } function a(){ ctx.beginPath(); ctx.moveTo(217, 287); ctx.lineTo(230, 227); ctx.lineTo(234, 225); ctx.lineTo(242, 225); ctx.lineTo(276, 286); ctx.lineTo(259, 286); ctx.lineTo(251, 265); ctx.lineTo(239, 265); ctx.lineTo(234, 285); ctx.lineTo(219, 285); ctx.stroke(); ctx.closePath(); } function r(){ ctx.beginPath(); ctx.moveTo(305, 287); ctx.lineTo(300, 224); ctx.lineTo(305, 221); ctx.lineTo(312, 221); ctx.lineTo(315, 225); ctx.lineTo(315, 230); ctx.lineTo(333, 220); ctx.lineTo(347, 220); ctx.lineTo(353, 227); ctx.lineTo(353, 238); ctx.lineTo(343, 235); ctx.lineTo(333, 235); ctx.lineTo(316, 245); ctx.lineTo(316, 286); ctx.lineTo(305, 286); ctx.stroke(); ctx.closePath(); ctx.restore(); } //a star is born! function star(){ let radialGradient3 = ctx.createRadialGradient(500, 200, 0, 500, 200, 50); radialGradient3.addColorStop(0, 'rgba(0,0,0,0)'); radialGradient3.addColorStop(1, 'rgba(58, 129, 252,0.2)'); ctx.fillStyle = radialGradient3 ctx.strokeStyle = "rgba(42, 87, 250, 0.5)" ctx.beginPath(); ctx.ellipse(500, 200, 100, 100, 0, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.fillStyle = "rgba(84, 118, 255,0.1)" ctx.beginPath(); ctx.ellipse(500, 200, 400, 400, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); let radialGradient = ctx.createRadialGradient(500, 200, 11, 500, 200, 55); radialGradient.addColorStop(0, 'rgba(255, 255, 255)'); radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = radialGradient ctx.beginPath(); ctx.ellipse(500, 200, 300, 300, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); let radialGradient2 = ctx.createRadialGradient(500, 200, 10, 500, 200, 70); radialGradient2.addColorStop(0, 'rgba(0,0,0,0)'); radialGradient2.addColorStop(0.5, 'rgba(148, 238, 252,0.9)'); radialGradient2.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = radialGradient2 ctx.fillRect(0, 0, 600, 600) ctx.strokeStyle = "white" ctx.lineWidth = 0.3; ctx.beginPath(); ctx.moveTo(500, 50) ctx.lineTo(500, 350) ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(340, 200) ctx.lineTo(600, 200) ctx.stroke(); ctx.closePath(); } //create the background function background(x, y, torf) { ctx.save() ctx.translate(300 - Player.x / 5, 300 - Player.y / 5); // ctx.translate(300 - Ai.x/5, 300 - Ai.y/5); ctx.drawImage(img, 0, 400, 600, 600, x, y, 2000, 2000) ctx.restore(); ctx.save() ctx.translate(300 - Player.x / 3, 300 - Player.y / 3); // ctx.translate(300 - Ai.x/3, 300 - Ai.y/3); ctx.drawImage(background_img, x - 500, y - 500, 4000, 4000) ctx.restore(); if(torf){ ctx.fillStyle = "rgba(0, 0, 0, 0.6)" ctx.fillRect(0, 0, 600, 600) } } //title function title(){ t(); o() ctx.save(); ctx.translate(217,-47); ctx.rotate(0.3) t(); ctx.restore(); h() e() ctx.save(); ctx.translate(-278,188); ctx.rotate(-0.2) h(); ctx.restore(); I(); G() ctx.save(); ctx.scale(0.95,0.95) ctx.translate(-34,96); h(); ctx.restore(); ctx.save(); ctx.scale(0.95,0.95) ctx.translate(-34,96); e(); ctx.restore(); ctx.save(); ctx.translate(440,47); ctx.scale(0.9,0.9) ctx.rotate(0.4) t(); ctx.restore(); s(); ctx.save(); ctx.translate(-382,94); ctx.scale(1.2,1.2) s(); ctx.restore(); ctx.save(); ctx.translate(157,153); ctx.scale(0.9,0.9) ctx.rotate(0.5) t(); ctx.restore(); a() r(); } //thumbnail spaceship, escape key to view while playing the game function spaceship_for_thumbnail(){ ctx.save(); ctx.translate(-75, 200) ctx.scale(0.8,0.8) ctx.fillStyle = "rgb(150, 150, 150)" ctx.beginPath(); ctx.moveTo(600, 0); ctx.lineTo(394, 117); ctx.lineTo(209, 156); ctx.lineTo(0, 172); ctx.lineTo(134, 323); ctx.lineTo(125, 475); ctx.lineTo(600 - 323, 600 - 134); ctx.lineTo(600-173, 600); ctx.lineTo(600-156, 600- 209); ctx.lineTo(600-117, 600-394); ctx.fill(); ctx.closePath(); ctx.fillStyle = "rgb(196, 196, 196)" ctx.beginPath(); ctx.moveTo(600, 0); ctx.lineTo(394, 117); ctx.lineTo(209, 156); ctx.lineTo(156, 323); ctx.lineTo(125, 475); ctx.lineTo(600 - 323, 600 - 156); ctx.lineTo(600-156, 600- 209); ctx.lineTo(600-117, 600-394); ctx.fill(); ctx.closePath(); ctx.fillStyle = "rgb(76, 204, 255)" ctx.beginPath(); ctx.moveTo(500, 97); ctx.lineTo(405, 144); ctx.lineTo(276, 173); ctx.lineTo(297, 297); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(600- 97, 600 - 500); ctx.lineTo(600- 144, 600 - 405); ctx.lineTo(600 - 173, 600 - 276); ctx.lineTo(600 - 297, 600 - 297); ctx.fill(); ctx.closePath(); ctx.fillStyle = "rgb(108, 210, 250)" ctx.beginPath(); ctx.moveTo(500, 97); ctx.lineTo(405, 144); ctx.lineTo(276, 173); ctx.lineTo(331, 262); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(600- 97, 600 - 500); ctx.lineTo(600- 144, 600 - 405); ctx.lineTo(600 - 173, 600 - 276); ctx.lineTo(600 - 262, 600 - 331); ctx.fill(); ctx.closePath(); ctx.restore(); } //put the thumbnail together. Again, escape key to view. function thumbnail(){ background(0, 0, false); ctx.save(); ctx.filter = "blur(2px)" ctx.save() ctx.translate(25, -100); star(); ctx.restore(); spaceship_for_thumbnail(); ctx.restore(); ctx.fillStyle = "rgba(0, 0, 0, 0.4)" ctx.fillRect(0, 0, 600, 600) let title_color = ctx.createLinearGradient(0, 0, 400, 400); title_color.addColorStop(1, 'rgb(255, 111, 0)'); title_color.addColorStop(0, 'rgb(252, 53, 242)'); ctx.strokeStyle = title_color ctx.lineWidth = "10" ctx.save() ctx.filter = "blur(2px)" ctx.translate(0, 100); ctx.scale(1.2, 1.2) title(); ctx.restore() } //home screen function home() { //hide play button background(-500, -500, true); star(); let title_color = ctx.createLinearGradient(0, 0, 600, 600); title_color.addColorStop(1, 'rgb(0, 162, 255)'); title_color.addColorStop(0, 'rgb(255, 255, 255)'); ctx.strokeStyle = title_color ctx.lineWidth = "4" title(); ctx.save(); ctx.translate(-100, 56); ctx.rotate(0.79); pirateShip(-32, -601, 5); ctx.restore(); } //run the game function game() { //draw over everything ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); background(-500, -500, true); ctx.save(); ctx.translate(300 - Player.x, 300 - Player.y); //do the asteroid thing for(var i = 0; i < asteroids.length;i ++){ asteroids[i].update(); } //draw and update bullets for (var i = 0; i < bullets.length; i++) { bullets[i].update(); if (bullets[i].dead) { bullets.splice(i, 1) i--; } } ctx.strokeStyle = "rgba(250, 8, 32, 50%)" ctx.lineWidth = "7" ctx.strokeRect(-1050, -1050, 7100, 7100) Player.update(); //draw and update the AI for (var i = 0; i < Ais.length; i++) { Ais[i].update(); for (var j = 0; j < bullets.length; j++) { //check AI to bullet colisions if (dist(Ais[i].x, Ais[i].y, bullets[j].x, bullets[j].y) < 20) { bullets.splice(j, 1) j--; for(var f = 0; f < 8; f++){ particles.push(new particle(Ais[i].x, Ais[i].y, random(-1,1),random(-1,1), "150, 100, 100,", 4)); } Ais[i].health -= 25 } } //no more bad guys if (Ais[i].health <= 0) { Ais.splice(i, 1) i--; } } //draw all these particles for(var i = 0;i < particles.length;i++){ particles[i].draw(); particles[i].update(); if(particles[i].trans < 1){ particles.splice(i, 1); } } ctx.restore() //draw some important things ctx.fillStyle = "rgba(" + (255-Player.health * 2.55) + ", " + (Player.health * 2.55) + ", 0,100%)" ctx.fillRect(0, 0, Player.health * 6, 20) mini_map() //win and lose screens if (Player.health < 0) { ctx.fillStyle = "rgba(250, 5, 58,30%)" ctx.fillRect(0, 0, 600, 600) ctx.fillStyle = "rgba(255, 255, 255,30%)" ctx.font = "180px Noto Sans" ctx.fillText("Defeat", 20, 300) retry.style.display = "block" } if (Ais.length === 0) { ctx.fillStyle = "rgba(5, 250, 42,30%)" ctx.fillRect(0, 0, 600, 600) ctx.fillStyle = "rgba(255, 255, 255,30%)" ctx.font = "175px Noto Sans" ctx.fillText("Victory", 20, 300) retry.style.display = "block" } } var g; //cool hexagon background function t_background(){ ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(0, 0, 600, 600); g = ctx.createLinearGradient(300 + Math.sin(num_frames / 50) * 300, 0, 600 - Math.sin(num_frames / 50) * 300, 600); g.addColorStop(1, 'rgb(0, 157, 255)'); g.addColorStop(0, 'rgb(0, 255, 170)'); ctx.lineWidth = "7" ctx.strokeStyle = g for(let i = 0; i < 10; i++){ for(let j = 0; j < 10; j++){ hex(-25 + i * 64, j * 100) } } for(let i = 0; i < 10; i++){ for(let j = 0; j < 10; j++){ hex(-56 + i * 64 , 53 + j * 100) } } } function shop(){ t_background(); } function sub(){ ctx.save(); sub_page.style.display = "block" sub_page.style.animation = 'fadeIn 1s 1'; t_background(); } function how(){ ctx.save(); how_page.style.display = "block" how_page.style.animation = 'fadeIn 1s 1'; t_background(); ctx.restore(); } //put it all together function draw() { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); switch (scene) { case 1: home(); break; case 2: game(); if(keys.Escape){ thumbnail(); } break; case 3: how(); break; case 4: sub(); break; case 5: shop(); break; } //cool cursor stufff if(num_frames % 2 === 0){ mousetx.push(mousex); mousetx.splice(0, 1); mousety.push(mousey); mousety.splice(0, 1); } let idn = ctx.createRadialGradient(500, 200, 10, 500, 200, 700); idn.addColorStop(0, 'rgba(255, 255, 255, 1)'); idn.addColorStop(1, 'rgba(5, 32, 242, 1)'); ctx.strokeStyle = idn ctx.lineWidth = "3" ctx.beginPath(); ctx.moveTo(mousetx[0], mousety[0]); ctx.lineTo(mousetx[1], mousety[1]) ctx.lineTo(mousetx[2], mousety[2]) ctx.lineTo(mousetx[3], mousety[3]) ctx.lineTo(mousetx[4], mousety[4]) ctx.lineTo(mousetx[5], mousety[5]) ctx.lineTo(mousetx[6], mousety[6]) ctx.lineTo(mousetx[7], mousety[7]) ctx.lineTo(mousetx[8], mousety[8]) ctx.stroke(); ctx.closePath(); //aka frameCount num_frames++; //do stuff if(isTransing){ for(var i = 0; i < blocks.length; i ++){ blocks[i].exist(); if(blocks[i].needSP === true){ blocks.splice(i, 1); } } //no longer transing if(blocks.length === 0){ isTransing = false; } } clicked = false; } document.getElementById('loading').style.display = "none" window.setInterval(draw, 20); } tths("IDK") </script> </body> </html> <script> /** @judges{ this is not our entry this is just the realeased project. } @subpages{ @Chickenfarmer's: https://www.khanacademy.org/computer-programming/chickenfarmer2009s-new-subpage/6181465531793408 @vicioustrex's: https://www.khanacademy.org/computer-programming/vicioustrexs-subpage-20/5318030875082752 } @about{ over 2000 lines WOW um can't think of anything to say LOL... collab between Chickenfarmer and vicioustrex } @who_did_what{ player function - vicioustrex player graphic - Chickenfarmer2009 Ai function - vicioustrex Ai graphic Chickenfarmer2009 planets - vicioustrex star background - Chickenfarmer2009 + vicioustrex scenes - vicioustrex awesome transition - Chickenfarmer2009 buttons - vicioustrex hex background - vicioustrex how and sub pages - vicioustrex cleaned the code: Chickenfarmer2009 } */ </script>
Folds	1,2176
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvPsebjCAw
Votes	20
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	Vicioustre𝑥 BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	16 days ago, 1734996434129
Updated	16 days ago, 1734996434129
Source Deleted	unknown