Viewing Program

Program Data

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

Title	Kingdom Invasion (Game)
ID	5094472508555264
Created	3 years ago, 1647292170822
Updated	3 years ago, 1647508168236
Code	<!DOCTYPE html> <!-- Kingdom Invasion Date Started: July 22, 2021 Date Finished: March 13, 2022 Kingdom Invasion was a collaboration between me and one of my classmates for our IB CAS project. He did all of the planning and game design, and I wrote all the code except for the two image caching functions on lines 5269 and 5286, which were made by Green Ghost @GreenGhost1. This game works with any screen size: https://www.khanacademy.org/computer-programming/kingdom-invasion/6526235391770624?width=1200&&height=800&&editor=no Update March 16 2022: Added a death scene. --> <html> <head> <meta charset="utf-8"> <title>Kingdom Invasion (Game)</title> <!-- code in <style> tags is all CSS --> <style> body { overflow: hidden; } #canvas { position: absolute; left: 0px; top: 0px; z-index: 0; } h6 { text-align: center; font-size: 20px; margin: 10px; color: rgb(255, 0, 0); text-shadow: -1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0); } .win { color: rgb(200, 200, 0); } #menu { position: absolute; z-index: 1; border-style: solid; border-color: rgb(200, 200, 0); border-radius: 5px; } #inst { display: none; position: absolute; overflow-y: scroll; z-index: 3; border-style: solid; border-color: rgb(0, 0, 0); border-width: 10px; } #victory { display: none; position: absolute; z-index: 2; border-style: solid; border-color: rgb(0, 0, 0); border-width: 10px; } #death { display: none; position: absolute; z-index: 1; border-style: solid; border-color: black; border-width: 10px; } .how { /color: rgb(255, 0, 0);/ text-align: left; font-size: 17px; margin: 10px; } #close { color: red; text-align: center; } #close:hover{ color: rgb(0, 0, 0); cursor: pointer; } #back { color: rgb(200, 200, 0); text-align: center; } #back:hover{ color: rgb(0, 0, 0); cursor: pointer; } #retry { color: red; text-align: center; } #retry:hover{ color: rgb(0, 0, 0); cursor: pointer; } #explain { position: static; display: block; margin-left: auto; margin-right: auto; } #crown { position: static; display: block; margin-left: auto; margin-right: auto; } #skull { position: static; display: block; margin-left: auto; margin-right: auto; } </style> <!-- canvas element for drawing --> <canvas id="canvas"></canvas> <!-- sets up the canvas for drawing using JavaScript --> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; </script> <!-- scene transitions --> <script> // which scene we are in var scene = "Load"; // blur transition from menu to game var blurCanvas = 5; var menuOp = 0; // menu opacity var instOp = 0; // instructions opacity var victOp = 0; // victory scene opacity var deathOp = 0; // death scene opacity // fade transition variables var trans = { active: false, size: 0, next: function(){} }; // handles fade transitions var changeScene = function(){ if(trans.active){ if(trans.size < 255){ fill(255, trans.size); } else if(trans.size < 510){ fill(255, 510-trans.size); if(trans.size === 255){ trans.next(); } } else{ fill(255, 0); trans.active = false; trans.size = 0; } trans.size += 15; ctx.fillRect(0, 0, canvas.width, canvas.height); } }; </script> <!-- handles user inputs --> <script> // some helpful keyCode variables var Q = 81, W = 87, E = 69, A = 65, S = 83, D = 68; // keys array var keys = []; // pressing a key var keyPressed = function(event){ keys[event.keyCode] = true; }; // releasing a key var keyReleased = function(event){ keys[event.keyCode] = false; }; // moving the mouse var mouseX, mouseY; var updateMouse = function(event){ mouseX = event.clientX; mouseY = event.clientY; }; // clicking the mouse var mouseClicked = function(){}; var onClick = function(){ mouseClicked(); }; </script> <!-- miscellaneous --> <script> // one over the square root of three, useful for switching between apparent and actual coordinates on the grid var oneOverSqrt3 = 0.57735026919; // gets a position on the map from a set of coordinates var findMapPos = function(x, y){ /* if (y-player.posY)/100 > 0, 100, etc. / return { row: Math.floor((y-player.posY+50)/100), col: Math.floor((x-player.posX)/150) }; }; // similar to findMapPos, but the position it returns maps the coordinates to the hex with the closest center, rather than the slightly more complicated system used above var findPos = function(x, y){ var pos = {}; if(x%100 === 0){ pos.row = Math.floor(y/100); } else{ pos.row = Math.floor((y+50)/100); } pos.col = Math.floor(x/150); return pos; }; // checks to see if two sets of coordinates are on the same hex var matchHex = function(obj1, obj2){ var pos1 = findPos(obj1.x, obj1.y); var pos2 = findPos(obj2.x, obj2.y); return pos1.row === pos2.row && pos1.col === pos2.col; }; // computes how much damage to deal with a particular attack var computeDmg = function(r1, r2){ if(Math.abs(r1-r2) === 180){ return 1; } else if(Math.abs(r1-r2) === 120 \|\| Math.abs(r1-r2) === 240 \|\| Math.abs(r1-r2) === 150 \|\| Math.abs(r1-r2) === 210){ return 2; } else if(Math.abs(r1-r2) === 60 \|\| Math.abs(r1-r2) === 300 \|\| Math.abs(r1-r2) === 90 \|\| Math.abs(r1-r2) === 270){ return 3; } else if(r1 === r2 \|\| Math.abs(r1-r2) === 30 \|\| Math.abs(r1-r2) === 330){ return 4; } }; // gets the skewed slope on the grid from an angle var findSlope = function(theta){ theta %= 360; switch(theta){ case 0: return {x: 0, y: 100}; break; case 60: return {x: -150, y: 50}; break; case 120: return {x: -150, y: -50}; break; case 180: return {x: 0, y: -100}; break; case 240: return {x: 150, y: -50}; break; case 300: return {x: 150, y: 50}; break; } }; // checks if a given hex is empty var isFree = function(row, col){ if(row < 0 \|\| row > gridMap.length-1 \|\| col < 0 \|\| col > gridMap[row].length-1){ return false; } if(gridMap[row][col] !== "-" && gridMap[row][col] !== "b" && gridMap[row][col] !== "d"){ return false; } for(let i = 0; i < enemies.length; i++){ var orgPos = findMapPos(enemies[i].org.x, enemies[i].org.y); var targPos = findMapPos(enemies[i].targ.x, enemies[i].targ.y); if(enemies[i].health > 0){ if(orgPos.row === row && orgPos.col === col){ return false; } if(targPos.row === row && targPos.col === col){ return false; } } } return true; }; // lerp var lerp = function(num1, num2, amount){ return ((num2-num1)amount)+num1; }; // constrain var constrain = function(num, min, max){ if(num < min){ return min; } else if(num > max){ return max; } else{ return num; } }; // for debugging var debug = ""; var println = function(str){ debug = str; }; // particles for the crown in the victory scene var crownPart = []; // sin and cos in degrees var sin = function(r){ return Math.sin(rMath.PI/180); }; var cos = function(r){ return Math.cos(rMath.PI/180); } </script> <!-- some helpful functions for drawing --> <script> // convert to hexadecimal var toHex = function(num){ var chars = "0123456789ABCDEF"; return chars[(num-(num%16))/16]+chars[num%16]; }; // make colors var color = function(r, g, b, a){ if(g === undefined && b === undefined && a === undefined){ g = r; b = r; a = 255; } if(b === undefined && a === undefined){ a = g; g = r; b = r; } if(a === undefined){ a = 255; } ctx.globalAlpha = a/255; return "#"+toHex(r)+toHex(g)+toHex(b); }; var fill = function(r, g, b, a){ if(typeof r === "string"){ ctx.fillStyle = r; } else{ if(g === undefined && b === undefined && a === undefined){ g = r; b = r; a = 255; } if(b === undefined && a === undefined){ a = g; g = r; b = r; } if(a === undefined){ a = 255; } ctx.globalAlpha = a/255; ctx.fillStyle = "#"+toHex(r)+toHex(g)+toHex(b); } }; var stroke = function(r, g, b){ if(typeof r === "string"){ ctx.fillStyle = r; } else{ if(g === undefined \|\| b === undefined){ g = r; b = r; } ctx.strokeStyle = "#"+toHex(r)+toHex(g)+toHex(b); } }; // arcs and ellipses var arc = function(x, y, w, h, start, stop) { ctx.save(); ctx.translate(x, y); ctx.scale(1, h/w); ctx.beginPath(); ctx.arc(0, 0, w/2, start, stop180/Math.PI); ctx.fill(); ctx.restore(); } var ellipse = function(x, y, w, h) { arc(x, y, w, h, 0, 360) } // convert an angle to radians var angle = function(theta){ return thetaMath.PI/180; }; </script> <!-- player constructor --> <script> var Player = function(x, y){ // cartesian coordinates this.x = x; this.y = y; // target coordinates this.targ = { x: x, y: y }; // original coordinates this.org = { x: x, y: y }; // angle of rotation--must be an integer multiple of 60 this.r = 0; // combat stats this.damage = 15; this.health = 100; this.speed = 0.25; // position on the map this.row = 0; // for drawing this.col = 0; this.hex = { // for combat row: 0, col: 0 }; // original coordinates this.posX = x; this.posY = y; // reset positions this.init = function(){ // what the player is doing this.action = "stand"; // sword hand this.sword = { x: -30, y: -40, r: 40, slash: false, targ: { x: -30, y: -40, r: 40 } }; // shield hand this.shield = { x: 40, y: -50, r: -10, targ: { x: 40, y: -50, r: -10 } }; // an enmy to target this.enemy = null; // eyes this.eyeX = 0; }; this.init(); }; Player.prototype.move = function(){ // set the player's row and column var mapPos = findMapPos(this.org.x, this.org.y); this.row = mapPos.row; this.col = mapPos.col; this.hex = (this.action === "attack") ? findPos(this.org.x, this.org.y) : findPos(this.x, this.y); // if the player is not in motion... if(this.x === this.targ.x && this.y === this.targ.y){ // reset this.enemy if(this.enemy){ this.enemy = false; } // set original coordinates this.org.x = this.x; this.org.y = this.y; // move if(keys[Q]){ if(this.r < 300 && this.r > 120){ this.eyeX = -20; } this.r = 120; this.targ = { x: this.x-150, y: this.y-50 }; } if(keys[W]){ this.r = 180; this.targ = { x: this.x, y: this.y-100 }; } if(keys[E]){ if(this.r > 60 && this.r < 240){ this.eyeX = 20; } this.r = 240; this.targ = { x: this.x+150, y: this.y-50 }; } if(keys[A]){ this.r = 60; this.targ = { x: this.x-150, y: this.y+50 }; } if(keys[S]){ this.r = 0; this.targ = { x: this.x, y: this.y+100 }; } if(keys[D]){ this.r = 300; this.targ = { x: this.x+150, y: this.y+50 }; } // if you have a target and the target hex has an enemy on it, attack if(this.targ.x !== this.x \|\| this.targ.y !== this.y){ // check for an enemy at the target position for(let i = 0; i < enemies.length; i++){ if(enemies[i].health > 0 && (enemies[i].targ.x === this.targ.x && enemies[i].targ.y === this.targ.y \|\| enemies[i].org.x === this.targ.x && enemies[i].org.y === this.targ.y)){ this.enemy = enemies[i]; break; } } if(this.enemy){ this.action = "attack"; } } } // otherwise... else{ // find the target point on the map var targ = findMapPos(this.targ.x, this.targ.y); // if the target is not on the map or is occupied, don't move if(targ.row < 0 \|\| targ.row >= gridMap.length \|\| gridMap[targ.row][targ.col] !== "-" && gridMap[targ.row][targ.col] !== "b" && gridMap[targ.row][targ.col] !== "d"){ this.targ.x = this.x; this.targ.y = this.y; } // otherwise, if there is an enemy, attack it else if(this.action === "attack"){ // the distance to the target point var distSq = Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2); // if you're close enough to the target position, bounce back if(distSq < Math.pow(50, 2)){ // if the enemy is close enough, it takes damage and turns to face you if(matchHex(this.targ, this.enemy) \|\| (this.enemy.action === "attack" \|\| matchHex(this.enemy.targ, this.enemy.org)) && matchHex(this.targ, this.enemy.org)){ this.enemy.health -= this.damagecomputeDmg(this.r, this.enemy.r); if((this.enemy.type === "troll" \|\| this.enemy.type === "boss") && this.enemy.react === 0){ this.enemy.react = this.enemy.reactionTime; this.enemy.reactR = (180+this.r)%360; } else{ this.enemy.r = (180+this.r)%360; } } // we want to move back to our original position this.targ.x = this.org.x; this.targ.y = this.org.y; // we don't need to attack any more this.action = "stand"; } // if you've pulled back your sword, move towards the target hex if(this.sword.slash){ this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); } } // otherwise, move toward the target position else{ this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; } } / // sorts out a rare glitch if(this.enemy && this.action === "stand"){ this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; } } / } }; Player.prototype.update = function(){ if(this.action === "stand"){ if(this.sword.slash){ this.sword.slash = false; } // the hand positions will be different for each possible value of this.r switch(this.r){ case 0:{ if(this.eyeX !== 0){ this.eyeX -= 2Math.abs(this.eyeX)/this.eyeX; } this.sword.targ = { x: -30, y: -40, r: 40 }; this.shield.targ = { x: 40, y: -50, r: -10 }; }break; case 60:{ if(this.eyeX > -8){ this.eyeX -= 2; } else if(this.eyeX < -8){ this.eyeX += 2; } this.sword.targ = { x: -30, y: -35, r: -15 }; this.shield.targ = { x: 20, y: -45, r: -10 }; }break; case 120:{ if(this.eyeX > -18){ this.eyeX -= 2; } this.sword.targ = { x: -25, y: -45, r: -30 }; this.shield.targ = { x: -25, y: -45, r: 5 }; }break; case 180:{ this.sword.targ = { x: 30, y: -40, r: -40 }; this.shield.targ = { x: -40, y: -50, r: 10 }; }break; case 240:{ if(this.eyeX < 18){ this.eyeX += 2; } this.sword.targ = { x: 30, y: -35, r: 15 }; this.shield.targ = { x: -20, y: -45, r: 15 }; }break; case 300:{ if(this.eyeX < 8){ this.eyeX += 2; } else if(this.eyeX > 8){ this.eyeX -= 2; } this.sword.targ = { x: -10, y: -35, r: 30 }; this.shield.targ = { x: 25, y: -55, r: 10 }; }break; } // move the sword and shield positions towards their target positions if(Math.abs(this.sword.x-this.sword.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.sword.x = lerp(this.sword.x, this.sword.targ.x, 0.8); } if(Math.abs(this.sword.y-this.sword.targ.y) < 5){ this.sword.y = this.sword.targ.y; } else{ this.sword.y = lerp(this.sword.y, this.sword.targ.y, 0.3); } if(Math.abs(this.shield.x-this.shield.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.shield.x = lerp(this.shield.x, this.shield.targ.x, 0.3); } if(Math.abs(this.shield.y-this.shield.targ.y) < 5){ this.shield.y = this.shield.targ.y; } else{ this.shield.y = lerp(this.shield.y, this.shield.targ.y, 0.3); } if(this.sword.r < this.sword.targ.r){ this.sword.r += 5; } else if(this.sword.r > this.sword.targ.r){ this.sword.r -= 5; } if(this.shield.r < this.shield.targ.r){ this.shield.r += 5; } else if(this.shield.r > this.shield.targ.r){ this.shield.r -= 5; } } else if(this.action === "attack"){ switch(this.r){ case 0:{ if(!this.sword.slash){ this.sword.x = -30; this.sword.y = -55; this.sword.r -= 5; if(this.sword.r <= 15){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 20; } }break; case 60:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -55; this.sword.r += 10; if(this.sword.r >= 35){ this.sword.slash = true; } } else{ this.sword.x++; this.sword.y++; this.sword.r -= 15; } }break; case 120:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -70; this.sword.r += 10; if(this.sword.r >= 20){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r -= 15; } }break; case 180:{ if(!this.sword.slash){ this.sword.x = 30; this.sword.y = -55; this.sword.r -= 10; if(this.sword.r <= -90){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r += 15; } }break; case 240:{ if(!this.sword.slash){ this.sword.x = 35; this.sword.y = -60; this.sword.r -= 10; if(this.sword.r <= -35){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 15; } }break; case 300:{ if(!this.sword.slash){ this.sword.x = 10; this.sword.y = -45; this.sword.r -= 10; if(this.sword.r <= -20){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y++; this.sword.r += 15; } }break; } } }; Player.prototype.draw = function(){ ctx.save(); ctx.translate(this.x, this.y); // the shadow fill(0, 100); ellipse(0, 0, 80, 30); // the right hand if(this.r > 0 \|\| this.r < 240){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(180); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.bezierCurveTo(-5, -50, -5, -80, 0, -100); ctx.bezierCurveTo(5, -80, 5, -50, 5, -10); ctx.fill(); fill(128, 72, 0); ellipse(0, 11, 8, 8); ctx.fillRect(-10, -12.5, 20, 5); ellipse(-10, -10, 5, 5); ellipse(10, -10, 5, 5); fill(145, 121, 60); ellipse(0, 0, 20, 20); ctx.restore(); } // the left hand if(this.r > 120){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(94, 50, 0); ctx.beginPath(); ctx.moveTo(-25, -25); ctx.bezierCurveTo(-10, -32, 10, -32, 25, -25); ctx.bezierCurveTo(25, -5, 25, 20, 0, 40); ctx.bezierCurveTo(-25, 20, -25, -5, -25, -25); ctx.fill(); fill(145, 121, 60); ellipse(0, 0, 20, 20); ctx.restore(); } // the body fill(120); ctx.beginPath(); ctx.moveTo(-30, -20); ctx.bezierCurveTo(-30, -50, -20, -80, 0, -80); ctx.bezierCurveTo(20, -80, 30, -50, 30, -20); ctx.bezierCurveTo(20, -10, -20, -10, -30, -20); ctx.fill(); // the belt fill(128, 72, 0); ctx.beginPath(); ctx.moveTo(-29, -35); ctx.bezierCurveTo(-20, -25, 20, -25, 29, -35); ctx.lineTo(28, -40); ctx.bezierCurveTo(20, -30, -20, -30, -28, -40); ctx.fill(); // the head fill(145, 121, 60); ellipse(0, -105, 40, 40); // the helmet fill(120); ctx.beginPath(); ctx.moveTo(-20, -105); ctx.bezierCurveTo(-20, -110, -20, -130, 0, -140); ctx.bezierCurveTo(20, -130, 20, -110, 20, -105); ctx.fill(); // the eyes if(this.r !== 180){ fill(0); if(this.eyeX > -13){ ellipse(this.eyeX-5, -102, 3, 3); } if(this.eyeX < 13){ ellipse(this.eyeX+5, -102, 3, 3); } } // the left hand if(this.r < 180){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(145, 121, 60); ellipse(0, 0, 20, 20); fill(94, 50, 0); ctx.beginPath(); ctx.moveTo(-25, -25); ctx.bezierCurveTo(-10, -32, 10, -32, 25, -25); ctx.bezierCurveTo(25, -5, 25, 20, 0, 40); ctx.bezierCurveTo(-25, 20, -25, -5, -25, -25); ctx.fill(); ctx.restore(); } // the right hand if(this.r < 60 \|\| this.r > 180){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(180); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.bezierCurveTo(-5, -50, -5, -80, 0, -100); ctx.bezierCurveTo(5, -80, 5, -50, 5, -10); ctx.fill(); fill(128, 72, 0); ellipse(0, 11, 8, 8); ctx.fillRect(-10, -12.5, 20, 5); ellipse(-10, -10, 5, 5); ellipse(10, -10, 5, 5); fill(145, 121, 60); ellipse(0, 0, 20, 20); ctx.restore(); } // the health bar fill(0); ctx.fillRect(-50, -160, 100, 5); if(this.health > 0){ fill(200, 0, 0); ctx.fillRect(-50, -160, this.health, 5) } ctx.restore(); }; var player = new Player(225, 275); </script> <!-- enemies --> <script> var enemies = []; var Goblin = function(x, y){ // cartesian coordinates this.x = x; this.y = y; // target coordinates this.targ = { x: x, y: y }; // original coordinates this.org = { x: x, y: y }; // angle of rotation--must be an integer multiple of 60 this.r = 0; // combat stats this.type = "goblin"; this.health = 50; this.damage = 8; this.speed = 0.2; this.visualRange = 2; // position on the map this.row = 0; this.col = 0; // original coordinates this.posX = x; this.posY = y; // what the goblin is doing this.action = "stand"; // sword hand this.sword = { x: -30, y: -40, r: 40, slash: false, targ: { x: -30, y: -40, r: 40 } }; // shield hand this.shield = { x: 40, y: -50, r: -10, targ: { x: 40, y: -50, r: -10 } }; // eyes this.eyeX = 0; }; Goblin.prototype.move = function(){ // if the goblin's not moving, set the original coordinates if(this.targ.x === this.x && this.targ.y === this.y){ this.org.x = this.x; this.org.y = this.y; } // set the goblin's row and column var mapPos = findMapPos(this.org.x, this.org.y); this.row = mapPos.row; this.col = mapPos.col; this.hex = (this.action === "attack") ? findPos(this.org.x, this.org.y) : findPos(this.x, this.y); // none of this should happen is the goblin is dead if(this.health > 0){ // whether the goblin can see the player var seePlayer = false; // the angle to the player var theta = Math.round(270+Math.atan2(player.org.y-this.y, (player.org.x-this.x)oneOverSqrt3)180/Math.PI)%360; // the distance to the player var distSq = Math.round(Math.pow((player.targ.x-this.x)oneOverSqrt3, 2)+Math.pow(player.targ.y-this.y, 2)); if(player.health > 0 && (Math.abs(theta-this.r) <= 60 \|\| 360-Math.abs(theta-this.r) <= 60) && distSq <= Math.pow(this.visualRange100, 2)){ seePlayer = true; } // if the goblin can see the player, and is not already moving... if(seePlayer && this.targ.x === this.x && this.targ.y === this.y){ /* If the goblin can move directly toward the player (they're in the same diagonal and there's nothing in the way), then set the target one space towards the player. / if(theta%60 === 0){ var slope = findSlope(theta); var pos = findMapPos(this.x+slope.x, this.y+slope.y); if(isFree(pos.row, pos.col)){ this.targ.x = this.x+slope.x; this.targ.y = this.y+slope.y; this.r = theta; } else if(pos.row >= 0 && pos.row < gridMap.length && gridMap[pos.row][pos.col] === "w"){ this.r = theta; } } / If the goblin can't move directly toward the player, then, if one of the two possible paths is blocked, take the other, otherwise take the first one. / else if(theta%30 === 0){ var slope1 = findSlope((theta+30)%360); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var slope2 = findSlope((theta+330)%360); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); if(isFree(pos1.row, pos1.col)){ this.targ.x = this.x+slope1.x; this.targ.y = this.y+slope1.y; this.r = (theta+30)%360; } else if(isFree(pos2.row, pos2.col)){ this.targ.x = this.x+slope2.x; this.targ.y = this.y+slope2.y; this.r = (theta+330)%360; } else if(pos1.row >= 0 && pos1.row < gridMap.length && gridMap[pos1.row][pos1.col] === "w"){ this.r = (theta+30)%360; } else if(pos2.row >= 0 && pos2.row < gridMap.length && gridMap[pos2.row][pos2.col] === "w"){ this.r = (theta+330)%360; } } // if the player is on the target square, attack if(this.targ.x !== this.x \|\| this.targ.y !== this.y){ if(player.targ.x === this.targ.x && player.targ.y === this.targ.y){ this.action = "attack"; } } } // if the goblin is moving... else{ var row = findMapPos(this.targ.x, this.targ.y).row; var col = findMapPos(this.targ.x, this.targ.y).col; // if it's not attacking... if(this.action === "stand"){ // if the player has stolen your spot, go back if(player.x === this.targ.x && player.y === this.targ.y \|\| player.org.x === this.targ.x && player.org.y === this.targ.y){ this.targ.x = this.org.x; this.targ.y = this.org.y; } // move towards the target hex this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); // if they're close enough, set the coordinates to the target coordinates if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; } } // if the goblin is attacking... else if(this.action === "attack"){ // the distance to the target point var distSq = Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2); // if you're close enough to the target point, bounce back if(distSq < Math.pow(50, 2)){ // if the player is on the target point, the player takes some damage if(matchHex(player, this.targ) \|\| (player.action === "attack" \|\| matchHex(player.org, player.targ)) && matchHex(player.org, this.targ)){ player.health -= this.damagecomputeDmg(this.r, player.r); } this.targ.x = this.org.x; this.targ.y = this.org.y; // you're not attacking any more this.action = "stand"; } // once you've lifted your sword, you can move towards the target position if(this.sword.slash){ this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); } } } } }; Goblin.prototype.update = function(){ if(this.action === "stand"){ if(this.sword.slash){ this.sword.slash = false; } // the hand positions will be different for each possible value of this.r switch(this.r){ case 0:{ if(this.eyeX !== 0){ this.eyeX -= 2Math.abs(this.eyeX)/this.eyeX; } this.sword.targ = { x: -30, y: -40, r: 40 }; this.shield.targ = { x: 40, y: -50, r: -10 }; }break; case 60:{ if(this.eyeX > -8){ this.eyeX -= 2; } else if(this.eyeX < -8){ this.eyeX += 2; } this.sword.targ = { x: -30, y: -35, r: -15 }; this.shield.targ = { x: 20, y: -45, r: -10 }; }break; case 120:{ if(this.eyeX > -18){ this.eyeX -= 2; } this.sword.targ = { x: -25, y: -45, r: -30 }; this.shield.targ = { x: -25, y: -45, r: 5 }; }break; case 180:{ this.sword.targ = { x: 30, y: -40, r: -40 }; this.shield.targ = { x: -40, y: -50, r: 10 }; }break; case 240:{ if(this.eyeX < 18){ this.eyeX += 2; } this.sword.targ = { x: 30, y: -35, r: 15 }; this.shield.targ = { x: -20, y: -45, r: 15 }; }break; case 300:{ if(this.eyeX < 8){ this.eyeX += 2; } else if(this.eyeX > 8){ this.eyeX -= 2; } this.sword.targ = { x: -10, y: -35, r: 30 }; this.shield.targ = { x: 25, y: -55, r: 10 }; }break; } // move the sword and shield positions towards their target positions if(Math.abs(this.sword.x-this.sword.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.sword.x = lerp(this.sword.x, this.sword.targ.x, 0.3); } if(Math.abs(this.sword.y-this.sword.targ.y) < 5){ this.sword.y = this.sword.targ.y; } else{ this.sword.y = lerp(this.sword.y, this.sword.targ.y, 0.3); } if(Math.abs(this.shield.x-this.shield.targ.x) < 5){ this.shield.x = this.shield.targ.x; } else{ this.shield.x = lerp(this.shield.x, this.shield.targ.x, 0.3); } if(Math.abs(this.shield.y-this.shield.targ.y) < 5){ this.shield.y = this.shield.targ.y; } else{ this.shield.y = lerp(this.shield.y, this.shield.targ.y, 0.3); } if(this.sword.r !== this.sword.targ.r){ this.sword.r = this.sword.targ.r; } } else if(this.action === "attack"){ switch(this.r){ case 0:{ if(!this.sword.slash){ this.sword.x = -30; this.sword.y = -55; this.sword.r -= 5; if(this.sword.r <= 15){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 20; } }break; case 60:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -55; this.sword.r += 10; if(this.sword.r >= 35){ this.sword.slash = true; } } else{ this.sword.x++; this.sword.y++; this.sword.r -= 15; } }break; case 120:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -70; this.sword.r += 10; if(this.sword.r >= 20){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r -= 15; } }break; case 180:{ if(!this.sword.slash){ this.sword.x = 30; this.sword.y = -55; this.sword.r -= 10; if(this.sword.r <= -90){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r += 15; } }break; case 240:{ if(!this.sword.slash){ this.sword.x = 35; this.sword.y = -60; this.sword.r -= 10; if(this.sword.r <= -35){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 15; } }break; case 300:{ if(!this.sword.slash){ this.sword.x = 10; this.sword.y = -45; this.sword.r -= 10; if(this.sword.r <= -20){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y++; this.sword.r += 15; } }break; } } }; Goblin.prototype.draw = function(){ ctx.save(); ctx.translate(this.x, this.y); // the shadow fill(0, 100); ellipse(0, 0, 80, 30); // the right hand if(this.r > 0 \|\| this.r < 240){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(80, 0, 0); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.bezierCurveTo(-5, -50, -5, -80, 0, -100); ctx.bezierCurveTo(5, -80, 5, -50, 5, -10); ctx.fill(); fill(0); ellipse(0, 11, 8, 8); ctx.fillRect(-10, -12.5, 20, 5); ellipse(-10, -10, 5, 5); ellipse(10, -10, 5, 5); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the left hand if(this.r > 120){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the body fill(133, 80, 7); ctx.beginPath(); ctx.moveTo(-25, -20); ctx.bezierCurveTo(-25, -50, -20, -80, 0, -80); ctx.bezierCurveTo(20, -80, 25, -50, 25, -20); ctx.bezierCurveTo(20, -10, -20, -10, -25, -20); ctx.fill(); // the belt fill(50); ctx.beginPath(); ctx.moveTo(-24, -35); ctx.bezierCurveTo(-20, -25, 20, -25, 24, -35); ctx.lineTo(23, -40); ctx.bezierCurveTo(20, -30, -20, -30, -23, -40); ctx.fill(); // the head fill(87, 143, 3); ellipse(0, -105, 40, 40); / // the ears if(this.r !== 120 && this.r !== 240){ ctx.beginPath(); ctx.moveTo(-20, -105); ctx.lineTo(-30, -125); ctx.lineTo(-15, -110); ctx.lineTo(15, -110); ctx.lineTo(30, -125); ctx.lineTo(20, -105); ctx.fill(); } else{ fill(61, 138, 3); ctx.beginPath(); ctx.moveTo(-5, -105); ctx.lineTo((180-this.r)/30, -135); ctx.lineTo(5, -105); ctx.fill(); ellipse(0, -105, 10, 10); } / // the eyes if(this.r !== 180){ fill(200, 200, 0); if(this.eyeX > -13){ ellipse(this.eyeX-5, -105, 4, 4); } if(this.eyeX < 13){ ellipse(this.eyeX+5, -105, 4, 4); } } // the left hand if(this.r < 180){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the right hand if(this.r < 60 \|\| this.r > 180){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(80, 0, 0); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.bezierCurveTo(-5, -50, -5, -80, 0, -100); ctx.bezierCurveTo(5, -80, 5, -50, 5, -10); ctx.fill(); fill(0); ellipse(0, 11, 8, 8); ctx.fillRect(-10, -12.5, 20, 5); ellipse(-10, -10, 5, 5); ellipse(10, -10, 5, 5); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the health bar fill(0); ctx.fillRect(-50, -140, 100, 5); if(this.health > 0){ fill(200, 0, 0); ctx.fillRect(-50, -140, this.health2, 5); } ctx.restore(); }; var Troll = function(x, y){ // cartesian coordinates this.x = x; this.y = y; // target coordinates this.targ = { x: x, y: y }; // original coordinates this.org = { x: x, y: y }; // angle of rotation--must be an integer multiple of 60 this.r = 0; // combat stats this.type = "troll"; this.health = 150; this.damage = 20; this.speed = 0.1; this.visualRange = 2; this.reactionTime = 8; // reaction this.react = 0; this.reactR = this.r; // position on the map this.row = 0; this.col = 0; // original coordinates this.posX = x; this.posY = y; // what the troll is doing this.action = "stand"; // sword hand this.sword = { x: -30, y: -40, r: 40, slash: false, targ: { x: -30, y: -40, r: 40 } }; // shield hand this.shield = { x: 40, y: -50, r: -10, targ: { x: 40, y: -50, r: -10 } }; // eyes this.eyeX = 0; }; Troll.prototype.move = function(){ // if the troll's not moving, set the original coordinates if(this.targ.x === this.x && this.targ.y === this.y){ this.org.x = this.x; this.org.y = this.y; if(this.react > 0){ this.react--; if(this.react === 0){ this.r = this.reactR; } } } // set the goblin's row and column var mapPos = findMapPos(this.org.x, this.org.y); this.row = mapPos.row; this.col = mapPos.col; this.hex = (this.action === "attack") ? findPos(this.org.x, this.org.y) : findPos(this.x, this.y); // none of this should happen is the goblin is dead if(this.health > 0){ // whether the goblin can see the player var seePlayer = false; // the angle to the player var theta = Math.round(270+Math.atan2(player.org.y-this.y, (player.org.x-this.x)oneOverSqrt3)180/Math.PI)%360; // the distance to the player var distSq = Math.round(Math.pow((player.targ.x-this.x)oneOverSqrt3, 2)+Math.pow(player.targ.y-this.y, 2)); if(player.health > 0 && (Math.abs(theta-this.r) <= 60 \|\| 360-Math.abs(theta-this.r) <= 60) && distSq <= Math.pow(this.visualRange100, 2)){ seePlayer = true; } // if the goblin can see the player, and is not already moving... if(seePlayer && this.targ.x === this.x && this.targ.y === this.y){ /* If the goblin can move directly toward the player (they're in the same diagonal and there's nothing in the way), then set the target one space towards the player. / if(theta%60 === 0){ var slope = findSlope(theta); var pos = findMapPos(this.x+slope.x, this.y+slope.y); if(isFree(pos.row, pos.col)){ this.targ.x = this.x+slope.x; this.targ.y = this.y+slope.y; this.r = theta; } else if(pos.row >= 0 && pos.row < gridMap.length && gridMap[pos.row][pos.col] === "w"){ this.r = theta; } } / If the goblin can't move directly toward the player, then, if one of the two possible paths is blocked, take the other, otherwise take the first one. / else if(theta%30 === 0){ var slope1 = findSlope((theta+30)%360); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var slope2 = findSlope((theta+330)%360); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); if(isFree(pos1.row, pos1.col)){ this.targ.x = this.x+slope1.x; this.targ.y = this.y+slope1.y; this.r = (theta+30)%360; } else if(isFree(pos2.row, pos2.col)){ this.targ.x = this.x+slope2.x; this.targ.y = this.y+slope2.y; this.r = (theta+330)%360; } else if(pos1.row >= 0 && pos1.row < gridMap.length && gridMap[pos1.row][pos1.col] === "w"){ this.r = (theta+30)%360; } else if(pos2.row >= 0 && pos2.row < gridMap.length && gridMap[pos2.row][pos2.col] === "w"){ this.r = (theta+330)%360; } } // if the player is on the target square, attack if(this.targ.x !== this.x \|\| this.targ.y !== this.y){ if(player.org.x === this.targ.x && player.org.y === this.targ.y){ this.action = "attack"; } } } // if the goblin is moving... else{ var row = findMapPos(this.targ.x, this.targ.y).row; var col = findMapPos(this.targ.x, this.targ.y).col; // if it's not attacking... if(this.action === "stand"){ // if the player has stolen your spot, go back if(player.x === this.targ.x && player.y === this.targ.y){ this.targ.x = this.org.x; this.targ.y = this.org.y; } // move towards the target hex this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); // if they're close enough, set the coordinates to the target coordinates if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; } } // if the goblin is attacking... else if(this.action === "attack"){ // the distance to the target point var distSq = Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2); // if you're close enough to the target point, bounce back if(distSq < Math.pow(50, 2)){ // if the player is on the target point, the player takes some damage if(matchHex(player, this.targ) \|\| (player.action === "attack" \|\| matchHex(player.org, player.targ)) && matchHex(player.org, this.targ)){ player.health -= this.damagecomputeDmg(this.r, player.r); } this.targ.x = this.org.x; this.targ.y = this.org.y; // you're not attacking any more this.action = "stand"; } // once you've lifted your sword, you can move towards the target position if(this.sword.slash){ this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); } } } } }; Troll.prototype.update = function(){ if(this.action === "stand"){ if(this.sword.slash){ this.sword.slash = false; } // the hand positions will be different for each possible value of this.r switch(this.r){ case 0:{ if(this.eyeX !== 0){ this.eyeX -= 2Math.abs(this.eyeX)/this.eyeX; } this.sword.targ = { x: -30, y: -40, r: 40 }; this.shield.targ = { x: 40, y: -50, r: -10 }; }break; case 60:{ if(this.eyeX > -8){ this.eyeX -= 2; } else if(this.eyeX < -8){ this.eyeX += 2; } this.sword.targ = { x: -30, y: -35, r: -15 }; this.shield.targ = { x: 20, y: -45, r: -10 }; }break; case 120:{ if(this.eyeX > -18){ this.eyeX -= 2; } this.sword.targ = { x: -25, y: -45, r: -30 }; this.shield.targ = { x: -25, y: -45, r: 5 }; }break; case 180:{ this.sword.targ = { x: 30, y: -40, r: -40 }; this.shield.targ = { x: -40, y: -50, r: 10 }; }break; case 240:{ if(this.eyeX < 18){ this.eyeX += 2; } this.sword.targ = { x: 30, y: -35, r: 15 }; this.shield.targ = { x: -20, y: -45, r: 15 }; }break; case 300:{ if(this.eyeX < 8){ this.eyeX += 2; } else if(this.eyeX > 8){ this.eyeX -= 2; } this.sword.targ = { x: -10, y: -35, r: 30 }; this.shield.targ = { x: 25, y: -55, r: 10 }; }break; } // move the sword and shield positions towards their target positions if(Math.abs(this.sword.x-this.sword.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.sword.x = lerp(this.sword.x, this.sword.targ.x, 0.3); } if(Math.abs(this.sword.y-this.sword.targ.y) < 5){ this.sword.y = this.sword.targ.y; } else{ this.sword.y = lerp(this.sword.y, this.sword.targ.y, 0.3); } if(Math.abs(this.shield.x-this.shield.targ.x) < 5){ this.shield.x = this.shield.targ.x; } else{ this.shield.x = lerp(this.shield.x, this.shield.targ.x, 0.3); } if(Math.abs(this.shield.y-this.shield.targ.y) < 5){ this.shield.y = this.shield.targ.y; } else{ this.shield.y = lerp(this.shield.y, this.shield.targ.y, 0.3); } if(this.sword.r !== this.sword.targ.r){ this.sword.r = this.sword.targ.r; } } else if(this.action === "attack"){ switch(this.r){ case 0:{ if(!this.sword.slash){ this.sword.x = -30; this.sword.y = -55; this.sword.r -= 3; if(this.sword.r <= 15){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 10; } }break; case 60:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -55; this.sword.r += 5; if(this.sword.r >= 35){ this.sword.slash = true; } } else{ this.sword.x++; this.sword.y++; this.sword.r -= 8; } }break; case 120:{ if(!this.sword.slash){ this.sword.x = -35; this.sword.y = -70; this.sword.r += 5; if(this.sword.r >= 20){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r -= 8; } }break; case 180:{ if(!this.sword.slash){ this.sword.x = 30; this.sword.y = -55; this.sword.r -= 5; if(this.sword.r <= -90){ this.sword.slash = true; } } else{ this.sword.x += 5; this.sword.y += 5; this.sword.r += 8; } }break; case 240:{ if(!this.sword.slash){ this.sword.x = 35; this.sword.y = -60; this.sword.r -= 5; if(this.sword.r <= -35){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y += 5; this.sword.r += 8; } }break; case 300:{ if(!this.sword.slash){ this.sword.x = 10; this.sword.y = -45; this.sword.r -= 5; if(this.sword.r <= -20){ this.sword.slash = true; } } else{ this.sword.x -= 5; this.sword.y++; this.sword.r += 8; } }break; } } }; Troll.prototype.draw = function(){ ctx.save(); ctx.translate(this.x, this.y); // the shadow fill(0, 100); ellipse(0, 0, 95, 40); // the right hand if(this.r > 0 \|\| this.r < 240){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(110, 80, 20); ctx.beginPath(); ctx.moveTo(-3, 20); ctx.lineTo(-5, -20); ctx.bezierCurveTo(-25, -120, 25, -120, 5, -20); ctx.lineTo(3, 20); ctx.fill(); fill(97, 123, 13); ellipse(0, 0, 20, 20); ctx.restore(); } // the left hand if(this.r > 120){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(97, 123, 13); ellipse(0, 0, 20, 20); ctx.restore(); } // the body fill(90); ctx.beginPath(); ctx.moveTo(-30, -20); ctx.bezierCurveTo(-30, -50, -25, -90, 0, -90); ctx.bezierCurveTo(25, -90, 35, -50, 30, -20); ctx.bezierCurveTo(30, -5, -30, -5, -30, -20); ctx.fill(); // the belt fill(50); ctx.beginPath(); ctx.moveTo(-31, -35); ctx.bezierCurveTo(-20, -25, 20, -25, 31, -35); ctx.lineTo(31, -40); ctx.bezierCurveTo(20, -30, -20, -30, -31, -40); ctx.fill(); // the head fill(97, 123, 13); ellipse(0, -115, 45, 40); // the eyes if(this.r !== 180){ fill(200, 200, 180); if(this.eyeX > -13){ ellipse(this.eyeX-7, -115, 4, 4); } if(this.eyeX < 13){ ellipse(this.eyeX+7, -115, 4, 4); } } // the left hand if(this.r < 180){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(97, 123, 13); ellipse(0, 0, 20, 20); ctx.restore(); } // the right hand if(this.r < 60 \|\| this.r > 180){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(110, 80, 20); ctx.beginPath(); ctx.moveTo(-3, 20); ctx.lineTo(-5, -20); ctx.bezierCurveTo(-25, -120, 25, -120, 5, -20); ctx.lineTo(3, 20); ctx.fill(); fill(97, 123, 13); ellipse(0, 0, 20, 20); ctx.restore(); } // the health bar fill(0); ctx.fillRect(-50, -145, 100, 5); if(this.health > 0){ fill(200, 0, 0); ctx.fillRect(-50, -145, this.health2/3, 5); } ctx.restore(); }; var Archer = function(x, y){ // cartesian coordinates this.x = x; this.y = y; // target coordinates this.targ = { x: x, y: y }; // original coordinates this.org = { x: x, y: y }; // angle of rotation--must be an integer multiple of 30 this.r = 0; // combat stats this.type = "archer"; this.health = 10; this.damage = 15; this.speed = 0.2; this.visualRange = 3; this.attackRange = 2; this.reload = 20; // position on the map this.row = 0; this.col = 0; // original coordinates this.posX = x; this.posY = y; // what the goblin is doing this.action = "stand"; // sword hand this.sword = { x: -30, y: -40, r: 40, s: 1, slash: false, targ: { x: -30, y: -40, r: 40, s: 1 } }; // shield hand this.shield = { x: 40, y: -50, r: -10, targ: { x: 40, y: -50, r: -10 } }; // arrow this.arrow = { on: false, x: x, y: y, r: this.r, t: 0 // timer }; // eyes this.eyeX = 0; }; Archer.prototype.move = function(){ // if the archer's not moving, set the original coordinates if(this.targ.x === this.x && this.targ.y === this.y){ this.org.x = this.x; this.org.y = this.y; } // set the archer's row and column var mapPos = findMapPos(this.org.x, this.org.y); this.row = mapPos.row; this.col = mapPos.col; this.hex = (this.action === "attack") ? findPos(this.org.x, this.org.y) : findPos(this.x, this.y); // none of this should happen is the archer is dead if(this.health > 0){ // whether the archer can see the player var seePlayer = false; // the angle to the player var theta = Math.round(270+Math.atan2(player.y-this.y, (player.x-this.x)oneOverSqrt3)180/Math.PI)%360; // the distance to the player var distSq = Math.round(Math.pow((player.targ.x-this.x)oneOverSqrt3, 2)+Math.pow(player.targ.y-this.y, 2)); if(player.health > 0 && (Math.abs(theta-this.r) <= 60 \|\| 360-Math.abs(theta-this.r) <= 90) && distSq <= Math.pow(this.visualRange100, 2) \|\| player.health > 0 && distSq <= Math.pow(100, 2)){ seePlayer = true; } // if the archer is attacking... if(this.action === "attack"){ if(!this.arrow.on && this.arrow.t === 0){ this.arrow.r = theta; this.arrow.on = true; } var arrowDistSq = Math.pow(oneOverSqrt3(this.arrow.x-this.x), 2)+Math.pow(this.arrow.y-this.y, 2); var playerDistSq = Math.pow(oneOverSqrt3(this.arrow.x-player.x), 2)+Math.pow(this.arrow.y-player.y, 2); if(arrowDistSq < Math.pow(200, 2)){ var slope = { x: Math.cos(angle(this.arrow.r+90))/oneOverSqrt3, y: Math.sin(angle(this.arrow.r+90)) }; this.arrow.x += 30slope.x; this.arrow.y += 30slope.y; } else{ if(this.arrow.t === 0){ player.health -= this.damage; } this.arrow.on = false; this.arrow.t++; if(this.arrow.t > this.reload){ this.arrow.t = 0; this.arrow.x = this.x; this.arrow.y = this.y; this.arrow.r = this.r; this.action = "stand"; } } } // otherwise, if the archer can see the player and is not already moving... else if(seePlayer && this.targ.x === this.x && this.targ.y === this.y){ // if the player is too far away... if(distSq > Math.pow(100this.attackRange, 2)){ // if the player is a straight line away if(theta%60 === 0){ var slope = findSlope(theta); var pos1 = findMapPos(this.x+slope.x, this.y+slope.y); var pos2 = findMapPos(this.x+slope.x2, this.y+slope.y2); if(isFree(pos1.row, pos1.col) && (isFree(pos2.row, pos2.col) \|\| gridMap[pos2.row][pos2.col] === "w")){ this.targ.x = this.x+slope.x; this.targ.y = this.y+slope.y; } } // otherwise... else{ / There are two possible (adjacent) tiles where the player could be. There are also two tiles to which the archer could move where he could hit the player, no matter which of the former tiles the player is occupying. So if either one is free, the archer can move there. But there are three more tiles between those and the ones the player might be occupying, and if enough of those are full then the archer can't see the player and won't be able to hit him. pos3, pos4, and pos5 represent these tiles, and so the archer will only move to one of the free tiles if a certain combination of these tiles is free. / var theta1 = Math.floor(theta/60)60; var theta2 = (Math.ceil(theta/60)60)%360; var slope1 = findSlope(theta1); var slope2 = findSlope(theta2); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); var pos3 = findMapPos(this.x+slope1.x2, this.y+slope1.y2); var pos4 = findMapPos(this.x+slope1.x+slope2.x, this.y+slope1.y+slope2.y); var pos5 = findMapPos(this.x+slope2.x2, this.y+slope2.y2); if(theta%60 < 30 && isFree(pos1.row, pos1.col) && (isFree(pos4.row, pos4.col) \|\| gridMap[pos4.row][pos4.col] === "w" \|\| isFree(pos3.row, pos3.col) \|\| gridMap[pos3.row][pos3.col] === "w")){ this.targ.x = this.x+slope1.x; this.targ.y = this.y+slope1.y; } else if(theta%60 > 30 && isFree(pos2.row, pos2.col) && (isFree(pos4.row, pos4.col) \|\| gridMap[pos4.row][pos4.col] === "w" \|\| isFree(pos5.row, pos5.col) \|\| gridMap[pos5.row][pos5.col] === "w")){ this.targ.x = this.x+slope2.x; this.targ.y = this.y+slope2.y; } } } // if the archer can shoot the player, do so else if(distSq <= Math.pow(100this.attackRange, 2) && distSq > Math.pow(100, 2)){ // if the player is a straight line away, and the intervening hex is free (or water), attack if(theta%60 === 0){ var slope = findSlope(theta); var pos = findMapPos(this.x+slope.x, this.y+slope.y); if(isFree(pos.row, pos.col) \|\| gridMap[pos.row][pos.col] === "w"){ this.r = theta; this.action = "attack"; } } // otherwise, check both adjacent tiles, and attack if either one is free (or is water) else if(theta%30 === 0){ var slope1 = findSlope((theta+30)%360); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var slope2 = findSlope((theta+330)%360); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); if(isFree(pos1.row, pos1.col) \|\| gridMap[pos1.row][pos1.col] === "w"){ this.action = "attack"; this.r = theta; } else if(isFree(pos2.row, pos2.col) \|\| gridMap[pos2.row][pos2.col] === "w"){ this.action = "attack"; this.r = theta; } } } // if the player is too close, run away else if(distSq < Math.pow(100this.attackRange, 2) && theta%60 === 0){ var theta1 = (120+theta)%360; var theta2 = (180+theta)%360; var theta3 = (240+theta)%360; var slope1 = findSlope(theta1); var slope2 = findSlope(theta2); var slope3 = findSlope(theta3); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); var pos3 = findMapPos(this.x+slope3.x, this.y+slope3.y); if(isFree(pos2.row, pos2.col)){ this.r = theta2; this.targ.x = this.x+slope2.x; this.targ.y = this.y+slope2.y; } else if(isFree(pos1.row, pos1.col)){ this.r = theta1; this.targ.x = this.x+slope1.x; this.targ.y = this.y+slope1.y; } else if(isFree(pos3.row, pos3.col)){ this.r = theta3; this.targ.x = this.x+slope3.x; this.targ.y = this.y+slope3.y; } else{ this.r = theta; } } } // if the archer is moving... else{ // if the player has stolen your spot, go back if(player.x === this.targ.x && player.y === this.targ.y \|\| player.org.x === this.targ.x && player.org.y === this.targ.y){ this.targ.x = this.org.x; this.targ.y = this.org.y; } // move towards the target hex this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); // if they're close enough, set the coordinates to the target coordinates if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; this.arrow.x = this.x; this.arrow.y = this.y; this.arrow.r = this.r; } } } }; Archer.prototype.update = function(){ if(this.sword.slash){ this.sword.slash = false; } // the hand positions will be different for each possible value of this.r switch(this.r){ case 0:{ this.eyeX = 0; this.sword.targ = { x: -2, y: -40, r: 0, s: 0 }; this.shield.targ = { x: 5, y: -70, r: -10 }; }break; case 30:{ this.eyeX = -2; this.sword.targ = { x: -5, y: -30, r: -5, s: 0.3 }; this.shield.targ = { x: 10, y: -50, r: 10 }; }break; case 60:{ this.eyeX = -8; this.sword.targ = { x: -40, y: -30, r: -10, s: 0.7 }; this.shield.targ = { x: -12, y: -50, r: -10 }; }break; case 90:{ this.eyeX = -8; this.sword.targ = { x: -45, y: -45, r: 0, s: 0.8 }; this.shield.targ = { x: -5, y: -50, r: -10 }; }break; case 120:{ this.eyeX = -18; this.sword.targ = { x: -40, y: -60, r: 10, s: 0.9 }; this.shield.targ = { x: 5, y: -55, r: 5 }; }break; case 150:{ this.eyeX = -18; this.sword.targ = { x: -35, y: -80, r: 15, s: 0.4 }; this.shield.targ = { x: -15, y: -70, r: 5 }; }break; case 180:{ this.sword.targ = { x: 7, y: -70, r: 0, s: 0 }; this.shield.targ = { x: 10, y: -40, r: -10 }; }break; case 210:{ this.eyeX = 18; this.sword.targ = { x: 50, y: -75, r: -30, s: -0.9 }; this.shield.targ = { x: 15, y: -55, r: 15 }; }break; case 240:{ this.eyeX = 18; this.sword.targ = { x: 50, y: -50, r: -15, s: -0.9 }; this.shield.targ = { x: 12, y: -45, r: 15 }; }break; case 270:{ this.eyeX = 8; this.sword.targ = { x: 45, y: -45, r: 0, s: -0.8 }; this.shield.targ = { x: 5, y: -50, r: 10 }; }break; case 300:{ this.eyeX = 8; this.sword.targ = { x: 45, y: -35, r: 10, s: -0.8 }; this.shield.targ = { x: 15, y: -55, r: 10 }; }break; case 330:{ this.eyeX = 2; this.sword.targ = { x: 15, y: -30, r: 15, s: -0.5 }; this.shield.targ = { x: 0, y: -50, r: -10 }; }break; } // move the sword and shield positions towards their target positions if(Math.abs(this.sword.x-this.sword.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.sword.x = lerp(this.sword.x, this.sword.targ.x, 0.3); } if(Math.abs(this.sword.y-this.sword.targ.y) < 5){ this.sword.y = this.sword.targ.y; } else{ this.sword.y = lerp(this.sword.y, this.sword.targ.y, 0.3); } if(Math.abs(this.shield.x-this.shield.targ.x) < 5){ this.shield.x = this.shield.targ.x; } else{ this.shield.x = lerp(this.shield.x, this.shield.targ.x, 0.3); } if(Math.abs(this.shield.y-this.shield.targ.y) < 5){ this.shield.y = this.shield.targ.y; } else{ this.shield.y = lerp(this.shield.y, this.shield.targ.y, 0.3); } if(this.sword.r !== this.sword.targ.r){ this.sword.r = this.sword.targ.r; } if(this.sword.s !== this.sword.targ.s){ this.sword.s = this.sword.targ.s; } }; Archer.prototype.draw = function(){ // the arrow if(this.arrow.on && Math.cos(angle(this.r)) <= 0){ ctx.save(); ctx.translate(this.arrow.x, this.arrow.y-40); ctx.lineWidth = 2; stroke(0); var slope = { x: Math.cos(angle(this.arrow.r+90))/oneOverSqrt3, y: Math.sin(angle(this.arrow.r+90)) }; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-30slope.x, -30slope.y); ctx.stroke(); ctx.lineWidth = 1; ctx.save(); ctx.rotate(Math.atan2(slope.y, slope.x)-Math.PI/2); fill(0); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-5, -10); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); ctx.restore(); } ctx.save(); ctx.translate(this.x, this.y); // the shadow fill(0, 100); ellipse(0, 0, 80, 30); // the right hand if(this.r >= 180 && this.r <= 210){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); ctx.scale(this.sword.s/Math.abs(this.sword.s), 0.8); stroke(0); ctx.beginPath(); ctx.moveTo(20Math.abs(this.sword.s), -75); ctx.lineTo(20Math.abs(this.sword.s)+(this.arrow.on ? 0 : 20Math.abs(this.sword.s)), -10-15Math.cos(angle(this.r))); ctx.lineTo(20Math.abs(this.sword.s), 55); ctx.stroke(); fill(103, 60, 0); ctx.beginPath(); ctx.moveTo(-5, 0); ctx.bezierCurveTo(0, -40, 5Math.abs(this.sword.s), -60, 25Math.abs(this.sword.s), -80); ctx.bezierCurveTo(10Math.abs(this.sword.s), -60, 5, -40, 5, 0); ctx.bezierCurveTo(5, 20, 10Math.abs(this.sword.s), 40, 25Math.abs(this.sword.s), 60); ctx.bezierCurveTo(5Math.abs(this.sword.s), 40, 0, 20, -5, 0); ctx.fill(); fill(87, 143, 3); ellipse(0, 0, 20, 25); if(!this.arrow.on){ ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(40Math.abs(this.sword.s), -10-15Math.cos(angle(this.r))); ctx.lineTo(-15Math.abs(this.sword.s), -10); ctx.stroke(); if(this.r === 180){ ctx.beginPath(); ctx.moveTo(5, -20); ctx.lineTo(0, 20); ctx.stroke(); } ctx.lineWidth = 1; var slope = { x: Math.cos(angle(this.arrow.r+90))/oneOverSqrt3, y: Math.sin(angle(this.arrow.r+90)) }; ctx.save(); ctx.translate(-15Math.abs(this.sword.s), -10); if(this.r < 180){ // ctx.scale(1, -1); } ctx.rotate(Math.atan2(slope.x, slope.y)+Math.PI/2); fill(0); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-5, -10); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } ctx.restore(); } // the left hand if(this.r > 120){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the body fill(133, 80, 7); ctx.beginPath(); ctx.moveTo(-25, -20); ctx.bezierCurveTo(-25, -50, -20, -80, 0, -80); ctx.bezierCurveTo(20, -80, 25, -50, 25, -20); ctx.bezierCurveTo(20, -10, -20, -10, -25, -20); ctx.fill(); // the belt fill(50); ctx.beginPath(); ctx.moveTo(-24, -35); ctx.bezierCurveTo(-20, -25, 20, -25, 24, -35); ctx.lineTo(23, -40); ctx.bezierCurveTo(20, -30, -20, -30, -23, -40); ctx.fill(); // the head fill(87, 143, 3); ellipse(0, -105, 40, 40); // the eyes if(this.r !== 180){ fill(200, 200, 0); if(this.eyeX > -13){ ellipse(this.eyeX-5, -105, 4, 4); } if(this.eyeX < 13){ ellipse(this.eyeX+5, -105, 4, 4); } } // the left hand if(this.r < 180 \|\| this.r > 210){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(87, 143, 3); ellipse(0, 0, 20, 20); ctx.restore(); } // the right hand if(this.r < 180 \|\| this.r > 210){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); ctx.scale(this.sword.s/Math.abs(this.sword.s), 0.8); stroke(0); ctx.beginPath(); ctx.moveTo(20Math.abs(this.sword.s), -75); ctx.lineTo(20Math.abs(this.sword.s)+(this.arrow.on ? 0 : 20Math.abs(this.sword.s)), -10-15Math.cos(angle(this.r))); ctx.lineTo(20Math.abs(this.sword.s), 55); ctx.stroke(); fill(103, 60, 0); ctx.beginPath(); ctx.moveTo(-5, 0); ctx.bezierCurveTo(0, -40, 5Math.abs(this.sword.s), -60, 25Math.abs(this.sword.s), -80); ctx.bezierCurveTo(10Math.abs(this.sword.s), -60, 5, -40, 5, 0); ctx.bezierCurveTo(5, 20, 10Math.abs(this.sword.s), 40, 25Math.abs(this.sword.s), 60); ctx.bezierCurveTo(5Math.abs(this.sword.s), 40, 0, 20, -5, 0); ctx.fill(); fill(87, 143, 3); ellipse(0, 0, 20, 25); if(!this.arrow.on){ ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(40Math.abs(this.sword.s), -10-15Math.cos(angle(this.r))); ctx.lineTo(-15Math.abs(this.sword.s), -10); ctx.stroke(); if(this.r === 180){ ctx.beginPath(); ctx.moveTo(5, -20); ctx.lineTo(0, 20); ctx.stroke(); } ctx.lineWidth = 1; var slope = { x: Math.cos(angle(this.r+90))/oneOverSqrt3, y: Math.sin(angle(this.r+90)) }; ctx.save(); ctx.translate(-15Math.abs(this.sword.s), -10); if(this.r < 180){ ctx.scale(-1, 1); } ctx.rotate(Math.atan2(slope.x, slope.y)); fill(0); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-5, -10); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } ctx.restore(); } // the health bar fill(0); ctx.fillRect(-50, -140, 100, 5); if(this.health > 0){ fill(200, 0, 0); ctx.fillRect(-50, -140, this.health10, 5); } ctx.restore(); // the arrow if(this.arrow.on && Math.cos(angle(this.r)) > 0){ ctx.save(); ctx.translate(this.arrow.x, this.arrow.y-40); ctx.lineWidth = 2; stroke(0); var slope = { x: Math.cos(angle(this.arrow.r+90))/oneOverSqrt3, y: Math.sin(angle(this.arrow.r+90)) }; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-30slope.x, -30slope.y); ctx.stroke(); ctx.lineWidth = 1; ctx.save(); ctx.rotate(Math.atan2(slope.y, slope.x)-Math.PI/2); fill(0); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-5, -10); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); ctx.restore(); } }; var Boss = function(x, y){ // cartesian coordinates this.x = x; this.y = y; // target coordinates this.targ = { x: x, y: y }; // original coordinates this.org = { x: x, y: y }; // angle of rotation--must be an integer multiple of 30 this.r = 0; // combat stats this.type = "boss"; this.health = 250; this.fistDamage = 15; this.rockDamage = 15; this.speed = 0.1; this.visualRange = 3; this.attackRange = 2; this.reload = 20; this.reactionTime = 5; // reaction this.react = 0; this.reactR = this.r; // position on the map this.row = 0; this.col = 0; // original coordinates this.posX = x; this.posY = y; // what the boss is doing this.action = "stand"; // sword hand this.sword = { x: -30, y: -40, r: 40, slash: false, targ: { x: -30, y: -40, r: 40 } }; // shield hand this.shield = { x: 40, y: -50, r: -10, targ: { x: 40, y: -50, r: -10 } }; // rock this.rock = { on: false, x: x, y: y, r: this.r, t: 0 // timer }; // eyes this.eyeX = 0; }; Boss.prototype.move = function(){ // if the boss isn't moving, set the original coordinates if(this.targ.x === this.x && this.targ.y === this.y){ this.org.x = this.x; this.org.y = this.y; if(this.react > 0){ this.react--; if(this.react === 0){ this.r = this.reactR; } } } // set the boss's row and column var mapPos = findMapPos(this.org.x, this.org.y); this.row = mapPos.row; this.col = mapPos.col; this.hex = (this.action === "attack") ? findPos(this.org.x, this.org.y) : findPos(this.x, this.y); // none of this should happen if the boss is dead if(this.health > 0){ // whether the boss can see the player var seePlayer = false; // the angle to the player var theta = Math.round(270+Math.atan2(player.org.y-this.y, (player.org.x-this.x)oneOverSqrt3)180/Math.PI)%360; // the distance to the player var distSq = Math.round(Math.pow((player.x-this.x)oneOverSqrt3, 2)+Math.pow(player.y-this.y, 2)); if(player.health > 0 && (Math.abs(theta-this.r) <= 60 \|\| 360-Math.abs(theta-this.r) <= 60) && distSq <= Math.pow(this.visualRange100, 2)){ seePlayer = true; } // if the boss is throwing a stone... if(this.action === "throw"){ if(this.sword.slash){ if(!this.rock.on && this.rock.t === 0){ this.rock.r = theta; this.rock.on = true; } } if(this.rock.on \|\| this.rock.t > 0){ var rockDistSq = Math.pow(oneOverSqrt3(this.rock.x-this.x), 2)+Math.pow(this.rock.y-this.y, 2); var playerDistSq = Math.pow(oneOverSqrt3(this.rock.x-player.x), 2)+Math.pow(this.rock.y-player.y, 2); if(rockDistSq < Math.pow(200, 2) && playerDistSq > Math.pow(50, 2)){ var slope = { x: Math.cos(angle(this.rock.r+90))/oneOverSqrt3, y: Math.sin(angle(this.rock.r+90)) }; this.rock.x += 30slope.x; this.rock.y += 30slope.y; } else{ if(playerDistSq <= Math.pow(50, 2) && this.rock.t === 0){ player.health -= this.rockDamage; } this.rock.on = false; this.rock.t++; if(this.rock.t > this.reload){ this.rock.t = 0; this.rock.x = this.x; this.rock.y = this.y; this.rock.r = this.r; this.action = "stand"; } } } } // otherwise, if the boss can see the player and is not already moving... else if(seePlayer && this.targ.x === this.x && this.targ.y === this.y){ // if the player is too far away to hit, move towards him if(distSq > Math.pow(100this.attackRange, 2)){ // if the player is a straight line away if(theta%60 === 0){ var slope = findSlope(theta); var pos1 = findMapPos(this.x+slope.x, this.y+slope.y); var pos2 = findMapPos(this.x+slope.x2, this.y+slope.y2); if(isFree(pos1.row, pos1.col) && (isFree(pos2.row, pos2.col) \|\| gridMap[pos2.row][pos2.col] === "w")){ this.targ.x = this.x+slope.x; this.targ.y = this.y+slope.y; this.r = theta; } } // otherwise... else{ / There are two possible (adjacent) tiles where the player could be. There are also two tiles to which the boss could move where he could hit the player, no matter which of the former tiles the player is occupying. So if either one is free, the boss can move there. But there are three more tiles between those and the ones the player might be occupying, and if enough of those are full then the boss can't see the player and won't be able to hit him. pos3, pos4, and pos5 represent these tiles, and so the archer will only move to one of the free tiles if a certain combination of these tiles is free. / var theta1 = Math.floor(theta/60)60; var theta2 = (Math.ceil(theta/60)60)%360; var slope1 = findSlope(theta1); var slope2 = findSlope(theta2); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); var pos3 = findMapPos(this.x+slope1.x2, this.y+slope1.y2); var pos4 = findMapPos(this.x+slope1.x+slope2.x, this.y+slope1.y+slope2.y); var pos5 = findMapPos(this.x+slope2.x2, this.y+slope2.y2); if(theta%60 < 30 && isFree(pos1.row, pos1.col) && (isFree(pos4.row, pos4.col) \|\| gridMap[pos4.row][pos4.col] === "w" \|\| isFree(pos3.row, pos3.col) \|\| gridMap[pos3.row][pos3.col] === "w")){ this.targ.x = this.x+slope1.x; this.targ.y = this.y+slope1.y; this.r = theta-theta%30; } else if(theta%60 > 30 && isFree(pos2.row, pos2.col) && (isFree(pos4.row, pos4.col) \|\| gridMap[pos4.row][pos4.col] === "w" \|\| isFree(pos5.row, pos5.col) \|\| gridMap[pos5.row][pos5.col] === "w")){ this.targ.x = this.x+slope2.x; this.targ.y = this.y+slope2.y; this.r = theta-theta%30; } } } // otherwise, throw a stone else{ // if the player is two hexes away... if(distSq > Math.pow(100, 2)){ // if the player is a straight line away, and the intervening hex is free (or water), attack if(theta%60 === 0){ var slope = findSlope(theta); var pos = findMapPos(this.x+slope.x, this.y+slope.y); if(isFree(pos.row, pos.col) \|\| gridMap[pos.row][pos.col] === "w"){ this.r = theta; this.action = "throw"; } } // otherwise, check both adjacent tiles, and attack if either one is free (or is water) else if(theta%30 === 0){ var slope1 = findSlope((theta+30)%360); var pos1 = findMapPos(this.x+slope1.x, this.y+slope1.y); var slope2 = findSlope((theta+330)%360); var pos2 = findMapPos(this.x+slope2.x, this.y+slope2.y); if(isFree(pos1.row, pos1.col) \|\| gridMap[pos1.row][pos1.col] === "w"){ this.action = "throw"; this.r = theta; } else if(isFree(pos2.row, pos2.col) \|\| gridMap[pos2.row][pos2.col] === "w"){ this.action = "throw"; this.r = theta; } } } // if the player is one hex away... else{ // this case is a lot easier this.r = theta; this.action = "throw"; } } } // if the boss is moving... else{ // if the player has stolen your spot, go back if(player.x === this.targ.x && player.y === this.targ.y \|\| player.org.x === this.targ.x && player.org.y === this.targ.y){ this.targ.x = this.org.x; this.targ.y = this.org.y; } // move towards the target hex this.x = lerp(this.x, this.targ.x, this.speed); this.y = lerp(this.y, this.targ.y, this.speed); // if they're close enough, set the coordinates to the target coordinates if(Math.pow(this.x-this.targ.x, 2)+Math.pow(this.y-this.targ.y, 2) < 10){ this.x = this.targ.x; this.y = this.targ.y; this.rock.x = this.x; this.rock.y = this.y; this.rock.r = this.r; } } } }; Boss.prototype.update = function(){ if(this.action === "stand"){ if(this.sword.slash){ this.sword.slash = false; } // the hand positions will be different for each possible value of this.r switch(this.r){ case 0:{ this.eyeX = 0; this.sword.targ = { x: -30, y: -40, r: 40 }; this.shield.targ = { x: 30, y: -40, r: -10 }; }break; case 30:{ this.eyeX = -4; this.sword.targ.x = -35; this.sword.targ.y = -45; this.shield.targ.x = 30; this.shield.targ.y = -40; }break; case 60:{ this.eyeX = -8; this.sword.targ = { x: -30, y: -55, r: -15 }; this.shield.targ = { x: 10, y: -50, r: -10 }; }break; case 90:{ this.eyeX = -18; this.sword.targ.x = -25; this.sword.targ.y = -50; this.shield.targ.x = -10; this.shield.targ.y = -45; }break; case 120:{ this.eyeX = -18; this.sword.targ = { x: -10, y: -65, r: 15 }; this.shield.targ = { x: -30, y: -50, r: 15 }; }break; case 150:{ this.sword.targ.x = 25; this.sword.targ.y = -55; this.shield.targ.x = -30; this.shield.targ.y = -45; }break; case 180:{ this.sword.targ = { x: 35, y: -50, r: -40 }; this.shield.targ = { x: -35, y: -50, r: 10 }; }break; case 210:{ this.sword.targ.x = 30; this.sword.targ.y = -45; this.shield.targ.x = -25; this.shield.targ.y = -55; }break; case 240:{ this.eyeX = 18; this.sword.targ = { x: 30, y: -50, r: 15 }; this.shield.targ = { x: 10, y: -65, r: 15 }; }break; case 270:{ this.eyeX = 18; this.sword.targ.x = 10; this.sword.targ.y = -45; this.shield.targ.x = 25; this.shield.targ.y = -50; }break; case 300:{ this.eyeX = 8; this.sword.targ = { x: -10, y: -40, r: -10 }; this.shield.targ = { x: 30, y: -45, r: -15 }; }break; case 330:{ this.eyeX = 4; this.sword.targ.x = -30; this.sword.targ.y = -40; this.shield.targ.x = 35; this.shield.targ.y = -45; }break; } // move the sword and shield positions towards their target positions if(Math.abs(this.sword.x-this.sword.targ.x) < 5){ this.sword.x = this.sword.targ.x; } else{ this.sword.x = lerp(this.sword.x, this.sword.targ.x, 0.3); } if(Math.abs(this.sword.y-this.sword.targ.y) < 5){ this.sword.y = this.sword.targ.y; } else{ this.sword.y = lerp(this.sword.y, this.sword.targ.y, 0.3); } if(Math.abs(this.shield.x-this.shield.targ.x) < 5){ this.shield.x = this.shield.targ.x; } else{ this.shield.x = lerp(this.shield.x, this.shield.targ.x, 0.3); } if(Math.abs(this.shield.y-this.shield.targ.y) < 5){ this.shield.y = this.shield.targ.y; } else{ this.shield.y = lerp(this.shield.y, this.shield.targ.y, 0.3); } if(this.sword.r !== this.sword.targ.r){ this.sword.r = this.sword.targ.r; } } else if(this.action === "attack"){ switch(this.r){ case 0:{ if(!this.sword.slash){ this.sword.y -= 5; this.shield.y -= 5; if(this.sword.y <= -55){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; case 60:{ if(!this.sword.slash){ this.sword.y -= 8; this.shield.y -= 8; if(this.sword.y <= -79){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; case 120:{ if(!this.sword.slash){ this.sword.y -= 8; this.shield.y -= 8; if(this.sword.y <= -89){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; case 180:{ if(!this.sword.slash){ this.sword.y -= 7; this.shield.y -= 7; if(this.sword.y <= -71){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; case 240:{ if(!this.sword.slash){ this.sword.y -= 8; this.shield.y -= 8; if(this.shield.y <= -89){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; case 300:{ if(!this.sword.slash){ this.sword.y -= 8; this.shield.y -= 8; if(this.shield.y <= -79){ this.sword.slash = true; } } else{ this.sword.y += 8; this.shield.y += 8; } }break; } } else if(this.action === "throw"){ switch(this.r){ case 0:{ this.eyeX = 0; if(!this.sword.slash){ this.sword.x += 5; this.sword.y -= 7; if(this.sword.x >= -10){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 30; this.shield.y = -40; this.shield.r = -10; }break; case 30:{ this.eyeX = -4; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= -5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 30; this.shield.y = -40; }break; case 60:{ this.eyeX = -8; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= -5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 10; this.shield.y = -50; this.shield.r = -10; }break; case 90:{ this.eyeX = -18; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= -5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = -10; this.shield.y = -45; }break; case 120:{ this.eyeX = -18; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= -5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = -30; this.shield.y = -50; this.shield.r = 15; }break; case 150:{ if(!this.sword.slash){ this.sword.x -= 5; this.sword.y -= 2; if(this.sword.x <= 10){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.y -= 5; if(this.sword.y <= -75){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = -30; this.shield.y = -45; }break; case 180:{ if(!this.sword.slash){ this.sword.x -= 5; this.sword.y -= 2; if(this.sword.x <= 10){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.y -= 5; if(this.sword.y <= -75){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = -35; this.shield.y = -50; this.shield.r = 10; }break; case 210:{ if(!this.sword.slash){ this.sword.x += 4; this.sword.y -= 12; if(this.sword.x >= 45){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.y += 5; if(this.sword.y >= -75){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = -25; this.shield.y = -55; }break; case 240:{ this.eyeX = 18; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= -5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 10; this.shield.y = -65; this.shield.r = 15; }break; case 270:{ this.eyeX = 18; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= 35){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 25; this.shield.y = -50; }break; case 300:{ this.eyeX = 8; if(!this.sword.slash){ this.sword.x += 8; this.sword.y -= 5; if(this.sword.x >= 25){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x -= 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 30; this.shield.y = -45; this.shield.r = -15; }break; case 330:{ this.eyeX = 4; if(!this.sword.slash){ this.sword.x += 7; this.sword.y -= 5; if(this.sword.x >= 5){ this.sword.slash = true; } } else if(this.sword.x !== this.sword.targ.x){ this.sword.x += 4; this.sword.y += 8; if(this.sword.y >= -30){ this.sword.x = this.sword.targ.x; this.sword.y = this.sword.targ.y; } } this.shield.x = 35; this.shield.y = -45; }break; } } }; Boss.prototype.draw = function(){ // the rock if(this.rock.on && Math.cos(angle(this.r)) <= 0){ ctx.save(); ctx.translate(this.rock.x, this.rock.y-80); ctx.rotate(angle(-45)); ctx.scale(1.1, 1.1); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } ctx.save(); ctx.translate(this.x, this.y); ctx.scale(1.2, 1.2); // the shadow fill(0, 100); ellipse(0, 0, 85, 35); // the right hand if(this.r > 0 && this.r < 240){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } // the left hand if(this.r > 120 && this.r < 300){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } // the body fill(90); ctx.beginPath(); ctx.moveTo(-30, -20); ctx.lineTo(-30, -45); ctx.lineTo(-25, -65); ctx.lineTo(-10, -85); ctx.lineTo(0, -90); ctx.lineTo(10, -85); ctx.lineTo(25, -65); ctx.lineTo(30, -45); ctx.lineTo(30, -20); ctx.bezierCurveTo(30, -5, -30, -5, -30, -20); ctx.fill(); // the head fill(100); ctx.beginPath(); ctx.moveTo(-25, -110); ctx.lineTo(-20, -130); ctx.lineTo(0, -135); ctx.lineTo(20, -130); ctx.lineTo(25, -110); ctx.lineTo(15, -90); ctx.lineTo(10, -95); ctx.lineTo(-10, -95); ctx.lineTo(-15, -90); ctx.fill(); // the eyes if(this.r < 150 \|\| this.r > 210){ fill(200, 100, 0); if(this.eyeX > -13){ ctx.beginPath(); ctx.moveTo(this.eyeX-14, -120); ctx.lineTo(this.eyeX-9, -115); ctx.lineTo(this.eyeX-4, -120); ctx.fill(); } if(this.eyeX < 13){ ctx.beginPath(); ctx.moveTo(this.eyeX+14, -120); ctx.lineTo(this.eyeX+9, -115); ctx.lineTo(this.eyeX+4, -120); ctx.fill(); } } // the left hand if(this.r < 150 \|\| this.r > 270){ ctx.save(); ctx.translate(this.shield.x, this.shield.y); ctx.rotate(angle(this.shield.r)); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } // the right hand if(this.r < 60 \|\| this.r > 180){ ctx.save(); ctx.translate(this.sword.x, this.sword.y); ctx.rotate(angle(this.sword.r)); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } ctx.restore(); // the health bar fill(0); ctx.fillRect(this.x-50, this.y-180, 100, 5); if(this.health > 0){ fill(200, 0, 0); ctx.fillRect(this.x-50, this.y-180, this.health0.4, 5); } // the rock if(this.rock.on && Math.cos(angle(this.r)) > 0){ ctx.save(); ctx.translate(this.rock.x, this.rock.y-80); ctx.rotate(angle(-45)); ctx.scale(1.1, 1.1); fill(100); ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(-10, -5); ctx.lineTo(-10, 5); ctx.lineTo(-5, 10); ctx.lineTo(5, 10); ctx.lineTo(10, 5); ctx.lineTo(10, -5); ctx.lineTo(5, -10); ctx.fill(); ctx.restore(); } }; </script> <!-- portal --> <script> var Portal = function(){ // coordinates this.x = 0; this.y = 0; // opening the gates this.open = 0; // whether or not to display this.on = false; // map position var pos = findMapPos(this.x, this.y); this.row = pos.row; this.col = pos.col; // particles this.part = []; this.partIndex = 0; for(let i = 0; i < 5; i++){ this.part.push({ // polar coordinates r: Math.random()2Math.PI, d: 100, // size s: 15+Math.random()10, // speed speed: 0, // transparency t: 0 }); } }; Portal.prototype.draw = function(){ ctx.save(); ctx.translate(this.x-100, this.y); // the frame stroke(186, 165, 24); fill(227, 201, 24); ctx.beginPath(); ctx.moveTo(30, 0); ctx.lineTo(30, -110); ctx.arc(100, -110, 70, Math.PI, Math.PI2); ctx.lineTo(170, 0); ctx.bezierCurveTo(160, 2, 155, 2, 155, 0); ctx.lineTo(155, -110); ctx.bezierCurveTo(150, -180, 50, -180, 45, -110); ctx.lineTo(45, 0); ctx.bezierCurveTo(45, 2, 40, 2, 30, 0); ctx.fill(); ctx.stroke(); // the gates stroke(160); ctx.lineWidth = 3; var x = 55Math.cos(angle(this.open)); var y = -30-20Math.abs(Math.cos(angle(this.open))); // the left gate ctx.beginPath(); ctx.moveTo(45, 0); ctx.lineTo(45, -110); ctx.bezierCurveTo( 45+x0, -110+y0.5, 45+x0.5, -110+y1, 45+x, -110+y ); ctx.lineTo(45+x, 50+y); ctx.lineTo(45, 0); ctx.stroke(); // vertical bars ctx.beginPath(); ctx.moveTo(45+x/4, -110+y0.6); ctx.lineTo(45+x/4, 20+y0.4); ctx.stroke(); ctx.beginPath(); ctx.moveTo(45+x/2, -110+y0.85); ctx.lineTo(45+x/2, 25+y0.5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(45+x0.75, -110+y0.95); ctx.lineTo(45+x0.75, 35+y0.7); ctx.stroke(); // horizontal bars ctx.beginPath(); ctx.moveTo(45, -50); ctx.lineTo(45+x, y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(45, -100); ctx.lineTo(45+x, -50+y); ctx.stroke(); // the right gate ctx.beginPath(); ctx.moveTo(155, 0); ctx.lineTo(155, -110); ctx.bezierCurveTo( 155-x0, -110+y0.5, 155-x0.5, -110+y1, 155-x, -110+y ); ctx.lineTo(155-x, 50+y); ctx.lineTo(155, 0); ctx.stroke(); // vertical bars ctx.beginPath(); ctx.moveTo(155-x/4, -110+y0.6); ctx.lineTo(155-x/4, 20+y0.4); ctx.stroke(); ctx.beginPath(); ctx.moveTo(155-x/2, -110+y0.85); ctx.lineTo(155-x/2, 25+y0.5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(155-x0.75, -110+y0.95); ctx.lineTo(155-x0.75, 35+y0.7); ctx.stroke(); // horizontal bars ctx.beginPath(); ctx.moveTo(155, -50); ctx.lineTo(155-x, y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(155, -100); ctx.lineTo(155-x, -50+y); ctx.stroke(); ctx.lineWidth = 1; ctx.restore(); }; Portal.prototype.update = function(){ // check to see if any enemies are left alive var dead = true; for(let i = 0; i < enemies.length; i++){ if(enemies[i].health > 0){ dead = false; } } // if all the enemies are dead... if(dead){ this.on = true; gridMap[this.row] = gridMap[this.row].replace("E", "-"); } // open the gates if(this.on && this.open < 135){ this.open = lerp(this.open, 180, 0.02); } // progress to the next level if(player.x === this.x && player.y === this.y){ if(whichLevel >= levels.length-1){ scene = "Win"; } else{ trans.active = true; trans.next = function(){ whichLevel++; loadMap(whichLevel); }; } } }; var portal = new Portal(); </script> <!-- images and loading --> <script> // whether we've loaded yet or not var loaded = loaded \|\| false; // index of image to load var loadIndex = 0; // images to load var imgsToLoad = [ { w: 200, h: 100, draw: function(){ ctx.save(); ctx.translate(0, 50); // this function draws a little tuft of grass var drawTuft = function(x, y, s){ ctx.save(); ctx.translate(x, y); ctx.scale(s, s); // use the same color as the outline of the hexagon ctx.strokeStyle = "#547A07"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 0); ctx.lineTo(0, -20); ctx.stroke(); ctx.beginPath(); ctx.moveTo(-2, 0); ctx.bezierCurveTo(-3, -10, -5, -12, -10, -12); ctx.stroke(); ctx.beginPath(); ctx.moveTo(2, 0); ctx.bezierCurveTo(3, -10, 5, -12, 10, -12); ctx.stroke(); ctx.restore(); }; // grassy green ctx.fillStyle = "#60F035"; // slightly darker outline ctx.strokeStyle = "#547A07"; // draw the basic hexagon ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, -50); ctx.lineTo(150, -50); ctx.lineTo(200, 0); ctx.lineTo(150, 50); ctx.lineTo(50, 50); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); // draw some tufts of grass drawTuft(90, 0, 1); drawTuft(140, -20, 0.7); drawTuft(130, 40, 0.9); drawTuft(60, -30, 0.6); drawTuft(40, 20, 1); drawTuft(170, 10, 0.6); ctx.restore(); } }, // grass tile { w: 200, h: 100, draw: function(){ ctx.save(); ctx.translate(0, 50); // gray fill(100); // slightly darker outline stroke(80); // draw the basic hexagon ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, -50); ctx.lineTo(150, -50); ctx.lineTo(200, 0); ctx.lineTo(150, 50); ctx.lineTo(50, 50); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); // draw the lines stroke(80); for(let i = 0; i < 100; i += 20){ ctx.beginPath(); ctx.moveTo(50+i, -50); ctx.lineTo(i/2, i/2); ctx.stroke(); } for(let i = 0; i < 100; i += 20){ ctx.beginPath(); ctx.moveTo(50+i, 50); ctx.lineTo(150+i/2, -50+i/2); ctx.stroke(); } // draws a brick var drawBrick = function(x, y){ ctx.save(); ctx.translate(x, y); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(20, 0); ctx.lineTo(0, 20); ctx.lineTo(-20, 20); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); ctx.restore(); }; // all the bricks fill(100); drawBrick(20, -20); fill(125, 120, 80); drawBrick(40, -40); fill(100); drawBrick(30, -10); fill(130); drawBrick(50, -30); fill(110); drawBrick(40, 0); fill(100); drawBrick(80, -40); fill(100); drawBrick(50, 10); fill(120); drawBrick(70, -10); fill(115, 113, 95); drawBrick(110, -50); fill(110); drawBrick(60, 20); fill(100); drawBrick(100, -20); drawBrick(120, -40); fill(128, 110, 85); drawBrick(90, 10); fill(130); drawBrick(130, -30); fill(100); drawBrick(100, 20); fill(110); drawBrick(120, 0); fill(100); drawBrick(140, -20); fill(130); drawBrick(130, 10); fill(100); drawBrick(150, -10); fill(100); drawBrick(140, 20); fill(120); drawBrick(160, 0); fill(100); drawBrick(170, 10); //* // make it all a bit darker stroke(0); fill(0, 100); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, -50); ctx.lineTo(150, -50); ctx.lineTo(200, 0); ctx.lineTo(150, 50); ctx.lineTo(50, 50); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); /// ctx.restore(); } }, // dungeon tile { w: 200, h: 100, draw: function(){ ctx.save(); ctx.translate(0, 50); fill(143, 91, 23); // draw the basic hexagon ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, -50); ctx.lineTo(151, -50); ctx.lineTo(201, 0); ctx.lineTo(150, 51); ctx.lineTo(50, 51); ctx.lineTo(0, 0); ctx.fill(); // ctx.stroke(); // draw the lines stroke(80); for(let i = 0; i < 100; i += 20){ ctx.beginPath(); ctx.moveTo(50+i, -50); ctx.lineTo(i/2, i/2); ctx.stroke(); } for(let i = 0; i < 100; i += 20){ ctx.beginPath(); ctx.moveTo(50+i, 50); ctx.lineTo(150+i/2, -50+i/2); ctx.stroke(); } var line = function(x, y){ ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+20, y); ctx.stroke(); }; line(50, -50); line(125, -25); line(32.5, -12.5); line(107.5, 12.5); line(90, -50); // line(15, 25); line(72.5, -12.5); line(147.5, 12.5); line(50, 50); line(55, 25); ctx.restore(); } }, // bridge tile { w: 200, h: 200, draw: function(){ ctx.save(); ctx.translate(0, 150); // this function draws a tree var drawTree = function(x, y, s, t){ ctx.save(); ctx.translate(x, y); ctx.scale(s5, Math.abs(s)5); switch(t){ case 1:{ fill(143, 110, 0); ctx.beginPath(); ctx.moveTo(-4, 0); ctx.bezierCurveTo(-2, -10, -2, -15, -2, -20); ctx.lineTo(2, -20); ctx.bezierCurveTo(2, -15, 2, -10, 4, 0); ctx.bezierCurveTo(1, 2, -1, 2, -4, 0); ctx.fill(); fill(0, 200, 0); ellipse(0, -20, 20, 8); ellipse(-8, -19, 10, 5); ellipse(3, -16, 18, 5); ellipse(6, -19, 15, 5); ellipse(-2, -16, 20, 6); ellipse(0, -13, 16, 5); }break; case 2:{ fill(143, 110, 0); ctx.beginPath(); ctx.moveTo(-4, 0); ctx.bezierCurveTo(-2, -10, -2, -15, -2, -20); ctx.lineTo(2, -20); ctx.bezierCurveTo(2, -15, 2, -10, 4, 0); ctx.bezierCurveTo(1, 2, -1, 2, -4, 0); ctx.fill(); fill(0, 170, 0); ellipse(-5, -10, 10, 4); ellipse(0, -18, 18, 4); ellipse(-8, -20, 10, 4); ellipse(2, -21, 20, 6); ellipse(-3, -23, 15, 5); ellipse(4, -16, 15, 4); ellipse(-4, -15, 15, 5); }break; case 3:{ fill(143, 110, 0); ctx.beginPath(); ctx.moveTo(-4, 0); ctx.bezierCurveTo(-2, -10, -2, -15, -2, -20); ctx.lineTo(2, -20); ctx.bezierCurveTo(2, -15, 2, -10, 4, 0); ctx.bezierCurveTo(1, 2, -1, 2, -4, 0); ctx.fill(); fill(0, 140, 0); ellipse(-4, -8, 10, 4); ellipse(4, -6, 10, 4); ellipse(-6, -19, 15, 6); ellipse(6, -21, 15, 6); ellipse(-2, -23, 15, 5); ellipse(3, -18, 10, 4); ellipse(4, -17, 15, 5); ellipse(-4, -16, 18, 6); ellipse(2, -14, 12, 4); }break; case 4:{ ctx.scale(0.2, 0.2); // the trunk fill(143, 110, 0); ctx.beginPath(); ctx.moveTo(-8, -20); ctx.lineTo(-10, 0); ctx.bezierCurveTo(-5, 5, 5, 5, 10, 0); ctx.lineTo(8, -20); ctx.fill(); // the top of the pine tree ctx.fillStyle = "#01702F"; ctx.beginPath(); ctx.moveTo(0.5, -100); // zigzags down the left var x = -3, y = -90; for(let i = 0; i < 8; i++){ ctx.lineTo(x-10, y+10); ctx.lineTo(x-3, y+10); x -= 3; y += 10; } ctx.lineTo(-35, -10); ctx.bezierCurveTo(-15, -5, -10, -5, 0.5, -5); ctx.fill(); // zigzags down the right ctx.beginPath(); ctx.moveTo(-0.5, -100); var x = 3, y = -90; for(let i = 0; i < 8; i++){ ctx.lineTo(x+10, y+10); ctx.lineTo(x+3, y+10); x += 3; y += 10; } ctx.lineTo(35, -10); ctx.bezierCurveTo(15, -5, 10, -5, -0.5, -5); ctx.fill(); }break; } ctx.restore(); }; // draw some trees drawTree(90, -20, 0.8, 1); drawTree(50, 20, 1, 4); drawTree(150, -10, 1, 4); drawTree(110, 30, 0.8, 3); ctx.restore(); } }, // trees thang { w: 200, h: 200, draw: function(){ ctx.save(); ctx.translate(0, 150); stroke(100); // the left mountain fill(180); ctx.beginPath(); ctx.moveTo(10, 0); ctx.lineTo(20, -50); ctx.lineTo(30, -60); ctx.lineTo(40, -90); ctx.lineTo(60, -110); ctx.lineTo(75, -120); ctx.lineTo(90, -110); ctx.lineTo(100, -90); ctx.lineTo(110, -80); ctx.lineTo(120, -40); ctx.lineTo(120, 0); ctx.bezierCurveTo(120, 10, 30, 10, 10, 0); ctx.fill(); ctx.stroke(); // the left snow fill(240); ctx.beginPath(); ctx.moveTo(40, -90); ctx.lineTo(60, -110); ctx.lineTo(75, -120); ctx.lineTo(90, -110); ctx.lineTo(100, -90); ctx.bezierCurveTo(100, -85, 50, -85, 40, -90); ctx.fill(); // the left shadow fill(0, 30); ctx.beginPath(); ctx.moveTo(10, 0); ctx.lineTo(20, -50); ctx.lineTo(30, -60); ctx.lineTo(40, -90); ctx.lineTo(60, -110); ctx.lineTo(75, -120); ctx.lineTo(65, -110); ctx.lineTo(52, -90); ctx.lineTo(45, -60); ctx.lineTo(35, -40); ctx.lineTo(30, 4); ctx.fill(); // the right mountain fill(180); ctx.beginPath(); ctx.moveTo(190, 0); ctx.lineTo(180, -50); ctx.lineTo(170, -60); ctx.lineTo(160, -80); ctx.lineTo(140, -90); ctx.lineTo(120, -80); ctx.lineTo(115, -70); ctx.lineTo(105, -60); ctx.lineTo(90, 0); ctx.bezierCurveTo(150, 10, 170, 10, 190, 0); ctx.fill(); ctx.stroke(); // the right snow fill(240); ctx.beginPath(); ctx.lineTo(170, -60); ctx.lineTo(160, -80); ctx.lineTo(140, -90); ctx.lineTo(120, -80); ctx.lineTo(115, -70); ctx.lineTo(105, -60); ctx.bezierCurveTo(115, -55, 170, -55, 170, -60); ctx.fill(); // the right shadow fill(0, 30) ctx.beginPath(); ctx.moveTo(140, -90); ctx.lineTo(120, -80); ctx.lineTo(115, -70); ctx.lineTo(105, -60); ctx.lineTo(90, 0); ctx.lineTo(110, 0); ctx.lineTo(120, -60); ctx.lineTo(130, -80); ctx.fill(); // the middle mountain fill(180); ctx.beginPath(); ctx.moveTo(40, 30); ctx.lineTo(50, 10); ctx.lineTo(60, 0); ctx.lineTo(70, -30); ctx.lineTo(80, -40); ctx.lineTo(90, -60); ctx.lineTo(100, -65); ctx.lineTo(110, -60); ctx.lineTo(125, -40); ctx.lineTo(130, -20); ctx.lineTo(140, -10); ctx.lineTo(150, 10); ctx.lineTo(160, 20); ctx.lineTo(165, 30); ctx.bezierCurveTo(150, 45, 50, 45, 40, 30); ctx.fill(); ctx.stroke(); // the middle snow fill(240); ctx.beginPath(); ctx.lineTo(80, -40); ctx.lineTo(90, -60); ctx.lineTo(100, -65); ctx.lineTo(110, -60); ctx.lineTo(125, -40); ctx.bezierCurveTo(115, -35, 80, -35, 80, -40); ctx.fill(); // the middle shadow fill(0, 30); ctx.beginPath(); ctx.moveTo(40, 30); ctx.lineTo(50, 10); ctx.lineTo(60, 0); ctx.lineTo(70, -30); ctx.lineTo(80, -40); ctx.lineTo(90, -60); ctx.lineTo(100, -65); ctx.lineTo(95, -60); ctx.lineTo(90, -40); ctx.lineTo(85, -30); ctx.lineTo(70, 0); ctx.lineTo(70, 10); ctx.lineTo(60, 39); ctx.fill(); ctx.restore(); } }, // mountains thang { w: 600, h: 600, draw: function(){ ctx.save(); ctx.translate(300, 300); // background fill(255); ctx.fillRect(-300, -305, 600, 600); // hexagons var hex = function(x, y){ ctx.save(); ctx.translate(x, y); ctx.beginPath(); ctx.moveTo(-50, -50Math.sqrt(3)); ctx.lineTo(-100, 0); ctx.lineTo(-50, 50Math.sqrt(3)); ctx.lineTo(50, 50Math.sqrt(3)); ctx.lineTo(100, 0); ctx.lineTo(50, -50Math.sqrt(3)); ctx.lineTo(-50, -50Math.sqrt(3)); ctx.stroke(); ctx.restore(); }; hex(0, 0); hex(0, -100Math.sqrt(3)); hex(-150, -50Math.sqrt(3)); hex(-150, 50Math.sqrt(3)); hex(0, 100Math.sqrt(3)); hex(150, 50Math.sqrt(3)); hex(150, -50Math.sqrt(3)); // damage arrow star thing var star = function(x, y, r, txt){ ctx.save(); ctx.translate(x, y); ctx.save(); ctx.rotate(angle(r)); // arrow fill(255, 0, 0); ctx.beginPath(); ctx.moveTo(-20, -50); ctx.lineTo(-20, 40); ctx.lineTo(-40, 40); ctx.lineTo(0, 80); ctx.lineTo(40, 40); ctx.lineTo(20, 40); ctx.lineTo(20, -50); ctx.fill(); // star thing fill(255, 255, 0); stroke(0); ctx.beginPath(); ctx.moveTo(30, 0); for(let i = 0; i < 360; i += 10){ var x = 60Math.cos(angle(i))+Math.random()6-3; var y = 40Math.sin(angle(i))+Math.random()6-3; if(i % 40 === 0){ ctx.lineTo(x, y); } else if(i % 20 == 0){ ctx.lineTo(x0.9, y0.9); } else{ ctx.lineTo(x/2, y/2); } } ctx.lineTo(30, 0); ctx.fill(); ctx.stroke(); ctx.restore(); // text fill(0); ctx.font = "20px Times"; ctx.fillText(txt, -5, 5); ctx.restore(); }; star(0, -100Math.sqrt(3), 0, 4); star(-150, -50Math.sqrt(3), 300, 3); star(-150, 50Math.sqrt(3), 240, 2); star(0, 100Math.sqrt(3), 180, 1); star(150, 50Math.sqrt(3), 120, 2); star(150, -50Math.sqrt(3), 60, 3); // goblin var g1 = new Goblin(0, 55); g1.health = 0; g1.draw(); fill(255); ctx.fillRect(-50, -85, 100, 5); ctx.restore(); } } // instructions image ]; // loaded images var loadedImgs = loadedImgs \|\| []; // credit to Green Ghost from Khan Academy for these next two functions: // stores an image var getImage = function(shapes, width, height) { let canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.display = "none"; let prevContext = ctx; ctx = canvas.getContext("2d"); shapes(); ctx = prevContext; return canvas; }; // draws a stored image on the canvas var image = function(imageName, x, y, w, h) { w = w \|\| imageName.width; h = h \|\| imageName.height; ctx.drawImage(imageName, x, y, w, h); }; // if we've gone through the loading screen already there's no need to do it again if(loaded){ scene = "Game"; } </script> <!-- drawing the map --> <script> // camera position var cam = { x: 0, y: 0, scaleX: 0.5, scaleY: 0.5 }; // change to "d" for dungeon or "b" for bridge var floorType = "f"; // the map var gridMap = []; // this function draws a tile var drawTile = function(x, y, t){ switch(t){ // if the type is "f" (for "forest")... case "f":{ image(loadedImgs[0], x, y-50); }break; // if it's a "d" ("dungeon") case "d":{ image(loadedImgs[1], x, y-50); }break; // if it's a "w" ("water") case "w":{ ctx.save(); ctx.translate(x, y); // blue fill(50, 100, 255); // slightly darker outline stroke(40, 90, 145); // draw the basic hexagon ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, -50); ctx.lineTo(150, -50); ctx.lineTo(200, 0); ctx.lineTo(150, 50); ctx.lineTo(50, 50); ctx.lineTo(0, 0); ctx.fill(); ctx.stroke(); // draws a mini hexagon var hex = function(x, y){ ctx.save(); ctx.translate(x, y); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(10, -10); ctx.lineTo(30, -10); ctx.lineTo(40, 0); ctx.lineTo(30, 10); ctx.lineTo(10, 10); ctx.lineTo(0, 0); ctx.fill(); ctx.restore(); }; fill(0, 50+10Math.sin(frameCount/5)); hex(40, -40); ctx.beginPath(); ctx.moveTo(20, -20); ctx.lineTo(40, -20); ctx.lineTo(50, -30); ctx.lineTo(40, -40); ctx.fill(); ctx.beginPath(); ctx.moveTo(70, -50); ctx.lineTo(80, -40); ctx.lineTo(100, -40); ctx.lineTo(110, -50); ctx.fill(); fill(0, 50+10Math.sin(frameCount/5+1.257)); hex(100, -40); hex(70, -30); hex(40, -20); hex(10, -10); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(10, -10); ctx.lineTo(20, 0); ctx.lineTo(10, 10); ctx.fill(); ctx.beginPath(); ctx.moveTo(130, -50); ctx.lineTo(150, -50); ctx.lineTo(160, -40); ctx.lineTo(140, -40); ctx.fill(); ctx.beginPath(); ctx.moveTo(130, 50); ctx.lineTo(150, 50); ctx.lineTo(160, 40); ctx.lineTo(140, 40); ctx.fill(); fill(0, 50+10Math.sin(frameCount/5+2.513)); hex(130, -30); hex(100, -20); hex(70, -10); hex(40, 0); hex(10, 10); fill(0, 50+10Math.sin(frameCount/5+3.77)); hex(130, -10); hex(100, 0); hex(70, 10); hex(40, 20); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(40, 20); ctx.lineTo(50, 30); ctx.lineTo(40, 40); ctx.fill(); ctx.beginPath(); ctx.moveTo(170, -30); ctx.lineTo(160, -20); ctx.lineTo(170, -10); ctx.lineTo(190, -10); ctx.fill(); fill(0, 50+10Math.sin(frameCount/5+5.027)); hex(160, 0); hex(130, 10); hex(100, 20); hex(70, 30); hex(40, 40); fill(0, 50+10Math.sin(frameCount/5)); hex(130, 30); hex(100, 40); ctx.beginPath(); ctx.moveTo(70, 50); ctx.lineTo(80, 40); ctx.lineTo(100, 40); ctx.lineTo(110, 50); ctx.fill(); ctx.beginPath(); ctx.moveTo(190, 10); ctx.lineTo(170, 10); ctx.lineTo(160, 20); ctx.lineTo(170, 30); ctx.fill(); ctx.restore(); }break; // if it's a "b" ("bridge") case "b":{ image(loadedImgs[2], x, y-50); }break; case "0":{ }break; } }; // draws a thang, which appears on a tile var drawThang = function(x, y, t, row, col){ ctx.save(); // ctx.translate(x, y); switch(t){ // if it's a "t" ("trees")... case "t":{ image(loadedImgs[3], x, y-150); }break; // if it's an "m" ("mountains")... case "m":{ image(loadedImgs[4], x, y-150); }break; // if it's an "l" ("wall")... case "l":{ // booleans keep track of which ones are used var topLeft, top, topRight, botLeft, bot, botRight; // these functions draw the different types var drawTopLeft = function(){ stroke(80); fill(100); ctx.beginPath(); ctx.moveTo(14, -15); ctx.lineTo(14, -75); ctx.lineTo(86, -51); ctx.lineTo(86, 9); ctx.fill(); fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(15, -75); ctx.lineTo(85, -51); ctx.lineTo(85, 9); ctx.lineTo(115, -9); ctx.lineTo(115, -69); ctx.lineTo(35, -95); ctx.fill(); }; var drawTopRight = function(){ ctx.save(); ctx.translate(100, 0); ctx.scale(-1, 1); ctx.translate(-100, 0); stroke(80); fill(100); ctx.beginPath(); ctx.moveTo(14, -15); ctx.lineTo(14, -75); ctx.lineTo(86, -51); ctx.lineTo(86, 9); ctx.fill(); fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(15, -75); ctx.lineTo(85, -51); ctx.lineTo(85, 9); ctx.lineTo(115, -9); ctx.lineTo(115, -69); ctx.lineTo(35, -95); ctx.fill(); ctx.restore(); }; var drawTop = function(){ fill(105, 45, 16); ctx.fillRect(85, -110, 30, 60); fill(100); ctx.fillRect(85, -51, 30, 60); }; var drawBotLeft = function(){ stroke(80); fill(100); ctx.beginPath(); ctx.moveTo(34, 35); ctx.lineTo(34, -25); ctx.lineTo(101, -46); ctx.lineTo(101, 14); ctx.fill(); fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(35, 35); ctx.lineTo(15, 15); ctx.lineTo(15, -45); ctx.lineTo(85, -69); ctx.lineTo(100, -46); ctx.lineTo(35, -25); ctx.fill(); }; var drawBotRight = function(){ ctx.save(); ctx.translate(100, 0); ctx.scale(-1, 1); ctx.translate(-100, 0); stroke(80); fill(100); ctx.beginPath(); ctx.moveTo(34, 35); ctx.lineTo(34, -25); ctx.lineTo(101, -46); ctx.lineTo(101, 14); ctx.fill(); fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(35, 35); ctx.lineTo(15, 15); ctx.lineTo(15, -45); ctx.lineTo(85, -69); ctx.lineTo(100, -46); ctx.lineTo(35, -25); ctx.fill(); ctx.restore(); }; var drawBot = function(){ fill(105, 45, 16); ctx.fillRect(85, -51, 30, 41); fill(100); ctx.fillRect(85, -10, 30, 60); }; // upper center if(row > 0 && gridMap[row-1][col] === "l"){ top = true; } // upper left if(col > 0 && (col%2 === 0 && gridMap[row][col-1] === "l" \|\| col%2 === 1 && row > 0 && gridMap[row-1][col-1] === "l")){ topLeft = true; } // upper right if(col < gridMap[row].length-1 && ( col%2 === 0 && gridMap[row][col+1] === "l" \|\| row > 0 && col%2 === 1 && gridMap[row-1][col+1] === "l")){ topRight = true; } // lower left if(col > 0 && (col%2 === 0 && row < gridMap.length-1 && gridMap[row+1][col-1] === "l" \|\| col%2 === 1 && gridMap[row][col-1] === "l")){ botLeft = true; } // lower right if(col < gridMap[row].length-1 && (col%2 === 0 && row < gridMap.length-1 && gridMap[row+1][col+1] === "l" \|\| col%2 === 1 && gridMap[row][col+1] === "l")){ botRight = true; } // lower center if(row < gridMap.length-1 && gridMap[row+1][col] === "l"){ bot = true; } var array = [topLeft, top, topRight, botRight, bot, botLeft]; // find out how many adjacent tiles are walls; if there's only one then we'll add another one var num = 0; for(let i = 0; i < array.length; i++){ if(array[i]){ num++; } } // draw! ctx.lineWidth = 2; ctx.save(); ctx.translate(x, y); if(top){ drawTop(); if(num === 1){ bot = true; drawBot(); } } if(topLeft){ drawTopLeft(); if(num === 1){ drawBotRight(); botRight = true; } } if(topRight){ drawTopRight(); if(num === 1){ drawBotLeft(); botLeft = true; } } if(botLeft){ if(num === 1){ drawTopRight(); topRight = true; } drawBotLeft(); } if(botRight){ if(num === 1){ drawTopLeft(); topLeft = true; } drawBotRight(); } if(bot){ if(num === 1){ drawTop(); top = true; } drawBot(); } // add extra bits to cover up any holes if(botRight && botLeft){ fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(100, -45); ctx.lineTo(84, -69); ctx.lineTo(100, -74); ctx.lineTo(116, -69); ctx.fill(); stroke(80); ctx.beginPath(); ctx.moveTo(100, -45); ctx.lineTo(100, 14); ctx.stroke(); } else if(botLeft && top){ fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(85, -70); ctx.lineTo(115, -50); ctx.lineTo(100, -45); ctx.fill(); fill(100); ctx.beginPath(); ctx.moveTo(100, -46); ctx.lineTo(115, -50); ctx.lineTo(115, 10); ctx.lineTo(100, 14); ctx.fill(); } else if(botRight && top){ fill(105, 45, 16); ctx.beginPath(); ctx.moveTo(115, -70); ctx.lineTo(85, -50); ctx.lineTo(100, -45); ctx.fill(); fill(100); ctx.beginPath(); ctx.moveTo(100, -46); ctx.lineTo(85, -50); ctx.lineTo(85, 10); ctx.lineTo(100, 14); ctx.fill(); } if(topRight && topLeft && !bot){ fill(100); ctx.beginPath(); ctx.moveTo(84, -51); ctx.lineTo(100, -46); ctx.lineTo(116, -51); ctx.lineTo(116, 9); ctx.lineTo(100, 14); ctx.lineTo(84, 9); ctx.fill(); stroke(80); ctx.beginPath(); ctx.moveTo(100, -46); ctx.lineTo(100, 14); ctx.stroke(); } if(topLeft && botRight){ fill(100); ctx.beginPath(); ctx.moveTo(84, -51); ctx.lineTo(101, -46); ctx.lineTo(101, 14); ctx.lineTo(84, 9); ctx.fill(); } if(topRight && botLeft){ fill(100); ctx.beginPath(); ctx.moveTo(116, -51); ctx.lineTo(99, -46); ctx.lineTo(99, 14); ctx.lineTo(115, 9); ctx.fill(); } ctx.restore(); ctx.lineWidth = 1; }break; } ctx.restore(); }; // updates all the enemies var updateEnemies = function(){ for(let i = 0; i < enemies.length; i++){ if(enemies[i].health > 0){ enemies[i].move(); enemies[i].update(); } } }; // draws all the enemies var drawEnemies = function(row, mod){ for(let i = 0; i < enemies.length; i++){ if(enemies[i].health > 0 && enemies[i].row === row && enemies[i].col%2 === mod){ enemies[i].draw(); } } }; // draws the map var drawMap = function(){ // update all the enemies updateEnemies(); // update the portal portal.update(); // define deltaY var deltaY; // make sure the player is in the middle ctx.save(); ctx.translate(canvas.width/2, canvas.height/2); // scale X and Y cam.scaleX = canvas.width/(gridMap[0].length150+150); cam.scaleY = canvas.height/(gridMap.length100+200); // scale factor var scale; if(cam.scaleX > cam.scaleY){ scale = cam.scaleX; }else{ scale = cam.scaleY; } scale = constrain(scale, 0.5, 1); // camera x and y var playerX = (player.enemy) ? player.org.x : player.x; var playerY = (player.enemy) ? player.org.y : player.y; cam.x = constrain(playerX, canvas.width/2/scale-50, gridMap[0].length150+100-canvas.width/2/scale); cam.y = constrain(playerY, -200+canvas.height/2/scale, gridMap.length100+50-canvas.height/2/scale); if(scale === cam.scaleX && cam.scaleX > 0.5 \|\| cam.scaleX >= 1){ cam.x = (gridMap[0].length150+50)/2; } if(scale === cam.scaleY && cam.scaleY > 0.5 \|\| cam.scaleY >= 1){ cam.y = (gridMap.length100-100)/2; } ctx.scale(scale, scale); ctx.translate(-cam.x, -cam.y); // draw all the tiles for(let row = 0; row < gridMap.length; row++){ deltaY = 0; for(let col = 0; col < gridMap[row].length; col++){ if(deltaY === 0){deltaY = 50;} else{deltaY = 0;} if(gridMap[row][col] === "w"){ drawTile(col150, row100+deltaY, "w"); } else if(gridMap[row][col] === "b"){ drawTile(col150, row100+deltaY, "b"); } else if(gridMap[row][col] !== "0"){ drawTile(col150, row100+deltaY, floorType); } } } // draw the thangs for(let row = 0; row < gridMap.length; row++){ // draw the slightly higher tiles first deltaY = 0; for(let col = 1; col < gridMap[row].length; col += 2){ drawThang(col150, row100+deltaY, gridMap[row][col], row, col); } // draw the player here if he's on a back tile if(player.health > 0 && player.row === row && player.col%2 === 1){ player.draw(); } // draw any enemies on back tiles here drawEnemies(row, 1); // draw the portal here if it's on a back tile if(portal.row === row && portal.col%2 === 1){ portal.draw(); } // then draw the slightly lower tiles deltaY = 50; for(let col = 0; col < gridMap[row].length; col += 2){ drawThang(col150, row100+deltaY, gridMap[row][col], row, col); } // draw the player here if he's on a front tile if(player.health > 0 && player.row === row && player.col%2 === 0){ player.draw(); } // draw any enemies on front tiles here drawEnemies(row, 0); // draw the portal here if it's on a front tile if(portal.row === row && portal.col%2 === 0){ portal.draw(); } } ctx.restore(); }; // sets up the map var loadMap = function(i){ //* gridMap = []; for(let index = 0; index < levels[i].map.length; index++){ gridMap.push(levels[i].map[index]); } /// enemies = []; portal.on = false; portal.s = 0; for(let row = 0; row < gridMap.length; row++){ var deltaY = 0; for(let col = 0; col < gridMap[row].length; col++){ var tile = gridMap[row][col]; if(deltaY === 0){deltaY = 50;} else{deltaY = 0;} if(tile === "P"){ player.x = 100+col150; player.y = row100+deltaY; player.targ.x = player.x; player.targ.y = player.y; player.posX = 100; player.posY = 50; player.r = 0; player.health = 100; player.init(); gridMap[row] = gridMap[row].replace("P", "-"); } else if(tile === "E"){ portal.x = 100+col150; portal.y = row100+deltaY; portal.row = row; portal.col = col; portal.open = 0; portal.on = false; } else if(tile === "G"){ enemies.push(new Goblin(100+col150, row100+deltaY)); gridMap[row] = gridMap[row].replace("G", "-"); } else if(tile === "T"){ enemies.push(new Troll(100+col150, row100+deltaY)); gridMap[row] = gridMap[row].replace("T", "-"); } else if(tile === "A"){ enemies.push(new Archer(100+col150, row100+deltaY)); gridMap[row] = gridMap[row].replace("A", "-"); } else if(tile === "B"){ enemies.push(new Boss(100+col150, row100+deltaY)); gridMap[row] = gridMap[row].replace("B", "-"); } } } levels[i].onLoad(); }; </script> <!-- levels --> <script> var whichLevel = 0; var levels = []; levels[0] = { map: [ "llltmmll-tttm", "t-t--l------E", "tP---l----G-t", "w-t--l--w---t", "wwllt-wwwwlll" ], onLoad: function(){ floorType = "f"; } }; levels[1] = { map: [ "wwwtttmt-lEttm-t-", "lw-----m-ll--wwww", "l--G---Gm----wwww", "t---t-w-m---wwwww", "tP-lllwwttwwwwwww" ], onLoad: function(){ floorType = "f"; } }; levels[2] = { map: [ "tll---twwwwwlllmm", "t--ll-tw---ww---E", "P-t-mmG----G----m", "t-tG----wwwG--ttt", "twww---wwwwmm-ttt" ], onLoad: function(){ floorType = "f"; enemies[0].r = 60; enemies[1].r = 300; enemies[3].r = 300; } }; levels[3] = { map: [ "tttt-mmmtwwwbwttm", "----A-------A--mm", "wwb------------Et", "wPw---m--G--w---t", "www--mttt---twwtt" ], onLoad: function(){ floorType = "f"; enemies[0].r = 60; enemies[1].r = 60; } }; levels[4] = { map: [ "---lwwwww--wwwwww", "---l---G----Twwww", "P--T-----A--l--ww", "---l---G-----ll--", "---lwwwww-----TlE" ], onLoad: function(){ floorType = "d"; enemies[0].r = 60; enemies[1].r = 300; enemies[2].r = 60; enemies[3].r = 60; enemies[4].r = 120; enemies[5].r = 120; } }; levels[5] = { map: [ "-E-wwt-ltm", "G---bb-l-G", "Gm--Aw--lt", "--lllww--l", "ltlGmmbb--", "ml--l--wm-", "t-llPl-wA-", "w--t-l-wtm", "w---l-twww", "wwtlmtmwww" ], onLoad: function(){ floorType = "f"; enemies[5].r = 60; } }; levels[6] = { map: [ "ll-bbw-t", "tm-bw-t-", "b-PwwAmG", "bwwbbwmE", "-twt-wbm", "bAw--bw-", "bwbAwwA-", "tbwbbwwt", "m--wmlll", "mGt--Gtm" ], onLoad: function(){ floorType = "f"; enemies[0].r = 60; enemies[1].r = 120; enemies[2].r = 60; enemies[3].r = 90; enemies[4].r = 120; enemies[5].r = 240; enemies[6].r = 60; } }; levels[7] = { map: [ "Gm---wEt", "-tTm-wtG", "tTm-wwt-", "t-m-wA-G", "P---bbmm", "--tGwwwm" ], onLoad: function(){ floorType = "f"; enemies[1].r = 240; enemies[3].r = 60; enemies[4].r = 120; enemies[5].r = 60; enemies[6].r = 120; } }; levels[8] = { map: [ "000000llwwwww0000", "0000ll-----wwww00", "00ll---------www0", "0l------mAlT-w-tt", "0l---G-----l---tt", "0lT-Twww-P-A---Tt", "0lmtmwwwm-ll--mmt", "000m000w-A--wwlmt", "0000000ww-wb---ll", "0000000wwww--G--l", "00000000wwww--l-E", "000000000w0w0t0l0" ], onLoad: function(){ floorType = "f"; enemies[2].r = 300; enemies[5].r = 90; enemies[7].r = 180; } }; levels[9] = { map: [ "llllmwE", "l-----m", "l--P--m", "m-----l", "m--B--l", "w-----m", "wwlllmw" ], onLoad: function(){ floorType = "d"; } }; </script> <!-- scenes --> <script> // draws the current scene var drawScene = function(){ // menu <canvas> element and context var menu = document.getElementById("menu"); var menuCtx = menu.getContext("2d"); // instructions <div> element and canvas context var inst = document.getElementById("inst"); // victory scene <div> element var vict = document.getElementById("victory"); var death = document.getElementById("death"); // loading scene if(scene === "Load"){ menu.style.display = "none"; inst.style.display = "none"; blurCanvas = 0; if(loadIndex < imgsToLoad.length){ var img = imgsToLoad[loadIndex]; var capture = getImage(img.draw, img.w, img.h); loadedImgs.push(capture); loadIndex++; } else{ loaded = true; trans.active = true; trans.next = function(){ scene = "Menu"; blurCanvas = 5; menuOp = 1; }; } fill(50); ctx.fillRect(0, 0, canvas.width, canvas.height); fill(255); ctx.font = "Italic 30px Arial"; ctx.fillText("Loading...", 10, 40); } // victory scene else if(scene === "Win"){ vict.style.zIndex = 2; death.style.zIndex = 1; blurCanvas = 5; menuOp = 0; if(victOp < 1){ victOp += 0.1; } // update canvas width and height canvas.width = window.innerWidth; canvas.height = window.innerHeight; // we want to draw the map even if we're not in the game so it shows up as the background ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw the map drawMap(25, 125); // set up the victory div vict.style.display = "initial"; // canvas for drawing the crown var crown = document.getElementById("crown"); if(window.innerWidth < 600){ vict.style.left = "50px"; vict.style.width = (window.innerWidth-100)+"px"; } else{ vict.style.left = (window.innerWidth/2-250)+"px"; vict.style.width = "500px"; } vict.style.top = (window.innerHeight/2-150)+"px"; vict.style.height = 300+"px"; // back button var back = document.getElementById("back"); back.addEventListener("click", function(){ whichLevel = 0; loadMap(0); scene = "Menu"; }); crown.width = 200; crown.height = 150; // crown.style.backgroundColor = "white"; // draw the crown var crownCtx = crown.getContext("2d"); (function(){ crownCtx.save(); crownCtx.translate(crown.width/2, crown.height/2+10); crownCtx.fillStyle = "#C8C800"; crownCtx.beginPath(); crownCtx.moveTo(-30, 0); crownCtx.lineTo(-50, -20); crownCtx.lineTo(-25, -15); crownCtx.lineTo(-28, -35); crownCtx.lineTo(-10, -23); crownCtx.lineTo(0, -45); crownCtx.lineTo(10, -23); crownCtx.lineTo(28, -35); crownCtx.lineTo(25, -15); crownCtx.lineTo(50, -20); crownCtx.lineTo(30, 0); crownCtx.bezierCurveTo(10, 5, -10, 5, -30, 0); crownCtx.fill(); crownCtx.fillStyle = "#0051FF"; crownCtx.beginPath(); crownCtx.moveTo(0, -45); crownCtx.arc(0, -45, 4, 0, Math.PI2); crownCtx.fill(); crownCtx.lineWidth = 1; crownCtx.strokeStyle = "#0051FF"; crownCtx.beginPath(); crownCtx.moveTo(-30, 0); crownCtx.bezierCurveTo(-10, 5, 10, 5, 30, 0); crownCtx.stroke(); crownCtx.lineWidth = 1; crownCtx.fillStyle = "#009600"; crownCtx.beginPath(); crownCtx.moveTo(0, -20); crownCtx.lineTo(5, -13); crownCtx.lineTo(0, -6); crownCtx.lineTo(-5, -13); crownCtx.fill(); crownCtx.fillStyle = "#FF0000"; crownCtx.beginPath(); crownCtx.moveTo(-29, -8); crownCtx.arc(-29, -8, 3, 0, Math.PI2); crownCtx.moveTo(-15, -10); crownCtx.arc(-15, -12, 3, 0, Math.PI2); crownCtx.moveTo(15, -10); crownCtx.arc(15, -12, 3, 0, Math.PI2); crownCtx.moveTo(29, -8); crownCtx.arc(29, -8, 3, 0, Math.PI2); crownCtx.fill(); crownCtx.restore(); })(); } // death scene else if(scene === "Death"){ vict.style.zIndex = 1; death.style.zIndex = 2; blurCanvas = 5; menuOp = 0; if(deathOp < 1){ deathOp += 0.1; } // update canvas width and height canvas.width = window.innerWidth; canvas.height = window.innerHeight; // we want to draw the map even if we're not in the game so it shows up as the background ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw the map drawMap(25, 125); // set up the death scene div death.style.display = "initial"; // canvas for drawing the crown var skull = document.getElementById("skull"); if(window.innerWidth < 600){ death.style.left = "50px"; death.style.width = (window.innerWidth-100)+"px"; } else{ death.style.left = (window.innerWidth/2-250)+"px"; death.style.width = "500px"; } death.style.top = (window.innerHeight/2-150)+"px"; death.style.height = 300+"px"; // retry button var retry = document.getElementById("retry"); retry.addEventListener("click", function(){ loadMap(whichLevel); scene = "Game"; }); skull.width = 200; skull.height = 150; var skullCtx = skull.getContext("2d"); skullCtx.save(); skullCtx.translate(skull.width/2, skull.height/2); skullCtx.scale(1.2, 1.2); skullCtx.fillStyle = "#DDDDDD"; skullCtx.beginPath(); skullCtx.moveTo(-15, 10); skullCtx.lineTo(-20, 10); skullCtx.bezierCurveTo(-20, 0, -30, -10, -15, -20); skullCtx.bezierCurveTo(-15, -30, 40, -25, 10, 10); skullCtx.bezierCurveTo(10, 20, 0, 20, -18, 20); skullCtx.bezierCurveTo(-18, 15, -18, 12, -15, 10); skullCtx.fill(); skullCtx.stroke(); skullCtx.fillStyle = "#000000"; skullCtx.beginPath(); skullCtx.arc(-14, -3, 5, 0, Math.PI2); skullCtx.arc(2, -3, 5, 0, Math.PI2); skullCtx.moveTo(-6, 0); skullCtx.bezierCurveTo(-3, 4, -3, 7, -6, 5); skullCtx.bezierCurveTo(-9, 7, -9, 4, -6, 0); skullCtx.fill(); for(let i = 0; i < 8; i++){ skullCtx.beginPath(); skullCtx.moveTo(-18+i3, 20-i/4); skullCtx.lineTo(-18+i3, 16); skullCtx.stroke(); } skullCtx.restore(); } // everything else else{ // initialize victory scene opacity if(victOp > 0){ victOp -= 0.1; } // initialize death scene opacity if(deathOp > 0){ deathOp -= 0.1; } // a white background fill(255); menuCtx.fillRect(0, 0, canvas.width, canvas.height); // center text vertical alignment menuCtx.textBaseline = "middle"; // game code if(scene === "Game"){ // fade out the menu if(menuOp > 0){ menuOp -= 0.1 } // fade out the instructions if(instOp > 0){ instOp -= 0.1; } // unblur the background if(blurCanvas > 0){ blurCanvas -= 0.5; } // player movements if(!trans.active && player.health > 0){ player.move(); player.update(); } } // menu code else{ // set the opacity to 1 if(scene === "Menu"){ // fade out the instructions if necessary if(instOp > 0){ instOp -= 0.1; } // fade in the menu if((window.innerWidth >= 1200 \|\| instOp <= 0) && victOp <= 0 && menuOp < 1){ menuOp += 0.1; } } // set up the "menu" canvas menu.style.display = "initial"; menu.style.width = 400+"px"; menu.style.height = (window.innerHeight-50)+"px"; menu.width = 400; menu.height = window.innerHeight-50; // x-position of the canvas var X = 0; // if the window is wide enough, the menu can go to one side to make room for the instructions if(window.innerWidth < 1200){ menu.style.left = (window.innerWidth/2-200)+"px"; X = window.innerWidth/2-200; } else{ menu.style.left = 100+"px"; X = 100; } // y-position menu.style.top = "25px"; // background menuCtx.fillStyle = "#FFFFFF"; menuCtx.fillRect(0, 0, menu.width, menu.height); // title menuCtx.font = "20px Times"; menuCtx.fillStyle = "#000000"; menuCtx.fillText("KINGDOM INVASION", 97.5, 80); // start button if(mouseX > X+170 && mouseX < X+230 && mouseY > 25+menu.height/2-60 && mouseY < 25+menu.height/2-40 && (scene === "Menu" \|\| window.innerWidth >= 1200)){ menuCtx.fillStyle = "#AAAAAA"; document.body.style.cursor = "pointer"; mouseClicked = function(){ scene = "Game"; }; } menuCtx.fillText("START", 170, menu.height/2-50); menuCtx.fillStyle = "#000000"; // instructions button if(mouseX > X+135 && mouseX < X+265 && mouseY > 25+menu.height/2+40 && mouseY < 25+menu.height/2+60 && (scene === "Menu" \|\| window.innerWidth >= 1200)){ menuCtx.fillStyle = "#AAAAAA"; document.body.style.cursor = "pointer"; mouseClicked = function(){ scene = "Inst"; }; } menuCtx.fillText("HOW TO PLAY", 135, menu.height/2+50); // gold curly pattern { var curl = function(x, y, r, s){ let prevContext = ctx; ctx = menuCtx; ctx.save(); ctx.translate(x, y); ctx.rotate(rMath.PI/180); ctx.scale(s, Math.abs(s)); ctx.lineWidth = 2; stroke(200, 200, 0); ctx.beginPath(); ctx.arc(0, -10, 10, Math.PI/2, 3Math.PI/2); ctx.arc(0, -15, 5, -Math.PI/2, Math.PI/2); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 10, 10, -Math.PI/2, Math.PI/2); ctx.arc(0, 15, 5, Math.PI/2, 3Math.PI/2); ctx.stroke(); ctx.beginPath(); ctx.arc(-17.5, -10, 2.5, 0, Math.PI); ctx.arc(-15, -10, 5, Math.PI, 2Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(17.5, 10, 2.5, Math.PI, 2Math.PI); ctx.arc(15, 10, 5, 0, Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(-10, 12.5, 2.5, Math.PI, 3Math.PI/2); ctx.arc(-10, 15, 5, 3Math.PI/2, 2Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(0, -22.5, 2.5, Math.PI/2, 2*Math.PI); ctx.stroke(); ctx.restore(); ctx = prevContext; }; curl(50, 50, 45, 1.2); curl(menu.width-50, 50, -45, -1.2); curl(50, menu.height-50, 135, -1.2); curl(menu.width-50, menu.height-50, -135, 1.2); menuCtx.strokeStyle = "#C8C800"; menuCtx.lineWidth = 2.4; menuCtx.beginPath(); menuCtx.moveTo(90, 30); menuCtx.lineTo(menu.width-90, 30); menuCtx.moveTo(menu.width-30, 90); menuCtx.lineTo(menu.width-30, menu.height-90); menuCtx.moveTo(menu.width-90, menu.height-30); menuCtx.lineTo(90, menu.height-30); menuCtx.moveTo(30, menu.height-90); menuCtx.lineTo(30, 90); menuCtx.stroke(); // } // instructions code if(scene === "Inst"){ // set up the "inst" div and image canvas inst.style.display = "initial"; var canv = document.getElementById("explain"); if(window.innerWidth < 1200){ inst.style.left = "50px"; inst.style.width = (window.innerWidth-100)+"px"; } else{ inst.style.left = "600px"; inst.style.width = (window.innerWidth-700)+"px"; } inst.style.top = "50px"; inst.style.height = (window.innerHeight-100)+"px"; canv.width = 400; canv.height = 400; canv.style.backgroundColor = "white"; var instCtx = canv.getContext("2d"); // fade out the menu if necessary if(window.innerWidth < 1200 && menuOp > 0){ menuOp -= 0.1; } // fade in the instructions if((window.innerWidth >= 1200 \|\| menuOp <= 0) && instOp < 1){ instOp += 0.1; } // draw the picture instCtx.drawImage(loadedImgs[5], 0, 0, canv.width, canv.height); // close button var close = document.getElementById("close"); close.addEventListener("click", function(){scene = "Menu";}); } } // update canvas width and height canvas.width = window.innerWidth; canvas.height = window.innerHeight; // we want to draw the map even if we're not in the game so it shows up as the background ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw the map drawMap(25, 125); // more game code if(scene === "Game"){ // respawn the player if he dies if(player.health <= 0){ scene = "Death"; } } } // for blurring/unblurring the background canvas.style.filter = "blur("+blurCanvas+"px)"; // the menu's opacity menu.style.opacity = menuOp; // the instructions' opacity inst.style.opacity = instOp; // the victory scene's opacity vict.style.opacity = victOp; // the death scene's opacity death.style.opacity = deathOp; }; </script> <!-- animation function --> <script> loadMap(whichLevel, 25, 125); var animate = function(){ // reset mouseClicked mouseClicked = function(){}; // reset cursor document.body.style.cursor = "auto"; // reset debug string if(debug){debug = "";} // draw the current scene drawScene(); // scene transitions changeScene(); // println if(debug){ fill(0); ctx.font = "20px Times"; ctx.fillText(debug, 10, 30); } }; </script> <!-- setting up the animation --> <script> // how many frames we've done so far var frameCount = 0; // frame rate in fps var frameRate = 60; // credit to Green Ghost from Khan Academy for this (www.khanacademy.org/profile/GreenGhost1/projects) setInterval(function() { frameCount++; animate() }, 1000 / frameRate); </script> </head> <!-- this is where stuff happens in real time, in every frame --> <body onkeydown="keyPressed(event)" onkeyup="keyReleased(event)" onclick="onClick(event)" onmousemove="updateMouse(event)"> <!-- menu html code --> <canvas id="menu" width="400px" height="550px"></canvas> <!-- instructions html code --> <div id="inst"> <h6>HOW TO PLAY</h6> <br> <p class="how">The core gameplay of Kingdom Invasion is that of a flanking system. The map is built on a hexgrid - similar to that of the civilization series - with enemies and obstacles dotted around it.<br><br> If an enemy spots you, they will move to attack and damage you. Naturally, you can fight back. This is where the flanking system takes effect.<br><br> Attacking an enemy head-on will deal minimal damage, and will give them ample opportunity to attack you in return.<br><br> Attacking from the front, but at an angle, will deal a slightly increased amount of damage, and an even greater amount of damage will be dealt if attacking the enemy's rear at an angle.<br><br> Finally, the greatest amount of damage, that of flanking and attacking from directly behind, will be the most effective way of defeating enemies. A lot of the time without them being able to respond. But be warned! Some may be resistant to these attacks and not fall immediately!<br><br> The picture below demonstrates the flanking system, with the numbers representing the amount of damage dealt. </p> <br> <canvas id="explain"></canvas> <br> <p class="how"> Controls:<br> W - Directly forwards<br> Q - Forwards to the left<br> E - Forwards to the right<br> S - Directly backwards<br> A - Backwards to the left<br> D - Backwards to the right<br> </p> <br> <h6><span id="close">CLOSE</span></h6> </div> <!-- victory html code --> <div id="victory"> <h6 class="win">VICTORY!</h6> <br> <canvas id="crown"></canvas> <br> <h6 class="win"><span id="back">BACK TO MENU</span></h6> </div> <!-- death scene html code --> <div id="death"> <h6>DEATH.</h6> <br> <canvas id="skull"></canvas> <br> <h6><span id="retry">TRY AGAIN</span></h6> </div> </body> </html>
Folds	22,146,152,158,161,206,209,237,240,395,398,484,487,1169,1172,4395,4398,4587,4590,5326,5329,6072,6075,6259,6262,6797,6800,6826,6829,6841,6850,6884,6887,6895,6898,6906
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOB1ayGCQw
Votes	177
Spin-Offs	27
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	CZS
Author Name	theMinstrel
Author ID	kaid_676584471536152741627316
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739374882519
Updated	10 months ago, 1739374887350
Source Deleted	unknown