JUSTCodaborate

Mystic Maze

<!--
Created by multiple authors, including:
zaydor (https://justcodaborate.com/user-18)
Ibraheem (https://justcodaborate.com/user-52)
Illyaas (https://justcodaborate.com/user-49)
JUSTCodaborate (https://justcodaborate.com/user-6)
Created by zaydor, Ibraheem, Illyaas and JUSTCodaborate, subject to copyright.

DO (optional): How many points did you get? Message the authors (if you wish to share).
Extra: Leaderboard will be updated often.
DO (required): Please upvote this and follow the authors!
Tip: Best played in fullscreen.
Note: Sorry, suggestions, ideas or complaints aren't welcome.
-->
<!DOCTYPE HTML>
<html>
<head>
  <title>Page Title</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
  
  <div class="container">
    <div class = "div1">Mystic Maze</div>
    <div class = "maze topline"></div>
Â <div class = "maze leftline"></div>
<div class = "maze rightline"></div>
<div class = "maze bottomline"> </div>
Â <div class = "maze startline1"></div>
Â  <div class = "maze startline2"> </div>
Â <div class = "maze startline3"></div>
<div class = "maze startline4"></div>
<div class = "maze startline5"></div>
<div class = "maze startline6"></div>
<div class = "maze startline7"></div>
<div class = "maze startline8"></div>
<div class = "maze startline9"></div>
<div class = "maze middleline1"></div>
<div class = "maze middleline2"></div>
<div class = "maze middleline3"></div>
<div class = "maze middleline4"></div>
<div class = "maze middleline5"></div>
<div class = "maze middleline6"></div>
<div class = "maze middleline7"></div>
<div class = "maze middleline8"></div>
    <div id="you">
      <div class="body"></div>
      <div class="head"></div>
      <div class="right-leg"></div>
      <div class="left-hand"></div>
      <div class="left-leg"></div>
      <div class="right-hand"></div>
    </div>
    <div class="ghost" id="ghost1">
      <img src="https://justcodaborate.com/project_images/ghost%20image.png" alt="ghost">
    </div>
    <div class="zombie" id="zombie1">
      <img src="https://justcodaborate.com/project_images/zombie.jpg" alt="zombie">
    </div>
    <div class="vampire">
     <img src="https://justcodaborate.com/project_images/vampire%20image.gif" alt="vampire">
    </div>
    <div class="bat" id="bat1">
     <img src="https://justcodaborate.com/project_images/bat%20image.jpg" alt="bat">
    </div>
    <div class="gem" id="gem1">
      <img src="https://justcodaborate.com/project_images/GameGem.png" alt="gem">
    </div>
    <div class="powerup" id="powerup">
     <img src="https://justcodaborate.com/project_images/Powerup.png" alt="powerup">
    </div>
  </div>
  <div id="restart_div">
    <button disabled id="restart">Rerun to play again!</button>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  margin: 0 auto;
  background-color: black;
  animation: light 3s infinite;
}

@keyframes light {
  0% {background-color: black;}
  100% {background-color: white;}
}

.container {
  width: 920px;
  height: 690px;
}

#you {
  position: absolute;
}

.ghost img {
  width: 80px;
  height: 80px;
}

.ghost {
  position: absolute;
}

#ghost1 {
  top: 140px;
  left: 50px;
}

.zombie img {
  width: 80px;
  height: 140px;
}

.zombie {
  position: absolute;
}

#zombie1 {
  top: 140px;
  left: 460px;
}

.vampire img {
  width: 100px;
  height: 140px;
}

.vampire {
  top: 240px;
  width: 80px;
  height: 80px;
  position: absolute;
  left: 100px;
}

.bat img {
  height: 80px;
  width: 80px;
}

.bat {
  position: absolute;
}

#bat1 {
  top: 550px;
  left: 850px;
}

.gem img {
  width: 30px;
  height: 30px;
}

.gem {
  position: absolute;
}

#gem1 {
  top: 80px;
  left: 60px;
}

.body{
height:25px;
width:25px;
position: absolute;
top: 80px;
left: 8px;
background-color:red;
}

.head{
height:15px;
width:15px;
background-color:#ffd500;
position:absolute;
top:75px;
left:23px;
border-radius:50px;
}

.left-hand{
height:15px;
width:4px;
background-color:#ffd500;
position:absolute;
top:95px;
left:8px;
}

