var canvas; var ctx; var af; var interval; var grid; var n = 50, m = 50; var nInput, mInput; var ENEMY = "ENEMY"; var FRIENDLY = "FRIENDLY"; var PATTERN_LENGTH = 4; var UNITS_AMOUNT = 10; var units = []; var missiles = []; var DIR = { L: [-1, 0], LU: [-1, -1], U: [0, -1], UR: [-1, 1], R: [1, 0], DR: [1, 1], D: [0, 1], DL: [-1, -1] } var stats = { shots: 0, hits: 0 } function init(){ nInput = document.getElementById("n"); mInput = document.getElementById("m"); canvas = document.getElementById("canvas"); canvas.addEventListener("click", addMissile); ctx = canvas.getContext("2d"); reset(null); } function reset(e){ n = parseInt(nInput.value, 10) || n; m = parseInt(mInput.value, 10) || m; grid = new Grid(ctx, n, m); clearInterval(interval); units = []; missiles = []; stats = { shots: 0, hits: 0 } for(var i = 0; i < UNITS_AMOUNT; i ++){ units.push(new Unit(ctx, n, m, ENEMY)); } for(var i = 0; i < UNITS_AMOUNT / 2; i ++){ units.push(new Unit(ctx, n, m, FRIENDLY)); } addMissiles(); if(e){ fireAll(); } draw(); interval = setInterval(draw, 300); } function getPosition(e) { // get touches object if exists var w = canvas.width; var h = canvas.height; var touch = e.changedTouches; // calculate offset of canvas var offset = canvas.getBoundingClientRect(); var scaleX = w / offset.width; var scaleY = h / offset.height; var offsetX = offset.left; var offsetY = offset.top; // get mouse position var x = e.clientX; var y = e.clientY; // get touches if available, otherwise get position from mouse event (default) if (touch) { x = touch[0].clientX; y = touch[0].clientY; } // return new position with calculated offsets return { x: (x - offsetX) * scaleX, y: (y - offsetY) * scaleY } } function addMissile(evt){ var w = canvas.width; var h = canvas.height; var dx = w / n; var dy = h / m; pos = getPosition(evt); missiles.push(new Missile(ctx, n, m, Math.floor(pos.x/dx), Math.floor(pos.y/dy), null)); } function addMissiles(){ for(var i = 0; i < units.length; i++){ var unit = units[i]; if(unit.type !== ENEMY) continue; missiles.push(new Missile(ctx, n, m, unit.x, unit.y, unit)); /* var c = randColor(); missiles[missiles.length - 1].color = c; unit.color = c; */ } } function randVal(min,max){ return Math.floor(Math.random() * (max - min) + min); } function randColor(){ // generates random color string var vec="0123456789abcdef"; var color="#"; for(var i=0;i<6;i++){ color+=vec[randVal(0,vec.length-1)]; } return color; } function randPattern(len){ var moves = []; for(var i = 0; i < len; i++){ moves.push(Object.keys(DIR)[randVal(0, Object.keys(DIR).length - 1)]); } return moves; } function drawLine(x1, y1, x2, y2){ ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.stroke(); } function Grid(ctx, n, m){ this.ctx = ctx; this.canvas = ctx.canvas; this.n = n; this.m = m; this.draw = function(){ var w = this.canvas.width; var h = this.canvas.height; var dx = w / n; var dy = h / m; this.ctx.lineWidth = 1; this.ctx.strokeStyle = "green"; for(var i = dx; i < w; i+=dx){ drawLine(i, 0, i, h) } for(var i = dy; i < h; i+=dy){ drawLine(0, i, w, i); } } } function Unit(ctx, n, m, type){ this.ctx = ctx; this.canvas = ctx.canvas; this.n = n; this.m = m; this.type = type; this.sizeW = randVal(1, 6); this.sizeH = randVal(1, 4); this.dx = randVal(1, 3); this.dy = randVal(1, 3); this.w = ctx.canvas.width / n; this.h = ctx.canvas.height / m; this.x = randVal(0, this.n); //this.x = this.n / 2; this.y = randVal(0, this.m * 0.5); this.color = type === ENEMY? "blue":"lightgreen"; this.power = randVal(1, 5); this.pattern = randPattern(PATTERN_LENGTH); this.currentMove = 0; this.draw = function(){ this.ctx.globalAlpha = 0.6; this.ctx.fillStyle = this.color; this.ctx.beginPath(); this.ctx.rect(this.x * this.w, this.y * this.h, this.w * this.sizeW, this.h * this.sizeH); this.ctx.closePath(); this.ctx.fill(); this.ctx.globalAlpha = 1.0; } this.move = function(){ var dir = this.pattern[this.currentMove++ % this.pattern.length]; this.x += DIR[dir][0] * this.dx; this.y += DIR[dir][1] * this.dy; } } function Missile(ctx, n, m, targetX, targetY, target){ this.ctx = ctx; this.canvas = ctx.canvas; this.n = n; this.m = m; this.w = ctx.canvas.width / n; this.h = ctx.canvas.height / m; this.x = randVal(0, this.n); this.y = this.m + 1; this.targetX = targetX; this.targetY = targetY; this.target = target; this.power = randVal(1, 5); this.dy = -randVal(2, 5); this.dx = Math.abs(this.targetX * this.w - this.x * this.w) / Math.abs(this.y * this.h - this.targetY * this.h) * Math.abs(this.dy) * ((this.targetX * this.w < this.x * this.w)? -1:1); this.color = "yellow"; this.fired = target ? 0:1; this.draw = function(){ this.ctx.fillStyle = this.color; this.ctx.beginPath(); this.ctx.rect( Math.round(this.x) * this.w, this.y * this.h, this.w, this.h ); this.ctx.closePath(); this.ctx.fill(); if(this.y * this.h > this.targetY * this.h && this.fired){ this.ctx.strokeStyle = this.color; drawLine( Math.round(this.x) * this.w + this.w / 2, this.y * this.h + this.h / 2, this.targetX * this.w + this.h / 2, this.targetY * this.h + this.h / 2 ); } if(this.ttt >= 0){ this.ctx.fillStyle = "red"; this.ctx.fillText(this.ttt, this.x * this.w - this.w, this.y * this.h - this.h); } } this.ttt = -1; this.fire = function(){ if(this.fired) return; this.fired = 1; stats.shots++; var x = this.target.x; var y = this.target.y; var tries = 0; var i = this.target.currentMove % this.target.pattern.length; // limit tries to double the size of m while(tries++ < this.m*2){ // get the next direction of the target var dir = this.target.pattern[i++ % this.target.pattern.length]; // simulate single target step x += DIR[dir][0] * this.target.dx; y += DIR[dir][1] * this.target.dy; // Thanks Haris ;) //var dist = Math.hypot(x-this.x,y-this.y) var nx = (x - this.x)/this.dx; // find the time it will take the missile (this.x) to reach the simulated target (y) at it constant speed (this.dy) var ny = (y - this.y)/this.dy; // if the missile can reach the target in ny tries, or at least close enough, set the Time To Target (this.ttt) of the missile and break the loop if(Math.abs(ny - tries) <= 0.5){ this.ttt = Math.ceil(Math.abs(ny)); break; } } this.targetX = x; this.targetY = y; this.dx = Math.abs(this.targetX * this.w - this.x * this.w) / Math.abs(this.y * this.h - this.targetY * this.h) * Math.abs(this.dy) * ((this.targetX * this.w < this.x * this.w)? -1:1); } this.move = function(){ this.ttt--; this.x += this.dx * this.fired; this.y += this.dy * this.fired; } } function updateUnits(){ for(var i =0; i < units.length; i++){ units[i].move(); } } function drawUnits(){ for(var i =0; i < units.length; i++){ units[i].draw(); } } function updateMissiles(){ for(var i = 0; i < missiles.length; i++){ missiles[i].move(); } } function drawMissiles(){ for(var i = 0; i < missiles.length; i++){ missiles[i].draw(); } } function checkHits(){ for(var i = missiles.length-1; i >= 0; i--){ var hit = false; var destroyed = false; var missile = missiles[i]; for(var j = units.length-1; j >= 0; j--){ var unit = units[j]; if(missile.x >= unit.x && missile.x <= unit.x + unit.sizeW && missile.y - missile.dy >= unit.y && missile.y + missile.dy <= unit.y + unit.sizeH){ unit.color = "red"; missile.color = "red"; console.log(`${unit.type} unit lost ${unit.power} power!`); unit.sizeW -= missile.power; unit.sizeH -= missile.power; unit.power -= missile.power; destroyed = unit.power <= 0; hit = true; break; } } if((missile.y < 0 && missile.target && missile.target.destroyed) || (missile.y < -50 && missile.target && missile.y - missile.target.y > 50)){ missiles.splice(i, 1); } if(hit){ missiles.splice(i, 1); if(unit.type === ENEMY){ stats.hits++; } } if(destroyed){ console.log(`${unit.type} destroyed!`); var deadUnit = units.splice(j, 1); deadUnit[0].destroyed = true; } } } function drawStats(){ var enemies = units.filter(function(unit){ return unit.type === ENEMY; }).length; var friendlies = units.length - enemies; ctx.fillStyle = "yellow"; var w = canvas.width / n; var h = canvas.height / m; ctx.fillText(`Shots: ${stats.shots}`, w*2, h*2); ctx.fillText(`Hits: ${stats.hits}`, w*2, h*4); ctx.fillText(`Enemies: ${enemies}`, w*2, h*6); ctx.fillText(`Friendlies: ${friendlies}`, w*2, h*8); ctx.fillText(`Active Missiles: ${missiles.length}`, w*2, h*10); } function draw(){ ctx.clearRect(0, 0, canvas.width, canvas.height); grid.draw(); drawStats(); drawUnits(); drawMissiles(); drawStats(); checkHits(); updateUnits(); updateMissiles(); fireMissiles(); } function fireMissiles(){ for(var i = 0; i < units.length; i++){ var unit = units[i]; if(unit.type !== ENEMY) continue; var hasMissile = missiles.find(function(missile){ return missile.target === unit && !missile.target.destroyed; }); if(hasMissile){ continue; } var missile = new Missile(ctx, n, m, unit.x, unit.y, unit); missiles.push(missile); missile.fire(); /* var c = randColor(); missiles[missiles.length - 1].color = c; unit.color = c; */ } } function fireAll(){ if(missiles.length === 0){ addMissiles(); } for(var missile of missiles){ missile.fire(); } } window.onload = init; if(!Array.prototype.find){Object.defineProperty(Array.prototype,'find',{value:function(predicate){if(this==null){throw new TypeError('"this" is null or not defined')} var o=Object(this);var len=o.length>>>0;if(typeof predicate!=='function'){throw new TypeError('predicate must be a function')} var thisArg=arguments[1];var k=0;while(k

Defend the base