Viewing Program

Program Data

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

Title	wip
ID	6695237765218304
Created	1 months ago, 1733337332206
Updated	1 months ago, 1733783983708
Code	<!DOCTYPE html> <!-- --> <html> <head> <meta charset="utf-8"> <title>wip</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Material+Icons&display=swap'> <link href="https://fonts.googleapis.com/css?family=Rye&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet"> <style> { transition: 0.5s ease; } body{ margin:0px; padding:0px; overflow:hidden; } #logo{ position:fixed; bottom:5px; right:5px; border-radius:51px; } #logo:hover{ border-radius:10px; width:10%; } #tex-canvas{ display:none; } #canvas3{ display:none; } </style> </head> <body> <canvas id = "tex-canvas"></canvas> <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> function pro(){ let tex_canvas = document.getElementById('tex-canvas') let tex_ctx = tex_canvas.getContext('2d'); tex_canvas.width = 600; tex_canvas.height = 800; function random(min,max){ return min+Math.random()(max-min); } 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(); }; 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(); }; function p_background(color1,color2,color3){ } 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(); 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(); 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(); 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(); 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; 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(); 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(); } // pro(); </script> <script type> function the_game_name_here_lol_great_var_name_so_far_XD(what){ //make canvas var canvas = document.createElement('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.background = "black"; document.body.appendChild(canvas); //get canvas context var ctx = canvas.getContext('2d'); let img = document.getElementById('tex-canvas') let mousex = 0; let mousey = 0; let clicked = false; let 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 }); //yes function random(min, max){ return min + Math.random() * (max - min); }; // var background = ctx.getImageData(0, 0, canvas.width, canvas.height) //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(); }; 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){ ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal); ctx.fillStyle = "rgb(110, 110, 110)"; ctx.strokeStyle = "rgba(255, 255, 255, 0)"; 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(); 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(); 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); ctx.strokeStyle = "rgba(0, 0, 0, 0)"; var a = 0.5; for(var i = 190; i < 210; i ++){ ctx.globalAlpha = a; ctx.fillStyle = "rgba(0, 225, 255)"; ctx.fillRect(80, i, 42, 1); a -= 0.03; }; ctx.globalAlpha = 1; ctx.restore(); }; var policeShip = function(x, y, scal){ 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); ctx.fillStyle = "blue"; ctx.strokeStyle = "rgb(168, 168, 168)"; quad(95, 125, 105, 125, 108, 140, 92, 140); ctx.fillStyle = "rgba(255, 255, 255, 0.5"; 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 var pirateShip = function(x, y, scal){ ctx.save(); ctx.translate(x, y); ctx.scale(scal, scal); spaceShipBase(0, 0, 1, true); 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(); }; policeShip(0, 0, 1); pirateShip(150, 0, 1) class player{ 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; } 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) ctx.restore(); ctx.strokeStyle = "rgb(122, 122, 122)" ctx.lineWidth = "5" ctx.beginPath(); ctx.moveTo(300,300); ctx.lineTo(300 + Math.sin(this.rotate3.14) 50, 300 - Math.cos(this.rotate3.14) 50); ctx.stroke(); ctx.closePath(); } move(){ if(keys.w \|\| keys.ArrowUp ){ this.x_vel = Math.sin(this.rotate3.14) this.speed; this.y_vel = -Math.cos(this.rotate3.14) this.speed; } if(keys.s \|\| keys.ArrowDown ){ this.x_vel = -Math.sin(this.rotate3.14) this.speed; this.y_vel = Math.cos(this.rotate3.14) this.speed; } if(keys.ArrowLeft \|\| keys.a){ this.rotate -= 0.02 } if(keys.ArrowRight \|\| keys.d){ this.rotate += 0.02 } } update(){ this.draw(); this.move(); this.x += this.x_vel; this.y += this.y_vel; this.x_vel = 0; this.y_vel = 0; } } var Player = new player(300, 300, "daf"); function draw(){ ctx.clearRect(0,0,window.innerWidth,window.innerHeight); Player.update(); } window.setInterval(draw,10); } the_game_name_here_lol_great_var_name_so_far_XD("IDK") </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLuliKnyCww
Votes	1
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6425858020392960","title":"My workspace","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	1 months ago, 1733784594592
Updated	1 months ago, 1733784594592
Source Deleted	unknown