.right-hand{
height:8px;
width:4px;
background-color:#ffd500;
position:absolute;
top:105px;
left:27px;
}

.left-leg{
height:20px;
width:5px;
background-color:blue;
position:absolute;
top:100px;
left:13px;
}

.right-leg{
height:15px;
width:5px;
background-color:blue;
position:absolute;
top:105px;
left:22px;
}

.powerup img {
   width: 70px;
   height: 40px; 
}

.powerup {
  position: absolute;
}

#restart_div {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: #525252;
    color: white;
    margin: 0;
    font-family: sans-serif;
    font-size: 40px;
    text-align: center;
    display: none;
}

#restart {
    border: none;
    padding: 25px;
    color: white;
    background-color: #8a64ff;
    font-size: 30px;
    margin-top: 30%;
}

.div1{ font-family: 'Press Start 2P'; font-size: 40px; padding:10px; border: #7d9267 ridge 5px ; max-width:460px; animation: mymove 4s 3; position: relative;}
@keyframes mymove { 0%{left: 0px;} 50%{left:550px;}100%{left: 0px;}}
.topline{ position:absolute; top:130px; left:90px; border:07px solid; height:0px; width:860px; }

.leftline{ position:absolute; top:225px; left:90px; border:07px solid; height:565px; width:0px; }

.rightline{ position:absolute; top:130px; left:960px; border:07px solid; height:670px; width:0px; }

.bottomline{ position:fixed; top:800px; left:90px; border:07px solid; height:0px; width:775px; }

.startline1{ position:absolute; top:220px; left:90px; border:07px solid; height:0px; width:95px; }

.startline2{ position:absolute; top:130px; left:280px; border:07px solid; height:170px; width:0px; }

.startline3{ position:absolute; top:395px; left:195px; border:07px solid; height:0px; width:380px; }

.startline4{ position:absolute; top:310px; left:185px; border:07px solid; height:380px; width:0px; }

.startline5{ position:absolute; top:225px; left:375px; border:07px solid; height:285px; width:0px; }

.startline6{ position:absolute; top:130px; left:471px; border:07px solid; height:170px; width:0px; }

.startline7{ position:absolute; top:310px; left:575px; border:07px solid; height:80px; width:0px; }

.startline8{ position:absolute; top:220px; left:471px; border:07px solid; height:0px; width:190px; }

.startline9{ position:absolute; top:220px; left:674px; border:07px solid; height:295px; width:0px; }

.middleline1{ position:absolute; top:515px; left:579px; border:07px solid; height:0px; width:95px; }

.middleline2{ position:absolute; top:515px; left:375px; border:07px solid; height:0px; width:95px; }

.middleline3{ position:absolute; top:515px; left:575px; border:07px solid; height:95px; width:0px; }

.middleline4{ position:absolute; top:610px; left:285px; border:07px solid; height:0px; width:285px; }

.middleline5{ position:absolute; top:515px; left:285px; border:07px solid; height:95px; width:0px; }

.middleline6{ position:absolute; top:700px; left:90px; border:07px solid; height:0px; width:680px; }

.middleline7{ position:absolute; top:220px; left:770px; border:07px solid; height:480px; width:0px; }

.middleline8{ position:absolute; top:220px; left:865px; border:07px solid; height:575px; width:0px; }

div {
  color:#7d9267; 
  text-transform: uppercase;
}Â

$(function() {
 
 var anim_id;
 var time = 0;
 var game_over = false;
 var you = $("#you");
 var lives = 3;
 var points = 0;
 var ghost1 = $("#ghost1");
 var vampire = $(".vampire");
 var zombie1 = $("#zombie1");
 var bat1 = $("#bat1");
 var gem1 = $("#gem1");
 var powerup = $("#powerup");
 var speed = 2;
 var move_right = false;
 var move_left = false;
 var move_up = false;
 var move_down = false;
 var container_left = parseInt($(".container").css('left'));
 var container_width = parseInt($(".container").width());
 var container_height = parseInt($(".container").height());
 var you_width = parseInt(you.width());
 var you_height = parseInt(you.height());
 var restart_div = $('#restart_div');
 var restart_btn = $('#restart');
 var maze = $('.maze');

$(document).on('keydown', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 37 && move_left === false) {
                move_left = requestAnimationFrame(left);
            } else if (key === 39 && move_right === false) {
                move_right = requestAnimationFrame(right);
            } else if (key === 38 && move_up === false) {
                move_up = requestAnimationFrame(up);
            } else if (key === 40 && move_down === false) {
                move_down = requestAnimationFrame(down);
            }
        }
    });

