//Made by Haris, do not copy without permission. /* * To do list: * 1) Rewrite this whole code with objects, request animation frame,continuous key presses and generally bring it up to date. * 2) Improve ui. * 3) Set up scoreboard. * 4) Implement automated navigation system.(overly ambitious) */ "use strict"; const { PI: π , sqrt, hypot } = Math; //variables //canvas variables let c, ctx, W, H; //player variables let x,y,r; let color = "#000"; let player; //goal variables let gx,gy,gr; let gcolor = "#0f0"; let goal; let score = 0; //mine variables let mx = []; let my = []; let mr = []; let mines = []; let mcolor = "#f00"; //controls let dir; let dx = 6; let dy = 6; //audio let coll; let audio1; //gc:goall collision let audio2; //mc: mine collision let audio3; //bc: boundary collision let disabledaudio = false; //position spawn check variables let invmgd; //invmgd: invalid mine-goal distance let invmpd; //invmpd: invalid mine-player distance //powerUp variables let pua1 = true; let pua2 = true; let pua3 = true; //pua: power up alert let isMobile; //difficulty variables let dif = "Normal"; let t; //time to go to goal let interval; //functions const openNav = () => $("#Sidenav").css("width","250px"); const closeNav = () => $("#Sidenav").css("width","0"); //warning const warning = () => alert("************** Warning! **************\nYou might want to turn down your device's volume, loud explosions imminent.\n************** 💥 😱 **************\n******** Best enjoyed on Pc. ********"); //updates list const version = () => alert("Version 2.1.1\nUpdates:\n1) Implemented audio on collision type.\n2) Minor gui improvement.\n3) Implemented spawn check for mines and also for goal.\n4) Implemented power ups.\n5) Implemented varying mine radius.\n6) Changed boundary collision mechanic, now you teleport to the opposite side instead of stopping.\n7) Implemented Pc controls.\n8) Added loading screen.\n9) Implemented sidenav.\n10) Implemented difficulty setting.\n11) Added audio controls."); //general info const info = () => alert("Welcome to my game.\nYour objective is to get the highest score possible while you navigate your way around the mines.\n*****************************\ngreen ball: objective.\nred ball(s): mine(s).\nblack ball: player.\n1st power up @ 12 points.\n*****************************\nStill in development, be lenient.\nAny suggestions for improving this code are welcome.\nIf you find any errors please notify me @ comment section.\n*****************************\nPlease post your best score @ comment section. ☺"); const showgame = () => { //pause animation $("#loader_outer, #loader_inner").css("animation-play-state","paused"); //Hide animation(If you just hide it and not pause it,it would continue running at the background.) $("#loader_outer, #loader_inner, #loadermsg").css("display", "none"); //display game components //detect mobile or pc, if mobile display controls isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); isMobile? $("#controls").css("display", "block") : alert("Click in game and use WASD keys to navigate."); $("#Minefield, #sidenavbtn, #sound").css("display", "block"); $("#difdisp, #difficulty, #score").css("display", "inline"); }; window.onload = () => { warning(); //after loading resources(audio,images etc) display game showgame(); //set difficulty $("#difficulty").on("change",function() { //on changing difficulty reset game & draw objects @ initial positions reset(); draw(); dif = $("#difficulty").val(); checkdif(); t = 15; }); c = document.getElementById("Minefield"); ctx = c.getContext("2d"); c.width = W = window.innerWidth; c.height = H = window.innerHeight * 0.8; //pc controls document.addEventListener("keydown", keyDownHandler, false); //audio audio1 = document.getElementById("gc"); audio2 = document.getElementById("mc"); audio3 = document.getElementById("bc"); //starting positions //player x = W/2; y = H/2; r; //radius determined by powerUp function //goal gx = W * 0.1; gy = H * 0.5; gr = 10; //mine mx[0] = W * 0.14; my[0] = H * 0.9; mr[0] = 20; //draw objects @ initial positions draw(); } //audio segment const toggleaudio = () => { if(disabledaudio) { disabledaudio = false; $("#sound").html("🔊"); } else { disabledaudio = true; $("#sound").html("🔇"); } }; const playAudio = (coll) => { if(!disabledaudio) { switch (coll) { case "gc": audio1.play(); break; case "mc": audio2.play(); break; default: audio3.play(); } } }; //difficulty selection segment const checkdif = () => { if(dif == "Normal") { $("#timer").css("display", "none"); clearInterval(interval); } else { $("#timer").css("display", "block"); interval = setInterval(function(){ countdown() }, 1000); } }; const countdown = () => t>0? $("#timer").attr("value", (--t)) : reset(); //main functions /* pc controls. * Supports: WASD keys. * I didn't add arrow keys because they moved the whole window,not just the player. */ function keyDownHandler(e) { if(e.keyCode == 68) { controls("r"); } else if(e.keyCode == 65) { controls("l"); } else if(e.keyCode == 87) { controls("u"); } else if(e.keyCode == 83) { controls("d"); } }; //mobile controls const controls = (dir) => { switch (dir) { case "u": y -= dy; break; case "d": y += dy; break; case "l": x -= dx; break; default: x += dx; } //after updating positions check for collisions coldet(); }; //collision detection const coldet = () => { //boundary collision detection if(y < r) { playAudio("bc"); y = H - r; } if(y > H - r) { playAudio("bc"); y = r; } if(x < r) { playAudio("bc"); x = W-r; } if(x > W - r) { playAudio("bc"); x = r; } //goal collision detection let dist = hypot(x - gx, y - gy); if(dist < r + gr) { playAudio("gc"); //on collision reset timer for hard difficulty t = 15; $("#score").html("score: "+(++score)); //on collision new mine position mx.push(random(1, W)); my.push(random(1, H)); mr.push(random(15, 25)); checknmp(); //on collision new goal position gx = random(1, W); gy = random(1, H); checkngp(); } //mine collision detection for(let i=0; i<=mx.length; i++) { let mdist = hypot(x - mx[i], y - my[i]); if(mdist < r + mr[i]) { playAudio("mc"); reset(); } } //after updating draw objects draw(); }; //check new mine position relative to player const checknmp = () => { do { if(hypot(x-mx[mx.length-1], y-my[my.length-1]) < (r + mr[mr.length-1])) { mx[mx.length-1] = random(1, W); my[my.length-1] = random(1, H); invmpd = true; } else { invmpd = false; } } while(invmpd); }; //check new goal position relative to mines const checkngp = () => { do { for(let i=0; i<=mx.length; i++) { if(hypot(gx-mx[i],gy-my[i]) < (gr+mr[i]) || hypot(gx-x,gy-y)< (gr + r)) { gx = random(1, W); gy = random(1, H); invmgd = true; break; } else { invmgd = false; } } } while(invmgd); }; const reset = () => { //reset ball position x = W/2, y = H/2; //reset goal position gx = W * 0.1; gy = H * 0.5; //reset mine position & radius arrays mx = []; my = []; mr = []; //reset initial mine position & radius mx[0] = W * 0.14; my[0] = H * 0.9; mr[0] = 20; //reset score & power ups score = 0; $("#score").html("score: "+score); pua1 = pua2 = pua3 = true; dx = dy = 5; //reset time for hard difficulty t = 15; }; const draw = () => { //clear previous objects before drawing new ones ctx.clearRect(0, 0, W, H); //before drawing check for power ups powerUp(); drawball(x, y, r, color); drawmine(); drawgoal(); }; const powerUp = () => { if(0 <= score && score < 12) { r = 30; } else if(12 <= score && score < 19) { if(pua1) { r = r * 1/sqrt(2); alert("Congratulations, you made it to your first power up! ☺"); pua1 = false; } } else if(19 <= score && score < 25) { if(pua2) { r = r * 1/2; alert("2nd power up!!! 🎉"); pua2 = false; } } else if(25 <= score) { dx = 8.5; dy = 8.5; if(pua3) { alert("Final power up!!! 👏 👏 😁\n(Faster movement.)"); pua3 = false; } } }; const drawball = (x, y, r, color) => { ctx.beginPath(); ctx.arc(x, y, r, 0, 2*π); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); }; const drawgoal = () => drawball(gx, gy, gr, gcolor); const drawmine = () => { for(let i = 0; i<= mx.length-1; i++) drawball(mx[i], my[i], mr[i], mcolor); }; const random = (min=0, max=1) => Math.random() * (max - min) + min;

Minefield game(beta)