/** * Animates bezier-curve * * original code: * https://www.pjgalbraith.com/drawing-animated-curves-javascript/ */ /** * Draws a splitted bezier-curve * * @param ctx The canvas context to draw to * @param x0 The x-coord of the start point * @param y0 The y-coord of the start point * @param x1 The x-coord of the control point * @param y1 The y-coord of the control point * @param x2 The x-coord of the end point * @param y2 The y-coord of the end point * @param t0 The start ratio of the splitted bezier from 0.0 to 1.0 * @param t1 The start ratio of the splitted bezier from 0.0 to 1.0 */ function drawBezierSplit(ctx, x0, y0, x1, y1, x2, y2, t0, t1) { ctx.beginPath(); if( 0.0 == t0 && t1 == 1.0 ) { ctx.moveTo( x0, y0 ); ctx.quadraticCurveTo( x1, y1, x2, y2 ); } else if( t0 != t1 ) { var t00 = t0 * t0, t01 = 1.0 - t0, t02 = t01 * t01, t03 = 2.0 * t0 * t01; var nx0 = t02 * x0 + t03 * x1 + t00 * x2, ny0 = t02 * y0 + t03 * y1 + t00 * y2; t00 = t1 * t1; t01 = 1.0 - t1; t02 = t01 * t01; t03 = 2.0 * t1 * t01; var nx2 = t02 * x0 + t03 * x1 + t00 * x2, ny2 = t02 * y0 + t03 * y1 + t00 * y2; var nx1 = lerp ( lerp ( x0 , x1 , t0 ) , lerp ( x1 , x2 , t0 ) , t1 ), ny1 = lerp ( lerp ( y0 , y1 , t0 ) , lerp ( y1 , y2 , t0 ) , t1 ); ctx.moveTo( nx0, ny0 ); ctx.quadraticCurveTo( nx1, ny1, nx2, ny2 ); } ctx.stroke(); ctx.closePath(); } /** * Linearly interpolate between two numbers v0, v1 by t */ function lerp(v0, v1, t) { return ( 1.0 - t ) * v0 + t * v1; } function randVal(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } function randColor(){ // generates random color string vec="0123456789abcdef"; color="#"; for(i=0;i<6;i++){ color+=vec[randVal(0,vec.length-1)]; } return color; } function initFirebase(){ // Initialize Firebase var config = { apiKey: "AIzaSyClY8YnuQ-vogEXyOxCHQczTOna8BrqQ9M", authDomain: "defend-the-castle-51127.firebaseapp.com", databaseURL: "https://defend-the-castle-51127.firebaseio.com", projectId: "defend-the-castle-51127", storageBucket: "defend-the-castle-51127.appspot.com", messagingSenderId: "958922779229" }; firebase.initializeApp(config); } function DefendTheCastle(){ initFirebase(); var canvas = document.getElementById('canvas'); var btnNew = document.getElementById('btnNew'); var btnPause = document.getElementById("btnPause"); var selectDiff = document.getElementById("selectDiff"); canvas.width = window.innerWidth*0.95; canvas.height = window.innerHeight*0.8; var ctx = canvas.getContext('2d'); var exp = new Explosion(ctx); btnNew.onclick = newGame; btnPause.onclick = pause; canvas.onclick = manual; canvas.ontouchmove = manual; // selectDiff.onchange = setDifficulty; var messages = []; var curves = []; var targets = []; var enemyFire = []; var targetStock = ["💩","😬","🤗","😈","😘","😱","😂","😎","😗","😇","😭","😜","😛","😝","😤","😵","😁","😑","😚","😍","😠","😐","🙄"]; var score = {}; var gameSettings = {}; var scoreboard = new Scoreboard(); document.getElementById("btnShowScore").onclick=function(){ if(drawInterval){pause();} scoreboard.showScoreBoard(); } var drawInterval = null; function setDifficulty(){ gameSettings.DIFFICULTY = parseInt(selectDiff.value); switch(gameSettings.DIFFICULTY){ case 1: // Easy gameSettings.ACTIVE_TARGETS = 3; gameSettings.TARGET_LIMIT = 10; gameSettings.SHOT_LIMIT = 10; gameSettings.POOPABILITY = 0.001; gameSettings.MAX_TARGET_SPEED = 3; break; case 2: // Normal gameSettings.ACTIVE_TARGETS = 3; gameSettings.TARGET_LIMIT = 10; gameSettings.SHOT_LIMIT = 5; gameSettings.POOPABILITY = 0.005; gameSettings.MAX_TARGET_SPEED = 4; break; case 3: // Hard gameSettings.ACTIVE_TARGETS = 3; gameSettings.TARGET_LIMIT = 10; gameSettings.SHOT_LIMIT = 3; gameSettings.POOPABILITY = 0.01; gameSettings.MAX_TARGET_SPEED = 5; break; case 4: // eXtreme gameSettings.ACTIVE_TARGETS = 10; gameSettings.TARGET_LIMIT = 10; gameSettings.SHOT_LIMIT = 3; gameSettings.POOPABILITY = 0.02; gameSettings.MAX_TARGET_SPEED = 8; break; default:break; } gameSettings.GAME_OVER = false; } function newGame(){ if(!confirm("Starting New Game\nDifficulty: "+selectDiff.options[selectDiff.selectedIndex].text)){return;} setDifficulty(); score = { health:100, hits:0, miss:0, fired:0, score:0, spawned:0, streak:0, addTarget:false } targets = []; enemyFire = []; messages = []; // btnNew.disabled=false; } function pause(){ if(drawInterval){ clearInterval(drawInterval); drawInterval = null; ctx.font="50px Times New Roman"; ctx.fillStyle="red"; ctx.fillText("Paused",canvas.width*0.3,canvas.height/2); btnPause.innerHTML="Resume"; } else{ drawInterval = setInterval(draw,33); btnPause.innerHTML="Pause"; } } document.getElementById("randCanvasCol").onclick=randomCanvasColor; function randomCanvasColor(){ canvas.style.background = "linear-gradient("+randColor()+","+randColor()+","+randColor()+","+randColor()+","+randColor()+")"; } function drawMessages(){ for(var i=messages.length-1;i>=0;i--){ var msg = messages[i]; ctx.font = msg.size+"px "+msg.font; ctx.fillStyle = msg.color; ctx.fillText(msg.text, msg.x-20, msg.y); msg.ttl-=1000; if(msg.ttl<0) messages.splice(i,1); } } function drawScore(){ ctx.font = "10px Times New Roman"; ctx.fillStyle = 'white'; ctx.fillText("Health: "+score.health+"%", 10,20); ctx.fillText("Score: "+score.score, 10,30); ctx.fillText("Hits: "+score.hits, 10,40); ctx.fillText("Fired: "+score.fired, 10,50); ctx.fillText("Missed: "+score.miss, 10,60); ctx.fillText("Hit %: "+Math.round((score.hits/score.fired)*100,2)+"%", 10,70); ctx.fillText("Streak: "+score.streak, 10,80); } function drawCastle(){ ctx.font = "80px Times New Roman"; ctx.fillText("🏰",canvas.width/2-40,canvas.height); ctx.strokeStyle="red"; ctx.lineWidth=4; ctx.beginPath(); ctx.moveTo(canvas.width*0.38,canvas.height); ctx.lineTo(canvas.width*0.38,canvas.height-30); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(canvas.width*0.65,canvas.height); ctx.lineTo(canvas.width*0.65,canvas.height-30); ctx.closePath(); ctx.stroke(); } function manual(evt){ // draw line from bottom of the canvas to the point where the user clicked evt.preventDefault(); if(curves.length >= gameSettings.SHOT_LIMIT || score.health<=0 || !drawInterval){return;} var pos=canvas.getBoundingClientRect(); if(evt.touches) var touch=evt.touches[0]; var x = (evt.clientX-pos.left) || (touch.clientX-pos.left); var y = (evt.clientY-pos.top) || (touch.clientY-pos.top); var x0 = randVal(0,canvas.width), y0 = canvas.height, x1 = randVal(0,canvas.width), y1 = randVal(0,canvas.height); score.fired++; var duration = 500; var size = 5; x0 = canvas.width/2; curves.push({ x0:x0, y0:y0, x1:x1, y1:y1, x2:x, y2:y, duration:duration, color:randColor(), size:size, start:null, progress:0 }); } function updateCurves(){ for(var i=0;i= 1){ exp.createExplosion(curves[i].x2,curves[i].y2,curves[i].color); curves.splice(i,1); } } } function drawCurves(){ for(var i=0;i0.5? 0:canvas.width; var dir = x === 0? 1:-1; return { x:x-(dir*30), y:randVal(20,canvas.height/2), dx:randVal(1,gameSettings.MAX_TARGET_SPEED), dy:randVal(1,gameSettings.MAX_TARGET_SPEED/2), yRange:randVal(3,gameSettings.MAX_TARGET_SPEED*3), yDist:0, yDir:Math.random()<0.5? 1:-1, dir:dir, size:30, icon: targetStock[randVal(0,targetStock.length-1)] }; } function updateTargets(){ /* update enemies movement and generate enemy fire */ for(var i=0;i= 3){ if(Math.abs(tar.yDist) >= tar.yRange){ tar.yDir*=-1;} tar.yDist += tar.dy*tar.yDir; tar.y += tar.dy*tar.yDir; } if(tar.x < -tar.size || tar.x > canvas.width+tar.size){ targets.splice(i, 1); score.miss++; } } } function updateEnemyFire(){ /* check if any enemy fire hit the castle */ for(var i=enemyFire.length-1;i>=0;i--){ var ef=enemyFire[i]; ef.x+=ef.dx*ef.dir; ef.y+=ef.dy; if(ef.y>canvas.height){ if(ef.x>canvas.width*0.38&&ef.x=0;j--){ var ef=enemyFire[j]; if(Math.sqrt((curve.x2 - ef.x) * (curve.x2 - ef.x) + (curve.y2 - ef.y) * (curve.y2 - ef.y)) <= ef.size*3 && curve.progress == 1.0){ exp.createBasicExplosion(ef.x,ef.y,"brown",90); enemyFire.splice(j,1); } } } } function drawEnemyFire(){ for(var i=enemyFire.length-1;i>=0;i--){ var ef=enemyFire[i]; ctx.font=ef.size+"px Times New Roman"; ctx.fillText(ef.icon,ef.x,ef.y); } } function drawTargets(){ for(var i=0;i=0;i--){ var curve = curves[i]; for(var j=targets.length-1;j>=0;j--){ var tar = targets[j]; /* var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(tar.x,tar.y,tar.size,0,2*Math.PI); ctx.stroke(); ctx.closePath(); */ if (Math.sqrt((curve.x2 - tar.x) * (curve.x2 - tar.x) + (curve.y2 - tar.y) * (curve.y2 - tar.y)) <= tar.size && curve.progress == 1.0) { // hit detected combo.x = tar.x; combo.y = tar.y; hits++; hitsScore+=tar.dx; exp.createExplosion(tar.x,tar.y,"orange"); exp.createExplosion(tar.x,tar.y,"yellow"); exp.createExplosion(tar.x,tar.y,"red"); exp.createExplosion(tar.x,tar.y,"grey"); targets.splice(j, 1); checkMissed=false; } } } if(hits){ /* hit occured in the present check update score info */ score.hits+=hits; score.streak+=hits; if(score.streak%10==0&&!score.addTarget){ /* streak of 10 hits -> increase enemy capacity */ score.addTarget=true; } score.score+=Math.pow(hitsScore,hits)*score.streak*gameSettings.DIFFICULTY; if(hits>1){ /* combo hit -> add message */ score.health+=hits; messages.push({ x:combo.x, y:combo.y, text:hits+"X Combo!!!", color:"red", font:"Times New Roman", size:20, ttl:5*1000*33 }); } } if(checkMissed && curves.length && curves[0].progress==1.0){ /* missed, streak is broken */ score.streak=0; } } function draw(){ /* main drawing loop clear canvas, calls all methods in turn to draw/update game state */ ctx.clearRect(0,0,canvas.width,canvas.height); drawCurves(); drawCastle(); exp.update(33); drawMessages(); drawTargets(); updateTargets(); updateEnemyFireDefense(); updateEnemyFire(); updateGame(); drawEnemyFire(); updateCurves(); if(targets.length < gameSettings.ACTIVE_TARGETS){ targets.push(spawnTarget()); score.spawned++; } drawScore(); if(score.health<=0){ if(!gameSettings.GAME_OVER){ scoreboard.submitNewScoreDialog(score.score); gameSettings.GAME_OVER = true; } btnNew.disabled=false; exp.createExplosion(randVal(canvas.width*0.3,canvas.width*0.7),randVal(canvas.height-60,canvas.height),randColor()); } if(score.streak%10==0&&score.addTarget&&gameSettings.ACTIVE_TARGETS

castle game