/* Explosion effect taken from http://www.gameplaypassion.com/blog/explosion-effect-html5-canvas/ and modified by Burey */ 'use strict'; var alienMsg=['YOU WILL PAY FOR YOUR INSOLENCE, HUMAN SCUM!','The Cake is a LIE!!','Stahhpp, we come in peace ;_;','The horror, OH, THE HORROR!!!','Revenge is Coming, Puny Human!','Oh mighty lord Xeno, accept me to your realm!','Please, for the love of Xeno, will someone delete my browser history????']; var introMsg=("It happend on the 4th of March, 2017...\nWe were attacked with their full force...\nThey rendered our defences useless...\nyou are earth's last and only hope!\nStop the invasion or we are all doomed....\n\nControls:\nTilt the phone left/right to move the spaceship.\nTap 'FIRE' button to shoot the photon cannons.\nTap 'DB' to launch a special Death Blossom strike.\nKeyboard controls:\nA/D or Left/Right arrow for movement.\nSpace: Regular fire.\nEnter: Death Blossom.\nGreen Button: activate Auto Fire mode.\n\nThe game now offers keyboard support.\nIt is recommended to use the phone with the acceleration sensors for the movement.\nthe game is still a work in progress,\nso please reply in the comments if you have any issues or suggestions.\n\n Have fun ^.^\n\n[UPDATE LOG]\n[Added] explosion effects.\n[Added] scoreboard.\n[Added] increasing difficulty.\n[Added] shields (start with 3).\n[Added] Bonuses! pick them for power ups!\n[Added] HUD below the canvas.\n[Added] graphics to the shields.\n[Added] game pause when opening scoreboard.\n[Added] game stats on game over.\n[Added] intro screen.\n[Added] Death Blossoms (Kirk Schafer idea >:p ).\n[Changed] ship design.\n[Upgrade] Death Blossoms now switch to tracking mode when there are more than 5 enemies nearby.\n[Changed] leveling system: each new level requires 150% more points to reach than the previous.\n[Added] Boss encounters on each new level.\n[Added] additional bonus score for claimed prizes.\n[Changed] levels and scoring algorithms.\n[Added] Keyboard support.\m[Added] Vertical Axis movement.\n[Added] slider for angle adjustment of vertical movement.\n") function init(){ if(window.DeviceMotionEvent){ //window.addEventListener("devicemotion", motion, false); }else{ //console.log("DeviceMotionEvent is not supported"); } scoreboard=new Scoreboard(options); function updateMovement(value,axis){ if(!gamePaused){ if(axis==='x'){ xShip-=(value)*1.1; if(xShipmyCanvas.width-shipSize/2) xShip=myCanvas.width-shipSize/2; } if(axis==='y'){ yShip-=(value)*0.8-(yOffset); if(yShipmyCanvas.height-shipSize/2) yShip=myCanvas.height-shipSize/2; } } } function motion(event){ updateMovement(event.accelerationIncludingGravity.x,'x'); updateMovement(event.accelerationIncludingGravity.z,'y'); /*console.log("Accelerometer: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z );*/ } function keysMovementUpdate(){ if(keys.up){ yShip-=7; } if(keys.down){ yShip+=7; } if(keys.left){ xShip-=7; } if(keys.right){ xShip+=7; } // borders correction if(xShipmyCanvas.width-shipSize/2) xShip=myCanvas.width-shipSize/2; if(yShipmyCanvas.height-shipSize/2) yShip=myCanvas.height-shipSize/2; } function randVal(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } function randFloat(min,max){ return (Math.random()*(max-min+1)+min); } ////// EXPLOSION METHODS START function Particle (){ /* * A single explosion particle */ this.scale = 1.0; this.x = 0; this.y = 0; this.radius = 20; this.color = "#000"; this.velocityX = 0; this.velocityY = 0; this.scaleSpeed = 0.5; this.update = function(ms) { // shrinking this.scale -= this.scaleSpeed * ms / 1000.0; if (this.scale <= 0) { this.scale = 0; } // moving away from explosion center this.x += this.velocityX * ms/1000.0; this.y += this.velocityY * ms/1000.0; }; this.draw = function(context2D) { // translating the 2D context to the particle coordinates context2D.save(); context2D.translate(this.x, this.y); context2D.scale(this.scale, this.scale); // drawing a filled circle in the particle's local space context2D.beginPath(); context2D.arc(0, 0, this.radius, 0, Math.PI*2, true); context2D.closePath(); context2D.fillStyle = this.color; context2D.fill(); context2D.restore(); }; } function createExplosion(x, y, color){ /* * Advanced Explosion effect * Each particle has a different size, move speed and scale speed. * * Parameters: * x, y - explosion center * color - particles' color */ var minSize = 10; var maxSize = 30; var count = 10; var minSpeed = 60.0; var maxSpeed = 200.0; var minScaleSpeed = 1.0; var maxScaleSpeed = 4.0; for (var angle=0; angle<360; angle += Math.round(360/count)) { var particle = new Particle(); particle.x = x; particle.y = y; particle.radius = randVal(minSize, maxSize); particle.color = color; particle.scaleSpeed = randVal(minScaleSpeed, maxScaleSpeed); var speed = randVal(minSpeed, maxSpeed); particle.velocityX = speed * Math.cos(angle * Math.PI / 180.0); particle.velocityY = speed * Math.sin(angle * Math.PI / 180.0); particles.push(particle); } } function update(frameDelay) { // update and draw particles for (var i=0; imyCanvas.height){ stars[i].x=Math.random()*myCanvas.width; stars[i].y=0; } } } function drawShip(){ //https://s-media-cache-ak0.pinimg.com/736x/88/b0/ce/88b0ce07ad7ee33832b1c5c4189d4194.jpg // draw thrusters flames if(Math.random() < 0.5){ ctx.fillStyle = ((Math.random() < 0.5)? 'orange':'yellow'); bezierCurve(xShip-shotOffset, yShip+shipSize*1.3, 4, 5,'fill'); bezierCurve(xShip+shotOffset, yShip+shipSize*1.3, 4, 5,'fill'); } else{ ctx.fillStyle = ((Math.random() < 0.5)? 'orange':'yellow'); bezierCurve(xShip-shotOffset, yShip+shipSize*1.3, 3, 9,'fill'); bezierCurve(xShip+shotOffset, yShip+shipSize*1.3, 3, 9,'fill'); } ctx.lineWidth=2; // left thruster ctx.strokeStyle='red'; ctx.beginPath(); ctx.moveTo(xShip-shotOffset,yShip); ctx.lineTo(xShip-shotOffset, yShip+shipSize*1.2); // right thruster ctx.moveTo(xShip+shotOffset,yShip); ctx.lineTo(xShip+shotOffset, yShip+shipSize*1.2); ctx.closePath(); ctx.stroke(); /* ctx.lineWidth=3; ctx.strokeStyle='lightgreen'; // left wing ctx.beginPath(); ctx.moveTo(xShip-(shotOffset+6),yShip+8); ctx.lineTo(xShip-(shotOffset+4), yShip+shipSize*2); ctx.closePath(); ctx.stroke(); // right wing ctx.beginPath(); ctx.moveTo(xShip+(shotOffset+6),yShip+8); ctx.lineTo(xShip+(shotOffset+4), yShip+shipSize*2); ctx.closePath(); ctx.stroke(); */ // ship body(triangle) /* ctx.fillStyle='green'; ctx.beginPath(); // top ctx.moveTo(xShip,yShip); // right side ctx.lineTo(xShip+shipSize*0.8, yShip+shipSize*2); // left side ctx.lineTo(xShip-shipSize*0.8, yShip+shipSize*2); ctx.fill(); */ // draw ship wing ctx.fillStyle = 'white'; ctx.beginPath(); ctx.moveTo(xShip+shipSize, yShip); // top right ctx.lineTo(xShip+shipSize*1.1,yShip+shipSize*0.6); // middle right ctx.lineTo(xShip+shipSize*1.1,yShip+shipSize*0.65); // bottom right ctx.lineTo(xShip-shipSize*1.1,yShip+shipSize*0.65); // bottom left ctx.lineTo(xShip-shipSize*1.1,yShip+shipSize*0.6); // middle left ctx.lineTo(xShip-shipSize,yShip); ctx.closePath(); ctx.fill(); // draw cool stripes ctx.lineWidth=2; ctx.strokeStyle='red'; ctx.beginPath(); ctx.moveTo(xShip-shipSize*1.05,yShip+shipSize*0.2); ctx.lineTo(xShip+shipSize*1.05,yShip+shipSize*0.2); ctx.moveTo(xShip-shipSize*1.15,yShip+shipSize*0.5); ctx.lineTo(xShip+shipSize*1.15,yShip+shipSize*0.5); ctx.closePath(); ctx.stroke(); // main ship body ctx.fillStyle='green'; bezierCurve(xShip, yShip, shipSize*1.4, shipSize*2,'fill'); ctx.fillStyle='lightblue'; bezierCurve(xShip, yShip+shipSize*0.12, shipSize*0.6, shipSize*1.3,'fill'); // draw shields if(shields > 0){ ctx.lineWidth=Math.ceil(shields*0.5); ctx.strokeStyle='blue'; bezierCurve(xShip, yShip+shipSize*0.7, shipSize*4.5, shipSize*6,'stroke'); } } function checkHitsOnBoss(){ for(var i=0;iAlien Message Received:

${alienMsg[randVal(0,alienMsg.length-1)]}

`; } function checkHits(){ for(var i=0;i0){ // re-target random enemy shots[i].target=enemies[randVal(0,enemies.length-1)]; } else{ shots[i].y+=((shots[i].target.y > shots[i].y)? shots[i].ySpeed:-shots[i].ySpeed); shots[i].x+=((shots[i].target.x > shots[i].x)? shots[i].xSpeed:-shots[i].xSpeed); } } else{ shots[i].y-=shots[i].ySpeed; shots[i].x+=shots[i].xSpeed; } if(shots[i].y<0 || shots[i].y>myCanvas.height || shots[i].x<0 || shots[i].x>myCanvas.width){ shots.splice(i,1); } } for(var i=0;imyCanvas.height || bossesShots[i].x<0 || bossesShots[i].x>myCanvas.width){ bossesShots.splice(i,1); } } } function spawnPrizeBonuses(bX,bY,bS){ //for(i=0;i 0){ ctx.lineWidth=Math.ceil(boss.shields*0.5); ctx.strokeStyle = 'purple'; bezierCurve(eX, eY+eS*0.3, eS*3, eS*2,'stroke'); } } function drawEnemy(enemy){ var eX=enemy.x; var eY=enemy.y; var eS=enemy.size; var colors=enemyColors[randVal(0,enemyColors.length-1)] ctx.fillStyle=colors[0]; bezierCurve(eX,eY,eS,eS*0.3,'fill'); ctx.fillStyle=colors[1]; bezierCurve(eX,eY+eS*0.3,eS*2,eS*0.5,'fill'); } function drawEnemies(){ for(var i=0;i=Math.floor(maxLevel/3)) // add zigzag to enemies enemies[i].x+=enemies[i].speed*0.5*((Math.random()<0.5)? 1:-1); if(enemies[i].y>myCanvas.height){ enemies.splice(i,1); } } for(var i=0;imyCanvas.width){ bosses[i].dir*=-1; } if(bosses[i].ymyCanvas.height){ bonuses.splice(i,1); } } } function claimBonus(bonus){ // createExplosion(bonus.x,bonus.y, 'blue'); ctx.lineWidth=4; ctx.strokeStyle='lightgreen'; bezierCurve(xShip, yShip+shipSize*0.7, shipSize*4.5, shipSize*6,'stroke'); // result=powerUps[randVal(0,powerUps.length-1)]; var result=bonus.powerUp; score+=bonusPrizePoints; stats.pickedBonuses++; switch(result){ case 'extraShot': maxShots+=1; //console.log('Max shots increased: '+maxShots); break; case 'extraShield': shields+=1; //console.log('Shields Increased: '+shields); break; case 'deathBlossom': deathBlossomShots++; btnDeathBlossom.disabled=false; //console.log('Death Blossom Recharged: '+deathBlossomShots); break; case 'shotSpeed': shotSpeed+=1; //console.log('Shot speed increased: '+shotSpeed); if(shotSpeed >= maxShotSpeed){ powerUps.splice(powerUps.indexOf('shotSpeed'),1); } break; case 'autoFireDelay': autoFireDelay=Math.max(minAutoFireDelay,autoFireDelay-10); //console.log('Auto Fire Delay Reduced: '+autoFireDelay); if(autoFireDelay <= minAutoFireDelay){ powerUps.splice(powerUps.indexOf('autoFireDelay'),1); } if(autoFire){ clearInterval(autoFire); autoFire=setInterval(fireNormal,autoFireDelay); } break; default: console.log("Something went wrong with bonusClaim!"); break; } } function checkBonuses(){ for(var i=0;i 0){ //createExplosion(xShip,yShip,'green'); ctx.lineWidth=4; ctx.strokeStyle='red'; bezierCurve(xShip, yShip+shipSize*0.7, shipSize*4.5, shipSize*6,'stroke'); } shields--; //console.log("Shields Remaining : "+ shields); return shields; } function checkGameOver(){ // check enemy collisions on player for(var i=0;ilevel*levelIncrementer){ increaseLevel(); } if(checkGameOver()){ createExplosion(xShip, yShip, "#525252"); createExplosion(xShip,yShip, "#FFA318"); createExplosion(xShip,yShip, "red"); clearInterval(gameInterval); if(enemySpawnerInterval){ clearInterval(enemySpawnerInterval); enemySpawnerInterval=null; } if(bonusSpawnerInterval!=null){ clearInterval(bonusSpawnerInterval); bonusSpawnerInterval=null; } if(bossShotsSpawnerInterval!=null){ clearInterval(bossShotsSpawnerInterval); bossShotsSpawnerInterval=null; } gameInterval=setInterval(drawDeath,33); //alert("GAME OVER PUNY HUMAN!!!\nYour score: "+score) return; } } function drawIntroMessage(){ ctx.font = "15px 'Press Start 2P'"; ctx.fillStyle = 'green'; ctx.fillText("Space Invasion!",myCanvas.width*0.1,myCanvas.height*0.3); ctx.font = "10px 'Press Start 2P'"; ctx.fillStyle = 'red'; ctx.fillText("Coded by Burey",myCanvas.width*0.12,myCanvas.height*0.4); ctx.font = "12px 'Press Start 2P'"; ctx.fillStyle = 'yellow'; ctx.fillText("Tap 'New Game' to Start",myCanvas.width*0.1,myCanvas.height*0.6); } function showIntro() { drawBackground(); drawStars(); drawShip(); drawIntroMessage(); keysMovementUpdate(); joystickMovementUpdate(); } function increaseLevel(){ if(level>=maxLevel) return; level++; levelIncrementer*=2; //console.log('Next level at: '+(level*levelIncrementer)+' Points!'); maxEnemies+=5; enemySpawnTime=Math.max(minEnemySpawnTime,enemySpawnTime-150); for(i=0;i0){ bossShotsSpawnerInterval=setInterval(generateBossShot,bossShotDelay); } else{ enemySpawnerInterval=setInterval(spawnEnemy,enemySpawnTime); bonusSpawnerInterval=setInterval(spawnBonus,bonusSpawnTime); } gamePaused=false; gameInterval=setInterval(drawScreen, 33); if(document.getElementById("autofire").checked){ autoFire=setInterval(fireNormal,autoFireDelay); }else{ clearInterval(autoFire); autoFire=null; } } function resetGame(){ myCanvas.width = window.innerWidth*widthRatio; myCanvas.height = window.innerHeight*heightRatio; yShip = myCanvas.height-shipSize-20; //console.log('Alien Message Received:\nTurn back now, puny human, before you regret it!!!'); shots=[]; enemies=[]; particles=[]; stars=[]; bonuses=[]; powerUps=['extraShot','extraShield','deathBlossom','shotSpeed','autoFireDelay']; generateStars(); // RESET BOSS VARIABLES bosses=[]; bossesShots=[]; bossSize=30; bossSpeed=5; bossShields=3; bossReach=20; bossShotSize=2; bossShotSpeed=3; bossShotDelay=1000; // DISABLE/ENABLE CONTROLS btnNewGame.disabled=true; btnFire.disabled=false; btnDeathBlossom.disabled=false; // RESET TO STARTING SETUP stats.totalShots=0; stats.totalHits=0; stats.enemyEncounters=0; stats.pickedBonuses=0; score=0; level=1; levelIncrementer=1000; deathBlossomShots=5; shields=3; maxEnemies=5; enemyMaxSpeed=5; enemySpawnTime=1000; maxShots=5; shotSpeed=5; autoFireDelay=200; updateValuesUI(); gamePaused = false; } function generateStars(){ for(var i=0;i

Space Invasion! +[Scoreboard]