Viewing Program

Program Data

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

Title	ssspiders [game]
ID	6694242936471552
Created	2 years ago, 1675119709172
Updated	2 years ago, 1675130349034
Code	<!DOCTYPE html><!-- ssspiders by Levi F. for CoC Round 1 Something fallen from the stars crash(?) lands on your mountain, scattering its parts all over your hunting grounds. It must have been accidentally dropped by one of the gods. Maybe if you find all the pieces for them, they will give you something, like a better spear or a big piece of cheese. You can kill spiders (it takes two hits) sub to me: https://www.khanacademy.org/cs/levis-sub-page/6272917622194176 sub to the team: https://www.khanacademy.org/cs/team-leviathan/5151245111443456 Clash of Code 2023: https://www.khanacademy.org/cs/clash-of-code-2023/6672599819534336 Shift + Delete for thumbnail :P --> <!-- Judges: You probably won’t understand most of the code. So I’m going to explain a few things here. The Spiders: Each spider has 8 legs, moving together and using spring forces to pull the body along. The body also moves a little bit on its own, this helps keep it moving quickly. This is what happens every time a spider moves one of its legs: First a breadth-first pathfinding algorithm starts at the player, using a copy of the current level and working around the blocks (cells) until it finds the spiders body. The relative positions of the cell that first found the spider in one of its neighbor cells, and the cell the spiders in determines the direction of travel. This way the spider knows which direction to move for maximum efficiency. Next it starts raytracing. The spider shoots a ray from the center of itself in the direction of travel. The ray takes 2 pixel steps, checking for collisions each time. If this doesn’t reach a solid block within so many pixels, the spider shoots a new ray at a slightly different angle, until one of the rays touches a block. Then the leg starts an animation to move the foot to its new position. The leg itself is made of 3 segments and is slung between the body and the foot. Each joint is tied to the next one, and has different gravity acting on it depending on wether the foot is on a wall or the floor, etc. The legs of a spider on the ceiling are slung downwards with positive gravity, and vice-versa. All 8 legs are on a different timer, so that they move in sequence. The pixelate filter: I use a 200px square canvas, then scale it up to 600px. This would normally make it blurry, just like an image that’s zoomed in too far. but the css property ’image-rendering: pixelated;’ on the canvas makes it pixelate instead. The sprites and art I didn’t use any PJS or drawing libraries, only the built-in ‘ctx’ functions (look in the ‘canvas functions’ script to se what I mean). That meant I had to learn how to use a different shape functions, which was a real pain. I made myself some basic shape functions to make that easier. The sprites are loaded from the thumbnail of one of another program (since these thumbnail images qualify for KA’s cross-origin blocker). I use a special function to only draw part of the full sprite-sheet on one sprite. --> <html> <head> <meta charset="utf-8"> <title>ssspiders [game]</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Chango&display=swap" rel="stylesheet"> <style> body { padding: 0px; margin: 0px; overflow: hidden; height: 600px; background-color: white; font-family: "Chango"; } canvas { position: absolute; left: 0px; top: 0px; image-rendering: pixelated; width: 600px; height: 600px; background-color: transparent; } </style> </head> <body> <p>text</p> <!-- canvases --> <div id="canvas-wrapper"> <canvas tabindex='2' id="thumbnail" width="600px" height="600px"></canvas> <canvas tabindex='1' id="canvas" width="200px" height="200px"></canvas> </div> <!-- canvas stuff --> <script charset="utf-8"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d", { willReadFrequently: true }); // { var sprites = new Image() sprites.src = "https://www.khanacademy.org/computer-programming/sprite-test/4636465623777280/6383278634614784.png"; var radioshack = new Image() radioshack.src = "https://www.khanacademy.org/computer-programming/radio-shack/6492809897230336/6517821840605184.png"; var sky = ctx.createLinearGradient(0, 0, 0, 600) sky.addColorStop(0, "rgb(33, 36, 51)"); sky.addColorStop(1, "rgb(97, 40, 49)"); var clr = "rgb(242, 92, 205)"; var mouseX = 0, mouseY = 0; var width = 600, height = 600; // } predefs etc function constrain(n, min, max) { return n < min ? min : n > max ? max : n; } function dist(ax, ay, bx, by) { return Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by)) } function lerp(a, b, n) { return a + (b - a) * n; } function random(min, max) { return min + (Math.random() * (max - min)) } function background(r, g, b, a) { ctx.save(); if (a !== undefined) { ctx.fillStyle = "rgba(" + [r, g, b, a / 255].join(", ") + ")"; } else if (b !== undefined) { ctx.fillStyle = "rgb(" + [r, g, b].join(", ") + ")"; } else { ctx.fillStyle = r; } ctx.fillRect(0, 0, width, height) ctx.restore(); } function rect(x, y, w, h) { ctx.fillRect(x, y, w, h); } 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.fill(); } function triangle(x1, y1, x2, y2, x3, y3) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.fill(); } function line(ax, ay, bx, by) { ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(bx, by); ctx.stroke(); } function circle(x, y, w) { ctx.beginPath(); ctx.arc(x, y, w * 0.5, 0, Math.PI * 2); ctx.fill(); } function stroke(r, g, b, a) { if (a !== undefined) { ctx.strokeStyle = "rgba(" + [r, g, b, a / 255].join(", ") + ")"; } else if (b !== undefined) { ctx.strokeStyle = "rgb(" + [r, g, b].join(", ") + ")"; } else { ctx.strokeStyle = r; } } function noStroke() { ctx.strokeStyle = "rgba(0, 0, 0, 0)" } function strokeWeight(n) { ctx.lineWidth = n; } function fill(r, g, b, a) { if (a !== undefined) { ctx.fillStyle = "rgba(" + [r, g, b, a / 255].join(", ") + ")"; } else if (b !== undefined) { ctx.fillStyle = "rgb(" + [r, g, b].join(", ") + ")"; } else { ctx.fillStyle = r; } } function noFill() { ctx.fillStyle = "rgba(0, 0, 0, 0)"; } function text(msg, x, y) { ctx.fillText(msg, x, y) } function scale(x, y) { ctx.scale(x, y) } function rotate(r) { ctx.rotate(Math.PI / 180 * r); } function translate(x, y) { ctx.translate(x, y) } function pushMatrix() { ctx.save(); } function popMatrix() { ctx.restore(); } function image(img, x, y, w, h) { ctx.drawImage(sprites, img[0] * bs, img[1] * bs, img[2] * bs, img[3] * bs, x, y, w, h) } canvas.addEventListener("mousemove", function(e) { //console.log(e) mouseX = e.offsetX; mouseY = e.offsetY; }); </script> <!-- levels --> <script> var maps = { "a": [ [ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ########## ", " ############ ", " ############ ", " gggggA######B ", " ################## ", "####################", ], { "A": ["3a", "A", "right"], "B": ["4a", "A", "left"], } ], "0a": [ [ "####################", "####################", "#### ##### ###", "### ### A", "### ### ###", "### ## ## ####", "#### ####", "#### ^^^^# ####", "#### ###### #####", "##### ##### #####", "# #### #### ##", "# #### ###^^^E##", "# ###### ##", "# ## ######## B", "#### ### #### ##", "##### ### ##", "##### ###E ### ###", "##### ###### ###", "###### #####", "####################", ], { "A": ["1a", "B", "right"], "B": ["1b", "A", "right"], }, ], "1a": [ [ "####################", "#############\|l\|ll##", "#########ll\|l\|E\| ##", "########lE \| \| #", "######## \| ##", "########^ g A", "#########^ # ###", "##########gg l##", "###ll####### ##", "##gc \|###ll ##", "#####\|lll ## \|#", "#### \| ggg \|#", "###l ### #", "##l gg # #", "## gg ## \| ^^#", "Bgg##^ # \| ^^###", "###### \| ^#####", "###### ^^######", "######^^^^^^########", "####################", ], { "A": ["2a", "B", "right"], "B": ["0a", "A", "left"], }, ], "1b": [ [ "####################", "################# #", "####### ###### E #", "##### \| E \| ### #", "#### \| \| ##", "### \| \| #####", "### \| ## \| #####", "A \| \| \|####", "#### \| \| \| \|####", "#### \| \| \| ###", "##### # \| \| ##", "##### \| \| \| ##", "##### \| \|S \| B", "#### E\| \| \| ###", "#### \| \|##\| ###", "### \| \| \| ##", "###^^^^^^^ \| \| ##", "##########^^\|^\|^^^##", "####################", "####################", ], { "A": ["0a", "B", "left"], "B": ["2c", "A", "right"], }, ], "1c": [ [ "####################", "### \|\|\| ############", "##\|E\|\|\|E####### ###", "# \| \| \| #### A", "# \| E\| ##### # ##", "#E\| \|########## ##", "# # #########\| ##", "# E# \| \| \| ####\|###", "## ##\| \| ###\|###", "####### ##\|###", "##### ##\| ##", "####\| c ###\| ##", "####\| ^^#^####\| ##", "#### ######### \| ##", "#### ######### ##", "#### ###### ####", "##### ## ####", "######^ #####", "####################", "####################", ], { "A": ["2c", "B", "right"], }, ], "2a": [ [ "### \| \| ####", "### \| \| ####", "## \| \| ###", "D \| \| ###", "#### \| A#", "#### \| ######", "###\| \| #####", "###\| \|####", "## #### \|E###", "##^^ ####\| \| ###", "##### # \| ###", "##### \|E\| ###", "### \| \| ####", "## ### ######", "## # \| ##########", "B \| ###########", "### \| ##########", "### \| C########", "#####^^^^###########", "####################", ], { "A": ["3b", "A", "right"], "B": ["1a", "A", "left"], "C": ["2b", "A", "right"], "D": ["hall", "B", "left"], }, ], "2b": [ [ "## ##########", "## #### ##", "## ##A #", "## E #### #", "## ## E #### #", "## #### ### ##", "## # ## B", "### ^ \| ###", "### # ## \| ###", "###S ### \| ###", "#### \| \| ####", "#### \| ####", "### ### \| ###", "### ##### \| ###", "### ## \| ##", "### # C", "#### ^ ###", "#### E ^#^^^#####", "####^^^^^^##########", "####################", ], { "A": ["2a", "C", "left"], "B": ["3c", "B", "right"], "C": ["3d", "A", "right"], }, ], "2c": [ [ "####################", "############ #####", "##### \| \|##", "###\| S \| \| #", "## \| ### \| #", "## \| ######## E ##", "## \| ########## #", "## ########### #", "A ##### \| ##### #", "### ### \|E\| \|#### ##", "##\| ### \| \|#### ##", "##\| ###E \| \|#### ##", "### ## #E\|### ##", "### ######\|\| \| C", "### ##### \| \| ###", "#### ### \| ###", "### \| ###", "## ####\| #####", "B ################", "####################", ], { "A": ["1b", "B", "left"], "B": ["1c", "A", "left"], "C": ["3d", "B", "right"], }, ], "3a": [ [ "####################", "######A ######", "######## ####", "########## ##", "########### S ##", "############# ##", "#### \| E##### ###", "###\|E \| ##### ###", "### \| #### ###", "### \| \| \| ####", "####\| E \| ####", "##### \| #####", "#####\| \| #####", "###### \| #######", "###### \| ########", "###### \| #### ###", "#### ##", "#### E # ##", "##### ######B###", "####################", ], { "A": ["a", "A", "left"], "B": ["3b", "B", "down"], }, ], "3b": [ [ "################B###", "###### ##### ##", "#### ### ##", "## E ### #####", "## ## ####", "# # ####", "# ###### ####", "# ## ###### E ###", "#^ ###### ###", "##^^^^# #### ###", "######## ### ###", "########## ## ###", "########### ###", "######### ###", "######## ####", "#### # ######", "## ##^^######", "A ##########", "### ############", "####################", ], { "A": ["2a", "A", "left"], "B": ["3a", "B", "up"], } ], "3c": [ [ "####################", "####################", "##### \| ###########", "### \| \| E\| ########", "## \| # \| ########", "#E \| \| #\| ####", "# # \| \| ###", "# \| ###", "# c \| ##", "### ### \| \| ##", "######### \| \| ##", "############# \| ##", "#### \|##### \| ##", "###\| E\|\| ## \| ##", "B \|\| \| ### \| A", "# \| \| \| ##########", "# \| \|###########", "#S \|\| ##############", "####################", "####################", ], { "A": ["4c", "A", "right"], "B": ["2b", "B", "left"], }, ], "3d": [ [ "####################", "####################", "###### E ########", "### #####", "## ####", "A ####", "### ###", "### ### ## ##", "## ### ## ## ##", "## ## ## ## C", "##^ ## ## ###", "### ## ###", "### # ## ##", "### ## ## ##", "## ## ## #", "## ## ## ## E #", "B ## ##^ ## ^#", "###^^## E###^##^^^##", "#######^^###########", "####################", ], { "A": ["2b", "C", "left"], "B": ["2c", "C", "left"], "C": ["4c", "D", "right"], }, ], "4a": [ [ "####################", "### A#############", "## ###############", "# ###\| ###########", "# ###\| ####", "## \| \|E \|###", "#### \| \| \|###", "#### \| ###", "###\| S ## E ###", "###\|####### ####", "###\|######\| #######", "###\|#### \| ########", "## \| \| E \|#########", "## \| \|#########", "# \| \| ###", "# \| B#", "# \| ####", "## \| #####", "##### ###^^^######", "####################", ], { "A": ["a", "B", "right"], "B": ["5a", "A", "right"], }, ], "4b": [ [ "####################", "####### \| E \| ###", "###### \| \| ##", "###### \| \| ##", "## # \| \| A", "# #### \| ###", "# ######\| \|##", "# ####### \|E#", "## ######## \| #", "### ##\| ##", "### ### \|## ##", "### ##### \| \| ##", "### ######## \| ##", "## S##\| ##\|# \| ###", "##### \| \| \| ###", "#### \|E \| \| ###", "#### \| \| \| ##", "##### \| E\| \| B", "######## \| ######", "####################", ], { "A": ["5a", "B", "right"], "B": ["5b", "A", "right"], }, ], "4c": [ [ "####################", "######### ########", "### #### E ## ##", "## #### # B", "A ## ####", "## #####", "#### #######", "##### #########", "####################", "#######\| ###########", "###### \| ##### ####", "##### \|S###### # ##", "#### \|##### C", "## # \| # ##", "## \| ###", "## ^#####", "D ########", "### #^########", "#####^^^############", "####################", ], { "A": ["3c", "A", "left"], "B": ["5c", "A", "right"], "C": ["5d", "A", "right"], "D": ["3d", "C", "left"], }, ], "5a": [ [ "####################", "## ##############", "# #########", "## \|#######", "A \| ######", "### \|E #####", "## ##\| \|####", "## ^#\|# \|####", "##^^##\|#^^# \| ###", "#####E\|##### \| ###", "######\|##### ###", "######\| ##### ###", "##### \| ###### ###", "##### \| ###\| ###", "## \| ###", "B ####", "### ####", "###S ## #####", "#####^^###^^^#######", "####################", ], { "A": ["4a", "B", "left"], "B": ["4b", "A", "left"], }, ], "5b": [ [ "####################", "####################", "####################", "#####E\|#############", "#### \|\| ###########", "A \| \|##########", "## \| \| \| #####", "#### \| \| \| ####", "##### \| \| ####", "######## \| # ###", "######## ###", "#### B", "### ####", "###S c #^^^######", "#### # ############", "####################", "####################", "####################", "####################", "####################", ], { "A": ["4b", "B", "left"], "B": ["6a", "A", "right"], }, ], "5c": [ [ "####################", "############## \|##", "############# \|##", "############# ##\|##", "############# ###\|##", "############# ###\|##", "#######\| \| ## ###\|##", "#####\| \| \| \|# ###\|##", "#### \| \| \| # B", "#### \| \| \| \| ###", "#### \|\|\| ####", "#### \| \| E####", "#### \| \| ####", "### \| \| ####", "A S S \| \|E#####", "######## \|########", "####################", "####################", "####################", "####################", ], { "A": ["4c", "B", "left"], "B": ["6b", "B", "right"], }, ], "5d": [ [ "#####################", "#####################", "### #########", "## #######", "## ######", "A #####", "### ####", "### ### ###", "### \| ### ###", "## \| \|\| ##", "## \| \|\| ## ##", "## \| \|\| \| \| B", "## E\|\| \| ###", "##^ \| \| \| ###", "### \| E ###", "### ^^^^###", "### ^^#######", "###^^^^^^^^#########", "####################", "####################", ], { "A": ["4c", "C", "left"], "B": ["6c", "B", "right"], }, ], "6a": [ [ "####################", "######## ##########", "###\| # ##########", "A \| #########", "## \| E ##### ##", "###\| #### \| ##", "###\| ####### \| B", "###\| ###### \| ###", "### ####### ##", "### ####### ##", "### ###\|#### ##", "#### ## \| #### ##", "##### ## \| \|\| ##", "##### ###\| \| ##", "##### ##\| ###", "###### ######", "####### ########", "######### C######", "####################", "####################", ], { "A": ["5b", "B", "left"], "B": ["7a", "A", "right"], "C": ["6b", "A", "right"], }, ], "6b": [ [ "####################", "############ ####", "##########A ###", "############# ^ ##", "#### ## ## ##", "### ##", "### #^^# ###", "## #######^^ C", "## ################", "## ### ############", "B ## \| ##", "### \| ##", "###^ # \| ##", "#### ^^## \| ##", "######^^^###### \| ##", "############### \| #", "############### #", "#############D #", "################^^##", "####################", ], { "A": ["6a", "C", "left"], "B": ["5c", "B", "left"], "C": ["7a", "B", "right"], "D": ["6c", "A", "left"], }, ], "6c": [ [ "####################", "####################", "####\| \|\|\| A####", "###\|\| \| \| #######", "###\|\|\| \| #######", "###\| \| \| #########", "###\| \| \| ##########", "## \| \| \| \| ########", "## \| \| \| ####", "## # \| \| ####", "## \| \| ####", "B #^^^^ \| \|\| ####", "########^^\|\| \|\| \|###", "########## \| \| \|###", "######### \| \|\| C", "######### \| ##", "######## ##", "#######^ E ###", "########^^^^^^^^^###", "####################", ], { "A": ["6b", "D", "right"], "B": ["5d", "B", "left"], "C": ["7b", "A", "right"], }, ], "6d": [ [ "####################", "####################", "####################", "####################", "##########\|\| ######", "########\| \| \|#####", "####### \| \| \| ####", "### \| \| ####", "## \| ####", "## c ^^ ####", "## # ## ###", "####### ###", "######## A", "######## ## ####", "### ## \| ## ####", "### E \| ## ####", "#### ^## ###", "#####^^^^^### ###", "#############^^^^###", "####################", ], { "A": ["7b", "B", "right"], }, ], "7a": [ [ "####################", "### #### \|\| \|#####", "## ##\| \| E\|####", "## ##\|\|###\|\|####", "A ##\|#####\|####", "### ### ####\|####", "## ### ####\|####", "## # ###\|\|###", "## ### \|###", "### ## ### \|###", "### ##### ### \|###", "### ##### ## \|###", "## ##### \|# \|###", "## ##### \| \| ##", "## ##### \| ##", "B ###### c ##", "######### ##", "######### ###", "########### #####", "####################", ], { "A": ["6a", "B", "left"], "B": ["6b", "C", "left"], }, ], "7b": [ [ "####################", "## ##### ####\| #", "## ### ## \| #", "A ## #", "###^ #### #### ##", "########## ##\| # ###", "########## # \| ###", "######## # \| ####", "# ### ###\|######", "# ##\|######", "#^ ### # \|######", "##^^###### \| ###", "############# ##", "############# ##", "## ######### ##", "## ## ### ###", "B ### ## ###", "########## ###", "########## #####", "####################", ], { "A": ["6c", "C", "left"], "B": ["6d", "A", "left"], }, ], "hall": [ [ "####################", "####################", "####################", "####################", "####################", "####################", "##### ##########", "#### #######", "### #####", "### ###", "## ggfgggB", "Agg fg ggg#######", "###ggg##^^##########", "####################", "####################", "####################", "####################", "####################", "####################", "####################", ], { "A": ["start", "B", "left"], "B": ["2a", "D", "right"], }, ], "start": [ [ "####################", "####################", "####################", "####################", "####################", "####################", "############## ###", "#############\| gB", "#####A#######\| gg##", "##### #######\| g####", "##### #####\| #####", "#### ### \| #####", "### \|f#####", "### \|######", "### \|######", "###g S ######", "####f ggfg######", "#####ggggg##########", "####################", "####################", ], { "A": ["start", "B", "up"], "B": ["hall", "A", "right"], }, ], }; </script> <!-- actual game --> <script charset="utf-8"> // { var Block, Decor, Stick, Pipe, Part, Spear, p; var grav = 0.4; var pings = []; var holderCount = 0; var collectableCount = 0; var endingAnimate = false; var endingTimer = 0; var holders = [ [6, 12, false], [7, 12, false], [8, 12, false], [11, 12, false], [12, 12, false], [13, 12, false], ]; var bs = 30; var lvl = "a"; var blocksArr = []; // } globals // { var blockKeys = { "#": 0, }; var decorKeys = { "g": "grass", "f": "flower", "l": "vine", "c": "collectable", "^": "spike", "-": "holder" } function fillLevel(l) { lvl = l; var lName = l; l = maps[l][0]; //console.log(lName); var arr = []; for (var y = 0; y < l.length; y++) { arr.push([]); for (var x = 0; x < l[y].length; x++) { if (l[y][x] === p.spawn) { p.x = (x + 0.5) * bs; p.y = (y + 0.5) * bs; lvl = lName; p.vx = 0; p.vy = 0; p.jump = false; p.onSpawn = 2; } if (maps[lvl][1][l[y][x]] !== undefined) { arr[y].push(new Pipe(x, y, l[y][x], maps[lvl][1][l[y][x]])) maps[lName][1][l[y][x]].push((x + 0.5) * bs); maps[lName][1][l[y][x]].push((y + 0.5) * bs); } else if (decorKeys[l[y][x]] !== undefined) { arr[y].push(new Decor(x, y, decorKeys[l[y][x]])) } else { switch (l[y][x]) { case "\|": arr[y].push(new Stick(x, y, l[y][x])); break; case "E": maps[lName].spiders.push(new Spider(x * bs, y * bs)); arr[y].push(undefined); break; case "S": maps[lName].rocks.push(new Spear((x + 0.5) * bs, y * bs, 0, 0.2)) arr[y].push(undefined); break; case "#": if (lName !== "a" && y > 0 && (arr[y - 1][x] === undefined \|\| arr[y - 1][x].type === "vine")) { arr[y - 1][x] = new Decor(x, y - 1, "grass"); } arr[y].push(new Block(x, y, l[y][x])); break; default: if (lName !== "a" && y > 0 && arr[y - 1][x] && arr[y - 1][x].solid) { arr[y].push(new Decor(x, y, "vine")); } else { arr[y].push(undefined); } } } } } return arr; } function resetSpiders(l) { for (var i = 0; i < maps[l].spiders.length; i++) { if (maps[l].spiders[i].health >= 0) { var s = new Spider(maps[l].spiders[i].ox, maps[l].spiders[i].oy); s.health = maps[l].spiders[i].health; maps[l].spiders[i] = s; } } } function saveLevels() { p.saveX = p.x; p.saveY = p.y; p.saveLvl = lvl; p.saveHolding = false; if (p.holding) { p.saveHolding = [p.holding.x, p.holding.y, p.holding.harming === undefined]; } for (var j in maps) { maps[j].saveRocks = []; for (var i = 0; i < maps[j].rocks.length; i++) { maps[j].saveRocks.push([maps[j].rocks[i].x, maps[j].rocks[i].y, maps[j].rocks[i].harming === undefined]) } maps[j].saveSpiders = []; for (var i = 0; i < maps[j].spiders.length; i++) { if (maps[j].spiders[i].health > 0) { maps[j].saveSpiders.push([maps[j].spiders[i].ox, maps[j].spiders[i].oy, maps[j].spiders[i].health]) } } } for (var i = 0; i < holders.length; i++) { if (holders[i][2] === undefined) { holders[i][2] = true; } } } function resetLevels() { p.x = p.saveX; p.y = p.saveY; lvl = p.saveLvl; p.vx = 0; p.vy = 0; p.dead = false; p.onSpawn = 2; p.holding = false; if (p.saveHolding) { p.holding = new Spear(p.saveHolding[0], p.saveHolding[1]); } resetSpiders(lvl); for (var j in maps) { maps[j].rocks = []; for (var i = 0; i < maps[j].saveRocks.length; i++) { var r = maps[j].saveRocks[i]; r = new Spear(r[0], r[1]); maps[j].rocks.push(r) //console.log(maps[j].rocks[4]) } //console.log(maps[j].rocks) maps[j].spiders = []; for (var i = 0; i < maps[j].saveSpiders.length; i++) { var r = maps[j].saveSpiders[i]; var s = new Spider(r[0], r[1]); s.health = r[2]; maps[j].spiders.push(s); } } for (var i = 0; i < holders.length; i++) { if (holders[i][2] === undefined) { holders[i][2] = false; } } } // } levels // { var Keys, Mouse, Scenes, Scene = "flyleaf", Trans, Images, ImageLoader; Mouse = { click: false, rightClick: false, press: false, }; function mousePressed(e) { //console.log(e) //e.preventDefault(); if (e.button === 2) { Mouse.rightClick = false; } else { Mouse.click = true; Mouse.press = true; } }; function mouseReleased() { Mouse.press = false; }; canvas.addEventListener("mousedown", mousePressed); canvas.addEventListener("mouseup", mouseReleased); Keys = {}; function keyPressed(e) { //console.log(e.key); e.preventDefault(); Keys[e.key] = true; if (Keys["Shift"] && e.key === "Backspace") { canvas.style.display = "none"; drawThumbnail(); } }; function keyReleased(e) { delete Keys[e.key]; }; canvas.addEventListener("keydown", keyPressed, false); canvas.addEventListener("keyup", keyReleased, false); Trans = { n: 0, to: "", set: function(scene, trans) { if (Scenes[scene] !== undefined) { if (trans === false) { Scene = this.to; } else if (this.n < 0.8) { this.to = scene; } } else { console.log("Scenes[" + scene + "] is undefined"); } }, update: function() { if (this.to !== "") { this.n += 0.01; this.n = 1.03; } else { this.n -= 0.01; this.n = 0.97; this.n = constrain(this.n, 0, 1); } if (this.n >= 1) { Scene = this.to; this.to = ""; } noStroke(); fill(0, 0, 0, Trans.n * 255); rect(0, 0, width, height); }, }; // } interaction and misc functions // { Ping = function(x, y) { this.x = x; this.y = y; this.r = 0; } Ping.prototype.update = function() { if (this.r < 150) { this.r += 5; stroke(255, 255, 255, 50); strokeWeight((1 - this.r / 150) * 7) ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.stroke(); } else { this.dead = true; } }; function ping(x, y) { pings.push(new Ping(x, y)); for (var i = 0; i < maps[lvl].spiders.length; i++) { //if(dist(x, y, maps[lvl].spiders[i].x, maps[lvl].spiders[i].y) < 300) { maps[lvl].spiders[i].seekX = x; maps[lvl].spiders[i].seekY = y; //} } } // } 'Ping' constructor // { function coll(a, b) { return a.x < b.x + b.w && a.y < b.y + b.h && b.x < a.x + a.w && b.y < a.y + a.h; } function init(ax, ay, bx, by, bw, bh) { return ax < bx + bw && ay < by + bh && bx < ax && by < ay; } // a for anchor, b for bob, l for length, s for springyness function spring(ax, ay, bx, by, l, s) { var force = (-s) * (dist(ax, ay, bx, by) - l); var a = Math.atan2(bx - ax, by - ay); return { x: Math.sin(a) * force, y: Math.cos(a) * force }; } function checkBlocks(px, py, level, s) { var n = [], opx = px, opy = py; s = s \|\| 2; px = ~~(px / bs); py = ~~(py / bs); for (var y = -s + py; y < s + py; y++) { if (y >= 0 && y < level.length) { for (var x = -s + px; x < s + px; x++) { if (x >= 0 && x < level[y].length && level[y][x] !== undefined) { var b = level[y][x]; //println(b.x); n.push(b); } } } } return n; } function cc(that, px, py, pr) { pr = pr \|\| 0; if (dist(that.x, that.y, px, py) < that.r + pr) { var a = Math.atan2(that.x - px, that.y - py); that.x = px + Math.sin(a) * (that.r + pr); that.y = py + Math.cos(a) * (that.r + pr); if (a > Math.PI * 0.5 \|\| a < -Math.PI * 0.5) { if (that.isPlayer && that.vy > 8 \|\| that.harming !== undefined && (that.vy > 5 \|\| that.vy < 0)) { ping(that.x, that.y) } that.vy = 0.6; that.jump = true; } if (a === Math.PI \|\| a === 0) { that.vy = 0; } if (a === Math.PI 0.5 \|\| a === -Math.PI * 0.5) { that.vx = -0.3; } that.coll = true; } } function circCollide(that, blocks) { var skip = false; for (var i = 0; i < blocks.length; i++) { var px = constrain(that.x, blocks[i].x, blocks[i].x + blocks[i].w), py = constrain(that.y, blocks[i].y, blocks[i].y + blocks[i].h); if (blocks.solid && (px === that.x \|\| py === that.y)) { cc(that, px, py); blocks.splice(i, 1); } } for (var i = 0; i < blocks.length; i++) { var px = constrain(that.x, blocks[i].x, blocks[i].x + blocks[i].w), py = constrain(that.y, blocks[i].y, blocks[i].y + blocks[i].h); if (!blocks[i].solid) { var stickExtra = blocks[i].isStick ? 10 : 0; if (init(that.x, that.y, blocks[i].x - stickExtra, blocks[i].y, blocks[i].w + stickExtra 2, blocks[i].h)) { blocks[i].onCollide(that); } //console.log(i) } else if (blocks[i].solid) { cc(that, px, py); } } //console.log(skip) } // } collision functions // { var dust = (function() { var arr = []; for (var i = 0; i < 100; i++) { arr.push({ x: random(0, 600), y: random(0, 600), s: random(2, 6), vy: random(-0.5, 0.5), }); } return arr; })(); function drawDust() { fill(0, 0, 0, 60); for (var i = 0; i < dust.length; i++) { dust[i].x -= dust[i].s * 1.5; dust[i].y += dust[i].vy; rect(dust[i].x, dust[i].y, dust[i].s, dust[i].s) if (dust[i].x < -dust[i].s) { dust[i].x += 600; } if (dust[i].y < -dust[i].s) { dust[i].y += 600; } if (dust[i].y > 600) { dust[i].y -= 600; } } } var parts = []; var partTypes = { "pink": { s: 1, glow: "rgba(242, 92, 205, 0.1)", v: 1, c: clr, }, "white": { s: 4, glow: "rgba(255, 255, 255, 0.1)", v: 7, c: "white", }, "spider": { s: 10, v: 2, c: "black", }, } Part = function(x, y, a, type) { this.type = type; this.data = partTypes[type]; var v = random(this.data.v0.8, this.data.v1.2) this.vx = Math.sin(a) * v; this.vy = Math.cos(a) * v; this.s = this.data.s; this.time = ~~random(-10, 10); this.x = x - this.s * 0.5; this.y = y - this.s * 0.5; } Part.prototype.draw = function() { this.x += this.vx; this.y += this.vy; if (this.time > 45) { this.s -= 0.1; } this.time++; if (this.data.glow) { fill(this.data.glow); rect(this.x - this.s * 2, this.y - this.s * 2, this.s * 5, this.s * 5); } fill(this.data.c); rect(this.x, this.y, this.s, this.s); } function pushPart(x, y, a, type) { parts.push(new Part(x, y, a, type)); } function drawParts() { for (var i = 0; i < parts.length; i++) { parts[i].draw(); if (parts[i].s <= 0) { parts.splice(i, 1); i--; } } } // } particle system // { Spear = function(x, y, a) { this.x = x; this.y = y; this.v = 8; a = a \|\| 0; this.vx = Math.sin(a) * 2; this.vy = Math.cos(a) * 2; this.r = 8; this.grav = 0.1; this.dead = false; this.timer = 0; this.stillTimer = 0; this.still = false; this.harming = false; this.isThrowable = true; this.a = a; }; Spear.prototype.reset = function(x, y, a) { this.x = x; this.y = y; this.vx = Math.sin(a) * this.v; this.vy = Math.cos(a) * this.v; this.timer = 0; this.stillTimer = 0; this.dead = false; this.still = false; this.a = a; }; Spear.prototype.run = function() { if (!this.still) { this.vy = constrain(this.vy + this.grav, -this.v, this.v); this.vx = constrain(this.vx, -this.v, this.v); this.x = this.x + this.vx; this.y = this.y + this.vy; this.a = Math.atan2(this.vx, this.vy); this.coll = false; circCollide(this, checkBlocks(this.x, this.y, blocksArr)); if (this.coll) { if (dist(this.vx, this.vy, 0, 0) > this.grav) { ping(this.x, this.y); } this.vx = 0; this.vy = 0; this.still = true; this.harming = false; } if (this.harming) { for (var i = 0; i < maps[lvl].spiders.length; i++) { if (maps[lvl].spiders[i].health > 0) { this.coll = false; cc(this, maps[lvl].spiders[i].x, maps[lvl].spiders[i].y, maps[lvl].spiders[i].r); if (this.coll) { if (this.hitSpider !== i) { console.log(frameCount, "spear hit spider[" + i + "]"); this.hitSpider = i; this.vx = 0; this.vy = 0; this.still = false; this.harming = false; for(var k = 0; k < 20; k++) { pushPart(maps[lvl].spiders[i].x, maps[lvl].spiders[i].y, random(0, Math.PI2), "spider") } maps[lvl].spiders[i].health -= 0.5; } } else if (this.hitSpider === i) { this.hitSpider = -1; } } } } } if (this.still) { this.stillTimer++; } if (this.stillTimer >= 240) { this.stillTimer = 0; this.still = false; } //circle(this.x, this.y, this.r2); }; Spear.prototype.update = function() { for (var i = 0; i < 2; i++) { this.run(); } if (!p.holding && this.timer > 10 && dist(this.x, this.y, p.x, p.y) < this.r + p.r) { p.holding = this; this.dead = true; } stroke(255, 255, 255); strokeWeight(3); var vx = Math.sin(this.a) * this.r * 2, vy = Math.cos(this.a) * this.r * 2; line(this.x - vx, this.y - vy, this.x + vx, this.y + vy) this.timer++; }; // } thrown spears // { var p = { x: 200, y: 100, r: bs * 0.4, vx: 0, vy: 0, jump: false, coll: false, spawn: "A", isPlayer: true, onSpawn: 2, holding: false, collectables: 0, }; p.draw = function() { /* fill(100, 100, 100) circle(this.x, this.y + 5, this.r * 1.7); circle(this.x, this.y + 2, this.r * 1.7); fill(230, 230, 230) circle(this.x, this.y - this.r, this.r1.2); rect(this.x + -5 + -4, this.y - this.r1.9, 5, 10) rect(this.x + 4, this.y - this.r1.9, 5, 10) /fill(0, 0, 0) circle(this.x - 3, this.y - this.r, 3); circle(this.x + 3, this.y - this.r, 3);/ image(Math.abs(p.vx) < 0.1 ? Images.player : p.vx < 0 ? Images.player_left : Images.player_right, this.x - bs 0.5, this.y - bs * 0.5, bs, bs) }; p.move = function() { if (Keys.a \|\| Keys.ArrowLeft) { this.vx = -3; } if (Keys.d \|\| Keys.ArrowRight) { this.vx = 3; } if ((Keys.w \|\| Keys.ArrowUp) && this.jump) { this.vy = -8.5; this.jump = false; } else if ((Keys.w \|\| Keys.ArrowUp) && this.climb && this.vy > -2) { this.vy = -2; } }; p.update = function() { if ((lvl === "a" && holderCount === 6 && init(p.x, p.y, 290, 400, 20, 20))) { endingAnimate = true; } this.move(); this.vy += grav; this.vy = constrain(this.vy, -100, 10); if (this.dead) { Trans.set("dead"); } else { this.x += this.vx; this.y += this.vy; } this.x = constrain(this.x, this.r, width - this.r); this.y = constrain(this.y, this.r, height - this.r); if (this.y > height + 200) { this.dead = true; } this.vx = 0.5; this.jump = false; this.onSpawn = constrain(this.onSpawn - 1, -1, 5); this.climb = false; circCollide(this, checkBlocks(this.x, this.y, blocksArr)); this.draw(); if (Mouse.click && this.holding) { this.holding.reset(this.x, this.y, Math.atan2(mouseX - this.x, mouseY - this.y), 10); this.holding.harming = true; maps[lvl].rocks.push(this.holding); this.holding = false; } //console.log(this.holding); }; // } player object // { Spider = function(x, y) { this.x = x; this.y = y; this.ox = x; this.oy = y; this.health = 1; this.r = bs 0.5; this.svx = 0; this.svy = 0; this.vx = 0; this.vy = 0; this.seekX = x; this.seekY = y; this.maxLegLength = 110; this.reachInCells = 3; this.tries = [0, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, -0, -0.2, -0.4, -0.6, -0.8, -1, -1.2, -1.4, -1.6, -1.8, -2, 2, 2.2, 2.4, 2.6, 2.8, 3, 3.2, 3.4, 3.6, 3.8, 4, -2, -2.2, -2.4, -2.6, -2.8, -3, -3.2, -3.4, -3.6, -3.8, -4, 4, 4.2, 4.4, 4.6, 4.8, 5, 5.2, 5.4, 5.6, 5.8, 6, -4, -4.2, -4.4, -4.6, -4.8, -5, -5.2, -5.4, -5.6, -5.8, -6]; this.a = 0; this.ll = this.maxLegLength / 3; this.feet = (function(px, py, sl) { var f = []; var mult = Math.PI * 0.25, dMult = 20 / 8; for (var i = 0; i < 8; i++) { //console.log(px + ", " + py); f.push({ x: px, y: py, fromX: px, fromY: py, nodes: [ [0, 0], [0, 0], [0, 0], [0, 0], ], sideX: 0, sideY: 0, toX: px + Math.sin((i + 0.5) * mult) * 10, toY: py + Math.cos((i + 0.5) * mult) * 10, delay: i * dMult, placed: false, }); //console.log(f[i]); } return f; })(x, y); this.q = []; this.z = []; }; Spider.prototype.place = function(a, n) { var r = Math.atan2(n[0] - a[0], n[1] - a[1]); n[0] = lerp(a[0] + Math.sin(r) * this.ll, n[0], 0.5); n[1] = lerp(a[1] + Math.cos(r) * this.ll, n[1], 0.5); }; Spider.prototype.stepRay = function(x, y, vx, vy, count) { //point(x, y); //rect(x, y, 3, 3); x += vx; y += vy; if (blocksArr[~~(y / bs)] && blocksArr[~~(y / bs)][~~(x / bs)] !== undefined) { var b = blocksArr[~~(y / bs)][~~(x / bs)]; if (b.isStick && count > 40 && init(x, y, b.x, b.y, b.w, b.h) \|\| b.solid && !b.isStick) { return { x: x - vx, y: y - vy, sideX: (x - vx > b.x + b.w * 0.5) ? 1 : -1, sideY: (y - vy > b.y + b.h * 0.5) ? 1 : -1, }; } } if (count < this.maxLegLength) { return this.stepRay(x, y, vx, vy, count + 2); } return false; }; Spider.prototype.placeFoot = function(an) { var run = false, i = 0; while (run === false && i < this.tries.length) { var a = an + this.tries[i] * 0.2 * Math.PI; run = this.stepRay(this.x, this.y, Math.sin(a) * 2, Math.cos(a) * 2, 0); i++; } return run; }; Spider.prototype.updateFoot = function(f, i) { if (f.delay <= 5) { f.x = lerp(f.fromX, f.toX, f.delay * 0.2); f.y = lerp(f.fromY, f.toY, f.delay * 0.2); } else if (f.delay > 20 && this.move) { var a = this.findDir(~~(this.seekX / bs), ~~(this.seekY / bs)); if (a && !(a[0] === 0 && a[1] === 0)) { this.a = Math.atan2(a[0], a[1]) } var coords = this.placeFoot(this.a + (Math.random() - 0.5)); if (coords) { f.fromX = f.toX; f.fromY = f.toY; f.toX = coords.x; f.toY = coords.y; f.sideX = coords.sideX; f.sideY = coords.sideY; f.delay = 0; f.placed = false; } } else { f.placed = true; } if (this.move) { f.delay++; } f.nodes[3][0] = f.x; f.nodes[3][1] = f.y; f.nodes[0][0] = this.x; f.nodes[0][1] = this.y; stroke(0, 0, 0); //line(this.x, this.y, f.x, f.y); var l = 4; for (var i = 1; i < l - 1; i++) { f.nodes[i][0] += f.sideX * 3; f.nodes[i][1] += f.sideY * 3; } for (var i = 1; i < l - 1; i++) { this.place(f.nodes[i - 1], f.nodes[i]); this.place(f.nodes[l - i], f.nodes[(l - i) - 1]); } strokeWeight(4); line(f.nodes[0][0], f.nodes[0][1], f.nodes[1][0], f.nodes[1][1]); strokeWeight(2); line(f.nodes[1][0], f.nodes[1][1], f.nodes[2][0], f.nodes[2][1]); strokeWeight(1.5); line(f.nodes[2][0], f.nodes[2][1], f.nodes[3][0], f.nodes[3][1]); }; Spider.prototype.update = function() { var sx = 0, sy = 0, cc = 0; var d = constrain(dist(0, 0, sx - this.x, sy - this.y), 0, 0.1); for (var i = 0; i < this.feet.length; i++) { this.updateFoot(this.feet[i], i); if (this.feet[i].placed) { var s = spring(this.feet[i].x, this.feet[i].y, this.x, this.y, this.r * 2, 0.2); sx += s.x; sy += s.y; } } var d = dist(this.x, this.y, p.x, p.y); if (d < this.r + p.r) { p.dead = true; } else if (d < 50) { this.a = Math.atan2(p.x - this.x, p.y - this.y); this.seekX = p.x; this.seekY = p.y; } this.vx = sx + Math.sin(this.a); this.vy = sy + Math.cos(this.a); if (dist(this.x, this.y, this.seekX, this.seekY) < this.r * 1.2) { this.vx = 0.2; this.vy = 0.2; this.move = !true; } else { this.move = true; } this.x += this.vx; this.y += this.vy; circCollide(this, checkBlocks(this.x, this.y, blocksArr)); fill(0, 0, 0); circle(this.x, this.y, this.r * 2); //line(this.x, this.y, this.x + Math.sin(this.a)this.r, this.y + Math.cos(this.a)this.r); //fill(255, 0, 0, 30); //circle(this.x, this.y, this.maxLegLength2); }; Spider.prototype.addToQ = function(x, y, vx, vy) { x += vx; y += vy; if (blocksArr[y] && (blocksArr[y][x] === undefined \|\| !blocksArr[y][x].solid / && !blocksArr[y][x].isStick/ ) && this.z[y][x] === -1) { this.q.push([x - vx, y - vy, vx, vy]); //rect(xbs, ybs, bs, bs); this.z[y][x] = 1; } }; Spider.prototype.checkBlock = function(x, y, vx, vy) { x += vx; y += vy; if (x === this.cellX && y === this.cellY) { return [-vx, -vy]; } else { this.addToQ(x, y, 1, 0); this.addToQ(x, y, -1, 0); this.addToQ(x, y, 0, -1); this.addToQ(x, y, 0, 1); this.addToQ(x, y, 1, 1); this.addToQ(x, y, -1, 1); this.addToQ(x, y, -1, -1); this.addToQ(x, y, 1, -1); //rect(xbs, ybs, bs, bs) } }; Spider.prototype.findDir = function(x, y) { this.cellX = ~~(this.x / bs); this.cellY = ~~(this.y / bs); this.q = [ [x, y, 0, 0] ]; this.z = []; for (var i = 0; i < blocksArr.length; i++) { this.z.push([]); for (var j = 0; j < blocksArr[i].length; j++) { this.z[i].push(-1); } } fill(255, 0, 0, 30) var out, l = 0; while (out === undefined && this.q.length > 0 && l < 2000) { out = this.checkBlock(this.q[0][0], this.q[0][1], this.q[0][2], this.q[0][3]); this.q.shift(); l++; } return out; }; // } spider object // { function calcShadow(a, n) { return a - (n - a) 50; } function shadow(x, y, w, h, lx, ly) { fill(0, 0, 0, 50); quad(x, y, calcShadow(x, lx), calcShadow(y, ly), calcShadow(x + w, lx), calcShadow(y + h, ly), x + w, y + h); quad(x + w, y, calcShadow(x + w, lx), calcShadow(y, ly), calcShadow(x, lx), calcShadow(y + h, ly), x, y + h); fill(0, 0, 0); rect(x, y, w, h); } Block = function(x, y, type) { this.x = x * bs; this.y = y * bs; this.w = bs; this.h = bs; this.solid = true; }; Block.prototype.draw = function() { }; Decor = function(x, y, type) { this.x = x * bs; this.y = y * bs; this.w = bs; this.h = bs; this.type = type; this.solid = false; if (this.type === "spike") { this.y += bs * 0.5; this.h = 0.5; } if (this.type === "collectable") { this.ind = collectableCount; collectableCount++; } if (this.type === "grass" && random(0, 15) < 1) { var odds = [ "flower", "flower", "bush", "rocks", ] this.type = odds[~~random(0, odds.length)]; } }; Decor.prototype.draw = function() { fill(0, 0, 0, 100) //rect(this.x, this.y, this.w, this.h); image(Images[this.type], this.x, this.y, bs, bs); if (this.type === "collectable" && random(0, 10) < 1) { pushPart(this.x + random(8, 22), this.y + 15, random(3, Math.PI 2 - 3), "pink") } }; Decor.prototype.onCollide = function(that) { if (that.isPlayer) { if (this.type === "collectable" && holders[this.ind][2] === false) { p.collectables++; console.log("move collectable to beacon") holders[this.ind][2] = undefined; } else if (this.type === "spike") { p.dead = true; //console.log("spiked"); } } if (that.isThrowable && this.type === "spike") { that.coll = true; } }; Stick = function(x, y, type) { this.x = (x + 0.5) * bs - 2; this.y = y * bs; this.w = 4; this.h = bs; this.solid = !true; this.isStick = true; }; Stick.prototype.draw = function() { fill(0, 0, 0); rect(this.x, this.y, this.w, this.h); }; Stick.prototype.onCollide = function(that) { if (that.isPlayer) { that.climb = true; that.vy = constrain(that.vy, -100, 4); } }; Pipe = function(x, y, pipe, data) { this.x = x * bs; this.y = y * bs; this.w = bs; this.h = bs; this.solid = false; this.toLevel = data[0]; this.toPipe = data[1]; this.pipe = pipe; this.img = "pipe_" + (data[2] \|\| "right"); this.off = { "pipe_left": [bs, 0], "pipe_right": [-bs, 0], "pipe_up": [0, bs], "pipe_down": [0, -bs], } }; Pipe.prototype.onCollide = function(that) { //console.log(this.pipe + " " + that.spawn + " " + that.onSpawn); if (that.spawn === this.pipe && that.onSpawn > 0) { that.onSpawn = 2; } if (that.onSpawn < 0) { //console.log(this.pipe + ". " + this.toLevel + ": " + this.toPipe); that.spawn = this.toPipe; if (that.isPlayer) { console.log("from " + lvl + " " + this.pipe + " to " + this.toLevel + " " + this.toPipe); lvl = this.toLevel; blocksArr = maps[lvl][0]; resetSpiders(lvl); p.onSpawn = 2; var pOffset = this.off["pipe_" + maps[lvl][1][this.toPipe][2]]; p.x = maps[lvl][1][this.toPipe][3] + pOffset[0]; p.y = maps[lvl][1][this.toPipe][4] + pOffset[1]; if (that.vy > 0) { that.vy = 0; } //console.log(lvl); saveLevels(); //console.log("to " + lvl + " " + this.toPipe); pings = []; } } if (that.isThrowable) { that.coll = true; } return that.spawn !== this.pipe; }; Pipe.prototype.draw = function() { /fill("lightgreen");/ fill(0, 0, 0) shadow(this.x, this.y, this.w, this.h, p.x, p.y); image(Images[this.img], this.x + this.off[this.img][0], this.y + this.off[this.img][1], bs, bs) fill(255, 255, 255); }; function drawBlocks() { for (var y = 0; y < blocksArr.length; y++) { for (var x = 0; x < blocksArr[y].length; x++) { if (blocksArr[y][x]) { if (blocksArr[y][x].type === "collectable") { if (holders[blocksArr[y][x].ind][2] === false) { blocksArr[y][x].draw(); } } else { blocksArr[y][x].draw(); } } } } for (var y = 0; y < blocksArr.length; y++) { for (var x = 0; x < blocksArr[y].length; x++) { if (blocksArr[y][x] && blocksArr[y][x].solid) { shadow(blocksArr[y][x].x, blocksArr[y][x].y, blocksArr[y][x].w, blocksArr[y][x].h, p.x, p.y); } } } } // } block constructors // { Images = { "vine": [0, 0, 1, 1], "grass": [1, 0, 1, 1], "spike": [0, 1.5, 1, 1], "holder": [1, 1, 1, 1], "collectable": [2, 1, 1, 1], "flower": [2, 2, 1, 1], "rocks": [3, 2, 1, 1], "bush": [4, 2, 1, 1], "player": [3, 1, 1, 1], "player_left": [4, 1, 1, 1], "player_right": [5, 1, 1, 1], "pipe_right": [2, 0, 1, 1], "pipe_down": [3, 0, 1, 1], "pipe_left": [4, 0, 1, 1], "pipe_up": [5, 0, 1, 1], "glow_false": [0, 2, 1, 1], "glow_true": [1, 2, 1, 1], }; Scenes = { menu: function() { background(240); }, game: function() { background(51, 48, 42); if (lvl === "a") { ctx.drawImage(radioshack, 0, 0, 600, 600); holderCount = 0; for (var i = 0; i < holders.length; i++) { if (holders[i][2]) { image(Images.collectable, holders[i][0] * bs, (holders[i][1] + 0.5) * bs, bs, bs); if (random(0, 10) < 1) { pushPart(holders[i][0] * bs + random(8, 22), (holders[i][1] + 0.5) * bs + 15, random(3, Math.PI * 2 - 3), "pink") } fill(clr); rect(300, 350 + holderCount * 10, 15, 5); holderCount++; } } if (endingAnimate) { Trans.set("ending"); Trans.n = 1; } else if (holderCount === 6) { fill(255, 255, 255); rect(281, 360, 8, 25); triangle(275, 384, 285, 396, 295, 384); var s = Math.sin(frameCount * 0.1) * 6; rect(280, 417 - s, 40, s + 3); } else { fill(255, 255, 255); rect(280, 417 - 3, 40, 3); } } else { ctx.fillStyle = sky; ctx.fillRect(0, 0, 600, 600); } for (var i = 0; i < maps[lvl].spiders.length; i++) { if (maps[lvl].spiders[i].health > 0) { maps[lvl].spiders[i].update(); } } for (var i = 0; i < maps[lvl].rocks.length; i++) { //console.log(maps[lvl].rocks[i]) maps[lvl].rocks[i].update(); if (maps[lvl].rocks[i].dead) { maps[lvl].rocks.splice(i, 1); i--; } } for (var i = 0; i < pings.length; i++) { pings[i].update(); if (pings[i].dead) { pings.splice(i, 1); i--; } } p.update(); drawParts(); drawBlocks(); drawDust(); if (lvl !== "a") { for (var i = 0; i < holders.length; i++) { var h = holders[i][2]; image(Images[(h === undefined \|\| h ? "collectable" : "glow_false")], 210 + i * 30, 0, bs, bs); } if (p.holding && p.holding.harming !== undefined) { translate(-5, 0); stroke(255, 255, 255); strokeWeight(3); line(575, 38, 592, 8); line(580, 15, 592, 8); noStroke(); } } //line(300, 300, mouseX, mouseY); //println(atan2(mouseX - 300, mouseY - 300)); }, ending: function() { p.x = 300; p.y = 410; p.vx = 0; translate(random(-2, 2), random(-2, 2)) ctx.drawImage(radioshack, 0, 0, 600, 600); drawParts(); for (var i = 0; i < holders.length; i++) { if (holders[i][2]) { image(Images.collectable, holders[i][0] * bs, (holders[i][1] + 0.5) * bs, bs, bs); fill(clr); rect(300, 350 + i * 10, 15, 5); } } fill(255, 255, 255); rect(281, 360, 8, 25); triangle(275, 384, 285, 396, 295, 384); rect(277, 417, 46, 3); if (endingTimer > 110) { var s = constrain((endingTimer - 110) / 4, 0, 1) rect(300 - 62, 305 - s * 305, 124, s * 305); fill(255, 255, 255, 100); rect(300 - 75, 305 - s * 305, 150, s * 305); pushPart(238 + (~~random(0, 2)) * 120, random(0, 305), random(2.5, Math.PI * 2 - 2.5), "white") } else { Trans.n = 0; } p.draw(); drawBlocks(); endingTimer++; drawDust(); if (endingTimer === 250) { Trans.set("over") } }, dead: function() { background(0, 0, 0); if (p.dead) { resetLevels(); console.log("reset to save"); } Trans.set("game"); p.dead = false; }, over: function() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, 600, 600); ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.font = "29px Chango, Monaco, Menlo"; ctx.fillText("tp csjhiu uif xbsojoh tipof", 300, 200) ctx.fillText("dbmmjoh up uif ebsl volopxo", 300, 250) ctx.fillText("tpnf tusbohf boe bsdbof njoe", 300, 300) ctx.fillText("ps dpme vogffmjoh iboe.", 300, 350) ctx.fillText("happily ever after.", 300, 450) }, controls: function() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, 600, 600); ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.font = "29px Chango, Monaco, Menlo"; ctx.fillText("<^> or awd to move.", 300, 200) ctx.fillText("click to throw spears.", 300, 250) ctx.fillText("collect pink things.", 300, 400) ctx.fillText("(click)", 300, 450); if (Mouse.click) { Trans.set("game"); } }, flyleaf: function() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, 600, 600); ctx.textAlign = "center"; ctx.font = "50px Chango, Monaco, Menlo"; for (var i = 360; i > 300; i -= 10) { ctx.fillStyle = "rgba(255, 255, 255, " + (60 - (i - 300)) * 0.003 + ")"; ctx.fillText("ssspiders.", 300, i) } ctx.fillStyle = "white"; ctx.fillText("ssspiders.", 300, 300) ctx.font = "29px Chango, Monaco, Menlo"; ctx.fillText("(click)", 300, 450); if (Mouse.click) { Trans.set("controls"); } } }; // } sprite coords and scenes // { (function() { for (var k in maps) { maps[k].spiders = []; maps[k].spiderPortals = []; maps[k].rocks = []; maps[k][0] = fillLevel(k); } })(); saveLevels(); blocksArr = maps[lvl][0] var frameCount = 0; var intervalID = setInterval(function() { ctx.setTransform(1 / 3, 0, 0, 1 / 3, 0, 0); Scenes[Scene](); Mouse.click = false; Mouse.rightClick = false; Trans.update(); ctx.resetTransform(); frameCount++; }, 1000 / 60); // } final setup and draw function </script> <!-- thumbnail code --> <script charset="utf-8"> // a really dumb feature causes KA's thumbnail saver to save a blank screen when the canvas is tainted by an image. So I had to use a second canvas, but couldn't use my little canvas library on 'ctx2' :P function drawThumbnail() { var canvas2 = document.getElementById("thumbnail"); console.log(canvas2) ctx2 = canvas2.getContext("2d"); var sky = ctx2.createLinearGradient(0, 0, 0, 600) sky.addColorStop(0, "rgb(33, 36, 51)"); sky.addColorStop(0.8, "rgb(97, 40, 49)"); sky.addColorStop(1, "black"); ctx2.fillStyle = sky; ctx2.fillRect(0, 0, 600, 600); ctx2.fillStyle = "rgb(255, 255, 255)"; ctx2.font = "144px Chango"; ctx2.textAlign = "center"; ctx2.font = "90px Chango"; var t = "ssspiders"; for (var i = 0; i < t.length; i++) { ctx2.save(); ctx2.translate(300, 523); ctx2.rotate((i - 4) * 0.18); for (var j = 300; j < 360; j += 10) { ctx2.fillStyle = "rgba(255, 255, 255, " + (j * 0.002 - 0.6) + ")"; ctx2.fillText(t[i], 0, -j); } ctx2.fillStyle = "rgb(255, 255, 255)"; ctx2.fillText(t[i], 0, -368); ctx2.restore(); } var level = [ "## ###", "# #", " ", " ", " ", " ", " ", " ", " ", " ", " ### ", " ### # ", " ##### ", " ## ", ]; ctx2.fillStyle = "black"; function shadow(x, y, w, h, lx, ly) { ctx2.fillStyle = "rgba(0, 0, 0, " + 50 / 255 + ")"; ctx2.beginPath(); ctx2.moveTo(x, y); ctx2.lineTo(calcShadow(x, lx), calcShadow(y, ly)); ctx2.lineTo(calcShadow(x + w, lx), calcShadow(y + h, ly)); ctx2.lineTo(x + w, y + h); ctx2.fill(); ctx2.beginPath(); ctx2.moveTo(x + w, y); ctx2.lineTo(calcShadow(x + w, lx), calcShadow(y, ly)); ctx2.lineTo(calcShadow(x, lx), calcShadow(y + h, ly)); ctx2.lineTo(x, y + h); ctx2.fill(); ctx2.fillStyle = "rgb(0, 0, 0)"; ctx2.fillRect(x, y, w, h); } for (var i = 0; i < level.length; i++) { for (var j = 0; j < level[i].length; j++) { if (level[i][j] !== " ") { shadow(j * bs, i * bs, bs, bs, 220, 240); } } } ctx2.save(); ctx2.translate(220 + bs * 0.5, 240 + bs * 0.5); ctx2.scale(2, 2); ctx2.fillStyle = "rgb(100, 100, 100)"; ctx2.beginPath(); ctx2.arc(-3, 8, 8.5, 0, Math.PI * 2); ctx2.fill(); ctx2.fillStyle = "white"; ctx2.beginPath(); ctx2.arc(1, -2, 10, 0, Math.PI * 2); ctx2.fill(); ctx2.fillRect(-5, -17, 6, 10); ctx2.fillStyle = "black"; ctx2.beginPath(); ctx2.arc(4, 0, 4, 0, Math.PI * 2); ctx2.fill(); ctx2.restore(); function leg(x, y) { for (var i = 0; i < 3; i++) { ctx2.beginPath(); ctx2.lineWidth = (3 - i) * 3 ctx2.moveTo(x, y); x += random(-20, 20) + (220 - x) * 0.1; y += random(-30, -80); ctx2.lineTo(x, y); ctx2.stroke(); } } for (var i = -50; i < 650; i += 30) { leg(i, 600); } } </script> </body> </html>
Folds	62,2749
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJOijozyCww
Votes	236
Spin-Offs	60
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Levi F.
Author Name	LeviCoder
Author ID	kaid_1152620490185361154142770
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739460750322
Updated	6 months ago, 1739460755032
Source Deleted	unknown