$(document).on('keyup', function(e) {
        if (game_over === false) {
            var key = e.keyCode;
            if (key === 37) {
                cancelAnimationFrame(move_left);
                move_left = false;
            } else if (key === 39) {
                cancelAnimationFrame(move_right);
                move_right = false;
            } else if (key === 38) {
                cancelAnimationFrame(move_up);
                move_up = false;
            } else if (key === 40) {
                cancelAnimationFrame(move_down);
                move_down = false;
            }
        }
    });

function left() {
        if (game_over === false && parseInt(you.css('left')) > 0) {
            you.css('left', parseInt(you.css('left')) - 7);
            move_left = requestAnimationFrame(left);
            points++;
        }
    }

function right() {
        if (game_over === false && parseInt(you.css('left')) < container_width - you_width) {
            you.css('left', parseInt(you.css('left')) + 7);
            move_right = requestAnimationFrame(right);
            points++;
        }
    }

function up() {
        if (game_over === false && parseInt(you.css('top')) > 0) {
            you.css('top', parseInt(you.css('top')) - 5);
            move_up = requestAnimationFrame(up);
            points++;
        }
    }

function down() {
        if (game_over === false && parseInt(you.css('top')) < container_height - you_height) {
            you.css('top', parseInt(you.css('top')) + 5);
            move_down = requestAnimationFrame(down);
            points++;
        }
    }

anim_id = requestAnimationFrame(repeat);

function repeat() {
   var audio1 = new Audio('https://justcodaborate.com/project_images/spooky%20background%20sound.mp4');
   var audio2 = new Audio('https://justcodaborate.com/project_images/spooky%20sounds%202.mp4');
   // audio1.play();

audio1.addEventListener("ended", function(){
     audio1.currentTime = 0;
     // audio2.play();
   });

audio2.addEventListener("ended", function(){
     audio2.currentTime = 0;
     // audio1.play();
   });
 
   time++;
   if(time==3000) {
      end_game();
   }

if(collision(you, ghost1, 'ghost') || collision(you, vampire, 'vampire') || collision(you, zombie1, 'zombie') || collision(you, bat1, 'bat')) {
      lives--;
      anim_id = requestAnimationFrame(repeat);
      if(lives==1) {
        end_game();
        cancelAnimationFrame(repeat);
      } else {
        lives--;
      }
      return;
   } 
   if(hit(you, maze)) {
      move_up = false;
      move_down = false;
      move_left = false;
      move_right = false;
   }
   if(collision(you, gem1, 'gem')) {
      var hit_gem = new Audio('https://justcodaborate.com/project_images/gem%20sound.mp4');
      hit_gem.play();
      points++;
      hit_gem.addEventListener("ended", function(){ hit_gem.currentTime = 0; hit_gem.pause(); anim_id = requestAnimationFrame(repeat); });
   } 
   if(collision(you, powerup, 'powerup')) {
      lives++;
      points++;
      anim_id = requestAnimationFrame(repeat);
      if(lives==3) {
         return;
      }
   }

enemie_move(ghost1);
   enemie_move(vampire);
   enemie_move(zombie1);
   enemie_move(bat1);
   enemie_move(gem1);
   enemie_move(powerup);

anim_id = requestAnimationFrame(repeat);
 }

function end_game() {
        game_over = true;
        cancelAnimationFrame(anim_id);
        cancelAnimationFrame(move_up);
        cancelAnimationFrame(move_down);
        cancelAnimationFrame(move_left);
        cancelAnimationFrame(move_right);
        $(".container").slideUp();
        restart_div.slideDown();
        restart_btn.focus();
        document.getElementById("restart").innerHTML = "GAME OVER<br>Points: " + points;
        return true;
 }

function collision($div1, $div2, type) {
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
        return true;
 }

function hit(char, checker) {
    
   var char_top = $(char).css('top');
   var char_left = $(char).css('left');
   var checker_top = $(checker).css('top');
   var checker_left = $(checker).css('left');

if(char_left===checker_left) {
      cancelAnimationFrame(move_up);
      cancelAnimationFrame(move_down);
      cancelAnimationFrame(move_left);
      cancelAnimationFrame(move_right);
      move_up = false;
      move_left = false;
      move_right = false;
      move_down = false;
   }

}

});