/* Written by Alexey Rudenko at Sololearn playground with some little help from James Long. https://jlongster.com/Making-Sprite-based-Games-with-Canvas */ var w, h, k, xo, yo, rp = 1.8, units = [], icons = [], bullets = [], enemies = [], explosions = [], gameTime = 0, isGameOver, enemydep = 1, firstwave = false, deployarea = false, counter = 0, counter2 = 0, gameNum =0, inf = function(){ alert("Drag available units into the deployment area.\n\nYou win, when one of your units gets to the green line at the top of the field.\n\nDon't let enemies to reach your base. \n\nP.S. touchscreen needed") }; (function () { function Sprite(url, pos, size, resized, animspeed, frames, _index, once) { this.pos = pos; this.size = size; this.resized = resized; this.url = url; this.animspeed = animspeed; this.frames = frames; this._index = _index; this.once = once; }; Sprite.prototype = { update: function(dt) { this._index += this.animspeed*dt; }, render: function(ctx) { var frame; if(this.animspeed > 0) { var max = this.frames.length; var idx = Math.floor(this._index); frame = this.frames[idx % max]; if(this.once && idx >= max) { this.done = true; return; } } else { frame = 0; } var x = this.pos[0]; var y = this.pos[1]; x += frame * this.size[0]; ctx.drawImage(resources.get(this.url), x, y, this.size[0], this.size[1], 0, 0, this.resized[0], this.resized[1]); } }; window.Sprite = Sprite; })(); (function () { function Unit(status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle , dir, sprite ) { this.status = status; this.pos = pos; this.hp = hp; this.maxhp = hp; this.speed = speed; this.maxspeed = maxspeed; this.range = range; this.damage = damage; this.reload = reload; this.angle = angle; this.defaultangle = defaultangle; this.dir = dir; this.sprite = sprite }; Unit.prototype = { getAngle : function (target){ var x = this.pos[0] - target[0]; var y = this.pos[1] - target[1]; if (x<0) { return Math.atan(y/x)*(180/Math.PI); } else { return Math.atan(y/x)*(180/Math.PI) - 180; } }, moveAhead : function (dt) { var rad = this.angle/(180/Math.PI); this.pos[0] += Math.cos(rad)*this.speed*dt*this.dir; this.pos[1] += Math.sin(rad)*this.speed*dt*this.dir; }, findTarget : function (t) { for (i=0;i 0.7 && t[i].pos[1] > k ) { this.target = t[i]; this.status = "targetfound"; return; } } }, avoidCollision : function (list, ownindx, dt) { var l = list; for (i=0; i l[i].pos[1]*l[i].dir) { this.speed -= 30* dt; } }; }; }, getDistance : function (t) { return Math.sqrt(Math.pow(this.pos[0]-t.pos[0], 2)+Math.pow(this.pos[1]-t.pos[1], 2)); }, fireOnTarget : function () { var x = this.pos[0] + ((this.sprite.resized[1]/2*this.dir)*Math.cos(this.angle/(180/Math.PI))) ; var y = this.pos[1] + ((this.sprite.resized[0]/2*this.dir)*Math.sin(this.angle/(180/Math.PI))); bullets.push({ pos : [x,y], target : this.target, speed : k*12, damage : this.damage, angle : this.angle, dir : this.dir, sprite : new Sprite("https://d30y9cdsu7xlg0.cloudfront.net/png/321488-200.png", [0,0], [200,200], [k*(this.reload+0.5), k*(this.reload+0.5)]) }); this.lastshot = 0; } }; window.Unit= Unit; })(); var getRandom = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; var getDistance = function (own, ally) { return Math.sqrt(Math.pow(own[0]-ally[0], 2)+Math.pow(own[1]-ally[1], 2)); } var deployUnit = function (unit, pos) { var u = unit; units.push(new Unit(u[0],u[1],u[2],u[3],u[4],u[5],u[6] ,u[7],u[8],u[9],u[10] ,u[11],u[12],u[13])) ; units[units.length-1].pos = pos; deployarea = false; }; var deployEnemy = function (unit, pos) { var u = unit; enemies.push(new Unit(u[0],u[1],u[2],u[3],u[4],u[5],u[6] ,u[7],u[8],u[9],u[10] ,u[11],u[12],u[13])) ; enemies[enemies.length-1].pos = pos; }; var returnToBase = function (icon) { icon.pos = icon.defaultpos; icon.dragable = false; } var gameOver = function (a) { var _min = Math.floor(gameTime/60); var _sec = ('0' + Math.floor(gameTime%60)).slice(-2); switch (a) { case 'win' : alert ("Mission completed! Your time is " + _min + ':' + _sec + '\n\nLosses: '+ counter +' units.\n\nEnemies destroyed: ' + counter2 + '.'); var log_item = "

Game " + ++gameNum + ": 🏆 Win ⏲" + _min + ':' + _sec + "

"; var log = document.getElementById('log'); log.innerHTML += log_item; log.style.display = "block"; loader (); break; case 'loss' : alert ("Mission failed!"+'\n\nLosses: '+ counter +' units.\n\nEnemies destroyed: ' + counter2 + '.'); var log_item = "

Game " + ++gameNum + ": 💩 Fail ⏲" + _min + ':' + _sec + "

"; var log = document.getElementById('log'); log.innerHTML += log_item; log.style.display = "block"; loader(); break; } } var reset = function (){ units = []; icons = []; bullets = []; enemies = []; explosions = []; isGameOver = false; gameTime = 0; enemydep = 1; firstwave = false; deployarea = false; counter = 0; counter2 = 0; } var xxx = 0, yyy = 0; ///////////////////////////// var startGame = function () { reset(); var log = document.getElementById('log'); log.style.display = "none"; var maindiv = document.getElementById("main"); maindiv.innerHTML = '

'; var c = document.getElementById("c"); var ctx = c.getContext("2d"); w = window.innerWidth; h = window.innerHeight; c.height = h - 46; w < c.height ? c.width = w - 46 : c.width = c.height*0.7; k = c.width/26; xo = c.offsetLeft; yo = c.offsetTop; //// icons = [{ pos : [c.width/28, c.height - c.height/8], defaultpos : [c.width/28, c.height - c.height/8], respawn : false, sprite : new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 134], [c.width/5.5, c.height/10.5]) },{ pos : [c.width/3.4, c.height - c.height/8.5], defaultpos : [c.width/3.4, c.height - c.height/8.5] , respawn : false, sprite : new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [71, 600], [159, 130], [c.width/6.5, c.height/12]) },{ pos : [c.width/1.85, c.height - c.height/8.2], defaultpos : [c.width/1.85, c.height - c.height/8.2] , respawn : false, sprite : new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [52, 269], [205, 124], [c.width/5.8, c.height/12]) }]; /// c.addEventListener("touchmove", function(event) { var touch = event.touches[0]; xxx = touch.pageX - xo -3; yyy = touch.pageY - yo -3; if ( xxx > icons[0].pos[0] && xxx < icons[0].pos[0] +(k*5) && yyy > icons[0].pos[1] -(k*3) && yyy < icons[0].pos[1] +(k*3)&& icons[0].respawn == false) { if(!icons[1].dragable && !icons[2].dragable) { icons[0].dragable = true; basictank[0] = 'readyfordeploy'; deployarea = true; } } if ( xxx > icons[1].pos[0] && xxx < icons[1].pos[0] +(k*5) && yyy > icons[1].pos[1] -(k*3) && yyy < icons[1].pos[1] +(k*3) && icons[1].respawn == false ) { if(!icons[0].dragable && !icons[2].dragable) { icons[1].dragable = true; lighttank[0] = 'readyfordeploy'; deployarea = true; } } if ( xxx > icons[2].pos[0] && xxx < icons[2].pos[0] +(k*5) && yyy > icons[2].pos[1] -(k*3) && yyy < icons[2].pos[1] +(k*3) && icons[2].respawn == false ) { if(!icons[0].dragable && !icons[1].dragable) { icons[2].dragable = true; ttank[0] = 'readyfordeploy'; deployarea = true; } } event.preventDefault(); }, false); c.addEventListener("touchend", function (event) { var inside = false; if (xxx > c.width/100 && yyy > c.height/2 && xxx < c.width-c.width/100 - 3 && yyy < c.height/2 + c.height/3.7) { inside = true; } if (basictank[0] == 'readyfordeploy' && inside ) { basictank[0] = ' '; deployUnit(basictank, [xxx,yyy]); units[units.length -1].status = 'acceleration'; icons[0].pos = [icons[0].defaultpos[0], icons[0].defaultpos[1]+ c.width/4]; icons[0].dragable = false; icons[0].respawn = true; deployarea = false; } else if (!inside && !icons[0].respawn) { returnToBase(icons[0]); basictank[0] = ' ' } if (lighttank[0] == 'readyfordeploy' && inside) { lighttank [0] = ' '; deployUnit(lighttank , [xxx,yyy]); units[units.length -1].status = 'acceleration'; icons[1].pos = [icons[1].defaultpos[0], icons[1].defaultpos[1]+ c.width/4]; ; icons[1].dragable = false; icons[1].respawn = true; } else if (!inside && !icons[1].respawn) { returnToBase(icons[1]); lighttank [0] = " "; } if (ttank[0] == 'readyfordeploy' && inside) { ttank [0] = ' '; deployUnit(ttank , [xxx,yyy]); units[units.length -1].status = 'acceleration'; icons[2].pos = [icons[2].defaultpos[0], icons[2].defaultpos[1]+ c.width/4]; ; icons[2].dragable = false; icons[2].respawn = true; } else if (!inside && !icons[2].respawn) { returnToBase(icons[2]); ttank [0] = " "; } }, false); lastTime = Date.now(); // units // stats -- status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle , dir, sprite var basictank = ['acceleration', [0,0], 500, 0, k*1.5, k*6, 299, 1.3, -90, -90, 1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 135], [c.width/11, c.height/21])]; var lighttank = ['acceleration', [0, 0], 200, 0, k*2.6, k*9.5, 149, 0.9, -90, -90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [71, 600], [159, 130], [c.width/13, c.height/24])]; var ttank = ['acceleration', [0, 0], 150, 0, k*2.1, k*12.5, 35, 0.15, -90, -90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [52, 269], [205, 124], [c.width/11.6, c.height/24])]; //enemy units var enemybasic = ['acceleration', [0,0], 500, 0, k*1.5, k*6, 299, 1.3, -90, -90, -1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [365, 76], [194, 135], [c.width/11, c.height/21])]; var enemylight = ['acceleration', [200, 200], 200, 0, k*2.6, k*9.5, 149, 0.7, -90, -90, -1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [395, 600], [159, 130], [c.width/13, c.height/24])]; var enemyttank = ['acceleration', [0, 0], 150, 0, k*2.1, k*12.5, 35, 0.15, -90, -90, -1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [362, 269], [205, 124], [c.width/11.6, c.height/24])]; main() // The main game loop function main() { var now = Date.now(); var dt = (now - lastTime) /1000; update(dt); render(); lastTime = now; if (!isGameOver) requestAnimFrame(main); }; function update(dt) { gameTime += dt; if (Math.floor(gameTime) == 1 && firstwave == false) { deployEnemy (enemybasic, [c.width/4,c.height/5]); deployEnemy (enemylight, [c.width/5, c.height/18]); deployEnemy (enemybasic, [c.width-(c.width/4), c.height/5]); deployEnemy (enemylight, [c.width-(c.width/5),c.height/18]); deployEnemy (enemyttank, [c.width/2,c.height/20]); firstwave = true; } if (Math.floor(gameTime) == enemydep*11) { deployEnemy (enemybasic, [getRandom(30, c.width -30),getRandom(-20,-40)]); deployEnemy (enemylight, [getRandom(30, c.width -30) ,getRandom(-20,-40)-(k*2)]); deployEnemy (enemybasic, [getRandom(30, c.width -30),getRandom(-20,-40)]); deployEnemy (enemylight, [getRandom(30, c.width -30) ,getRandom(-20,-40)-(k*2)]); deployEnemy (enemyttank, [getRandom(30, c.width -30) ,getRandom(-20,-40)-(k*4)]); deployEnemy (enemyttank, [getRandom(30, c.width -30) ,getRandom(-20,-40)-(k*4)]); enemydep++; } updateEntities(dt, units); updateEntities(dt, enemies); updateBullets(dt); updateIcons(dt); // checkCollisions(); }; function updateIcons(dt) { for(i=0;i icons[i].defaultpos[1] && icons[i].respawn == true) { icons[i].pos[1] -= rp*k*dt; } else { icons[i].respawn = false; } } }; function updateEntities(dt, list) { // Update the tank position for(var i=0; i c.height- (c.width/4 +2*k)) { isGameOver = true; gameOver('loss'); break; } else if ( list == units && u.pos[1] < k*2 ) { isGameOver = true; gameOver('win'); break; } if ( u.status == "acceleration" && u.speed < u.maxspeed ) { u.speed += 15*dt; switch(list) { case units : if (u.angle < u.defaultangle ) { u.angle += 100*dt*u.dir; } else if (u.angle > u.defaultangle ) { u.angle -= 100*dt*u.dir; } break; case enemies : u.cang = u.defaultangle ; if (u.cang < -90){ u.cang +=180; } else if (u.cang > -90){ u.cang -=180; } if (u.cang < u.angle ){ u.angle -= 75*dt; }else if (u.cang > u.angle) { u.angle += 75*dt; } } } if (u.time > 1 && !u.target && u.pos[1]>k) { u.findTarget(u2); } if (u.target && u.target.destroyed){ u.status = 'acceleration'; delete u.target; } else if (u.status == "targetfound" && !u.target.destroyed) { if (u.speed >0) { u.speed -= u.maxspeed*2*dt; } else { u.speed = 0 } switch (list){ case units : u.cang = u.getAngle(u.target.pos); if (u.cang > u.angle ){ u.angle += 75*dt; }else if(u.cang< u.angle) { u.angle -= 75*dt; } break; case enemies : u.cang = u.getAngle(u.target.pos); if (u.cang < -90){ u.cang +=180; } else if (u.cang > -90){ u.cang -=180; } if (u.cang < u.angle ){ u.angle -= 75*dt; }else if (u.cang > u.angle) { u.angle += 75*dt; } } if (u.lastshot > u.reload && Math.floor(u.angle) == Math.floor(u.cang) && u.getDistance(u.target) < u.range) { u.fireOnTarget(); } } if (u.time>0.7 && u.speed > 0) { u.moveAhead(dt); } }; } function updateBullets (dt){ // Update all the explosions for(var i=0; i b.target.pos[1]-k && b.pos[0] < b.target.pos[0]+k && b.pos[0] > b.target.pos[0]-k ) { bullets.splice(i, 1); i--; if (b.target.hp > 0){ b.target.hp -= b.damage; } if (b.target.hp < 0) { b.target.destroyed = true; b.target.hp = 0; // Add an explosion explosions.push({ pos: b.target.pos, sprite: new Sprite("https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png", [0, 117], [39, 39], [k*3.2,k*3.2], 14, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], null, true) }); } } } } function render() { if (!isGameOver) { renderArea(ctx); renderEntities (enemies); renderEntities (units); renderEntities (bullets); renderEntities(explosions); /* ctx.font = "20px Arial"; ctx.fillText( Math.floor(gameTime) ,20,50); */ } }; function renderArea (ctx) { ctx.fillStyle = "rgba(120,200,120,0.5"; ctx.fillRect(0,0,c.width ,c.height) ctx.fillStyle = "rgba(50,200,50,0.9)"; ctx.fillRect(0, 0, c.width, c.height/20); ctx.fillStyle = " rgba(200,50,50,0.7)"; ctx.fillRect( 0, c.height - c.width/4 - c.height/20, c.width , c.height/20); ctx.drawImage(resources.get('http://farm8.staticflickr.com/7231/7269527534_4d8ce226de.jpg'), 0,0, 500, c.width/4, 0, c.height-c.width/4, 500, c.width/4); ctx.drawImage(resources.get('http://farm8.staticflickr.com/7231/7269527534_4d8ce226de.jpg'), 17,0, 483, c.width/4, 500, c.height-c.width/4, 500, c.width/4); ctx.beginPath(); for (var x = c.width/4; x 0.8){ var hp = entity.hp*100/entity.maxhp; if (hp < 0) hp = 0; if (entity.dir < 0) { var reverse = entity.sprite.resized[0]; } else { var reverse = 0; } ctx.beginPath(); ctx.lineWidth = k/2.5; ctx.lineCap = "round"; ctx.strokeStyle = "black"; ctx.moveTo(0 + reverse , k/10); ctx.lineTo(0 + reverse , entity.sprite.resized[1]-(k/10)); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = k/3.2; ctx.lineCap = "round"; ctx.strokeStyle = "lightgrey"; ctx.moveTo(0 + reverse , k/10); ctx.lineTo(0 + reverse , entity.sprite.resized[1]-(k/10)); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = k/4; ctx.lineCap = "round"; ctx.strokeStyle = "rgb(" + Math.floor(100-hp*2.56) + "," + Math.floor(hp*2.56) + ",0)"; ctx.moveTo(0 + reverse , k/10); ctx.lineTo(0 + reverse , hp/100*entity.sprite.resized[1]-(k/10)); ctx.stroke(); ctx.lineWidth = 1; } } }; /////////////^^^^^^^^^^^^^^//////////// var requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ window.setTimeout(callback, 1000 / 60); }; })(); ///^^^^^^^///////////^^^^///////// function loader() { var maindiv = document.getElementById("main"); maindiv.innerHTML = ''; lastTime = Date.now(); }; ////////////////////////////////// (function() { var resourceCache = {}; var loading = []; var readyCallbacks = []; // Load an image url or an array of image urls function load(urlOrArr) { if (urlOrArr instanceof Array) { urlOrArr.forEach(function(url){ _load(url); }); } else { _load(urlOrArr); } } function _load(url) { if(resourceCache[url]) { return resourceCache[url]; } else { var img = new Image(); img.onload = function() { resourceCache[url] = img; if(isReady()) { readyCallbacks.forEach(function(func) { func(); }); } }; resourceCache[url] = false; img.src = url; } } function get(url) { return resourceCache[url]; } function isReady() { var ready = true; for(var k in resourceCache) { if(resourceCache.hasOwnProperty(k) && !resourceCache[k]) { ready = false; } } return ready; } function onReady(func) { readyCallbacks.push(func); } window.resources = { load: load, get: get, onReady: onReady, isReady:isReady }; })(); resources.load([ "http://farm8.staticflickr.com/7231/7269527534_4d8ce226de.jpg", "https://opengameart.org/sites/default/files/tanks_3.png", "https://d30y9cdsu7xlg0.cloudfront.net/png/321488-200.png", "https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png" ]); resources.onReady(loader);