Simple Mouse Mover MAZE game in JQuery

Recently, i have developed simple mouse mover MAZE game , which helpful for your career to understand how to work mouse mover in JQuery.

Here is the HTML5 Code:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
  <title>Maze!</title>
  
  
  <link href="maze.css" type="text/css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="maze.js" type="text/javascript"></script>
  
 </head>

 <body>
  <h1>The Amazing Mouse Maze!</h1>
  <h2 id="status">Click the "S" to begin.</h2>
  
  <!-- This part of the page represents the maze -->
  <div id="maze">
   <div id="start">S</div>
   <div class="boundary" id="boundary1"></div>
   <div class="boundary"></div>
   <div class="boundary"></div>
   <div class="boundary"></div>
   <div class="boundary"></div>
   <div id="end">E</div>
  </div>
  
  <p>
   The object of this game is to guide the mouse cursor through the 
start area and get to the end area.  Be sure to avoid the walls:
  </p>
  
  <div class="boundary example"></div>
  
  <p>
   Good luck!
  </p>
 

</body></html>



you have to write this JQuery code:

"use strict";

$(document).ready(function(){
 var start =  $("#start");
 var end = $("#end");
 var maze = $("#maze");
 var boundary = $(".boundary");
 var gameStart = false;
 maze.mouseleave(function(){ loss() });

 start.click(function(){
  $("#status").text('Move mouse to End in order to win the game');
  gameStart = true;
  if(boundary.hasClass('youlose')){
   boundary.removeClass('youlose');
  }
  boundary.mousemove(function(){ loss(); }) 
 });

 end.mousemove(function(){
  if(gameStart == true) won(); 
  else if(gameStart && boundary.hasClass('youlose'))  loss(); 
 
 });

 function won(){
  alert("Hurry!!! you won");
  gameStart = false;
  $("#status").text("Hurry!!! you won! please collect your prize money.");
 }

 function loss(){
  if(gameStart){
   gameStart = false;
   boundary.addClass('youlose');
   $("#status").text('So Sad !!!You lose the game, Try next time');
  }
 }


})


finlly, some adding of css code:

h1, h2 {
 text-align: center;
}

p {
 width: 600px;
 margin: 1em auto;
}

#maze {
 margin: auto;
 position: relative;
 height: 300px;
 width: 500px;
}

#start, #end {
 position: absolute;
 top: 205px;
 height: 30px;
 width: 30px;
 border: 1px solid black;
 padding: 5px;
 cursor: default;
 
 font-family: "Helvetica", "Arial", sans-serif;
 font-size: 25pt;
 text-align: center;
}

#maze #start {
 background-color: #88ff88;
 left: 0;
}

#maze #end {
 background-color: #8888ff;
 right: 0;
}

div.boundary {
 background-color: #eeeeee;
 border: 1px solid black;
}

div.boundary.example {
 margin: auto;
 width: 100px;
 height: 25px;
}

div.youlose {
 background-color: #ff8888;
}

/*
Hack hack hack; these are CSS "sibling selectors" for selecting
neighboring elements.  Necessary to avoid giving ids to the boundary divs
*/

#maze div.boundary {
 position: absolute;
 
 top: 0;
 left: 0;
 height: 200px;
 width: 150px;
 z-index: 1;
}

#maze div.boundary + div.boundary {
 border-left: none;
 border-right: none;
 z-index: 2;
 
 left: 151px;
 height: 50px;
 width: 198px;
}

#maze div.boundary + div.boundary + div.boundary {
 border-left: 1px black solid;
 border-right: 1px black solid;
 z-index: 1;
 
 left: 348px;
 height: 200px;
 width: 150px;
}

#maze div.boundary + div.boundary + div.boundary + div.boundary {
 border: 1px black solid;
 
 top: 250px;
 left: 0;
 height: 48px;
 width: 498px;
}

#maze div.boundary + div.boundary + div.boundary + div.boundary + div.boundary {
 border-bottom: none;
 
 top: 100px;
 left: 200px;
 height: 150px;
 width: 98px;
}


and output like this:





Happy Coding !!!


2 comments:

  1. AnonymousNovember 13, 2016 at 5:26 AM

    Simple wood working concepts are for the individual who does not have a lot of wood working encounter. The tasks are simple to do. Simple wood working will cause to more complex tasks one day, as everyone has to start somewhere. http://daily-crossword.com/

    ReplyDelete
  2. Robert AnthonyNovember 27, 2016 at 8:16 PM

    There are a lot of different labyrinth activities on the internet that you can use to not only amuse yourself, but also enhance your storage and overall thinking processes. Very few people are acquainted with the research that have been performed recently that have indicated out a obvious connection between those who invest at least Half an hour every day enjoying labyrinth activities on the internet and an enhanced capability to keep in mind things and to procedure new details. crossword puzzle

    ReplyDelete