Viewing Program

Program Data

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

Title	Cookie War
ID	5072403754303488
Created	9 days ago, 1735614672697
Updated	9 days ago, 1735615407508
Code	<!DOCTYPE html> <!--No, this isn't a reference to Cookie Clicker. I tried learning C++, and the first thing I made was a text based shooter game. So I decided to make a shooter game in JS. To play, you use W/D or the arrow keys to move, and spacebar to shoot. To play it properly: https://www.khanacademy.org/computer-programming/cookie-war/5072403754303488?width=620&height=440 Sub Page: https://www.khanacademy.org/computer-programming/cobras-sub-page/4713962679451648 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= <device-width>, initial-scale=1.0"> <title>Cookie War</title> <style> canvas{ border: 1px solid black; } </style> </head> <body> <canvas id = "canvas" width = "600px" height = "400px"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/Zushah/Chalkboard@2.1.0/dist/Chalkboard.min.js"></script> <!--UI--> <script> var mouseX = 0, mouseY = 0, mouseIsPressed = false, Cursor = "default"; var prevMouseX = 0, prevMouseY = 0; var mouseButton = {left: false, mid: false, right: false}; var UIcanvas; var UIctx; var keys = {}; var prevPressed = false, pressed = function(){ return !prevPressed && mouseIsPressed; }; var mouseInRect = function(x, y, w, h, rectmode, debug){ rectmode = rectmode !== undefined? rectmode: "corner"; if(debug !== undefined){ // if(alpha(debug) === 255){ // fill(red(debug), green(debug), blue(debug), 200); // }else{ // fill(debug); // } // rectMode(rectmode); // rect(x, y, w, h); // rectMode(CORNER); } switch(rectmode){ case "center": return mouseX >= x-w/2 && mouseX <= x+w/2 && mouseY >= y-h/2 && mouseY <= y+h/2; case "radius": return mouseX >= x-w && mouseX <= x+w && mouseY >= y-h && mouseY <= y+h; case "corners": return mouseX >= x && mouseX <= w && mouseY >= y && mouseY <= h; default: return mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h; } }; var inputFun = null; //The input that was pressed. This variable exists due to overlapping inputs var setupUI = function(canvas, ctx){ UIctx = ctx; UIcanvas = canvas; canvas.onmousemove = function(e){ prevMouseX = e.offsetX - e.movementX; prevMouseY = e.offsetY - e.movementY; mouseX = e.offsetX; mouseY = e.offsetY; }; canvas.onmousedown = function(e){ mouseIsPressed = true; mouseButton.left = (e.buttons & 1) > 0; mouseButton.mid = (e.buttons & 4) > 0; mouseButton.right = (e.buttons & 2) > 0; }; canvas.onmouseup = function(e){ mouseIsPressed = false; mouseButton.left = (e.buttons & 1) > 0; mouseButton.mid = (e.buttons & 4) > 0; mouseButton.right = (e.buttons & 2) > 0; }; document.getElementsByTagName("body")[0].onkeydown = function(e){ keys[e.key] = true; }; document.getElementsByTagName("body")[0].onkeyup = function(e){ keys[e.key] = false; }; }; var UIrunPerFrame = function(){ if(inputFun !== null){ //function for button input inputFun.onFocus(); } inputFun = null; UIcanvas.style.cursor = Cursor; Cursor = "default"; prevPressed = mouseIsPressed; }; //input { var input = function(v, x, y, w, h, s, defaults){ this.x = x; this.y = y; this.v = v; if(!isNaN(w) && w !== 0){ this.width = w; } if(!isNaN(h) && h !== 0){ this.height = h; } if(defaults !== undefined){ for(var i in defaults){ if(this[i] === undefined){ //if the property doesn't exist if(i === "textOff"){ this.textSize = this.height + defaults.textOff; }else{ this[i] = defaults[i]; } } } } if(this.textSize === undefined){ this.textSize = 10; } if(this.border === undefined){ this.border = 8; } if(s === null){s = {};} //this is to fix a bug where it error out when there's no alignX or alignY parameter if(s !== undefined){ for(var i in s){ if(this[i] !== undefined){ //if the property exists this[i] = s[i]; } } if(s.alignX !== undefined){ //if user specified alignment // I skipped if s.alignX is 0 because that's just the default value if(s.alignX === 1){ this.x = width/2 + x; } if(s.alignX === 2){ this.x = width - this.width - x; } } if(s.alignY !== undefined){ // I skipped if s.alignY is 0 because that's just the default value if(s.alignY === 1){ this.y = height/2 + y; } if(s.alignY === 2){ this.y = height - this.height - y; } } if(s.inputMode !== undefined){ if(s.inputMode === CORNERS){ if(w !== 0){ var tempW = this.width; this.width = abs(this.width-this.x); this.x = min(this.x, tempW); } if(h !== 0){ var tempH = this.height; this.height = abs(this.height-this.y); this.y = min(this.y, tempH); } }else if(s.inputMode === CENTER){ this.x -= this.width/2; this.y -= this.height/2; }else if(s.inputMode === RADIUS){ if(w !== 0){ this.x -= this.width; this.width = 2; }else{ this.x -= this.width/2; } if(h !== 0){ this.y -= this.height; this.height = 2; }else{ this.y -= this.height/2; } } if(s.textSize !== undefined){ this.textSize = s.textSize; }else if(defaults !== undefined && defaults.textOff !== undefined){ this.textSize = this.height + defaults.textOff; } } } this.defaultX = this.x; //the position of the button when there's no offset this.defaultY = this.y; this.fun = null; //What should happen if the input is interacted with }; input.prototype.isPressed = function(hold){ if(hold){ return mouseInRect(this.x, this.y, this.width, this.height) && mouseIsPressed; }else{ return mouseInRect(this.x, this.y, this.width, this.height) && pressed(); } }; input.prototype.setOffset = function(offX, offY){ this.x = this.defaultX + offX; this.y = this.defaultY + offY; }; } //button { var button = function(v, x, y, w, h, s){ //s for settings /{ border: 10, //The border around the text bevel: 8, //How much bevel the buttons should have textSize: 20, //Text size alignX: 0, //Where the origin point should be in the X direction. 0 for on the left, 1 for in the center, and 2 for on the right alignY: 0, //Where the origin point should be in the Y direction. 0 for on the top, 1 for in the center, and 2 for on the bottom buttonMode: CORNER //Like RectMode(), but for buttons. Only supports CORNER and CENTER }/ // All properties for s (all optional) this.border = 10; this.textSize = 20; var font = UIctx.font; UIctx.font = this.textSize + "px serif"; input.call(this, v, x, y, w, h, s, { width: UIctx.measureText(v).width + 2this.border, height: this.textSize + 2 this.border, bevel: 8 }); UIctx.font = font; this.type = "button"; this.drawing = function(ctx){ ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.strokeRect(this.x, this.y, this.width, this.height); ctx.fillStyle = "white"; ctx.fillRect(this.x, this.y, this.width, this.height); ctx.textAlign = "center"; ctx.font = this.textSize + "px serif"; ctx.fillStyle = "black"; ctx.fillText(this.v, this.x + this.width/2, this.y + this.height/2 + this.textSize/4); }; }; button.prototype = Object.create(input.prototype); button.prototype.draw = function(fun){ var font = UIctx.font; var textAlign = UIctx.textAlign; var lineWidth = UIctx.lineWidth; var fill = UIctx.fillStyle; var stroke = UIctx.strokeStyle; this.drawing(UIctx); UIctx.font = font; UIctx.textAlign = textAlign; UIctx.lineWidth = lineWidth; UIctx.fillStyle = fill; UIctx.strokeStyle = stroke; if(mouseInRect(this.x, this.y, this.width, this.height)){ Cursor = "pointer"; } if(this.isPressed() && fun !== undefined){ inputFun = this; this.fun = fun; } }; button.prototype.onFocus = function(){ this.fun(); }; } //typer { var typer = function(v, x, y, w, h, s){ input.call(this, v, x, y, w, h, s, { width: 40, height: 19, textOff: -3 }); this.updated = false; this.focused = false; this.enabled = true; this.type = "typer"; }; typer.prototype = Object.create(input.prototype); typer.prototype.draw = function(fun){ if(typeof this.v !== "string"){ println("WARNING: this.v isn't a string"); } textSize(15); rectMode(CORNER); textAlign(LEFT, TOP); strokeWeight(1); stroke(0); if(this.enabled){ if(pressed()){ if(mouseInRect(this.x, this.y, this.width, this.height)){ inputFun = this; if(this.fun !== undefined){ this.fun = fun; }else{ this.fun = null; } }else{ this.focused = false; } } if(mouseInRect(this.x, this.y, this.width, this.height)){ Cursor = "pointer"; } fill(255); rect(this.x, this.y, this.width, this.height); fill(0); textSize(this.textSize); text(this.v, this.x + 2, this.y + 2); if(floor(frameCount/80)80 === floor(frameCount/40)40 && this.focused){ line(textWidth(this.v) + this.x + 2, this.y + 2, textWidth(this.v) + this.x + 2, this.y+this.textSize); } }else{ fill(125); rect(this.x, this.y, this.width, this.height); fill(0); textSize(this.textSize); text(this.v, this.x + 2, this.y + 2); } }; typer.prototype.update = function(number){//only for "typers" if(this.enabled){ this.updated = this.focused; if([16, 17, 18, 157, 20, 144, 155, 36, 33, 127, 35, 34].indexOf(keyCode) > -1){ //if the keyCode is in the blacklist this.updated = false; } if(this.updated){ if(number){ if(keyCode === 8){ this.v = this.v.substr(0, this.v.length - 1); } if(!isNaN(Number(key.toString()))){ this.v += key.toString(); } }else{ if(keyCode === 8){ this.v = this.v.substr(0, this.v.length - 1); }else{ this.v += key.toString(); } } if(typeof this.fun === "function"){ this.fun(); } } } }; typer.prototype.onFocus = function(){ this.focused = true; }; } //toggle { var toggle = function(v, x, y, w, h, s){ input.call(this, v, x, y, w, h, s, { width: 40, height: 20, textOff: -2 }); this.ani = 0; this.type = "toggle"; }; toggle.prototype = Object.create(input.prototype); toggle.prototype.draw = function(fun){ if(mouseInRect(this.x, this.y, this.width, this.height)){ Cursor = "pointer"; } fill(255); rect(this.x, this.y, this.width, this.height); textSize(this.textSize); textAlign(CENTER, CENTER); fill(0); text(this.v, this.x + this.width/2, this.y + this.height/2); textAlign(LEFT, TOP); if(this.isPressed()){ inputFun = this; this.fun = fun !== undefined? fun: null; } }; toggle.prototype.onFocus = function(){ this.v = !this.v; if(typeof this.fun === "function"){ this.fun(); } }; } //scroller { var scroller = function(x, y, w, h, fullW, fullH, vertical, horizontal, s){ input.call(this, null, x, y, w, h, s, { width: 100, height: 100, fullW: fullW, fullH: fullH, vertical: vertical !== undefined? vertical: true, horizontal: horizontal !== undefined? horizontal: false, debug: false //if set to true, will display a rectangle where the scroller box is }); this.scrollerX = 0; this.scrollerY = 0; this.scrollx = 0; this.scrolly = 0; this.offset = 0; //value to create smooth animation this.focus = ""; //the scroller that was last clicked this.type = "scroller"; }; scroller.prototype.updateScroll = function(X, value){ if(X){ this.scrollerX = constrain(value, 0, this.width-this.widththis.width/this.fullW); this.scrollx = -map(this.scrollerX, 0, this.width-this.widththis.width/this.fullW, 0, this.fullW-this.width+10); }else{ this.scrollerY = constrain(value, 0, this.height-this.heightthis.height/this.fullH); this.scrolly = -map(this.scrollerY, 0, this.height-this.heightthis.height/this.fullH, 0, this.fullH-this.height+10); } }; scroller.prototype.draw = function(fun){ if(!mouseIsPressed){ this.focus = ""; } if(pressed()){ if(mouseInRect(this.x, this.y+this.height-10, this.width, 10) && this.horizontal){ inputFun = this; this.fun = fun !== undefined? fun: null; } if(mouseInRect(this.x+this.width-10, this.y, 10, this.height) && this.vertical){ inputFun = this; this.fun = fun !== undefined? fun: null; } } rectMode(CORNER); if(this.debug){ fill(125, 80); rect(this.x, this.y, this.width, this.height); } strokeWeight(1); stroke(0); if(this.horizontal && this.fullW > this.width){ //horizontal scroller if(this.focus === "X"){ this.updateScroll(true, mouseX-this.x-this.offset); if(typeof fun === "function"){ this.fun(); } } fill(255); rect(this.x, this.y+this.height-10, this.width, 10); fill(0); rect(this.x+this.scrollerX, this.y+this.height-10, this.widththis.width/this.fullW, 10, 20); } if(this.vertical && this.fullH > this.height){ //vertical scroller if(this.focus === "Y"){ this.updateScroll(false, mouseY-this.y-this.offset); if(typeof fun === "function"){ this.fun(); } } fill(255); rect(this.x+this.width-10, this.y, 10, this.height); fill(0); rect(this.x+this.width-10, this.y+this.scrollerY, 10, this.heightthis.height/this.fullH, 20); } }; scroller.prototype.scroll = function(){ if(keys[SHIFT]){ if(keys[18]){ this.updateScroll(true, this.scrollerX-mouseScroll10); }else{ this.updateScroll(false, this.scrollerY-mouseScroll10); } } }; scroller.prototype.onFocus = function(){ if(mouseInRect(this.x, this.y+this.height-10, this.width, 10)){ this.focus = "X"; if(mouseInRect(this.x+this.scrollerX, this.y+this.height-10, this.widththis.width/this.fullW, 10)){ this.offset = mouseX-this.x-this.scrollerX; }else{ this.offset = (this.widththis.width/this.fullW)/2; } } if(mouseInRect(this.x+this.width-10, this.y, 10, this.height)){ this.focus = "Y"; if(mouseInRect(this.x+this.width-10, this.y+this.scrollerY, 10, this.heightthis.height/this.fullH)){ this.offset = mouseY-this.y-this.scrollerY; }else{ this.offset = (this.heightthis.height/this.fullH)/2; } } }; } //dropdown { var activeDropdown = null; //If the user dropped down a dropdown, which dropdown var dropdown = function(v, x, y, w, h, s){ input.call(this, v, x, y, w, h, s, { width: 100, height: 30, textSize: 10 }); this.selectionID = 0; this.selectionValue = v[0]; this.isDroppedDown = false; this.dropdownHeight = min(this.v.lengththis.height, floor(150/this.height)this.height); //temporary variables this.optionY = 0; //the Y position of each option this.optionH = 0; //the height of each option this.optionID = -1; //the ID of which option was selected this.scroller = new scroller(this.x, this.y+this.height, this.width, this.dropdownHeight, this.width, this.v.lengththis.height); //this is for if there's too many options to display at once this.type = "dropdown"; }; dropdown.prototype = Object.create(input.prototype); dropdown.prototype.draw = function(fun){ this.optionID = -1; if(mouseInRect(this.x, this.y, this.width, this.height)){ Cursor = "pointer"; if(pressed()){ inputFun = this; this.fun = fun !== undefined? fun: null; } } rectMode(CORNER); strokeWeight(1); fill(255); rect(this.x, this.y, this.width, this.height); textSize(this.textSize); textAlign(LEFT, CENTER); fill(0); text(this.selectionValue, this.x+20, this.y+this.height/2); strokeWeight(5); noFill(); beginShape(); if(activeDropdown === this){ vertex(this.x+5, this.y+12); vertex(this.x+10, this.y+18); vertex(this.x + 15, this.y + 12); }else{ vertex(this.x+5, this.y+18); vertex(this.x+10, this.y+12); vertex(this.x + 15, this.y + 18); } endShape(); strokeWeight(1); if(!mouseInRect(this.x, this.y, this.width, this.height + this.dropdownHeight) && pressed() && activeDropdown === this){ //if the user clicked off the dropdown activeDropdown = null; } }; dropdown.prototype.setV = function(v){ this.v = v; this.selectionID = 0; this.selectionValue = v[0]; this.dropdownHeight = min(this.v.lengththis.height, floor(150/this.height)this.height); this.scroller.scrollerY = 0; this.scroller.scrolly = 0; }; //set this.v dropdown.prototype.drawDropdown = function(){ strokeWeight(1); fill(255); rect(this.x, this.y + this.height, this.width, this.dropdownHeight); for(var i in this.v){ this.optionY = ithis.height+this.y+this.height+this.scroller.scrolly; if(this.optionY >= this.y && this.optionY <= this.y + this.height + this.dropdownHeight){ //if the dropdown option is visible if(this.optionY < this.y + this.height){ this.optionH = this.optionY - this.y; this.optionY = this.y + this.height; }else if(this.optionY > this.y+this.dropdownHeight){ this.optionH = this.dropdownHeight+this.y+this.height-this.optionY; }else{ this.optionH = this.height; } textSize(min(this.optionH, this.textSize)); fill(0); textAlign(LEFT, CENTER); text(this.v[i], this.x+5, this.optionY+this.optionH/2); line(this.x, this.optionY, this.x + this.width, this.optionY); if(mouseInRect(this.x, this.optionY, this.width-10, this.optionH, CORNER)){ Cursor = "pointer"; if(pressed()){ inputFun = this; this.optionID = i; } } } } this.scroller.draw(); }; dropdown.prototype.onFocus = function(){ if(this.optionID > -1){ activeDropdown = null; this.selectionID = this.optionID; this.selectionValue = this.v[this.selectionID]; if(typeof this.fun === "function"){ this.fun(); } }else{ activeDropdown = activeDropdown !== this? this: null; } }; } </script> <!--Main--> <script> var scene = "main"; //variables { var v = Chalkboard.vect; v.rotate = function(vect, ang){ return v.init(vect.xMath.cos(ang) - vect.yMath.sin(ang), vect.yMath.cos(ang) + vect.xMath.sin(ang)); }; var pickRandom = function(){ return arguments[Math.floor(Math.random()arguments.length)]; }; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); setupUI(canvas, ctx); var defFont = ctx.font; //Basically `new` but faster Object.constructor.prototype.create = function () { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; ctx.Ellipse = function(x, y, w, h, fill, stroke){ h = h \|\| w; fill = (fill === undefined)? true: fill; stroke = (stroke === undefined)? true: stroke; ctx.beginPath(); ctx.ellipse(x, y, w, h, 0, 0, 6.29); if(fill){ ctx.fill(); } if(stroke){ ctx.stroke(); } }; ctx.line = function(x1, y1, x2, y2){ ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }; ctx.multilineTxt = function(txt, x, y, w, size){ w = w !== undefined? w: Infinity; size = size !== undefined? size: 12; txt = txt.split(" "); var offset = 0; txt.forEach(function(v, i){ if(v.indexOf("\n") > -1){ var tmp = v.split("\n"); for(var j = 0; j < tmp.length; j++){ ctx.fillText(tmp[j], x+offset, y); offset = 0; y += size; } }else{ ctx.fillText(v, x+offset, y); offset += ctx.measureText(v + " ").width; if(offset + ctx.measureText(txt[i+1]).width > w){ offset = 0; y += size; } } }); }; ctx.background = function(bgFill){ var fill = ctx.fill; ctx.fillStyle = bgFill; ctx.fillRect(-1000, -1000, canvas.width+1000, canvas.height+1000); ctx.fillStyle = fill; }; var toRad = Math.PI/180; var lastFrame = Date.now(); var timeElapsed = 0; var round = function(x){ return Math.round(x1000)/1000; }; var clone = function(obj) { var copy; // Handle the 3 simple types, and null or undefined if (null == obj \|\| "object" != typeof obj) return obj; // Handle Date if (obj instanceof Date) { copy = new Date(); copy.setTime(obj.getTime()); return copy; } // Handle Array if (obj instanceof Array) { copy = []; for (var i = 0, len = obj.length; i < len; i++) { copy[i] = clone(obj[i]); } return copy; } // Handle Object if (obj instanceof Object) { copy = {}; for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]); } return copy; } throw new Error("Unable to copy obj! Its type isn't supported."); }; } //game variables { var colors = { enemies: { body: "rgb(20, 20, 20)", window: "rgb(200, 20, 20)", outline: "white" }, player: { body: "white", window: "rgb(0, 163, 166)", outline: "rgb(50, 50, 50)", bar: "rgb(200, 200, 200)" }, story: { red: "rgb(160, 0, 0)", blue: "rgb(32, 77, 133)", cookieJar: "rgb(85, 31, 110)", cookie: "rgb(209, 137, 0)", chocoChip: "rgb(72, 29, 0)" }, helmets: { redGray: "rgb(82, 82, 82)", redVisor: "rgb(115, 51, 51)" } }; //the bullet array is used for both the player and the enemies. var bullets = []; var stars = []; for(var i = 0; i < 1000; i++){ stars.push({ pos: v.init(Math.random()canvas.width, Math.random()canvas.height), size: Math.random()+1, color: ["yellow", "white"][Math.floor(Math.random()2)] }); } ctx.resetTransform(); var camera = ctx.getTransform(); var cookieStart = Date.now(); var cookieRot; var firstPlay = true; var gameStart = 0; } //Player Management { var player = { rot: 0, dirX: v.init(1, 0), dirY: v.init(0, 1), score: 0, highScore: 0, maxHealth: 100, health: 100, lastHit: 0, //last time the player was hit by an enemy's ship (not by an enemy's bullet) dead: false, lastBullet: -Infinity, //for cooldown on the bullets numBullets: 50, maxBullets: 50, timeRefill: 0, deathParticles: [], deathStart: 0 }; var killPlayer = function(x, y){ player.dead = true; player.deathStart = Date.now(); for(var i = 0; i < 100; i++){ player.deathParticles.push({ pos: v.init(x, y), vel: v.init(Math.random()-1, (0.5-Math.random()1)), size: Math.random()3+1, color: pickRandom("rgba(100, 100, 100, 100)", "rgba(120, 120, 120, 100)", "rgba(150, 150, 150, 100)") }); } }; var drawPlayer = function(){ ctx.fillStyle = Date.now() - player.lastHit < 1000? "rgb(200, 50, 50)": colors.player.body; ctx.lineWidth = 1; ctx.strokeStyle = colors.player.outline; ctx.Ellipse(canvas.width, canvas.height/2, 40, 40); ctx.transform(player.dirX.x, player.dirX.y, -player.dirX.y, player.dirX.x, canvas.width, canvas.height/2); ctx.fillStyle = colors.player.body; ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; ctx.strokeRect(-800, 0, 800, 1); ctx.fillStyle = colors.player.body; ctx.fillRect(-100, -10, 80, 20); ctx.strokeStyle = colors.player.outline; ctx.strokeRect(-100, -10, 80, 20); ctx.fillRect(-109, -7, 10, 12); ctx.strokeStyle = colors.player.bar; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(-90, -12); ctx.lineTo(-90, 12); ctx.moveTo(-80, -12); ctx.lineTo(-80, 12); ctx.moveTo(-70, -12); ctx.lineTo(-70, 12); ctx.moveTo(-60, -12); ctx.lineTo(-60, 12); ctx.moveTo(-50, -12); ctx.lineTo(-50, 12); ctx.moveTo(-40, -12); ctx.lineTo(-40, 12); ctx.moveTo(-30, -12); ctx.lineTo(-30, 12); ctx.stroke(); ctx.setTransform(camera); ctx.strokeStyle = colors.player.outline; ctx.lineWidth = 1; ctx.Ellipse(canvas.width, canvas.height/2, 30, 30); ctx.fillStyle = colors.player.window; ctx.Ellipse(canvas.width, canvas.height/2, 25, 25); }; var shotPrevFrame = false; } //Enemy Management { var enemyData = { basic: { hitbox: [ {x: 0, y: 0, w: 80, h: 40} ], maxHealth: 5, score: 1, speed: 0.5, damage: 10, debrisCount: 10, weight: 100 }, large: { hitbox: [ {x: 0, y: 0, w: 80, h: 120}, {x: 80, y: 40, w: 60, h: 30} ], maxHealth: 14, score: 3, speed: 0.4, damage: 20, debrisCount: 20, weight: 20 }, nuke: { hitbox: [ {x: 0, y: 0, w: 60, h: 115}, {x: 60, y: 5, w: 110, h: 100} ], maxHealth: 40, score: 10, speed: 0.1, damage: 50, debrisCount: 50, weight: 2 } }; //calculate the percentage of how frequent each enemy will appear based on the weight. var enemyWeightTot = 0; for(var e in enemyData){ enemyWeightTot += enemyData[e].weight; } for(var e in enemyData){ enemyData[e].freq = enemyData[e].weight/enemyWeightTot; } //calculate width and height of enemy based on hitbox array. var maxW = 0; var maxH = 0; for(var e in enemyData){ maxW = 0; maxH = 0; for(var h = 0; h < enemyData[e].hitbox.length; h++){ maxW = Math.max(maxW, enemyData[e].hitbox[h].x + enemyData[e].hitbox[h].w); maxH = Math.max(maxH, enemyData[e].hitbox[h].y + enemyData[e].hitbox[h].h); } enemyData[e].w = maxW; enemyData[e].h = maxH; } var debris = []; var enemy = function(y, type){ var data = enemyData[type]; this.pos = v.init(-data.w, y); this.w = data.w; this.h = data.h; this.type = type; this.hitbox = clone(data.hitbox); this.maxHealth = data.maxHealth; this.health = data.maxHealth; this.score = data.score; this.speed = data.speed; this.damage = data.damage; this.debrisCount = data.debrisCount; this.flair = []; this.flairNum = 10; for(var i = 0; i < this.flairNum; i++){ this.flair.push(10+Math.random()20); } this.flairResetTime = Date.now()+100; if(type == "basic"){ this.nextBullet = Date.now()+3000; } }; enemy.prototype.draw = function(){ // ctx.fillStyle = "rgb(255, 255, 255)"; // for(var i = 0; i < this.hitbox.length; i++){ // ctx.fillRect(this.pos.x+this.hitbox[i].x, this.pos.y+this.hitbox[i].y, this.hitbox[i].w, this.hitbox[i].h); // } switch(this.type){ case "basic": ctx.transform(1, 0, 0, 1, this.pos.x-20, this.pos.y-15); ctx.fillStyle = colors.enemies.body; ctx.strokeStyle = colors.enemies.outline; ctx.lineWidth = 1; ctx.fillRect(95, 34, 15, 12); ctx.strokeRect(95, 34, 15, 12); ctx.beginPath(); ctx.moveTo(61, 16); ctx.bezierCurveTo(69, 16, 75, 16, 86, 16); ctx.bezierCurveTo(94, 17, 102, 24, 102, 34); ctx.bezierCurveTo(102, 44, 96, 52, 86, 52); ctx.bezierCurveTo(74, 52, 69, 52, 61, 52); ctx.bezierCurveTo(66, 40, 65, 28, 61, 16); ctx.fill(); ctx.stroke(); ctx.Ellipse(60, 34, 14/2, 36/2); ctx.beginPath(); ctx.moveTo(43, 24); ctx.bezierCurveTo(49, 24, 55, 24, 60, 24); ctx.bezierCurveTo(62, 31, 62, 38, 59, 44); ctx.bezierCurveTo(54, 44, 48, 44, 43, 44); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(26, 16); ctx.bezierCurveTo(32, 16, 38, 16, 44, 16); ctx.bezierCurveTo(49, 24, 49, 41, 44, 50); ctx.bezierCurveTo(38, 50, 32, 50, 26, 50); ctx.fill(); ctx.stroke(); ctx.Ellipse(26, 33, 10/2, 34/2); ctx.fillStyle = colors.enemies.window; ctx.beginPath(); ctx.moveTo(70, 16); ctx.bezierCurveTo(75, 16, 81, 16, 86, 16); ctx.bezierCurveTo(94, 16, 102, 22, 102, 34); ctx.bezierCurveTo(92, 34, 84, 34, 75, 34); ctx.bezierCurveTo(75, 26, 73, 21, 70, 16); ctx.fill(); ctx.stroke(); ctx.strokeStyle = "orange"; ctx.lineWidth = 3; ctx.beginPath(); for(var i = 0; i < this.flairNum; i++){ ctx.moveTo(26, ((this.flairNum-i)16 + i50)/this.flairNum); ctx.lineTo(26 - (1.5-Math.abs(i/5-1))this.flair[i], ((this.flairNum-i)16 + i50)/this.flairNum); } ctx.stroke(); if(Date.now() >= this.flairResetTime){ this.flairResetTime = Date.now()+30; for(var i = 0; i < this.flairNum; i++){ this.flair[i] = 10+Math.random()20; } } ctx.setTransform(camera); break; case "large": ctx.transform(0.6, 0, 0, 0.6, this.pos.x-10, this.pos.y-10); ctx.fillStyle = colors.enemies.body; ctx.strokeStyle = colors.enemies.outline; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(40, 22); ctx.bezierCurveTo(52, 47, 59, 67, 53, 106); ctx.bezierCurveTo(82, 101, 117, 104, 149, 96); ctx.bezierCurveTo(131, 47, 96, 19, 40, 22); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(137, 76); ctx.lineTo(257, 106); ctx.bezierCurveTo(224, 140, 112, 159, 36, 129); ctx.bezierCurveTo(36, 121, 36, 109, 36, 101); ctx.bezierCurveTo(82, 99, 111, 89, 137, 76); ctx.fill(); ctx.stroke(); ctx.Ellipse(35, 115, 7, 14); ctx.beginPath(); ctx.moveTo(54, 117); ctx.bezierCurveTo(90, 117, 126, 116, 142, 115); ctx.bezierCurveTo(149, 166, 87, 210, 25, 220); ctx.bezierCurveTo(37, 187, 53, 151, 54, 117); ctx.fill(); ctx.stroke(); ctx.fillStyle = colors.enemies.window; ctx.beginPath(); ctx.moveTo(139, 75); ctx.bezierCurveTo(178, 85, 216, 95, 255, 105); ctx.bezierCurveTo(222, 107, 189, 110, 156, 112); ctx.bezierCurveTo(155, 96, 149, 85, 139, 75); ctx.fill(); ctx.stroke(); ctx.strokeStyle = "red"; ctx.lineWidth = 3; ctx.beginPath(); for(var i = 0; i < this.flairNum; i++){ ctx.moveTo(35, ((this.flairNum-i)101 + i129)/this.flairNum); ctx.lineTo(35 - (1.5-Math.abs(i/5-1))this.flair[i], ((this.flairNum-i)101 + i129)/this.flairNum); } ctx.stroke(); if(Date.now() >= this.flairResetTime){ this.flairResetTime = Date.now()+30; for(var i = 0; i < this.flairNum; i++){ this.flair[i] = 10+Math.random()20; } } ctx.setTransform(camera); break; case "nuke": ctx.transform(1, 0, 0, 1, this.pos.x-17, this.pos.y-38); ctx.fillStyle = colors.enemies.body; ctx.strokeStyle = colors.enemies.outline; ctx.lineWidth = 1; ctx.fillRect(54, 52, 18, 84); ctx.strokeRect(54, 52, 18, 84); ctx.beginPath(); ctx.moveTo(33, 39); ctx.lineTo(19, 39); ctx.lineTo(54, 52); ctx.lineTo(72, 52); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(18, 153); ctx.lineTo(33, 153); ctx.lineTo(73, 137); ctx.lineTo(55, 137); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(58, 79); ctx.lineTo(58, 110); ctx.lineTo(73, 137); ctx.lineTo(55, 137); ctx.lineTo(46, 111); ctx.lineTo(46, 78); ctx.lineTo(54, 52); ctx.lineTo(73, 52); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(46, 79); ctx.lineTo(58, 80); ctx.lineTo(47, 85); ctx.lineTo(36, 84); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(46, 110); ctx.lineTo(58, 109); ctx.lineTo(47, 118); ctx.lineTo(38, 118); ctx.fill(); ctx.stroke(); ctx.fillRect(36, 84, 10, 34); ctx.strokeRect(36, 84, 10, 34); ctx.beginPath(); ctx.moveTo(19, 39); ctx.lineTo(32, 39); ctx.lineTo(46, 85); ctx.lineTo(36, 84); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(18, 153); ctx.lineTo(36, 118); ctx.lineTo(47, 118); ctx.lineTo(33, 153); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(123, 141); ctx.bezierCurveTo(86, 140, 60, 134, 47, 117); ctx.bezierCurveTo(47, 107, 47, 95, 47, 85); ctx.bezierCurveTo(58, 63, 81, 48, 119, 46); ctx.bezierCurveTo(160, 46, 185, 58, 185, 96); ctx.bezierCurveTo(184, 131, 161, 142, 123, 141); ctx.fill(); ctx.stroke(); //text NUKE ctx.fillRect(17, 38, 15, 115); ctx.strokeRect(17, 38, 15, 115); ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(65, 110); ctx.lineTo(64, 82); ctx.lineTo(79, 110); ctx.lineTo(79, 81); ctx.stroke(); ctx.beginPath(); ctx.moveTo(103, 77); ctx.lineTo(104, 113); ctx.lineTo(89, 114); ctx.lineTo(88, 78); ctx.stroke(); ctx.beginPath(); ctx.moveTo(113, 74); ctx.lineTo(116, 115); ctx.stroke(); ctx.beginPath(); ctx.moveTo(129, 75); ctx.lineTo(116, 92); ctx.lineTo(129, 109); ctx.stroke(); ctx.beginPath(); ctx.moveTo(159, 71); ctx.lineTo(136, 73); ctx.lineTo(136, 92); ctx.lineTo(159, 91); ctx.stroke(); ctx.beginPath(); ctx.moveTo(158, 113); ctx.lineTo(136, 114); ctx.lineTo(136, 92); ctx.stroke(); ctx.setTransform(camera); break; default: } if(this.pos.x < -this.w/2 && this.type !== "basic"){ ctx.strokeStyle = "white"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(30, this.pos.y+this.h/2-20); ctx.lineTo(10, this.pos.y+this.h/2); ctx.lineTo(30, this.pos.y+this.h/2+20); ctx.stroke(); ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(50, this.pos.y+this.h/2-20); ctx.lineTo(50, this.pos.y+this.h/2); ctx.stroke(); ctx.Ellipse(50, this.pos.y+this.h/2+10, 2, 2); } ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(this.pos.x, this.pos.y-10, 40, 5); ctx.fillStyle = "rgb(0, 255, 0)"; ctx.fillRect(this.pos.x, this.pos.y-10, 40this.health/this.maxHealth, 5); }; enemy.prototype.collidesWith = function(x, y, w, h){ for(var i = 0; i < this.hitbox.length; i++){ var hb = this.hitbox[i]; if(this.pos.x + hb.x + hb.w > x && this.pos.x + hb.x < x + w && this.pos.y + hb.y + hb.h > y && this.pos.y + hb.y < y + h){ return true; } } return false; }; enemy.prototype.run = function(){ this.pos.x += this.speedtimeElapsed; if(this.type == "basic" && Date.now() >= this.nextBullet){ bullets.push({ pos: v.init(this.pos.x+80, this.pos.y+25), vel: v.init(1.4, 0), isPlayer: false }); // console.log(bullets[bullets.length-1]); this.nextBullet = Date.now()+2000; } }; var enemies = []; var nextEnemy = 1000; } //Game Management { var startGame = function(){ scene = "play"; enemies = []; bullets = []; debris = []; nextEnemy = Date.now() + 2000; player.deathParticles = []; player.rot = 0; player.dirX = v.init(1, 0); player.dirY = v.init(0, 1); player.score = 0; player.health = player.maxHealth; player.dead = false; player.numBullets = player.maxBullets; gameStart = Date.now(); }; } //My inputs { var UIButton = function(ctx){ ctx.strokeStyle = colors.player.outline; ctx.lineWidth = 3; ctx.strokeRect(this.x, this.y, this.width, this.height); ctx.fillStyle = colors.player.body; ctx.fillRect(this.x, this.y, this.width, this.height); ctx.fillStyle = colors.player.window; ctx.fillRect(this.x+5, this.y+5, this.width-10, this.height-10); ctx.strokeRect(this.x+5, this.y+5, this.width-10, this.height-10); ctx.textAlign = "center"; ctx.font = this.textSize + "px serif"; ctx.fillStyle = "black"; ctx.fillText(this.v, this.x + this.width/2, this.y + this.height/2 + this.textSize/4); }; var playBtn = new button("Play", 240, 80, 100, 50); playBtn.drawing = UIButton; var storyBtn = new button("Story", 240, 320, 100, 50); storyBtn.drawing = UIButton; var restart = new button("Restart", 100, 180, 100, 50); restart.drawing = UIButton; var mainMenu = new button("Main Menu", 100, 250, 140, 50); mainMenu.drawing = UIButton; var back = new button("Back", 10, canvas.height-50); back.drawing = UIButton; var prevPage = new button("<-", 260, canvas.height-50); prevPage.drawing = UIButton; var nextPage = new button("->", 300, canvas.height-50); nextPage.drawing = UIButton; var contButt = new button("continue", 490, canvas.height-50); contButt.drawing = UIButton; var skip = new button("skip", 530, canvas.height-50); skip.drawing = UIButton; } var play = function(){ ctx.background("rgb(0, 0, 0)"); for(var i = 0; i < stars.length; i++){ ctx.fillStyle = stars[i].color; ctx.beginPath(); ctx.ellipse(stars[i].pos.x, stars[i].pos.y, stars[i].size, stars[i].size, 0, 0, 6.29); ctx.fill(); stars[i].pos.x -= 0.01timeElapsed; if(stars[i].pos.x < 0){ stars[i].pos.x += canvas.width; } } ctx.setTransform(camera); //bullet ctx.fillStyle = "rgb(255, 255, 255)"; for(var i = 0; i < bullets.length; i++){ ctx.Ellipse(bullets[i].pos.x, bullets[i].pos.y, 5, 5, true, false); bullets[i].pos = v.add(bullets[i].pos, v.scl(bullets[i].vel, timeElapsed)); if(bullets[i].pos.x < 0){ bullets.splice(i, 1); i--; continue; } if(bullets[i].pos.x > canvas.width){ player.health = Math.max(player.health-1, 0); if(player.health == 0 && !player.dead){ killPlayer(canvas.width, bullets[i].pos.y+5); } bullets.splice(i, 1); i--; } } //enemy if(Date.now() > nextEnemy){ var randNum = Math.random(); var acc = 0; for(var selectedEnemy in enemyData){ acc += enemyData[selectedEnemy].freq; if(acc > randNum){ break; } } enemies.push(new enemy((1/2+Math.random())canvas.height/2, selectedEnemy)); nextEnemy = Date.now() + (2 + Math.random()2)1000; } for(var i = 0; i < enemies.length; i++){ enemies[i].draw(); enemies[i].run(); if(enemies[i].pos.x > canvas.width){ player.health = Math.max(player.health-enemies[i].damage, 0); player.lastHit = Date.now(); if(player.health == 0 && !player.dead){ killPlayer(canvas.width, bullets[i].pos.y+5); } enemies.splice(i, 1); i--; continue; } for(var j = 0; j < bullets.length; j++){ var bullet = bullets[j].pos; if(bullets[j].isPlayer && enemies[i].collidesWith(bullet.x-5, bullet.y-5, 10, 10)){ enemies[i].health = Math.max(enemies[i].health-1, 0); bullets.splice(j, 1); j--; } } for(var j = 0; j < debris.length; j++){ var debri = debris[j].pos; if(enemies[i].collidesWith(debri.x-5, debri.y-5, 10, 10)){ enemies[i].health = Math.max(enemies[i].health-1, 0); debris.splice(j, 1); j--; } } if(enemies[i].health <= 0){ for(var d = 0; d < enemies[i].debrisCount; d++){ debris.push({ pos: v.init(enemies[i].pos.x+enemies[i].w/2, enemies[i].pos.y+enemies[i].h/2), vel: v.scl(v.rotate(v.init(1, 0), d6.282/enemies[i].debrisCount), 0.5+Math.random()), rot: Math.random()6.282, rotV: (-1+Math.random()2)0.1, scl: 0.8+Math.random()0.4, color: pickRandom("rgb(125, 125, 125)", "rgb{20, 20, 20)", "rgb(125, 125, 80)", "rgb(80, 125, 125)") }); } player.score += enemies[i].score; enemies.splice(i, 1); i--; } } //debris for(var i = 0; i < debris.length; i++){ ctx.fillStyle = debris[i].color; ctx.transform(Math.cos(debris[i].rot)debris[i].scl, Math.sin(debris[i].rot)debris[i].scl, -Math.sin(debris[i].rot)debris[i].scl, Math.cos(debris[i].rot)debris[i].scl, debris[i].pos.x, debris[i].pos.y); ctx.fillRect(-5, -5, 10, 10); ctx.setTransform(camera); debris[i].pos = v.add(debris[i].pos, v.scl(debris[i].vel, timeElapsed)); debris[i].rot += debris[i].rotVtimeElapsed; if(debris[i].pos.x < 0 \|\| debris[i].pos.x > canvas.width \|\| debris[i].pos.y < 0 \|\| debris[i].pos.y > canvas.height){ debris.splice(i, 1); i--; } } //player if(player.dead){ camera.e = (1-Math.random()2)3; camera.f = (1-Math.random()2)3; for(var i = 0; i < player.deathParticles.length; i++){ var deathP = player.deathParticles[i]; ctx.fillStyle = deathP.color; ctx.Ellipse(deathP.pos.x, deathP.pos.y, deathP.size, deathP.size, true, false); player.deathParticles[i].pos = v.add(deathP.pos, v.scl(deathP.vel, timeElapsed)); } } drawPlayer(); if(keys["w"] \|\| keys["ArrowUp"]){ player.rot = Math.min(player.rot + 0.006timeElapsed, Math.PI/2); player.dirX = v.rotate(v.init(1, 0), player.rot); } if(keys["s"] \|\| keys["ArrowDown"]){ player.rot = Math.max(player.rot - 0.006timeElapsed, -Math.PI/2); player.dirX = v.rotate(v.init(1, 0), player.rot); } if((keys[" "] \|\| keys["Control"]) && !shotPrevFrame && player.numBullets > 0){ if(player.lastBullet + 100 < Date.now()){ var vel = v.scl(player.dirX, -1); bullets.push({ pos: v.add(v.init(canvas.width, canvas.height/2), v.scl(vel, 100)), vel: v.scl(vel, 1.5), isPlayer: true }); player.numBullets = Math.max(player.numBullets-1, 0); if(player.numBullets == 0){ player.timeRefill = Date.now() + 3000; } player.lastBullet = Date.now(); } } shotPrevFrame = keys[" "] \|\| keys["Control"]; if(player.numBullets == 0 && Date.now() >= player.timeRefill && player.lastBullet + 100 < Date.now()){ player.numBullets = player.maxBullets; } player.highScore = Math.max(player.score, player.highScore); ctx.resetTransform(); //UI ctx.fillStyle = "white"; ctx.fillText("Score: " + player.score, canvas.width-85, canvas.height - 60); ctx.fillText("Highscore: " + player.highScore, canvas.width-85, canvas.height - 45); ctx.fillText("Ammo: " + player.numBullets + "/" + player.maxBullets, canvas.width-85, canvas.height-30); ctx.fillText("Health:", canvas.width-85, canvas.height-15); ctx.fillRect(canvas.width-85, canvas.height-10, 80, 5); if(player.health/player.maxHealth > 0.5){ ctx.fillStyle = "rgb(0, 255, 0)"; }else if(player.health/player.maxHealth > 0.2){ ctx.fillStyle = "rgb(200, 200, 0)"; }else{ ctx.fillStyle = "red"; } ctx.fillRect(canvas.width-85, canvas.height-10, 80player.health/player.maxHealth, 5); if(firstPlay){ ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.font = "15px serif"; ctx.fillText("Use W/D (or arrow keys) to move,", 300, 50); ctx.fillText("and spacebar to shoot.", 300, 80); ctx.font = defFont; ctx.textAlign = "left"; if(Date.now()-gameStart > 10000){ firstPlay = false; } } ctx.fillStyle = "white"; ctx.fillRect(0, 0, 20, 15); var frameRate = Math.floor(100/timeElapsed); if(frameRate > 60){ ctx.fillStyle = "green"; }else if(frameRate > 30){ ctx.fillStyle = "yellow"; }else{ ctx.fillStyle = "red"; } ctx.fillText(frameRate, 0, 10); if(player.numBullets == 0){ ctx.fillStyle = "red"; ctx.font = "30px serif"; ctx.textAlign = "center"; ctx.fillText("Out of Bullets!", canvas.width/2, 30); ctx.font = defFont; ctx.textAlign = "left"; } if(player.dead){ ctx.background("rgba(0, 0, 0, " + (Date.now()-player.deathStart)/3000 + ")"); if(Date.now()-player.deathStart > 3000){ scene = "game over"; } } }; var page = 1; var story = function(){ ctx.background("rgb(150, 150, 150)"); if(page === 1){ //table ctx.strokeStyle = "black"; ctx.fillStyle = "rgb(172, 110, 0)" ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(301, 227); ctx.bezierCurveTo(352, 227, 413, 240, 415, 290); ctx.bezierCurveTo(413, 328, 351, 353, 295, 357); ctx.bezierCurveTo(228, 354, 180, 331, 178, 288); ctx.bezierCurveTo(179, 240, 247, 230, 301, 227); ctx.fill(); //Cookie jar ctx.fillStyle = colors.story.cookieJar; ctx.beginPath(); ctx.moveTo(347, 254); ctx.bezierCurveTo(347, 248, 350, 246, 356, 246); ctx.bezierCurveTo(366, 246, 377, 246, 387, 246); ctx.bezierCurveTo(394, 246, 398, 249, 398, 255); ctx.bezierCurveTo(398, 267, 397, 279, 397, 291); ctx.lineTo(347, 290); ctx.bezierCurveTo(347, 278, 347, 266, 347, 254); ctx.fill(); ctx.strokeStyle = colors.story.cookieJar; ctx.lineWidth = 16; ctx.beginPath(); ctx.moveTo(349, 234); ctx.lineTo(314, 284); ctx.stroke(); ctx.Ellipse(321, 249, 3, 3); ctx.strokeStyle = "black"; ctx.lineWidth = 1; ctx.Ellipse(373, 267, 14, 14, false, true); ctx.Ellipse(366, 264, 3, 3, false, true); ctx.Ellipse(377, 261, 3, 3, false, true); ctx.Ellipse(375, 270, 3, 3, false, true); ctx.Ellipse(382, 266, 2, 2, false, true); ctx.Ellipse(366, 271, 2, 2, false, true); ctx.Ellipse(374, 277, 2, 2, false, true); ctx.Ellipse(371, 258, 2, 2, false, true); //blue guy ctx.strokeStyle = colors.story.blue; ctx.fillStyle = "white"; ctx.lineWidth = 16; ctx.Ellipse(455, 143, 51, 55); ctx.beginPath(); ctx.moveTo(461, 354); ctx.lineTo(457, 196); ctx.lineTo(484, 337); ctx.stroke(); ctx.beginPath(); ctx.moveTo(455, 206); ctx.lineTo(429, 303); ctx.lineTo(427, 303); ctx.lineTo(391, 213); ctx.stroke(); ctx.beginPath(); ctx.moveTo(474, 149); ctx.bezierCurveTo(471, 158, 461, 166, 450, 166); ctx.bezierCurveTo(438, 166, 432, 163, 425, 152); ctx.stroke(); ctx.strokeStyle = "rgb(203, 58, 55)"; ctx.beginPath(); ctx.moveTo(463, 163); ctx.lineTo(476, 169); ctx.stroke(); ctx.fillStyle = colors.story.blue; ctx.Ellipse(457, 132, 7, 7, true, false); ctx.Ellipse(428, 132, 7, 7, true, false); //cookie ctx.fillStyle = colors.story.cookie; ctx.Ellipse(383, 199, 20, 20, true, false); ctx.fillStyle = colors.story.chocoChip; ctx.Ellipse(379, 186, 4, 4, true, false); ctx.Ellipse(390, 189, 3, 3, true, false); ctx.Ellipse(371, 191, 3, 3, true, false); ctx.Ellipse(384, 199, 3, 3, true, false); ctx.Ellipse(378, 209, 4, 4, true, false); ctx.Ellipse(395, 196, 4, 4, true, false); ctx.Ellipse(391, 208, 4, 4, true, false); ctx.Ellipse(374, 200, 4, 4, true, false); //red guy ctx.fillStyle = "white"; ctx.strokeStyle = colors.story.red; ctx.Ellipse(168, 144, 51, 55); ctx.beginPath(); ctx.moveTo(149, 330); ctx.lineTo(170, 203); ctx.lineTo(171, 357); ctx.stroke(); ctx.beginPath(); ctx.moveTo(171, 207); ctx.lineTo(217, 313); ctx.stroke(); ctx.fillStyle = "black"; ctx.strokeStyle = colors.story.red; ctx.beginPath(); ctx.moveTo(198, 157); ctx.lineTo(167, 165); ctx.stroke(); ctx.fillStyle = colors.story.red; ctx.Ellipse(195, 131, 7, 7, true, false); ctx.Ellipse(165, 132, 7, 7, true, false); }else if(page === 2){ //red guy ctx.strokeStyle = colors.story.red; ctx.fillStyle = "white"; ctx.lineWidth = 16; ctx.lineCap = "round"; ctx.Ellipse(308, 123, 58, 62); ctx.beginPath(); ctx.moveTo(407, 211); ctx.lineTo(350, 239); ctx.lineTo(309, 187); ctx.lineTo(303, 188); ctx.lineTo(295, 351); ctx.stroke(); ctx.beginPath(); ctx.moveTo(299, 184); ctx.lineTo(335, 274); ctx.lineTo(414, 227); ctx.stroke(); ctx.lineWidth = 9; ctx.beginPath(); ctx.moveTo(299, 160); ctx.bezierCurveTo(298, 146, 305, 139, 322, 140); ctx.bezierCurveTo(335, 140, 333, 155, 330, 166); ctx.bezierCurveTo(316, 164, 310, 163, 299, 160); ctx.stroke(); ctx.fillStyle = colors.story.red; ctx.lineWidth = 0; ctx.Ellipse(314, 122, 8, 8, true, false); ctx.Ellipse(342, 125, 8, 8, true, false); //cookie jar ctx.fillStyle = colors.story.cookieJar; ctx.lineWidth = 0; ctx.beginPath(); ctx.moveTo(385, 184); ctx.bezierCurveTo(385, 177, 388, 172, 395, 172); ctx.bezierCurveTo(406, 172, 416, 171, 427, 171); ctx.bezierCurveTo(433, 171, 437, 175, 437, 181); ctx.bezierCurveTo(438, 194, 439, 206, 440, 219); ctx.lineTo(385, 218); ctx.bezierCurveTo(385, 207, 385, 195, 385, 184); ctx.fill(); ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.lineWidth = 1; ctx.Ellipse(412, 195, 18, 18, false, true); ctx.Ellipse(407, 187, 4, 4, false, true); ctx.Ellipse(418, 185, 2, 2, false, true); ctx.Ellipse(406, 205, 2, 2, false, true); ctx.Ellipse(424, 191, 2, 2, false, true); ctx.Ellipse(414, 190, 2, 2, false, true); ctx.Ellipse(418, 195, 3, 3, false, true); ctx.Ellipse(409, 197, 3, 3, false, true); ctx.Ellipse(399, 191, 2, 2, false, true); ctx.Ellipse(400, 198, 2, 2, false, true); ctx.Ellipse(412, 182, 2, 2, false, true); ctx.Ellipse(425, 198, 2, 2, false, true); ctx.Ellipse(414, 205, 2, 2, false, true); ctx.Ellipse(421, 203, 2, 2, false, true); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.beginPath(); ctx.moveTo(476, 134); ctx.bezierCurveTo(535, 139, 593, 125, 586, 53); ctx.bezierCurveTo(580, 7, 550, 11, 469, 8); ctx.bezierCurveTo(411, 12, 366, 16, 371, 54); ctx.bezierCurveTo(368, 62, 360, 65, 355, 70); ctx.bezierCurveTo(363, 69, 373, 71, 378, 67); ctx.bezierCurveTo(389, 102, 419, 134, 476, 134); ctx.fill(); ctx.fillStyle = "black"; ctx.font = "20px serif"; ctx.fillText("Gasp!", 420, 40); ctx.fillText("You took the", 420, 70); ctx.fillText("last cookie!", 420, 100); ctx.font = defFont; }else if(page === 3){ ctx.strokeStyle = colors.story.red; ctx.fillStyle = "white"; ctx.lineWidth = 16; ctx.lineCap = "round"; ctx.Ellipse(298, 97, 58, 63); ctx.beginPath(); ctx.moveTo(235, 300); ctx.lineTo(244, 215); ctx.lineTo(292, 161); ctx.lineTo(300, 161); ctx.lineTo(303, 352); ctx.stroke(); ctx.beginPath(); ctx.moveTo(301, 159); ctx.lineTo(371, 204); ctx.lineTo(396, 294); ctx.stroke(); ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(292, 135); ctx.bezierCurveTo(289, 124, 296, 115, 309, 116); ctx.bezierCurveTo(319, 116, 324, 124, 322, 133); ctx.bezierCurveTo(312, 134, 302, 134, 292, 135); ctx.stroke(); ctx.beginPath(); ctx.moveTo(334, 67); ctx.lineTo(310, 89); ctx.lineTo(287, 67); ctx.stroke(); ctx.fillStyle = colors.story.red; ctx.Ellipse(327, 89, 9, 9, true, false); ctx.Ellipse(294, 90, 9, 9, true, false); ctx.fillStyle = "white"; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(537, 149); ctx.bezierCurveTo(582, 130, 559, 23, 471, 17); ctx.bezierCurveTo(425, 11, 394, 21, 388, 54); ctx.bezierCurveTo(381, 63, 375, 71, 368, 80); ctx.bezierCurveTo(375, 82, 383, 84, 390, 86); ctx.bezierCurveTo(412, 153, 500, 171, 537, 149); ctx.fill(); ctx.fillStyle = "black"; ctx.font = "20px serif"; ctx.fillText("This . . .", 420, 60); ctx.fillText("means . . .", 420, 90); ctx.fillText("WWAARR!!!", 420, 120); ctx.fillText("WWAARR!!!", 422, 122); ctx.font = defFont; }else if(page === 4 \|\| page === 5){ //army for(var scl = 0.2; scl <= 1; scl += 0.1){ for(var i = -11; i < 26; i++){ ctx.setTransform(scl, 0, 0, scl, (300-300scl) + scli40, 0); ctx.fillStyle = colors.helmets.redGray; ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(17, 142); ctx.lineTo(22, 150); ctx.lineTo(36, 150); ctx.lineTo(42, 142); ctx.lineTo(42, 132); ctx.bezierCurveTo(42, 127, 37, 121, 29, 121); ctx.bezierCurveTo(20, 121, 17, 127, 17, 133); ctx.lineTo(17, 142); ctx.stroke(); ctx.fill(); ctx.fillStyle = colors.helmets.redVisor; ctx.beginPath(); ctx.moveTo(19, 134); ctx.lineTo(23, 130); ctx.lineTo(35, 130); ctx.lineTo(39, 134); ctx.lineTo(35, 139); ctx.lineTo(23, 139); ctx.lineTo(19, 134); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(19, 200); ctx.lineTo(29, 160); ctx.lineTo(28, 199); ctx.lineTo(19, 240); ctx.moveTo(29, 150); ctx.lineTo(29, 159); ctx.lineTo(39, 202); ctx.moveTo(28, 199); ctx.lineTo(40, 241); ctx.stroke(); ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(31, 131); ctx.lineTo(24, 137); ctx.moveTo(35, 131); ctx.lineTo(27, 139); ctx.moveTo(23, 130); ctx.lineTo(31, 139); ctx.moveTo(27, 130); ctx.lineTo(34, 138); ctx.moveTo(30, 130); ctx.lineTo(37, 138); ctx.moveTo(27, 131); ctx.lineTo(21, 137); ctx.moveTo(27, 138); ctx.lineTo(21, 132); ctx.moveTo(37, 132); ctx.lineTo(31, 138); ctx.stroke(); } //fog ctx.resetTransform(); ctx.fillStyle = "rgba(180, 180, 180, 0.1)"; ctx.fillRect(0, 0, 600, 250scl); } } if(page === 4){ ctx.fillStyle = "rgb(180, 180, 0)"; ctx.fillRect(0, 0, 100, 50); ctx.fillStyle = "black"; ctx.fillText("A few days later...", 5, 30); //red guy ctx.strokeStyle = colors.story.red; ctx.fillStyle = "white"; ctx.lineWidth = 8; ctx.Ellipse(305, 193, 40, 44); ctx.beginPath(); ctx.moveTo(278, 333); ctx.lineTo(303, 262); ctx.lineTo(305, 262); ctx.lineTo(305, 332); ctx.stroke(); ctx.beginPath(); ctx.moveTo(304, 237); ctx.lineTo(305, 260); ctx.lineTo(331, 333); ctx.stroke(); ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(344, 172); ctx.lineTo(372, 155); ctx.bezierCurveTo(371, 139, 377, 123, 404, 113); ctx.bezierCurveTo(438, 99, 475, 98, 511, 112); ctx.bezierCurveTo(552, 136, 579, 226, 548, 258); ctx.bezierCurveTo(494, 293, 430, 286, 378, 257); ctx.lineTo(344, 172); ctx.stroke(); ctx.fill(); ctx.fillStyle = "black"; ctx.font = "13px serif"; ctx.fillText("Aight listen up everyone.", 380, 140); ctx.multilineTxt("A few days ago, Blue stole the last cookie. He must pay for this horrible crime. Tonight, we will get revenge on Blue! Some of you may die, but it is a sacrifice I am willing to make.", 380, 155, 140); ctx.font = defFont; }else if(page === 5){ //red guy ctx.strokeStyle = colors.story.red; ctx.fillStyle = "white"; ctx.lineWidth = 8; ctx.Ellipse(305, 193, 40, 44); ctx.beginPath(); ctx.moveTo(278, 333); ctx.lineTo(303, 262); ctx.lineTo(305, 262); ctx.lineTo(305, 332); ctx.stroke(); ctx.beginPath(); ctx.moveTo(304, 237); ctx.lineTo(305, 260); ctx.lineTo(361, 200); ctx.stroke(); ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(344, 172); ctx.lineTo(372, 155); ctx.bezierCurveTo(371, 139, 377, 123, 404, 113); ctx.bezierCurveTo(438, 99, 475, 98, 511, 112); ctx.bezierCurveTo(552, 136, 579, 226, 548, 258); ctx.bezierCurveTo(494, 293, 430, 286, 378, 257); ctx.lineTo(344, 172); ctx.stroke(); ctx.fill(); ctx.fillStyle = "black"; ctx.font = "40px serif"; ctx.fillText("For", 380, 160); ctx.fillText("the", 380, 200); ctx.fillText("cookie!", 380, 240); ctx.font = "15px serif" ctx.fillStyle = "yellow"; ctx.fillText("\"For the cookie!\"", 300, 100); ctx.fillText("\"For the cookie!\"", 100, 120); ctx.fillText("\"For the cookie!\"", 200, 60); ctx.fillText("\"For the cookie!\"", 400, 50); ctx.fillText("\"For the cookie!\"", 50, 90); ctx.font = defFont; } ctx.fillStyle = "black"; ctx.strokeStyle = "white"; ctx.lineWidth = 1; ctx.fillRect(0, 330, 600, 70); ctx.strokeRect(0, 330, 600, 70); back.draw(function(){ scene = "main"; }); if(page > 1){ prevPage.draw(function(){ page --; }); } if(page < 5){ nextPage.draw(function(){ page ++; }); } if(page === 5){ contButt.draw(startGame); }else{ skip.draw(startGame); } ctx.fillStyle = "white"; ctx.fillText("Page " + page, 5, 10); }; var drawFun = function(){ switch(scene){ case "main": ctx.background("rgb(220, 50, 50)"); ctx.fillStyle = "rgb(50, 50, 220)"; ctx.beginPath(); ctx.moveTo(330, 0); ctx.lineTo(270, 400); ctx.lineTo(600, 400); ctx.lineTo(600, 0); ctx.fill(); ctx.strokeStyle = "black"; ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(330, 0); ctx.lineTo(270, 400); ctx.stroke(); //cookie cookieRot = (Date.now() - cookieStart)/1000/10; ctx.setTransform(Math.cos(cookieRot), Math.sin(cookieRot), -Math.sin(cookieRot), Math.cos(cookieRot), 290, 220); ctx.fillStyle = colors.story.cookie; ctx.Ellipse(0, 0, 80, 80, true, false); ctx.fillStyle = colors.story.chocoChip; ctx.Ellipse(-40, -30, 20, 20, true, false); ctx.Ellipse(10, -20, 20, 20, true, false); ctx.Ellipse(-20, 40, 20, 20, true, false); ctx.Ellipse(50, 10, 20, 20, true, false); ctx.Ellipse(10, 20, 10, 10, true, false); ctx.Ellipse(40, 50, 10, 10, true, false); ctx.Ellipse(10, 60, 10, 10, true, false); ctx.Ellipse(-25, 5, 10, 10, true, false); ctx.Ellipse(-60, 10, 10, 10, true, false); ctx.Ellipse(-10, -60, 10, 10, true, false); ctx.Ellipse(30, -50, 10, 10, true, false); ctx.Ellipse(50, -25, 10, 10, true, false); ctx.resetTransform(); ctx.font = "50px sans-serif"; ctx.fillStyle = "rgb(50, 50, 220)"; ctx.fillText("Cookie", 145, 50); ctx.fillStyle = "rgb(220, 50, 50)"; ctx.fillText("War", 330, 50); ctx.font = defFont; ctx.textAlign = "left"; //-------------------------------------RED ctx.strokeStyle = "black"; ctx.lineWidth = 50; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(30, 300); ctx.lineTo(10, 430); ctx.stroke(); ctx.fillStyle = colors.helmets.redGray; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(171, 275); ctx.lineTo(173, 133); ctx.bezierCurveTo(172, 86, 151, 53, 84, 48); ctx.lineTo(-1, 47); ctx.lineTo(-1, 336); ctx.lineTo(112, 334); ctx.lineTo(171, 275); ctx.stroke(); ctx.fill(); ctx.fillStyle = colors.helmets.redVisor; ctx.lineWidth = 9; ctx.beginPath(); ctx.moveTo(171, 224); ctx.lineTo(86, 222); ctx.bezierCurveTo(80, 222, 75, 217, 72, 214); ctx.lineTo(47, 183); ctx.bezierCurveTo(43, 177, 44, 173, 47, 168); ctx.lineTo(69, 134); ctx.bezierCurveTo(72, 129, 75, 127, 80, 127); ctx.lineTo(167, 128); ctx.bezierCurveTo(172, 128, 177, 132, 177, 137); ctx.lineTo(177, 215); ctx.bezierCurveTo(177, 220, 175, 224, 171, 224); ctx.stroke(); ctx.fill(); ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(176, 196); ctx.lineTo(152, 220); ctx.moveTo(177, 173); ctx.lineTo(131, 223); ctx.moveTo(176, 148); ctx.lineTo(112, 220); ctx.moveTo(169, 130); ctx.lineTo(86, 221); ctx.moveTo(148, 129); ctx.lineTo(71, 211); ctx.moveTo(122, 131); ctx.lineTo(61, 197); ctx.moveTo(100, 130); ctx.lineTo(50, 185); ctx.moveTo(80, 129); ctx.lineTo(53, 159); ctx.moveTo(151, 131); ctx.lineTo(178, 152); ctx.moveTo(124, 131); ctx.lineTo(175, 174); ctx.moveTo(100, 128); ctx.lineTo(175, 194); ctx.moveTo(79, 129); ctx.lineTo(177, 218); ctx.moveTo(70, 143); ctx.lineTo(159, 223); ctx.moveTo(57, 154); ctx.lineTo(131, 223); ctx.moveTo(50, 165); ctx.lineTo(109, 221); ctx.stroke(); ctx.fillStyle = "rgb(120, 120, 120)"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(40, 196); ctx.lineTo(70, 236); ctx.lineTo(175, 239); ctx.lineTo(175, 248); ctx.lineTo(66, 245); ctx.lineTo(36, 206); ctx.lineTo(-1, 205); ctx.lineTo(-1, 196); ctx.lineTo(40, 196); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(47, 143); ctx.lineTo(-1, 143); ctx.lineTo(-1, 134); ctx.lineTo(42, 134); ctx.lineTo(69, 98); ctx.lineTo(170, 98); ctx.lineTo(173, 109); ctx.lineTo(73, 109); ctx.lineTo(47, 143); ctx.stroke(); ctx.fill(); //-------------------------------------BLUE ctx.strokeStyle = "black"; ctx.lineWidth = 70; ctx.beginPath(); ctx.moveTo(530, 250); ctx.lineTo(550, 430); ctx.stroke(); ctx.fillStyle = "rgb(163, 163, 188)"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(601, 80); ctx.bezierCurveTo(601, 151, 601, 221, 601, 292); ctx.bezierCurveTo(541, 304, 486, 315, 432, 327); ctx.bezierCurveTo(400, 268, 393, 180, 427, 117); ctx.bezierCurveTo(460, 62, 530, 37, 601, 80); ctx.stroke(); ctx.fill(); ctx.fillStyle = "rgb(220, 220, 220)"; ctx.beginPath(); ctx.moveTo(559, 200); ctx.bezierCurveTo(575, 194, 573, 170, 558, 161); ctx.bezierCurveTo(521, 140, 513, 136, 490, 124); ctx.lineTo(480, 103); ctx.lineTo(434, 82); ctx.lineTo(398, 158); ctx.lineTo(400, 261); ctx.lineTo(443, 256); ctx.bezierCurveTo(482, 237, 525, 218, 559, 200); ctx.stroke(); ctx.fill(); ctx.fillStyle = "rgb(160, 160, 160)"; ctx.Ellipse(549, 181, 12, 12); ctx.fillStyle = "rgb(60, 123, 217)"; ctx.beginPath(); ctx.moveTo(537, 200); ctx.bezierCurveTo(527, 189, 526, 173, 537, 163); ctx.bezierCurveTo(494, 139, 491, 138, 468, 125); ctx.lineTo(460, 108); ctx.bezierCurveTo(447, 102, 434, 97, 420, 91); ctx.bezierCurveTo(387, 125, 374, 184, 393, 252); ctx.bezierCurveTo(410, 251, 426, 249, 443, 248); ctx.bezierCurveTo(474, 232, 503, 216, 537, 200); ctx.stroke(); ctx.fill(); ctx.strokeStyle = "rgb(220, 220, 250)"; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(452, 120); ctx.lineTo(419, 107); ctx.stroke(); ctx.fill(); playBtn.draw(function(){ if(firstPlay){ scene = "story"; page = 1; }else{ startGame(); } }); storyBtn.draw(function(){ scene = "story"; page = 1; }); break; case "play": play(); break; case "story": story(); break; case "game over": ctx.background("black"); ctx.fillStyle = "white"; ctx.font = "50px sans-serif"; ctx.textAlign = "center"; ctx.fillText("Game Over!", canvas.width/2, 50); ctx.font = "30px sans-serif"; ctx.fillText("Score: " + player.score, canvas.width/2, 80); ctx.fillText("Highscore: " + player.highScore, canvas.width/2, 110); ctx.font = defFont; ctx.textAlign = "left"; ctx.fillStyle = colors.player.body; ctx.strokeStyle = colors.player.outline; ctx.lineWidth = 3; ctx.Ellipse(568, 206, 107, 107); ctx.Ellipse(567, 206, 81, 81); ctx.fillStyle = colors.player.window; ctx.Ellipse(567, 206, 67, 67); ctx.fillStyle = "rgb(0, 0, 0)"; ctx.beginPath(); ctx.moveTo(485, 135); ctx.lineTo(504, 118); ctx.lineTo(501, 137); ctx.lineTo(542, 158); ctx.lineTo(517, 154); ctx.lineTo(510, 172); ctx.lineTo(511, 154); ctx.lineTo(497, 148); ctx.fill(); ctx.beginPath(); ctx.moveTo(575, 115); ctx.lineTo(566, 104); ctx.lineTo(550, 98); ctx.lineTo(578, 97); ctx.fill(); ctx.beginPath(); ctx.moveTo(552, 260); ctx.lineTo(522, 283); ctx.lineTo(513, 275); ctx.lineTo(517, 292); ctx.lineTo(496, 288); ctx.lineTo(515, 302); ctx.lineTo(545, 312); ctx.lineTo(528, 292); ctx.fill(); ctx.fillStyle = colors.player.body; ctx.beginPath(); ctx.moveTo(414, 220); ctx.lineTo(405, 211); ctx.lineTo(421, 196); ctx.lineTo(412, 190); ctx.lineTo(487, 188); ctx.lineTo(487, 220); ctx.lineTo(414, 220); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(361, 224); ctx.lineTo(372, 229); ctx.lineTo(321, 261); ctx.lineTo(310, 239); ctx.lineTo(360, 206); ctx.lineTo(373, 208); ctx.stroke(); ctx.fill(); ctx.strokeStyle = colors.player.bar; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(315, 227); ctx.lineTo(334, 260); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(330, 216); ctx.lineTo(351, 251); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(346, 206); ctx.lineTo(367, 240); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(430, 185); ctx.lineTo(430, 227); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(447, 185); ctx.lineTo(448, 226); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(464, 184); ctx.lineTo(464, 226); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(482, 183); ctx.lineTo(482, 226); ctx.stroke(); ctx.fill(); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(307, 262); ctx.lineTo(318, 256); ctx.lineTo(312, 244); ctx.lineTo(301, 250); ctx.stroke(); ctx.fill(); restart.draw(startGame); mainMenu.draw(function(){ scene = "main"; }); break; } timeElapsed = (Date.now()-lastFrame)/10; lastFrame = Date.now(); UIrunPerFrame(); }; var draw = setInterval(drawFun, 1); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLu_sKqBCQw
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cobra Coder
Author Name	COOLBRO43219
Author ID	kaid_148226712859579271860375
Author Profile Access	COACH

Archive Data

Added	9 days ago, 1735615513136
Updated	9 days ago, 1735615513136
Source Deleted	unknown