Viewing Program

Program Data

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

Title	poster
ID	5198537820323840
Created	6 days ago, 1744502331585
Updated	4 days ago, 1744644596082
Code	<!DOCTYPE html> <!-- sub? https://www.khanacademy.org/computer-programming/vicioustrexs-subpage-20/5318030875082752 Rise of the rooster: https://www.khanacademy.org/computer-programming/rise-of-the-rooster/6464862756651008 --> <html> <head> <meta charset="utf-8"> <title>poster</title> <link href="https://fonts.googleapis.com/css?family=Chicle&display=swap" rel="stylesheet"> <style> body{ margin:0px; padding:0px; overflow:hidden; } /#sun-canvas{/ /* display:block;/ / background:black;/ /}/ .gc{ display:none; } #btn1{ position:fixed; top:300px; right:0px; z-index:100; } #btn2{ position:fixed; top:300px; left:0px; z-index:100; transform:scale(-1, 1); } #btn3{ position:fixed; top:200px; left:30%; z-index:100; } .button { transition: 5s ease; z-index:20; stroke: rgb(255, 123, 0); stroke-width: 10px; } .button:hover { cursor: pointer; stroke-dasharray: 100px 0px; fill: rgb(255, 186, 89); } </style> </head> <body> <canvas id = "g-canvas" class = "gc"></canvas> <canvas id = "sun-canvas" class = "gc"></canvas> <canvas id = "canvas"></canvas> <svg viewBox = '0 0 600 600' width = '200px' id = "btn1"> <path d = "M 121, 69 q 18 -60 61 -26 q 22 20 -8 31 q 61 59 62 89 q 18 66 62 78 q 18 2 29 11 q 18 -22 24 -23 q -9 -165 62 -172 q 18 1 35 26 q -65 -36 -77 47 q 63 -97 113 7 q 4 15 0 32 q -39 -96 -78 -52 q 37 -5 45 26 q 63 60 23 204 q -2 14 -18 16 q 18 -60 -15 -85 q 14 60 -3 119 q 3 -27 -7 -70 q 3 26 -14 49 q 11 -27 -2 -62 q -7 60 2 90 q -58 -25 -79 18 q 2 40 -9 59 l -8 39 q 14 26 1 19 q -5 11 18 20 q -10 4 -22 -1 q 2 -7 -33 12 q 8 -16 2 -14 q 12 6 -37 4 q -4 -15 34 -12 q 18 2 29 -71 q -5 2 -40 -31 l -33 73 l 20 16 l -28 -9 l -17 14 q -11 2 -5 -12 l -30 -3 q -9 -9 5 -9 q 49 8 59 -55 q -15 -20 -18 -51 q -136 -100 -83 -248 q -21 2 -15 -49 l -20 0 l 10 -19 q -9 -25 4 -26" fill = "rgb(255, 238, 186)" stroke-dasharray = '0 500px' class = "button" /> </svg> <svg viewBox = '0 0 600 600' width = '200px' id = "btn2"> <path d = "M 121, 69 q 18 -60 61 -26 q 22 20 -8 31 q 61 59 62 89 q 18 66 62 78 q 18 2 29 11 q 18 -22 24 -23 q -9 -165 62 -172 q 18 1 35 26 q -65 -36 -77 47 q 63 -97 113 7 q 4 15 0 32 q -39 -96 -78 -52 q 37 -5 45 26 q 63 60 23 204 q -2 14 -18 16 q 18 -60 -15 -85 q 14 60 -3 119 q 3 -27 -7 -70 q 3 26 -14 49 q 11 -27 -2 -62 q -7 60 2 90 q -58 -25 -79 18 q 2 40 -9 59 l -8 39 q 14 26 1 19 q -5 11 18 20 q -10 4 -22 -1 q 2 -7 -33 12 q 8 -16 2 -14 q 12 6 -37 4 q -4 -15 34 -12 q 18 2 29 -71 q -5 2 -40 -31 l -33 73 l 20 16 l -28 -9 l -17 14 q -11 2 -5 -12 l -30 -3 q -9 -9 5 -9 q 49 8 59 -55 q -15 -20 -18 -51 q -136 -100 -83 -248 q -21 2 -15 -49 l -20 0 l 10 -19 q -9 -25 4 -26" fill = "rgb(255, 238, 186)" stroke-dasharray = '0 500px' class = "button" /> </svg> <svg viewBox = '0 0 600 600' width = '250px' id = "btn3"> <path d = "M 121, 69 q 18 -60 61 -26 q 22 20 -8 31 q 61 59 62 89 q 18 66 62 78 q 18 2 29 11 q 18 -22 24 -23 q -9 -165 62 -172 q 18 1 35 26 q -65 -36 -77 47 q 63 -97 113 7 q 4 15 0 32 q -39 -96 -78 -52 q 37 -5 45 26 q 63 60 23 204 q -2 14 -18 16 q 18 -60 -15 -85 q 14 60 -3 119 q 3 -27 -7 -70 q 3 26 -14 49 q 11 -27 -2 -62 q -7 60 2 90 q -58 -25 -79 18 q 2 40 -9 59 l -8 39 q 14 26 1 19 q -5 11 18 20 q -10 4 -22 -1 q 2 -7 -33 12 q 8 -16 2 -14 q 12 6 -37 4 q -4 -15 34 -12 q 18 2 29 -71 q -5 2 -40 -31 l -33 73 l 20 16 l -28 -9 l -17 14 q -11 2 -5 -12 l -30 -3 q -9 -9 5 -9 q 49 8 59 -55 q -15 -20 -18 -51 q -136 -100 -83 -248 q -21 2 -15 -49 l -20 0 l 10 -19 q -9 -25 4 -26" fill = "rgb(255, 238, 186)" stroke-dasharray = '0 500px' class = "button"/> </svg> <script type> //the graphics function gra() { //get the canvas and context let g_canvas = document.getElementById('g-canvas') let pla_gra = g_canvas.getContext('2d') g_canvas.width = 600; g_canvas.height = 1500; function ellipse(x, y, w, h) { pla_gra.beginPath(); pla_gra.ellipse(x, y, w / 2, h / 2, 0, 0, 2 Math.PI); pla_gra.fill(); pla_gra.closePath(); }; pla_gra.fillStyle = "#410300" ellipse(134,151, 50, 98) pla_gra.fillStyle = "#ff3f00" pla_gra.beginPath(); pla_gra.lineTo(321,270); pla_gra.lineTo(309,259); pla_gra.lineTo(290,249); pla_gra.lineTo(264,236); pla_gra.lineTo(253,229); pla_gra.lineTo(244,228); pla_gra.lineTo(228,235); pla_gra.lineTo(219,246); pla_gra.lineTo(216,255); pla_gra.lineTo(224,262); pla_gra.lineTo(246,264); pla_gra.lineTo(252,276); pla_gra.lineTo(266,276); pla_gra.lineTo(266,269); pla_gra.lineTo(288,278); pla_gra.lineTo(314,273); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#ff7f00" pla_gra.beginPath(); pla_gra.lineTo(128,144); pla_gra.lineTo(132,163); pla_gra.lineTo(124,172); pla_gra.lineTo(124,183); pla_gra.lineTo(132,195); pla_gra.lineTo(128,212); pla_gra.lineTo(129,224); pla_gra.lineTo(131,228); pla_gra.lineTo(132,242); pla_gra.lineTo(138,246); pla_gra.lineTo(149,251); pla_gra.lineTo(151,259); pla_gra.lineTo(155,253); pla_gra.lineTo(161,264); pla_gra.lineTo(164,266); pla_gra.lineTo(164,273); pla_gra.lineTo(169,276); pla_gra.lineTo(173,284); pla_gra.lineTo(179,281); pla_gra.lineTo(181,275); pla_gra.lineTo(180,270); pla_gra.lineTo(178,267); pla_gra.lineTo(180,267); pla_gra.lineTo(183,271); pla_gra.lineTo(183,277); pla_gra.lineTo(186,281); pla_gra.lineTo(189,278); pla_gra.lineTo(190,272); pla_gra.lineTo(187,266); pla_gra.lineTo(187,260); pla_gra.lineTo(184,256); pla_gra.lineTo(185,253); pla_gra.lineTo(189,255); pla_gra.lineTo(192,261); pla_gra.lineTo(195,269); pla_gra.lineTo(201,278); pla_gra.lineTo(215,276); pla_gra.lineTo(222,276); pla_gra.lineTo(226,279); pla_gra.lineTo(227,274); pla_gra.lineTo(226,259); pla_gra.lineTo(232,265); pla_gra.lineTo(238,269); pla_gra.lineTo(242,261); pla_gra.lineTo(233,251); pla_gra.lineTo(222,241); pla_gra.lineTo(217,243); pla_gra.lineTo(196,211); pla_gra.lineTo(187,172); pla_gra.lineTo(181,144); pla_gra.lineTo(177,135); pla_gra.lineTo(166,129); pla_gra.lineTo(141,135); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "black" // pla_gra.fillStyle = "white" pla_gra.beginPath(); pla_gra.moveTo(316,270); pla_gra.quadraticCurveTo(366, 104, 459, 119); pla_gra.quadraticCurveTo(571, 104, 569, 342); pla_gra.quadraticCurveTo(571, 404, 547, 431); pla_gra.quadraticCurveTo(535, 439, 535, 425); pla_gra.quadraticCurveTo(554, 383, 544, 346); pla_gra.quadraticCurveTo(534, 383, 504, 407); pla_gra.quadraticCurveTo(471, 435, 493, 398); pla_gra.quadraticCurveTo(548, 325, 488, 189); pla_gra.quadraticCurveTo(498, 253, 460, 274); pla_gra.quadraticCurveTo(438, 294, 448, 364); pla_gra.quadraticCurveTo(448, 391, 422, 378); pla_gra.quadraticCurveTo(417, 369, 414, 350); pla_gra.quadraticCurveTo(395, 357, 394, 356); pla_gra.quadraticCurveTo(333, 435, 273, 420); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#005555" // pla_gra.fillStyle = "white" pla_gra.beginPath(); pla_gra.moveTo(316,270); pla_gra.quadraticCurveTo(366, 104, 459, 119); pla_gra.quadraticCurveTo(487, 121, 503, 139); pla_gra.quadraticCurveTo(517, 158, 503, 158); pla_gra.quadraticCurveTo(472, 158, 465, 188); pla_gra.quadraticCurveTo(457, 210, 472, 236); pla_gra.quadraticCurveTo(493, 269, 460, 268); pla_gra.quadraticCurveTo(392, 252, 305, 325); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#037f7f" // pla_gra.fillStyle = "white" pla_gra.beginPath(); pla_gra.moveTo(345,222); pla_gra.quadraticCurveTo(366, 104, 459, 119); pla_gra.quadraticCurveTo(487, 121, 503, 148); pla_gra.quadraticCurveTo(401, 95, 345, 222); pla_gra.fill() pla_gra.closePath(); pla_gra.beginPath(); pla_gra.moveTo(352,242); pla_gra.quadraticCurveTo(385, 237, 425, 264); pla_gra.quadraticCurveTo(428, 274, 409, 233); pla_gra.quadraticCurveTo(428, 236, 446, 260); pla_gra.quadraticCurveTo(475, 288, 446, 243); pla_gra.quadraticCurveTo(437, 209, 391, 210); pla_gra.quadraticCurveTo(437, 144, 470, 157); pla_gra.quadraticCurveTo(428, 124, 380, 200); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#aa5500" pla_gra.fillRect(240,240,20,20); pla_gra.fillStyle = "#000055" pla_gra.beginPath(); pla_gra.moveTo(105,199); pla_gra.quadraticCurveTo(109, 368, 179, 395); pla_gra.quadraticCurveTo(175, 388, 237, 479); pla_gra.lineTo(270,461); pla_gra.lineTo(270,439); pla_gra.quadraticCurveTo(353, 430, 351, 386); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#550000" pla_gra.beginPath(); pla_gra.moveTo(280,314); pla_gra.lineTo(323,354); pla_gra.lineTo(312,390); pla_gra.quadraticCurveTo(221, 376, 258, 361); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#aa0000" pla_gra.beginPath(); pla_gra.moveTo(273,325); pla_gra.lineTo(304,357); pla_gra.lineTo(305,365); pla_gra.lineTo(310,371); pla_gra.lineTo(310,374); pla_gra.lineTo(303,376); pla_gra.lineTo(300,374); pla_gra.lineTo(287,374); pla_gra.lineTo(261,364); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#0055aa" pla_gra.beginPath(); pla_gra.moveTo(208,344); pla_gra.lineTo(227,357); pla_gra.lineTo(254,370); pla_gra.lineTo(287,380); pla_gra.lineTo(280,369); pla_gra.lineTo(276,365); pla_gra.lineTo(276,335); pla_gra.lineTo(299,350); pla_gra.lineTo(320,353); pla_gra.lineTo(320,278); pla_gra.lineTo(214,278); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#aa0000" pla_gra.beginPath(); pla_gra.moveTo(106,161); pla_gra.quadraticCurveTo(100, 205, 105, 233); pla_gra.quadraticCurveTo(110, 246, 128, 287); pla_gra.lineTo(143, 300); pla_gra.lineTo(143, 274); pla_gra.lineTo(148, 274); pla_gra.lineTo(183, 342); pla_gra.quadraticCurveTo(210, 370, 267, 312); pla_gra.quadraticCurveTo(273, 301, 267, 264); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#ff5500" // pla_gra.fillStyle = "#ffaa00" pla_gra.beginPath(); pla_gra.moveTo(160,139); pla_gra.quadraticCurveTo(123, 189, 136, 233); pla_gra.quadraticCurveTo(151, 276, 200, 270); pla_gra.quadraticCurveTo(230, 276, 211, 228); pla_gra.quadraticCurveTo(230, 256, 284, 245); pla_gra.quadraticCurveTo(230, 234, 182, 136); pla_gra.fill() pla_gra.closePath(); pla_gra.beginPath(); pla_gra.moveTo(276,238); pla_gra.quadraticCurveTo(341, 259, 352, 354); pla_gra.quadraticCurveTo(355, 387, 338, 447); pla_gra.quadraticCurveTo(336, 387, 338, 413); pla_gra.quadraticCurveTo(336, 428, 306, 413); pla_gra.quadraticCurveTo(336, 389, 306, 317); pla_gra.quadraticCurveTo(279, 274, 236, 265); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#bf7f3a" pla_gra.beginPath(); pla_gra.lineTo(103,101); pla_gra.lineTo(82,112); pla_gra.lineTo(116,116); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#bf0000" pla_gra.beginPath(); pla_gra.lineTo(164,115); pla_gra.lineTo(154,105); pla_gra.lineTo(141,95); pla_gra.lineTo(146,94); pla_gra.lineTo(157,92); pla_gra.lineTo(165,84); pla_gra.lineTo(170,74); pla_gra.lineTo(171,62); pla_gra.lineTo(168,57); pla_gra.lineTo(151,67); pla_gra.lineTo(158,55); pla_gra.lineTo(157,45); pla_gra.lineTo(143,64); pla_gra.lineTo(133,69); pla_gra.lineTo(139,50); pla_gra.lineTo(142,43); pla_gra.lineTo(138,43); pla_gra.lineTo(131,56); pla_gra.lineTo(123,70); pla_gra.lineTo(124,57); pla_gra.lineTo(123,53); pla_gra.lineTo(119,53); pla_gra.lineTo(118,65); pla_gra.lineTo(93,90); pla_gra.lineTo(90,99); pla_gra.lineTo(100,109); pla_gra.lineTo(95,123); pla_gra.lineTo(99,138); pla_gra.lineTo(99,153); pla_gra.lineTo(109,162); pla_gra.lineTo(119,160); pla_gra.lineTo(125,154); pla_gra.lineTo(125,144); pla_gra.lineTo(133,136); pla_gra.lineTo(161,113); pla_gra.fill() pla_gra.closePath() pla_gra.fillStyle = "#ffff3f" pla_gra.beginPath(); pla_gra.lineTo(241,234); pla_gra.lineTo(249,233); pla_gra.lineTo(260,236); pla_gra.lineTo(263,236); pla_gra.lineTo(242,221); pla_gra.lineTo(226,204); pla_gra.lineTo(216,191); pla_gra.lineTo(202,168); pla_gra.lineTo(198,165); pla_gra.lineTo(199,175); pla_gra.lineTo(189,180); pla_gra.lineTo(183,186); pla_gra.lineTo(189,191); pla_gra.lineTo(197,197); pla_gra.lineTo(210,207); pla_gra.lineTo(221,217); pla_gra.lineTo(230,224); pla_gra.lineTo(240,235); pla_gra.lineTo(245,235); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#ff3f00" pla_gra.beginPath(); pla_gra.lineTo(128,152); pla_gra.lineTo(124,167); pla_gra.lineTo(119,174); pla_gra.lineTo(118,193); pla_gra.lineTo(119,208); pla_gra.lineTo(127,202); pla_gra.lineTo(131,202); pla_gra.lineTo(135,192); pla_gra.lineTo(138,188); pla_gra.lineTo(136,177); pla_gra.lineTo(140,172); pla_gra.lineTo(133,162); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#7f0100" pla_gra.beginPath(); pla_gra.lineTo(106,161); pla_gra.lineTo(116,166); pla_gra.lineTo(125,155); pla_gra.lineTo(129,147); pla_gra.lineTo(133,140); pla_gra.lineTo(133,137); pla_gra.lineTo(134,135); pla_gra.lineTo(106,148); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#ff0000" pla_gra.beginPath(); pla_gra.lineTo(120,116); pla_gra.lineTo(115,112); pla_gra.lineTo(111,111); pla_gra.lineTo(107,107); pla_gra.lineTo(104,105); pla_gra.lineTo(110,103); pla_gra.lineTo(109,99); pla_gra.lineTo(110,98); pla_gra.lineTo(106,98); pla_gra.lineTo(103,98); pla_gra.lineTo(102,98); pla_gra.lineTo(91,99); pla_gra.lineTo(92,92); pla_gra.lineTo(92,86); pla_gra.lineTo(91,81); pla_gra.lineTo(97,71); pla_gra.lineTo(103,63); pla_gra.lineTo(107,59); pla_gra.lineTo(112,59); pla_gra.lineTo(114,62); pla_gra.lineTo(116,56); pla_gra.lineTo(124,62); pla_gra.lineTo(124,62); pla_gra.lineTo(135,46); pla_gra.lineTo(139,50); pla_gra.lineTo(138,60); pla_gra.lineTo(155,48); pla_gra.lineTo(154,57); pla_gra.lineTo(168,56); pla_gra.lineTo(164,65); pla_gra.lineTo(165,70); pla_gra.lineTo(171,68); pla_gra.lineTo(170,77); pla_gra.lineTo(163,86); pla_gra.lineTo(155,94); pla_gra.lineTo(148,94); pla_gra.lineTo(142,86); pla_gra.lineTo(138,84); pla_gra.lineTo(129,88); pla_gra.lineTo(128,93); pla_gra.lineTo(131,96); pla_gra.lineTo(134,102); pla_gra.lineTo(140,108); pla_gra.lineTo(137,111); pla_gra.lineTo(133,111); pla_gra.lineTo(133,115); pla_gra.lineTo(138,116); pla_gra.lineTo(143,118); pla_gra.lineTo(148,114); pla_gra.lineTo(147,111); pla_gra.lineTo(143,108); pla_gra.lineTo(141,107); pla_gra.lineTo(139,105); pla_gra.lineTo(139,103); pla_gra.lineTo(147,103); pla_gra.lineTo(154,109); pla_gra.lineTo(161,112); pla_gra.lineTo(167,119); pla_gra.lineTo(175,132); pla_gra.lineTo(175,134); pla_gra.lineTo(171,134); pla_gra.lineTo(163,127); pla_gra.lineTo(165,138); pla_gra.lineTo(155,136); pla_gra.lineTo(155,157); pla_gra.lineTo(150,152); pla_gra.lineTo(148,145); pla_gra.lineTo(142,141); pla_gra.lineTo(144,130); pla_gra.lineTo(144,127); pla_gra.lineTo(135,133); pla_gra.lineTo(129,139); pla_gra.lineTo(126,130); pla_gra.lineTo(124,126); pla_gra.lineTo(128,119); pla_gra.lineTo(130,119); pla_gra.lineTo(129,116); pla_gra.fill() pla_gra.closePath(); pla_gra.fillStyle = "#be0603" ellipse(121,103, 13, 13) pla_gra.fillStyle = "#410300" ellipse(121,103, 7, 7) function random(min,max){ return min+Math.random()(max-min); } function blade(x, y){ this.g = random(-10, 10); pla_gra.beginPath(); pla_gra.moveTo(x, y) pla_gra.quadraticCurveTo(x - this.g/2, y-10, x + this.g, y - 20 - random(0, 5)); pla_gra.quadraticCurveTo(x + this.g/2, y-10, this.x + 5, y); pla_gra.fill() pla_gra.closePath(); } pla_gra.save(); pla_gra.translate(0, 500); pla_gra.fillStyle = "rgb(77, 53, 8)" pla_gra.fillRect(0,0,100,100) for(let i = 0; i < 100; i ++){ pla_gra.fillStyle = "rgb(36, 15, 1)" ellipse(random(0, 100), random(0, 100), random(2, 10), random(2, 10)); pla_gra.fillStyle = "rgb(51, 22, 3)" ellipse(random(0, 100), random(0, 100), random(2, 10), random(2, 10)); pla_gra.fillStyle = "rgb(66, 28, 2)" ellipse(random(0, 100), random(0, 100), random(2, 10), random(2, 10)); pla_gra.fillStyle = "rgb(77, 32, 2)" ellipse(random(0, 100), random(0, 100), random(2, 10), random(2, 10)); pla_gra.fillStyle = "rgb(92, 40, 5)" ellipse(random(0, 100), random(0, 100), random(2, 10), random(2, 10)); } let c = 0; for(let i = 0; i < 100; i ++){ c = random(-30, 30) pla_gra.fillStyle = "rgb("+(3+c)+", "+(99+c)+", "+(17+c)+")" blade(110 + random(0, 100),30 + random(-4, 8)); } pla_gra.save(); pla_gra.fillStyle = "black" pla_gra.beginPath(); pla_gra.moveTo(0, 400) pla_gra.quadraticCurveTo(-7, 254, 98, 237); pla_gra.quadraticCurveTo(206, 262, 200, 400); pla_gra.quadraticCurveTo(190, 497, 100, 500); pla_gra.quadraticCurveTo(10, 497, 0, 400); pla_gra.fill() pla_gra.closePath(); pla_gra.clip(); pla_gra.fillStyle = "rgb(245, 226, 101)" pla_gra.fillRect(0, 235, 200, 600); for(let i = 0; i < 100; i ++){ pla_gra.fillStyle = "rgba(255, 255, 255, 2%)" ellipse(100, 312, i/2 , i1.5); pla_gra.fillStyle = "rgba(212, 175, 11, 2%)" ellipse(-100+i, 400, i1 , i2); ellipse(300-i, 400, i1 , i2); ellipse(100, 600-i, i1.5 , i1.5); } pla_gra.restore(); function mist(y){ let mist_gradient = pla_gra.createLinearGradient(300,y+20,300,y-100); mist_gradient.addColorStop(1, 'rgb(171, 233, 255, 2%)'); mist_gradient.addColorStop(0, 'rgb(9, 20, 171, 75%)'); pla_gra.fillStyle = mist_gradient let up = random(0, 10); pla_gra.beginPath(); pla_gra.moveTo(0, 600) pla_gra.lineTo(0, y-50) for(let i = 1; i < 50; i ++){ let u = random(up-10, up+10) pla_gra.lineTo(i12, y - 50 - u) up = u } pla_gra.lineTo(600, y - 50) pla_gra.lineTo(600,600) pla_gra.fill() pla_gra.closePath(); } function hill(y){ pla_gra.beginPath(); pla_gra.moveTo(0, 600) pla_gra.lineTo(0, y-20) for(let i = 1; i < 12; i ++){ pla_gra.lineTo(i50, y - random(-25, 100)) } pla_gra.lineTo(600, y-20) pla_gra.lineTo(600,600) pla_gra.fill() pla_gra.closePath(); } pla_gra.save(); pla_gra.translate(0, 200); for(let i = 0; i < 5; i ++){ // pla_gra.filter = "blur(2px)" let hill_gradient = pla_gra.createLinearGradient(300,500+i20+20,300,500+i50-200); hill_gradient.addColorStop(1, "rgb("+(69+i20+20)+", "+(45+i18+20)+","+(4+i18+20)+")"); hill_gradient.addColorStop(0, "rgb("+(69+i20-40)+", "+(45+i18-40)+","+(4+i18-40)+")"); pla_gra.fillStyle = hill_gradient hill(500+i20) if(i !== 4){ mist(500+i20); } } pla_gra.restore(); pla_gra.restore(); } //display gra(); //<script> <---- for restart button </script> <script type> //the graphics function sun() { //get the canvas and context let sun_canvas = document.getElementById('sun-canvas') let sun = sun_canvas.getContext('2d') sun_canvas.width = 600; sun_canvas.height = 1200; function random(min,max){ return min+Math.random()(max-min); } for(let i = 0; i < 25; i += 0.1){ sun.strokeStyle = "rgba(255, 255, 255, "+random(5, 10)+"%)" let sun_grad = sun.createRadialGradient(480, 85, 3, 480, 85, 30); sun_grad.addColorStop(0, "rgba(255, 255, 255,100%)"); sun_grad.addColorStop(1, "rgba(255, 255, 255,"+random(5, 10)+"%)"); sun.strokeStyle = sun_grad sun.lineWidth = random(15, 35) sun.beginPath(); sun.moveTo(480, 85) sun.lineTo(480 + Math.sin(i/4) 600, 85 - Math.cos(i/4) * 600) sun.stroke() sun.closePath(); } let sunset_grad = sun.createLinearGradient(300, 600, 300, 1200); sunset_grad.addColorStop(1, "rgb(245, 110, 14)"); sunset_grad.addColorStop(0,"rgb(242, 74, 8)"); sun.fillStyle = sunset_grad; sun.fillRect(0,600,600,600) for(let i = 0; i < 25; i += 0.1){ sun.strokeStyle = "rgba(255, 255, 25, "+random(5, 10)+"%)" let sun_grad = sun.createRadialGradient(200, 1125, 3, 200, 1150, 30); sun_grad.addColorStop(0, "rgba(247, 255, 102,100%)"); sun_grad.addColorStop(1, "rgba(255, 205, 100,"+random(5, 10)+"%)"); sun.strokeStyle = sun_grad sun.lineWidth = random(15, 35) sun.beginPath(); sun.moveTo(200, 1125) sun.lineTo(200 + Math.sin(i/4) * 700, 1125 - Math.cos(i/4) * 700) sun.stroke() sun.closePath(); } } //display sun(); //<script> <---- for restart button </script> <script type>//<script> function pro(){ let canvas = document.getElementById('canvas'), player_g = document.getElementById('g-canvas'), sun = document.getElementById('sun-canvas'), btn1 = document.getElementById('btn1'), btn2 = document.getElementById('btn2'), btn3 = document.getElementById('btn3'), ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; function random(min,max){ return min+Math.random()(max-min); } function coll(x1, y1, w1, h1, x2, y2, w2, h2){ return x1 + w1 > x2 && x2 + w2 > x1 && y1 + h1 > y2 && y2 + h2 > y1 } function ellipse(x, y, w, h) { ctx.beginPath(); ctx.ellipse(x, y, w / 2, h / 2, 0, 0, 2 Math.PI); ctx.fill(); ctx.closePath(); }; function con(aNumber, aMin, aMax) { return aNumber > aMax ? aMax : aNumber < aMin ? aMin : aNumber; } const rooster = new Path2D("M 121, 69 q 18 -60 61 -26 q 22 20 -8 31 q 61 59 62 89 q 18 66 62 78 q 18 2 29 11 q 18 -22 24 -23 q -9 -165 62 -172 q 18 1 35 26 q -65 -36 -77 47 q 63 -97 113 7 q 4 15 0 32 q -39 -96 -78 -52 q 37 -5 45 26 q 63 60 23 204 q -2 14 -18 16 q 18 -60 -15 -85 q 14 60 -3 119 q 3 -27 -7 -70 q 3 26 -14 49 q 11 -27 -2 -62 q -7 60 2 90 q -58 -25 -79 18 q 2 40 -9 59 l -8 39 q 14 26 1 19 q -5 11 18 20 q -10 4 -22 -1 q 2 -7 -33 12 q 8 -16 2 -14 q 12 6 -37 4 q -4 -15 34 -12 q 18 2 29 -71 q -5 2 -40 -31 l -33 73 l 20 16 l -28 -9 l -17 14 q -11 2 -5 -12 l -30 -3 q -9 -9 5 -9 q 49 8 59 -55 q -15 -20 -18 -51 q -136 -100 -83 -248 q -21 2 -15 -49 l -20 0 l 10 -19 q -9 -25 4 -26"); const rat = new Path2D("M 112, 108 q 38 27 10 45 q -18 27 10 9 q 29 -18 10 20 q -24 27 10 35 q 38 -5 45 -39 q 21 -20 10 -10 q 15 -23 16 -17 q 14 27 1 32 q -38 59 -31 54 q 61 97 155 76 q 38 27 34 21 q 38 -36 28 -34 q 29 -28 36 -53 q 38 -45 13 45 q -24 7 10 39 q 38 -14 96 -78 q 8 -19 -41 -100 q -34 -40 -19 -96 q 2 27 57 85 q 71 103 10 163 q -16 23 -140 130 q -234 93 -375 -122 q -11 -25 -18 -64 q -67 27 -13 -47 q -9 -37 36 -51 q 17 -38 43 -47"); let scene = "home" let num_frames = 0; let keys = {} btn3.addEventListener("click", (e) => { scene = "game" }) window.addEventListener("keydown", (e) => { e.preventDefault(); keys[e.key] = true; }) window.addEventListener("keyup", (e) => { delete keys[e.key]; }) function quad(x1, y1, x2, y2, x3, y3, x4, y4) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.lineTo(x1, y1); ctx.fill(); ctx.closePath(); } function dist(x1, y1, x2, y2) { return Math.hypot(x2 - x1, y2 - y1); } class particle{ constructor(x, y, s, xv, yv, color, colorg, colorf) { this.x = x this.y = y this.s = s this.xv = xv this.yv = yv this.color = color; this.rotate = 0; this.op = 100 this.colorg = colorg; this.colorf = colorf; } draw(){ ctx.save(); ctx.translate(this.x + this.s/2, this.y + this.s/2) ctx.rotate(this.rotate); ctx.fillStyle = "rgba("+this.color[0]+","+this.color[1]+","+this.color[2]+","+this.op+"%)" ctx.fillRect(-this.s/2, -this.s/2, this.s, this.s) ctx.restore(); } update(){ this.x += this.xv this.y += this.yv this.rotate += random(-1, 1) this.op -= this.colorf; for(let i = 0; i < 3; i ++){ this.color[i] -= this.colorg } if(dist(player.x, player.y, this.x, this.y) < 600){ this.draw(); } } } let particles = []; function twoD_b_top(x, y, w, h){ quad( x, y, x + w, y, x + w + (player.x + player.w - (x + w)) / 10, y + (player.y - y)/10, x + (player.x - x) / 10, y + (player.y - y)/10 ); } function twoD_b_left(x, y, w, h){ quad( x, y, x + (player.x - x) / 10, y + (player.y - y)/10, x + (player.x - x) / 10, y + h + (player.y + player.h - y)/10, x , y + h ); } function twoD_b_bottom(x, y, w, h){ quad( x + (player.x - x) / 10, y + h + (player.y + player.h - y)/10, x , y + h, x + w, y + h, x + w + (player.x + player.w - (x + w)) / 10, y + h + (player.y + player.h - y)/10, ); } function twoD_b_right(x, y, w, h){ quad( x + w, y + h, x + w + (player.x + player.w - (x + w)) / 10, y + h + (player.y + player.h - y)/10, x + w + (player.x + player.w - (x + w)) / 10, y + (player.y - y)/10, x + w, y, ); } let playerx = 0; let playery = 0; let player = { x: 200, y: 200, w: 75, h: 75, x_vel: 0, y_vel: 0, grav: 0.2, speed: 7, jump_power: 7, can_jump: false, sca: 1, he: 0, draw: function(){ ctx.fillStyle = "rgb(255, 224, 255)" // ctx.fillRect(this.x,this.y, this.w, this.h) ctx.save(); ctx.translate(this.x + this.w/2, this.y + this.h/2); ctx.scale(-this.sca, 1); ctx.fillStyle = "black" // ctx.fillRect(-25, -25, this.w, this.h) ctx.drawImage(player_g, 0, 0, 600, 490, -this.w/2, -this.h/2, this.w, this.h) ctx.restore(); }, move: function(){ this.prev_x = this.x this.prev_y = this.y if(keys.ArrowUp \|\| keys.w){ if(this.can_jump){ this.y_vel = -this.jump_power; } } if(keys.ArrowRight && this.x_vel <= this.speed \|\| keys.d && this.x_vel <= this.speed){ this.x_vel += 0.5; } if(keys.ArrowLeft && this.x_vel >= -this.speed \|\| keys.a && this.x_vel >= -this.speed){ this.x_vel -= 0.5; } if(keys[" "]){ this.glide = true; } }, coll: function(obj){ if(coll(this.x, this.y, this.w, this.h, obj.x, obj.y, obj.w, obj.h)){ this.glide = false; if (this.prev_y + this.h <= obj.y) { this.y = obj.y - this.h; this.y_vel = 0; this.can_jump = true; } else if (this.prev_y >= obj.y + obj.h) { this.y = obj.y + obj.h; this.y_vel = 0; } else if (this.prev_x + this.w <= obj.x) { this.x = obj.x - this.w; this.x_vel = 0; } else if (this.prev_x >= obj.x + obj.w) { this.x = obj.x + obj.w; this.x_vel = 0; } } }, update: function(){ this.move(); this.x = mousex; this.y = mousey; this.sca += this.x_vel/50; this.sca = con(this.sca, -1, 1) // this.draw(); this.x_vel /= 1.05; if(!this.glide){ this.y_vel += this.grav; }else{ this.y_vel += this.grav/3; if(num_frames % 80 === 0){ this.y_vel = -this.jump_power/3; } } this.can_jump = false this.glide = false; }, } let blocks = []; let level = 0; let levels = [ [ " ", "p @ ", " f ", "##########lll###lllll#####llllll#####lllllllllllllllllllllllllllllllllll##########", " ", ], [ " ", " # ", " #### ", " # # ", " ", " # #### ", " # # # ", " p # @ ", " ## ", " ########## ", " " ] ]; class block{ constructor(x, y, w, h) { this.x = x this.y = y this.w = w this.h = h } draw(){ ctx.fillStyle = "rgb(145, 85, 0)" ctx.fillRect(this.x, this.y, this.w, this.h) ctx.drawImage(player_g, 0, 500, 100, 100, this.x, this.y, this.w, this.h) ctx.fillStyle = "rgb(77, 32, 2)" // ctx.fillStyle = "rgb(21, 143, 0)" if(this.left){ // ctx.fillRect(this.x, this.y, this.w/6, this.h) if(player.x < this.x){ twoD_b_left(this.x, this.y, this.w, this.h) } }else{ } if(this.right){ // ctx.fillRect(this.x+this.w * 0.85, this.y, this.w/6, this.h) if(player.x + player.w > this.x){ twoD_b_right(this.x, this.y, this.w, this.h) } } if(this.bottom){ if(player.y + player.h > this.y){ twoD_b_bottom(this.x, this.y, this.w, this.h) } } if(this.top){ if(player.y < this.y){ twoD_b_top(this.x, this.y, this.w, this.h) } ctx.drawImage(player_g, 105, 500, 105, 100, this.x + (player.x - (this.x )) / 10, (this.y + (player.y - this.y)/10)-17, this.w+3, this.h) ctx.drawImage(player_g, 105, 500, 105, 100, this.x + (player.x - (this.x )) / 18, (this.y + (player.y - this.y)/18)-17, this.w+3, this.h) ctx.drawImage(player_g, 105, 500, 105, 100, this.x + (player.x - (this.x )) / 22, (this.y + (player.y - this.y)/22)-17, this.w+3, this.h) ctx.drawImage(player_g, 105, 500, 105, 100, this.x-2, this.y-16, this.w+3, this.h) } } draw_top(){ ctx.drawImage(player_g, 0, 500, 100, 100, this.x, this.y, this.w, this.h) } coll(){}; } class lava{ constructor(x, y, w, h) { this.x = x this.y = y this.w = w this.h = h } draw(){ particles.push(new particle(this.x + random(0, this.w), this.y + this.h/4, random(5, 10), random(-1, 1), random(-2, -1), [255, 153, 15], 0, random(1.5, 2.25))) let lava_grad = ctx.createLinearGradient(0, this.y, 0, this.y + this.w); lava_grad.addColorStop(1, "rgb("+(245+10+Math.sin(num_frames/50)30)+", "+(189+10+Math.sin(num_frames/50)30)+", "+(9+10+Math.sin(num_frames/10)30)+")"); lava_grad.addColorStop(0.6, "rgb(245, "+(127+Math.sin(num_frames/75)30)+", 0)"); lava_grad.addColorStop(0.2, "#ff9300"); lava_grad.addColorStop(0,"rgb("+(209+Math.sin(num_frames/45)30)+", "+(69+Math.sin(num_frames/50)30)+", "+(2-20+Math.sin(num_frames/50)15)+")"); ctx.fillStyle = lava_grad // ctx.fillStyle = "rgb(21, 143, 0)" if(this.left){ // ctx.fillRect(this.x, this.y, this.w/6, this.h) if(player.x < this.x){ twoD_b_left(this.x, this.y, this.w, this.h) } }else{ } if(this.right){ // ctx.fillRect(this.x+this.w 0.85, this.y, this.w/6, this.h) if(player.x + player.w > this.x){ twoD_b_right(this.x, this.y, this.w, this.h) } } if(this.bottom){ if(player.y + player.h > this.y){ ctx.fillStyle = "rgb("+(245+10+Math.sin(num_frames/50)30)+", "+(189+10+Math.sin(num_frames/50)30)+", "+(9+10+Math.sin(num_frames/10)30)+")" twoD_b_bottom(this.x, this.y, this.w, this.h) } } if(this.top){ if(player.y < this.y){ ctx.fillStyle = "rgb("+(189+Math.sin(num_frames/45)30)+", "+(69+Math.sin(num_frames/50)30)+", "+(2-20+Math.sin(num_frames/50)30)+")" twoD_b_top(this.x, this.y, this.w, this.h) } } } draw_top(){ ctx.fillStyle = "rgb(143, 0, 17)" let lava_grad = ctx.createLinearGradient(0, this.y, 0, this.y + this.w); lava_grad.addColorStop(1, "rgb("+(245+30+Math.sin(num_frames/50)30)+", "+(189+30+Math.sin(num_frames/50)30)+", "+(9+30+Math.sin(num_frames/10)30)+")"); lava_grad.addColorStop(0.6, "rgb(255, "+(147+Math.sin(num_frames/75)30)+", 0)"); lava_grad.addColorStop(0.2, "#ff9300"); lava_grad.addColorStop(0,"rgb("+(229+Math.sin(num_frames/45)30)+", "+(89+Math.sin(num_frames/50)30)+", "+(2+Math.sin(num_frames/50)15)+")"); ctx.fillStyle = lava_grad ctx.fillRect(this.x, this.y, this.w, this.h) } coll(){ if(coll(player.x, player.y, player.w, player.h, this.x, this.y, this.w, this.h)){ fixp() } } } class fire{ constructor(x, y, w, h) { this.x = x this.y = y this.w = w this.h = h } draw(){ for(let i = 0; i < 5; i ++){ let XXX = random(-20, this.w+20) particles.push(new particle(this.x + XXX, this.y + this.h, random(5, 10), -(XXX-this.w/2)/30, random(-3, -1), [255, 153, 15], 5, random(0.5, 1.24))) } } draw_top(){ } coll(){ if(coll(player.x, player.y, player.w, player.h, this.x, this.y, this.w, this.h)){ fixp() } } } class gold_egg{ constructor(x, y, w, h) { this.x = x this.y = y this.w = w this.h = h } draw_top(){} draw(){ ctx.drawImage(player_g, 0, 727, 200, 273, this.x, this.y, this.w, this.h) } coll(){ if(coll(player.x, player.y, player.w, player.h, this.x, this.y, this.w, this.h)){ level++; make_level(); fixp() } } } let Block = 0; function get_b(x, y){ try{ return levels[level][x][y] }catch(e){ return " " } } function make_level(){ blocks = []; Block = 0; for(let i = 0; i < levels[level].length; i++){ for(let j = 0; j < levels[level][i].length; j++){ switch(levels[level][i][j]){ case "#": blocks.push(new block(j 60, i * 60, 60, 60)) break; case "@": blocks.push(new gold_egg(j * 60, i * 60, 60, 80)) break; case "l": blocks.push(new lava(j * 60, i * 60, 60, 60)) break; case "f": blocks.push(new fire(j * 60, i * 60 + 50, 60, 10)) break; case "p": player.x = j * 60 player.y = i * 60 - 100 break; } } } for(let i = 0; i < levels[level].length; i++){ for(let j = 0; j < levels[level][i].length; j++){ if(get_b(i, j) !== " " && get_b(i, j) !== "p"){ if(get_b(i, j-1) === " " \|\| get_b(i, j-1) === "f"){ blocks[Block].left = true; } if(get_b(i, j+1) === " " \|\| get_b(i, j+1) === "f"){ blocks[Block].right = true; } if(get_b(i-1, j) === " " \|\| get_b(i-1, j) === "f"){ blocks[Block].top = true; } if(get_b(i+1, j) === " "){ blocks[Block].bottom = true; } Block++; } } } } function fixp(){ player.x = playerx player.y = playery } make_level(); // fixp() // edge() let mousex = 0; let mousey = 0; window.addEventListener("mousemove", (e) => { mousex = e.x; mousey = e.y; }) let scenes = (function() { /** @returns - an object of functions one for each scene */ return ({ game: function() { btn1.style.display = "none" btn2.style.display = "none" btn3.style.display = "none" ctx.drawImage(sun, 0, 0, 600, 600, 0,0,600,600) ctx.save(); ctx.translate(con(-player.x/15, 500, 1000),0) ctx.drawImage(player_g, 0, 1108, 600, 209, 0,416,600,200) ctx.drawImage(player_g, 0, 1108, 600, 209, 600,416,600,200) ctx.drawImage(player_g, 0, 1108, 600, 209, -600,416,600,200) ctx.restore(); ctx.save(); ctx.translate(Math.round(-player.x+300), Math.round(-player.y+300)); for(let i = 0; i < particles.length; i ++){ particles[i].update(); if(particles[i].op <= 0){ particles.splice(i, 1); i--; } } for(let i = 0; i < blocks.length; i ++){ if(dist(player.x, player.y, blocks[i].x, blocks[i].y) < 600){ blocks[i].coll(); blocks[i].draw(); player.coll(blocks[i]); } } for(let i = 0; i < blocks.length; i ++){ if(dist(player.x, player.y, blocks[i].x, blocks[i].y) < 600){ blocks[i].draw_top(); } } player.update(); ctx.restore(); if(player.y > 1000){ make_level(); } }, home: function() { btn1.style.display = "none" btn2.style.display = "none" btn3.style.display = "none" ctx.drawImage(sun, 0, 600, 600, 600, 0,0,600,600) ctx.fillStyle = "rgb(66, 66, 66)" ctx.beginPath(); ctx.moveTo(0, 550); ctx.lineTo(56,540); ctx.lineTo(80,544); ctx.lineTo(94,537); ctx.lineTo(105,521); ctx.lineTo(149,540); ctx.lineTo(172,545); ctx.lineTo(198,532); ctx.lineTo(212,538); ctx.lineTo(247,517); ctx.lineTo(600, 600); ctx.lineTo(0, 600) ctx.fill() ctx.closePath(); ctx.fillStyle = "black" ctx.beginPath(); ctx.moveTo(138,600); ctx.lineTo(196,596); ctx.lineTo(205,568); ctx.lineTo(256,543); ctx.lineTo(291,446); ctx.lineTo(285,355); ctx.lineTo(314,330); ctx.lineTo(288,299); ctx.lineTo(499,299); ctx.lineTo(533, 312); ctx.lineTo(579, 322); ctx.lineTo(600, 331); ctx.lineTo(600, 600); ctx.fill() ctx.closePath(); ctx.save(); ctx.translate(225, 117) ctx.scale(0.35, 0.36) ctx.fill(rooster); ctx.restore(); ctx.save(); ctx.translate(158, 358) ctx.scale(0.15, 0.16) ctx.fill(rat); ctx.restore(); }, intro: function() { btn1.style.display = "none" btn2.style.display = "none" btn3.style.display = "none" ctx.fillStyle = "black" ctx.fillRect(0,0,600,600); ctx.fillStyle = "rgba(255, 136, 0, " + num_frames/3 + "%)" if(num_frames >= 400){ ctx.fillStyle = "white" } ctx.save(); ctx.translate(180,200) ctx.scale(0.4, 0.4) ctx.fill(rooster); ctx.restore(); if(num_frames >= 400){ let text_grad = ctx.createLinearGradient(0-1000+num_frames, 0-1000+num_frames, -400+num_frames, -400+num_frames); text_grad.addColorStop(1, "rgb(0, 0, 0)"); text_grad.addColorStop(0,"rgb(255, 255, 255)"); ctx.fillStyle = text_grad ctx.font = "100px Chicle" // ctx.fillStyle = "white" ctx.fillText("Team Rooster", 80, 130); ctx.fillText("Presents...", 130, 540); ctx.fillStyle = "rgba(255,255,255, " + (300 - num_frames/2) + "%)" ctx.fillRect(0,0,600,600); } if(num_frames >= 1500){ scene = "home" } } }); })(); function draw(){ num_frames +=2; ctx.clearRect(0,0,600,600) ctx.fillStyle = "rgb(184, 229, 252)" ctx.fillRect(0,0,600,600) scenes[scene](); ctx.fillStyle = "white" ctx.font = "90px Chicle" // ctx.fillStyle = "white" ctx.fillText("Rise of the Rooster", 20, 130); ctx.font = "90px Chicle" ctx.fillText("<--- link in code", 67, 575); } window.setInterval(draw, 10); } pro(); </script> </body> </html>
Folds	9,1721
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfBroGeCQw
Votes	24
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	Vicioustrex 🐓
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	4 days ago, 1744686044295
Updated	4 days ago, 1744686044295
Source Deleted	unknown