//=========== // Config // The number of tiles on the screen width * height // Entities spawn on the top of the screen and move down, usually const Tiles_Screen_Width = 25; const Tiles_Screen_Height = 25; const Maximum_entities_on_screen = 6; const Maximum_missiles_on_screen = 4; // 100 always spawn something // 50 50 / 50 chance // 0 spawn nothing const Entity_spawn_rate = 30; const Missile_spawn_rate = 80; // Out of all the entities that spawn, this % is friendly const Friendly_spawn_rate = 40; //=========== var canvas; var ctx; window.onload = function() { canvas = document.getElementById( "Canvas" ); ctx = canvas.getContext( "2d" ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; Application(); }; function getRandom( min, max ) { if( max < min ) max = min; return Math.floor( Math.random() * ( max - min + 1 ) + min ); } function Coordinate( x, y ) { this.x = x; this.y = y; } function distanceTo( x1, y1, x2, y2 ) { // No need for sqrt really return ( x1 - x2 ) * ( x1 - x2 ) + ( y1 - y2 ) * ( y1 - y2 ); } function Entity( x, y, img, friendly ) { this.x = x; this.y = y; this.img = img; this.friendly = friendly; this.dx = 0; this.dy = 0; this.maxSize = 6; this.parts = []; this.maxMovementSize = 4; this.movementIndex = 0; this.movement = []; this.maxSpeed = 2; this.speed = 1; this.health = 0; this.generate = function() { this.generateParts(); this.generateMovement(); }; this.generateParts = function() { const DIRECTIONS = [[0, -1],[-1, 0], [1, 0], [0, 1], [-1, -1], [1, -1], [-1, 1], [1, 1]]; const partsSize = getRandom( 0, this.maxSize - 1 ) + 1; var x = this.x, y = this.y; this.parts = []; this.parts.push( [ new Coordinate( x, y ), true ] ); while( this.parts.length < partsSize ) { var index = getRandom( 0, this.parts.length - 1 ); var part = this.parts[index]; var direction = getRandom( 0, DIRECTIONS.length - 1 ); var nx = DIRECTIONS[ direction ][0] + part[0].x; var ny = DIRECTIONS[ direction ][1] + part[0].y; if( !this.hasPartAt( nx, ny ) ) { this.parts.push( [ new Coordinate( nx, ny ), true ] ); } } this.speed = getRandom( 1, Math.ceil( this.maxSpeed / partsSize ) ); this.health = partsSize; const compareFunction = (a,b) => distanceTo( a[0].x, a[0].y, this.x, this.y ) - distanceTo( b[0].x, b[0].y, this.x, this.y ); this.parts.sort( compareFunction ); }; this.generateMovement = function() { const DIRECTIONS = [[0, -1],[-1, 0], [1, 0], [0, 1]]; const movementSize = getRandom( 0, this.maxMovementSize - 1 ) + 1; do { this.dx = 0; this.dy = 0; this.movement = []; for( var i = 0; i < movementSize; ++i ) { var direction = getRandom( 0, DIRECTIONS.length - 1 ); this.movement.push( DIRECTIONS[ direction ] ); this.dx += DIRECTIONS[ direction ][0]; this.dy += DIRECTIONS[ direction ][1]; } } while( this.dy <= 0 || Math.abs( this.dx ) > 2 ); }; this.hasPartAt = function( x, y ) { for( var i = 0; i < this.parts.length; ++i ) { var pos = this.getPosition( i ); if( pos.x == x && pos.y == y ) { return true; } } return false; }; this.destroy = function( x, y, power ) { var index = -1; for( var i = 0; i < this.parts.length; ++i ) { var pos = this.getPosition( i ); if( pos.x == x && pos.y == y ) { index = i; break; } } var leftSize = index - ( Math.ceil( power / 2 ) - 1 ); var rightSize = index + Math.floor( power / 2 ) + 1; var begin = Math.max( 0, leftSize ); var end = Math.min( this.parts.length, rightSize ); if( leftSize != begin ) end += -leftSize; if( rightSize != end ) begin -= Math.abs( rightSize - end ); begin = Math.max( 0, begin ); end = Math.min( this.parts.length, end ); for( var i = begin; i < end; ++i ) { this.destroyPart( i ); } }; this.getPosition = function( index ) { if( index < 0 || index >= this.parts.length ) return undefined; var x = this.parts[index][0].x; var y = this.parts[index][0].y; return new Coordinate( x, y ); }; this.isPartIntact = function( index ) { return this.parts[index][1]; }; this.destroyPart = function( index ) { if( this.isPartIntact( index ) ) { --this.health; } this.parts[index][1] = false; }; this.moveParts = function( dx, dy ) { for( var i = 0; i < this.parts.length; ++i ) { this.parts[i][0].x += dx; this.parts[i][0].y += dy; } this.x = this.parts[0][0].x; this.y = this.parts[0][0].y; }; this.update = function() { for( var i = 0; i < this.speed; ++i ) { var dx = this.movement[this.movementIndex][0]; var dy = this.movement[this.movementIndex][1]; this.moveParts( dx, dy ); if( ++this.movementIndex >= this.movement.length ) this.movementIndex = 0; } }; this.draw = function() { for( var i = 0; i < this.parts.length; ++i ) { if( this.isPartIntact( i ) ) { var pos = this.getPosition( i ); ctx.drawImage( this.img, pos.x * this.img.width, pos.y * this.img.height ); } } }; } function Missile( x, y, speed, power, imgArr ) { this.x = x; this.y = y; this.dx = 0; this.dy = -1; this.speed = speed; this.power = power; this.fuel = Math.ceil( Tiles_Screen_Height * 0.8 ); this.imgArr = imgArr; this.rotation = 0; this.health = 1; this.targetEntity = undefined; this.targetIndex = -1; this.lastDistance = -1; this.boost = false; this.originalSpeed = speed; this.setTarget = function( target ) { this.targetEntity = target; this.targetIndex = this.getTargetIndex(); }; this.getTargetIndex = function() { var index = getRandom( 1, this.targetEntity.health ); var i = 0; while( index ) { if( this.targetEntity.isPartIntact( i ) ) --index; ++i; } return i - 1; }; this.decreaseFuel = function() { --this.fuel; if( this.boost ) { this.activateBoost(); this.boost = false; } else { this.deactivateBoost(); } if( this.fuel < 0 ) this.fuel = 0; }; this.checkIfTargetIsInvalid = function() { return this.targetEntity && ( this.targetEntity.health == 0 || this.targetEntity.y < -1 || this.targetEntity.y > Tiles_Screen_Height || this.targetEntity.x < 0 || this.targetEntity.x > Tiles_Screen_Width ); }; this.invalidateTarget = function() { this.targetEntity = undefined; }; this.calculateDirection = function() { var target = this.targetEntity.getPosition( this.targetIndex ); this.dx = target.x - this.x; this.dy = target.y - this.y; }; this.activateBoost = function() { if( this.fuel > 2 ) { ++this.speed; this.fuel -= 2; } }; this.deactivateBoost = function() { this.speed = this.originalSpeed; }; this.setRotation = function() { if( this.dx > 0 && Math.abs( this.dx ) >= Math.abs( this.dy ) ) this.rotation = 1; if( this.dx < 0 && Math.abs( this.dx ) >= Math.abs( this.dy ) ) this.rotation = 3; if( this.dy > 0 && Math.abs( this.dy ) >= Math.abs( this.dx ) ) this.rotation = 2; if( this.dy <= 0 && Math.abs( this.dy ) >= Math.abs( this.dx ) ) this.rotation = 0; }; this.update = function() { if( this.fuel ) { if( this.checkIfTargetIsInvalid() ) this.invalidateTarget(); if( this.targetEntity ) { if( !this.targetEntity.isPartIntact( this.targetIndex ) ) { this.targetIndex = this.getTargetIndex(); } this.calculateDirection(); var distance = Math.abs( this.dx ) + Math.abs( this.dy ); if( Math.abs( distance - this.lastDistance ) < 3 && distance < 3 ) { this.boost = true; } this.lastDistance = distance; this.setRotation(); if( this.dx != 0 ) this.dx /= Math.abs( this.dx ); if( this.dy != 0 ) this.dy /= Math.abs( this.dy ); } } if( this.dy == 0 && this.dx == 0 ) this.health = 0; if( !this.targetEntity && this.y >= Tiles_Screen_Height - 1 ) this.health = 0; this.x += this.dx; this.y += this.dy; }; this.draw = function() { var img = this.imgArr[this.rotation]; ctx.drawImage( img, this.x * img.width, this.y * img.height ); }; }; // Made by Dennis :) function Application() { var blankImg, greenImg, redImg; var missileImgArr = []; const Enemy_Entity = 1, Friendly_Entity = 2; const WIDTH = Tiles_Screen_Width, HEIGHT = Tiles_Screen_Height; const Min_Spawn_AreaX = 4, Max_Spawn_AreaX = WIDTH - 4; const Min_Spawn_AreaY = 0, Max_Spawn_AreaY = 2; var scaleX, scaleY; var reciprocal_scaleX, reciprocal_scaleY; var grid = []; var entities = []; var missiles = []; onresize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; calculateScale(); }; function calculateScale() { scaleX = canvas.width / WIDTH / blankImg.width; scaleY = canvas.height / HEIGHT / blankImg.height; reciprocal_scaleX = 1 / scaleX; reciprocal_scaleY = 1 / scaleY; }; function initialize() { window.addEventListener( "onresize", onresize, false ); for( var y = 0; y < HEIGHT; ++y ) { grid[y] = []; for( var x = 0; x < WIDTH; ++x ) { grid[y][x] = 0; } } loadImages(); calculateScale(); setTimeout( onresize, 1 ); }; function loadImages() { blankImg = new Image(); blankImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAABKSURBVDhP7cyxDQAgCETRG43RWINpMZhosDMIVhS/gFwemFlfAqBEtKsDRWTmxzf9A6M12GCgBgtAe7x2gP6I5tEU0FpoGmgB0AEQA2DKM0xz8wAAAABJRU5ErkJggg=="; greenImg = new Image(); greenImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC45bDN+TgAAAE1JREFUOE9j4Mrm+k8JZmBg+O/g4ADHtDNQcK0gGCMrJgbTz0By8aiBowaSgUcNpIGBIAFKMYqByBxyMbKhVDEQhGGGUs1AEGZgYPgPAO+aX88mWdXwAAAAAElFTkSuQmCC"; redImg = new Image(); redImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC45bDN+TgAAAE1JREFUOE9jyObi+k8JZmBg+O/g4ADHtDNwraAgGCMrJgbTz0By8aiBowaSgUcNpIGBIAFKMYqByBxyMbKhVDEQhGGGUs1AEGZgYPgPAFGVX8/LLbRbAAAAAElFTkSuQmCC"; missileImgArr = []; for( var i = 0; i < 4; ++i ) missileImgArr.push( new Image() ); missileImgArr[0].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAp0lEQVQ4T62PgQ3CMAwEu2LXYIqMklEyBlKHCT4JSyZ5SoSDdASuzsk9eu9bkTJiHzv0M4WUDrFSCj/sr54ZkdLZGiRyGbXWfp3nclRKIMB2jLTW9gXZMB3ksr+uB1dfW0vTbEeUEWKrW2r5DsYN00GIQXfj7IiUaA9E7Msei/nALFEP4+5k7guz5NLTuDvHO4FPsRL7EZ1lIgZSZpAyg5QZpPyffrwA9ataKZDoUo0AAAAASUVORK5CYII="; missileImgArr[1].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAE/SURBVDhPtZNpTsMwEIXHCUvF6dpLUAEtJ8h2kSq5SBOfoSDEcgn+UKAQhjexgxpsRIvFk57Gnow/j2yHQsXMAwfLC+RzOjaj/eUAARvxnDaIJ5ge2Lqd5QLniFewxAgmOkJdZMp/lwu8RhSYxDPiN6RAw5eBf9zABfawGawMQCnFRVF0fjDAFsZetIEHcoHbHU4NsKqqzgKrypLzPOcsy/jGwF/hZ4GJXKCnwx74YccloC26rhYLTtOUkySRurUfuNVhazus65p10/D9ZMJaa24w1ssl32EeRRHHcSxHMPIDLxHlli9wIegwRkoWCUgDfDsed5t0IKXkHA/hr3frAleIPfSUGKcui96l1louQsHYy32nLnBG6w46pRdMn2zdznKB+O3gR/t9bznAUP0/8Hsi1N5kiL3JEHuTfzfTJxChgCgpqREWAAAAAElFTkSuQmCC"; missileImgArr[2].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAGJSURBVDhPpZJbTsJAFIZPhxEwPrg12IMapYqXNwJJWQiE7oNLWYBBfVCjS/BBn+RW6PE/U4iUUqnwJX8Oc2bmmxlSEriE2HTM1zTkATHfIo/IDfKwUsuYt+lI1i9h5kjCZolyfEUffE8B36EvUpEspVLlkAHmL+kT67PhzgShwOc42aaxkZWRp7UqUpsmfEGHiy2GZCGRZk3fwSmxr4nnqJxBTsIanKFaNMK6zGKLIVEozIjyQ4v8A+P/DQw8IfLnRJiK8qcQKGyeaa250+mw67rcbDZxMZLgPEKJsk0oG4Jut8ter2eErVaLHceRlbhgnG1CgfuQvRWLHOD3O1Kv183Tw+koaYTTV8j6nscubieBFG7z5BhphFphnQfh2nNj/5+QRqgsy5r32m2eKcVOrcYY++jvLMzAOH4pFAK30eBnSHHjKfoocdII5So5pZRfrVYZFZ9g9GNeJZUQZCEaVyqVAHWEsQ7bcdIKhTzyheTMKIH/CFMRE6439s3G5j7Z2NwnG5u7h+kHm4WHao5wWtMAAAAASUVORK5CYII="; missileImgArr[3].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAGHSURBVDhPrZRfS8JgFMbPu5mKUPTR5meQiP4h1YUggn4OQd3nEPxzHVY3FdV9d14FprLtfXrOStBaFlsHfrzjsPPbuz3bJGsB2CB14VjyJLuQIy4OpYRTecGJ7GcRmkCkYF155c5muJIIVR5vE5qPxSXO57ogVmEjmIkso4pYOxGLS6LrFmGBwoJjzMIYE/HYPngexsMhBoMBXNe1efaCHOeqZEIu1JEsLHFg4ThOcO95dtjvYzQaYUwey2UMKeyzx/MQVjh3S87JjTqShdNarRbV63Xrt9sIHAe9Xg8+iSjxfT+G58Gudqgylf4gzPM2Z2RxZ4xtNhpoNpvwu108U6LyTqcTC7G+w2t1JAu14jD47JYUM1CJnvjMWq1WLGcfDAZwyR92uF4atqJJh0RTDtkI50zaHnBOZRrILzvcWju8AO1Fvj9znMmSKet7+JZaqMWAhPeew5HsUjrll7KXSailIxTqt1ykcEOWSrgq/THE638JV/VN+LWRlcRmFhKbWUhspgfyDvfDi82BIBrhAAAAAElFTkSuQmCC"; }; function spawnEntities() { if( entities.length < Maximum_entities_on_screen && getRandom( 0, 99 ) < Entity_spawn_rate ) { var isFriendly = getRandom( 0, 99 ) < Friendly_spawn_rate; var entity = new Entity( getRandom( Min_Spawn_AreaX, Max_Spawn_AreaX ), getRandom( Min_Spawn_AreaY, Max_Spawn_AreaY ), isFriendly ? greenImg : redImg, isFriendly ); entity.generate(); entities.push( entity ); } }; function assignTarget( missile ) { if( getAmountOfEnemies() > 0 ){ var target = ( getRandom( 0, 2 ) == 0 ? getClosestEntity( missile ) : getRandomEntity() ); if( target && target.health > 0 ) { missile.setTarget( target ); } } }; function spawnMissiles() { if( missiles.length < Maximum_missiles_on_screen && entities.length > 0 && getRandom( 0, 99 ) < Missile_spawn_rate ) { if( getAmountOfEnemies() > 0 ) { var missile = new Missile( getRandom( 0, WIDTH - 1 ), HEIGHT, getRandom( 1, 2 ), getRandom( 1, 4 ), missileImgArr ); assignTarget( missile ); missiles.push( missile ); } } }; function getAmountOfEnemies() { var enemies = 0; for( var i = 0; i < entities.length; ++i ) { if( !entities[i].friendly && entities[i].health > 0 ) { ++enemies; } } return enemies; }; function getRandomEntity() { if( getAmountOfEnemies() == 0 ) return undefined; // All entities on the field are friendly var index; do { index = getRandom( 0, entities.length - 1 ); }while( entities[index].friendly ); return entities[index]; }; function getClosestEntity( missile ) { var closestEntity = undefined; var closestDistance = Number.MAX_VALUE; for( var i = 0; i < entities.length; ++i ) { if( entities[i].health > 0 && !entities[i].friendly ) { var distance = distanceTo( missile.x, missile.y, entities[i].x, entities[i].y ); if( distance < closestDistance ) { closestDistance = distance; closestEntity = entities[i]; } } } return closestEntity; }; function isInRange( x, y ) { return y >= 0 && y < HEIGHT && x >= 0 && x < WIDTH; }; function checkForCollision( missile ) { var x = missile.x; var y = missile.y; if( isInRange( x, y ) && missile.health > 0 ) { if( grid[y][x][0] === Enemy_Entity || grid[y][x][0] === Friendly_Entity ) { grid[y][x][1].destroy( x, y, missile.power ); missile.health = 0; } } }; function update() { spawnEntities(); spawnMissiles(); for( var y = 0; y < HEIGHT; ++y ) { for( var x = 0; x < WIDTH; ++x ) { grid[y][x] = 0; } } for( var i = 0; i < entities.length; ++i ) { entities[i].update(); for( var j = 0; j < entities[i].parts.length; ++j ) { var pos = entities[i].getPosition( j ); var x = pos.x; var y = pos.y; if( isInRange( x, y ) && entities[i].isPartIntact( j ) ) grid[y][x] = [ entities[i].friendly + 1, entities[i] ]; } } for( var i = 0; i < missiles.length; ++i ) { for( var j = 0; j < missiles[i].speed && missiles[i].health > 0; ++j ) { checkForCollision( missiles[i] ); missiles[i].update(); checkForCollision( missiles[i] ); if( !missiles[i].targetEntity ) { assignTarget( missiles[i] ); } } missiles[i].decreaseFuel(); } entities = entities.filter( function(e){ return !(e.x < -2 || e.x >= WIDTH + 2 || e.y < -2 || e.y >= HEIGHT + 2 || e.health <= 0); } ); missiles = missiles.filter( function(e){ return !(e.x < -2 || e.x >= WIDTH + 2 || e.y < -2 || e.y >= HEIGHT + 2 || e.health <= 0); } ); }; function draw() { ctx.clearRect( 0, 0, canvas.width, canvas.height ); ctx.scale( scaleX, scaleY ); for( var y = 0; y <= HEIGHT; ++y ) { for( var x = 0; x <= WIDTH; ++x ) { ctx.drawImage( blankImg, x * blankImg.width, y * blankImg.height ); } } for( var i = 0; i < entities.length; ++i ) { entities[i].draw(); } for( var i = 0; i < missiles.length; ++i ) { missiles[i].draw(); } ctx.scale( reciprocal_scaleX, reciprocal_scaleY ); }; function loop() { update(); draw(); }; initialize(); const updatesPerSecond = 8; setInterval( loop, 1000 / updatesPerSecond ); }

Defend the Base Contest