function init(){ var joystick=new Joystick(); var scoreboard = new Scoreboard(); var introMsg="Welcome to 'Emoji Sniper'!\n\nUse the joystick for movement\n\nClick and drag the joystick's corners to re-position"; if(window.DeviceMotionEvent){ window.addEventListener("devicemotion", motion, false); }else{ console.log("DeviceMotionEvent is not supported"); } function borderCorrection(){ // re-position cursor if went out of canvas borders if(cursor.x<0) cursor.x=0; if(cursor.x>myCanvas.width-cursor.radius/2) cursor.x=myCanvas.width-cursor.radius/2; if(cursor.y<0) cursor.y=0; if(cursor.y>myCanvas.height) cursor.y=myCanvas.height; } function updateMovement(value,axis){ // ypdate movement of cursor and make corrections (borderCorrection) if(!status.gamePaused && sensorEnabled){ if(axis==='x'){ cursor.x-=(value)*1.0; } if(axis==='y'){ cursor.y-=(value)*1.0-(cursor.yOffset); } borderCorrection(); } } function motion(event){ // make movement on x and y axes updateMovement(event.accelerationIncludingGravity.x,'x'); updateMovement(event.accelerationIncludingGravity.z,'y'); /*console.log("Accelerometer: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z );*/ } ////// 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 updateExplosions(frameDelay) { // update and draw particles for (var i=0; i=tar.x-r&&x<=tar.x+r && y>=tar.y-r&&y<=tar.y+r){ // if all conditions have met, the shot was inside acceptable hit range count++; // raise current shot hits counter gameStats.shotsHit++; // raise total hits counter // save x,y coordinates of current hit xHit=tar.x; yHit=tar.y; // create an explosion in the location createExplosion(tar.x,tar.y,"yellow"); createExplosion(tar.x,tar.y,"orange"); createExplosion(tar.x,tar.y,"red"); target.active.splice(i,1); // remove emoji i--; // balancer decrement addScore(1); // add point for each hit } } if(count>1){ // more than one emoji hit with a single shot // display COMBO message and award extra points count^count floatingMessages.push({ x:xHit, y:yHit, font:"Times New Roman", fontSize:22, fontColor:"green", ttl:floatingMessagesSettings.ttl, msg:(count+"x COMBO!") }); if(timer.on){ floatingMessages.push({ x:xHit, y:yHit+floatingMessagesSettings.fontSize, font:"Times New Roman", fontSize:15, fontColor:"black", ttl:floatingMessagesSettings.ttl, msg:("+"+count+" Seconds") }); timer.time+=(count*timer.second) } addScore(Math.pow(count,count)); } } function addScore(score){ gameStats.score+=score; } function spawnTarget(){ // spawns new target if active amount have not passed allowed amount if(target.active.lengthmyCanvas.width&&tar.dx>0){ tar.dx=Math.abs(tar.dx)*(-1); } if(tar.y<0&&tar.dy<0){ tar.dy=Math.abs(tar.dy); } if(tar.y>myCanvas.height&&tar.dy>0){ tar.dy=Math.abs(tar.dy)*(-1); } } } function updateDisplayValues(){ // update game statistics display document.getElementById("scoreValue").innerHTML=gameStats.score; document.getElementById("hrValue").innerHTML=gameStats.shotsHit+"/"+gameStats.shotsFired; hrPercent=parseInt((gameStats.shotsHit/gameStats.shotsFired)*100); if(isNaN(hrPercent)) hrPercent="0" document.getElementById("hrPercent").innerHTML=hrPercent+"%"; } function displayWelcomeMsg(){ // display a welcome message (removed once first shot is made) ctx.font = "22px Times New Roman"; ctx.fillStyle = 'red'; ctx.fillText("Emoji Sniper!",myCanvas.width*0.01,myCanvas.height*0.1); ctx.font = "15px Times New Roman"; ctx.fillStyle = 'green'; ctx.fillText("Coded by Burey",myCanvas.width*0.01,myCanvas.height*0.15); ctx.font = "22px Times New Roman"; ctx.fillStyle = 'blue'; ctx.fillText("Use joystick to move",myCanvas.width*0.01,myCanvas.height*0.3); ctx.fillText("Click on screen to fire",myCanvas.width*0.01,myCanvas.height*0.4); ctx.fillText("PC: use arrows/spacebar",myCanvas.width*0.01,myCanvas.height*0.6); ctx.fillStyle = 'green'; ctx.fillText("Press 'Start' for Timed game",myCanvas.width*0.01,myCanvas.height*0.8); } function displayFloatingMessages(){ // display floating messages on locations for(i=0;iradiusBorder){ // alert(joffset.x-cjoy.width/2) maxX=(joffset.x-cjoy.width/2)/dist; maxY=(joffset.y-cjoy.height/2)/dist; joffset={ x:maxX*radius+radiusBorder, y:maxY*radius+radiusBorder } } drawStick(); } } this.deltaX=function(){ if(repositionJoystick) return 0; return joffset.x-cjoy.width/2; } this.deltaY=function(){ if(repositionJoystick) return 0; return joffset.y-cjoy.height/2; } document.body.appendChild(cjoy); ctxjoy=cjoy.getContext("2d"); drawStick(); } window.onload=init;

Emoji Sniper Joystick Test