diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..8ab070c5 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 317a3e58..0ef0e9d8 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,164 @@ -# Project Name (Start editing here) - +# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: Mummy Maze + +You are trapped in a chamber with a mummy. The mummy seemed to follow around the chamber with your every single move. There are barriers within the chamber which can temporary block the mummy's moves. + + Your quest is to be able to exit the room before the mummy reaches you. Quick! Your Time is running out! + +Play it here +https://thamjieying.github.io/project-1/ -# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game -### Overview - -Let's start out with something fun - **a game!** - -Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. - -**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! - - ---- - -### Technical Requirements - -Your app must: - -* **Render a game in the browser** -* **Any number of players** will be okay, switch turns will be great -* **Design logic for winning** & **visually display which player won** -* **Include separate HTML / CSS / JavaScript files** -* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles -* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory -* **Deploy your game online**, where the rest of the world can access it -* Use **semantic markup** for HTML and CSS (adhere to best practices) -* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please - ---- - -### Necessary Deliverables - -* A **working game, built by you**, hosted somewhere on the internet -* A **link to your hosted working game** in the URL section of your GitHub repo -* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project -* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. - ---- - -### Suggested Ways to Get Started - -* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! -* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems -* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. -* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. -* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. -* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. - ---- - -### Potential Project Ideas - -##### Blackjack -Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! - -##### Self-scoring Trivia -Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! - ---- - -### Useful Resources - -* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ -* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ -* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ -* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ -* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ - ---- - -### Project Feedback + Evaluation - -* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? - -* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? - -* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? - -* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? - -* __Deployment__: Did you deploy your application to a public url using GitHub Pages? - -* __Total__: Your instructors will give you a total score on your project between: - - Score | Expectations - ----- | ------------ - **0** | _Incomplete._ - **1** | _Does not meet expectations._ - **2** | _Meets expectations, good job!_ - **3** | _Exceeds expectations, you wonderful creature, you!_ - - This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! +Basic Layout +------------ + + +* 6X6 grid layout +* Walls as barriers +* 1 Player +* 1 Mummy +* Exit + + +### Sample Game Layout + + +Instructions +--------- +### Goal +Reach the exit without being caught by the mummy + +### Game Play +1. Player Starts First +2. Player gets to move by 1 grid in any direction +
+3. Each move the player makes, the mummy moves towards the player by 2 moves towards the player + +4. The walls prevents the mummy from moving towards the player while the player moves towards the exit + +5. Once the player gets to the exit, the play is completed, Player proceeds to the next level. + +### How does the mummy moves? + +1. If the mummy can move horizontally (side to side) to get closer to the player, it will first make a horizontal move +2. Else, the mummy will make a vertical move (up or down) to get closer to the player +3. if the mummy is unable to make any move due to the barriers, it will remain at the same spot. + +You can "trick" the mummy into walking into the barriers to buy you some "moves" to get to the exit. + +Building the Game +----------------- +### Flow Chart of the Game Logic + + + +### Placing the Barriers on the board +##### Representation of Barriers +![FlowChart](/img/tileRepresentation.jpg "Game Logic") + +##### Sample Representation of the Board Layout using a 2D Array +Empty Board (no barrier) +```javascript +var map = [ +[5,1,1,1,1,6], +[4,0,0,0,0,2], +[4,0,0,0,0,2], +[4,0,0,0,0,2], +[4,0,0,0,0,2], +[7,3,3,3,3,8]] +``` + +### Initialisation of the Game +Setting up the map and exit using a 2D array + +```javascript +var map = [ + [5,1,9,1,1,6], + [4,0,6,0,3,2], + [10,4,0,2,5,2], + [4,3,0,0,3,2], + [4,6,4,2,5,0], + [7,3,3,3,3,8]] + +var exit = [ + [0,0,0,0,0,0], + [0,0,0,0,0,0], + [0,0,0,0,0,0], + [0,0,0,0,0,0], + [0,0,0,0,0,2], + [0,0,0,0,0,0], + ] + + ``` + + Setting the starting position of the player, mummy and the exit + ```javascript + var charX //x position of the player + var charY //y position of the player + + var mumX //x position of the mummy + var mumY //y position of the mummy + + var exitX //x position of the exit + var exitY //y position of the exit + ``` + +### Checking Valid Movement +#### Checking Blockage + +Using a switch case to check the tile corresponding each wall. The function returns a true if the movement is blocked and a false if the movement is allowed + +example: checking if moving up is valid +```javascript +function checkYBlockTop(x){ + switch(x){ + case 1://top blocked + case 5://top and left blocked + case 6://top and right blocked + case 9://top and bottom blocked + case 11:// top, left and right blocked + case 12:// top, right and bottom blocked + case 14:// top, left and bottom blocked + return true;//movement is blocked + break; + default: + return false;//movement is NOT blocked + } +} +``` + +### Mummy's movement +Mummy needs to get closer to the player. With the player's every move, it will move 2 step closer. + +We control's the mummy movement by first checking the relative position of the mummy to the player. +* check relative x position +* move horizontally(if possible) +* check relative y position +* move vertically (if possible) +* if both mummy and player are in the same position, this means that it has reached the end of the game. + +###### Deciding to move left or Right +Mummy (x-position) - Player(x-position) = positive (left) +
Mummy (x-position) - Player(x-position) = negative (right) + +###### Deciding to move Up or Down +Mummy (y-position) - Player(y-position) = positive (up) +
Mummy (y-position) - Player(y-position) = negative (down) + +### Number of Levels +There are a total of 6 level with increasing difficulty. + +### Ending the Game +There are 2 ways that will led to the end of the game +1. Mummy meets the player +2. Player exits the maze + +### Challenges +* Linking the movement of the characters with the javascript +* mapping all the combinations of the barriers and representing it on a 2D array. +* Ensuring that the mummies follows the player with the defined logic. + +### Improvement +* Creating random levels without presetting the map, character position and mummy position. +* Creating animation for the character. +* Creating more enemies to increase the difficulty of the game. +* Making sure that the character move within the grids diff --git a/audio/footsteps.mp3 b/audio/footsteps.mp3 new file mode 100644 index 00000000..996ac7ba Binary files /dev/null and b/audio/footsteps.mp3 differ diff --git a/audio/scary.mp3 b/audio/scary.mp3 new file mode 100644 index 00000000..b7eaed39 Binary files /dev/null and b/audio/scary.mp3 differ diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 00000000..f50a647b --- /dev/null +++ b/css/menu.css @@ -0,0 +1,63 @@ + +.container{ + height: 100vh; + width: 100%; + margin: 0 auto; + background: url(../img/background.jpg) no-repeat; + background-size: cover; + font-family: 'Creepster', cursive; + position: absolute; +} +.meun{ + position: relative; + transform: translateY(50%); +} +h1{ + text-align: center; + font-family: 'Creepster', cursive; + font-size: 150px; + background: -webkit-linear-gradient(#eee, #333); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin: 0; +} +button{ + display: block; + margin: auto; + height: 100px; + margin-top: 5px; + font-family: 'Creepster', cursive; + font-size: 50px; + color: #eee; + background-color: rgba(244,244,244,0.5); +} +.instructions{ + width: 50%; + margin: 0 auto; +} +.wrapperLeft{ + display: inline-block; + width: 39%; + transform: translateY(-80%); +} +.wrapperRight{ + display: inline-block; + width: 50%; + /*text-align: center;*/ +} +img{ + transform: translateX(50%); +} +li{ + font-family: "Arial Rounded MT Bold"; + color: white; + padding: 10px 0; +} +#menu{ + font-family: 'Creepster', cursive; + font-size: 70px; + padding; 10px; + height: 100px; + width: 400px; + opacity: 1; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..94b54635 --- /dev/null +++ b/css/style.css @@ -0,0 +1,104 @@ +body{ + width: 100%; + height: 100vh; + background: url(../img/pyramidsetting.jpg) no-repeat; + background-size: cover; + position: absolute; +} + + +.container{ + width: 80% + margin: 0 auto; + /*border: 1px solid red;*/ +} + +h2{ + text-align: center; + font-family: 'Creepster', cursive; + font-size: 100px; + color: brown; + margin: 0; +} +.wrapper{ + width: 600px; + display: flex; + flex-flow: row wrap; + margin: 0 auto; + background-color: rgba(255,255,255,0.5); +} +.box{ + border: 1px solid rgba(245,245,245,0.5); + width: 100px; + height: 100px; + box-sizing: border-box; + position: relative; +} + +#player{ + position: absolute; + width: 100px; + height: 100px; + background-image: url(../img/player_1.png); + background-size: cover; + left: 0; + top: 0; + /*transition: left 0.5s, top 0.5s;*/ +} + +#mummy{ + position: absolute; + width: 100px; + height: 100px; + background: url(../img/tinyMummySprite.png); + background-size: cover; + left: 0; + top: 0; + /*transition: left 0.1s, top 0.1s;*/ + /*animation: mymove 5s; + animation-delay: 2s;*/ +} +.right{ + border-right: 2px solid brown; + box-sizing: border-box; +} +.top{ + border-top: 2px solid brown; + box-sizing: border-box; +} +.bottom{ + border-bottom: 2px solid brown; + box-sizing: border-box; +} +.left{ + border-left: 2px solid brown; + box-sizing: border-box; +} +.exitLeft{ + border-left: 5px solid blue; +} +.exitRight{ + border-right: 5px solid blue; +} +.exitTop{ + border-top: 5px solid blue; +} +.exitBottom{ + border-bottom: 5px solid blue; +} +.function{ + position: absolute; +} +button{ + display: inline-block; + margin: auto; + height: 80px; + width: 200px; + margin-top: 5px; + font-size: 30px; + font-family: 'Creepster', cursive; + transform: translateX(210%); +} +#nextLevel{ + display: none; +} diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 00000000..921760f4 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 00000000..4f2a11f2 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/barrier.png b/img/barrier.png new file mode 100644 index 00000000..7fd89ae9 Binary files /dev/null and b/img/barrier.png differ diff --git a/img/barrierMoves.png b/img/barrierMoves.png new file mode 100644 index 00000000..076ad728 Binary files /dev/null and b/img/barrierMoves.png differ diff --git a/img/basicLayout1.png b/img/basicLayout1.png new file mode 100644 index 00000000..0e2da8f9 Binary files /dev/null and b/img/basicLayout1.png differ diff --git a/img/basicLayout2.png b/img/basicLayout2.png new file mode 100644 index 00000000..cb1309b8 Binary files /dev/null and b/img/basicLayout2.png differ diff --git a/img/flowChart.png b/img/flowChart.png new file mode 100644 index 00000000..83f49913 Binary files /dev/null and b/img/flowChart.png differ diff --git a/img/legend.png b/img/legend.png new file mode 100644 index 00000000..ae321e2e Binary files /dev/null and b/img/legend.png differ diff --git a/img/mummyMoves.png b/img/mummyMoves.png new file mode 100644 index 00000000..ced289a7 Binary files /dev/null and b/img/mummyMoves.png differ diff --git a/img/playerMoves.png b/img/playerMoves.png new file mode 100644 index 00000000..7ca351f8 Binary files /dev/null and b/img/playerMoves.png differ diff --git a/img/player_1.png b/img/player_1.png new file mode 100644 index 00000000..f9f42ab7 Binary files /dev/null and b/img/player_1.png differ diff --git a/img/pyramidsetting.jpg b/img/pyramidsetting.jpg new file mode 100644 index 00000000..61d32e5b Binary files /dev/null and b/img/pyramidsetting.jpg differ diff --git a/img/sampleLayout1.png b/img/sampleLayout1.png new file mode 100644 index 00000000..e5b5b575 Binary files /dev/null and b/img/sampleLayout1.png differ diff --git a/img/tileRepresentation.JPG b/img/tileRepresentation.JPG new file mode 100644 index 00000000..0beed35e Binary files /dev/null and b/img/tileRepresentation.JPG differ diff --git a/img/tinyMummySprite.png b/img/tinyMummySprite.png new file mode 100644 index 00000000..fc8fb4df Binary files /dev/null and b/img/tinyMummySprite.png differ diff --git a/index.html b/index.html index 5b002212..b03f940f 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,22 @@ - - + Mummy Maze + + - +
+
+

Mummy Maze

+ + +
+
+ + diff --git a/instructionPage.html b/instructionPage.html new file mode 100644 index 00000000..ba7c354a --- /dev/null +++ b/instructionPage.html @@ -0,0 +1,33 @@ + + + + + Mummy Maze: Instructions + + + + +
+
+ +

Instructions

+
+ legend +
+
+ +
    +
  1. Player Moves by one grid by any direction.
  2. +
  3. Each move the player makes, the mummy moves towards the player by 2 moves towards the player.
  4. +
  5. The Mummy will always try to make a horizontal move before attempting a vertical Move
  6. +
  7. Try to trick the Mummy into moving to a blocked spot, so that you can make your move towards the exit.
  8. +
  9. Once the player gets to the exit, the play is completed, Player proceeds to the next level.
  10. +
+
+ +
+
+ + + + diff --git a/js/gamePlay.js b/js/gamePlay.js new file mode 100644 index 00000000..701d8cba --- /dev/null +++ b/js/gamePlay.js @@ -0,0 +1,74 @@ +$(function(){ + initGame() + $(document).keydown(function(e){ + var charPos = map[charY][charX] + counter=0 + + //playerMovement + if(!isExit() && clicker){ + switch(e.keyCode){ + case 37: //left + if(!checkXBlockLeft(charPos)){ + charMoveLeft() + } + mummyFollowChar() + meetMummy() + break; + case 38: //up + if(!checkYBlockTop(charPos)){ + charMoveUp() + } + mummyFollowChar() + meetMummy() + break; + case 39: // right + if(!checkXBlockRight(charPos)){ + charMoveRight() + } + mummyFollowChar() + meetMummy() + break; + case 40: //down + if(!checkYBlockBottom(charPos)){ + charMoveDown() + } + mummyFollowChar() + meetMummy() + break; + } + }else{ + exitPos = exit[charY][charX] + switch(e.keyCode){ + case 37: //left + if(exitPos===4){ + charMoveLeft() + alertWin() + } + break; + case 38: //up + if(exitPos===1){ + charMoveUp() + alertWin() + } + break; + case 39: // right + if(exitPos===2){ + charMoveRight() + alertWin() + } + break; + case 40: //down + if(exitPos===3){ + charMoveDown() + alertWin() + } + break; + } + } + }) + + + $('#restart').on('click', function(){ + restart() + }) +}) diff --git a/js/level1.js b/js/level1.js new file mode 100644 index 00000000..0e676518 --- /dev/null +++ b/js/level1.js @@ -0,0 +1,30 @@ +//layout for blockage +var map = [ +[5,1,9,1,1,6], +[4,0,6,4,3,2], +[10,4,0,2,5,2], +[4,3,0,0,3,2], +[4,6,4,2,5,0], +[7,3,3,3,3,8] +] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,2], +[0,0,0,0,0,0], +] +//character Position +var charY = 1 +var charX = 0 + +//mummy position +var mumX = 1 +var mumY = 5 + +//exit position +var exitX = 5 +var exitY = 4 diff --git a/js/level2.js b/js/level2.js new file mode 100644 index 00000000..c31d1ed4 --- /dev/null +++ b/js/level2.js @@ -0,0 +1,30 @@ +//layout for blockage +var map = [ +[11,11,14,1,1,12], +[10,4,12,10,4,6], +[10,7,9,0,2,13], +[4,1,9,2,10,5], +[4,3,1,8,4,2], +[7,9,3,9,3,8]] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,2], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +] + +//character Position +var charY = 2 +var charX = 2 + +//mummy position +var mumX = 5 +var mumY = 3 + +//exit position +var exitX = 5 +var exitY = 3 diff --git a/js/level3.js b/js/level3.js new file mode 100644 index 00000000..07a1d2f0 --- /dev/null +++ b/js/level3.js @@ -0,0 +1,29 @@ +//layout for blockage +var map = [ +[5,9,1,9,1,6], +[4,12,7,9,0,2], +[4,9,1,1,8,10], +[10,11,7,0,1,8], +[4,3,9,3,3,6], +[7,9,6,14,9,8]] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,3,0,0,0], +] +//character Position +var charY = 1 +var charX = 1 + +//mummy position +var mumX = 1 +var mumY = 3 + +//exit position +var exitX = 2 +var exitY = 5 diff --git a/js/level4.js b/js/level4.js new file mode 100644 index 00000000..770e929a --- /dev/null +++ b/js/level4.js @@ -0,0 +1,29 @@ +//layout for blockage +var map = [ +[14,1,6,5,9,12], +[14,2,10,4,1,6], +[11,10,4,0,8,10], +[4,3,3,2,5,2], +[7,1,1,0,8,4], +[14,3,3,8,14,8]] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,2], +[0,0,0,0,0,0], +] +//character Position +var charY = 0 +var charX = 1 + +//mummy position +var mumX = 5 +var mumY = 5 + +//exit position +var exitX = 5 +var exitY = 4 diff --git a/js/level5.js b/js/level5.js new file mode 100644 index 00000000..20070b9e --- /dev/null +++ b/js/level5.js @@ -0,0 +1,29 @@ +//layout for blockage +var map = [ +[14,1,1,9,1,6], +[14,8,4,12,10,13], +[5,1,0,9,0,6], +[7,8,4,6,4,2], +[1,6,4,2,10,13], +[7,3,8,7,3,12]] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[4,0,0,0,0,0], +[0,0,0,0,0,0], +] +//character Position +var charY = 2 +var charX = 2 + +//mummy position +var mumX = 2 +var mumY = 3 + +//exit position +var exitX = 0 +var exitY = 4 diff --git a/js/level6.js b/js/level6.js new file mode 100644 index 00000000..a48b2ec8 --- /dev/null +++ b/js/level6.js @@ -0,0 +1,29 @@ +//layout for blockage +var map = [ +[5,12,14,1,9,6], +[4,6,14,2,14,2], +[10,7,1,0,1,2], +[4,9,8,13,7,0], +[4,1,1,1,9,2], +[7,3,3,8,14,8]] + +//array indicating the exits +var exit = [ +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +[0,0,0,0,0,2], +[0,0,0,0,0,0], +[0,0,0,0,0,0], +] +//character Position +var charY = 2 +var charX = 5 + +//mummy position +var mumX = 5 +var mumY = 4 + +//exit position +var exitX = 5 +var exitY = 3 diff --git a/js/mummyMovement.js b/js/mummyMovement.js new file mode 100644 index 00000000..fd3de259 --- /dev/null +++ b/js/mummyMovement.js @@ -0,0 +1,48 @@ +function mummyMoveX(){ + var mumPosition = $('#mummy').position() + var mumPos = map[mumY][mumX] + if(!checkXPos(mumX, charX)){ + if(leftRight() && !checkXBlockLeft(mumPos)){//move left + $('#mummy').css('left', mumPosition.left - 100 +'px') + mumX-- + counter++ + }else if(!leftRight() && !checkXBlockRight(mumPos)){//move right + $('#mummy').css('left', mumPosition.left + 100 +'px') + mumX++ + counter++ + } + } +} + +function mummyMoveY(){ + var mumPosition = $('#mummy').position() + var mumPos = map[mumY][mumX] + if (!checkYPos(mumY, charY)){ + if(upDown() && !checkYBlockTop(mumPos)){//move up + $('#mummy').css('top', mumPosition.top -100 +'px') + mumY-- + counter++ + }else if(!upDown()&&!checkYBlockBottom(mumPos)){//move down + $('#mummy').css('top', mumPosition.top + 100 +'px') + mumY++ + counter++ + } + } +} + +function mummyFollowChar(){ + counter = 0 + mumPos = map[mumY][mumX] + if(counter <2){ + mummyMoveX() + } + if(counter <2){ + mummyMoveX() + } + if(counter <2){ + mummyMoveY() + } + if(counter <2){ + mummyMoveY() + } +} diff --git a/js/playerMovement.js b/js/playerMovement.js new file mode 100644 index 00000000..ad6faac5 --- /dev/null +++ b/js/playerMovement.js @@ -0,0 +1,23 @@ + function charMoveLeft(){ + var position = $('#player').position() + $('#player').css('left', position.left - 100 +'px') + charX-- + } + + function charMoveUp(){ + var position = $('#player').position() + $('#player').css('top', position.top -100 +'px') + charY-- + } + + function charMoveRight(){ + var position = $('#player').position() + $('#player').css({'left': position.left + 100 +'px'}); + charX++ + } + + function charMoveDown(){ + var position = $('#player').position() + $('#player').css('top', position.top +100 +'px') + charY++ + } diff --git a/js/script.js b/js/script.js new file mode 100644 index 00000000..936c20c6 --- /dev/null +++ b/js/script.js @@ -0,0 +1,224 @@ +// GET ALL BOXES +var $boxes = $('.box') +var $wrapper = $('.wrapper') + +//allow movement? +var clicker=true + +function initGame() { + var snd = new Audio("./audio/scary.mp3"); // buffers automatically when created + snd.play(); + + // SET THE MAP + map.forEach(function(spotY,indexY) { + spotY.forEach(function(spot, indexX){ + switch (spot) { + case 1: + case 5: + case 6: + case 9: + case 11: + case 12: + case 14: + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('top') + break; + } + switch (spot) { + case 3: + case 7: + case 8: + case 9: + case 12: + case 13: + case 14: + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('bottom') + break; + } + switch (spot) { + case 4: + case 5: + case 7: + case 10: + case 11: + case 13: + case 14: + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('left') + break; + } + switch (spot) { + case 2: + case 6: + case 8: + case 10: + case 11: + case 12: + case 13: + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('right') + break; + } + }) + }) + // SET THE CHAR POSITION + $wrapper.eq(charY).find('.box').eq(charX).attr('id','playerPos') + var player = '
'; + $('#playerPos').append(player) + + // SET THE MUMMY POSITION + $wrapper.eq(mumY).find('.box').eq(mumX).attr('id','mummyPos') + var mummy = '
'; + $('#mummyPos').append(mummy); + + //SET EXIT POSITION + exit.forEach(function(spotY,indexY) { + spotY.forEach(function(spot, indexX){ + switch(spot){ + case 1://top + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('exitTop') + break; + case 2://right + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('exitRight') + break; + case 3://bottom + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('exitBottom') + break; + case 4://left + $wrapper.eq(indexY).find('.box').eq(indexX).addClass('exitLeft') + break; + } + }) + }) + } + + + +//checking for Exit +function isExit(){ + var exitPos = exit[charY][charX] + switch(exitPos){ + case 1: + case 2: + case 3: + case 4: + return true + default: + return false + } +} + +//checing relative x-position of mummy to player +function checkXPos(mumX, charX){ + if(mumX === charX){ + return true + }else{ + return false + } +} + +//checking move left or right +function leftRight(){ + //Move Left: true + //Move Right: false + return (mumX > charX) +} + +function upDown(){ + //move up: true + //move down: false + return (mumY > charY) +} + + +//checking relative y-position from mummy to player +function checkYPos(mumY, charY){ + if(mumY === charY){ + return true + }else{ + return false + } +} + +function meetMummy(){ + if(checkYPos(mumY, charY) && checkXPos(mumX, charX)){ + setTimeout(function(){ + alert('Killed by Mummy, Please Press restart.') + },300) + clicker = false + } +} + +//checking x-blockage +function checkXBlockLeft(x){ + switch(x){ + case 4: + case 5: + case 7: + case 10: + case 11: + case 13: + case 14: + return true; + break; + default: + return false; + } +} +function checkXBlockRight(x){ + switch(x){ + case 2: + case 6: + case 8: + case 10: + case 11: + case 12: + case 13: + return true; + break; + default: + return false; + } +} + +//checkingYBlockage +function checkYBlockTop(x){ + switch(x){ + case 1: + case 5: + case 6: + case 9: + case 11: + case 12: + case 14: + return true; + break; + default: + return false; + } +} +function checkYBlockBottom(x){ + switch(x){ + case 3: + case 7: + case 8: + case 9: + case 12: + case 13: + case 14: + return true; + break; + default: + return false; + } +} + +function alertWin(){ + setTimeout(function(){ + alert('You Won! Please Procced to the Next Level.') + },300) + $('#player').remove() + $('#nextLevel').show() + clicker=false +} + +function restart(){ + location.reload() +} diff --git a/level1.html b/level1.html new file mode 100644 index 00000000..9fe77331 --- /dev/null +++ b/level1.html @@ -0,0 +1,77 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 1

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + diff --git a/level2.html b/level2.html new file mode 100644 index 00000000..f0630fbc --- /dev/null +++ b/level2.html @@ -0,0 +1,77 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 2

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + diff --git a/level3.html b/level3.html new file mode 100644 index 00000000..2e003e55 --- /dev/null +++ b/level3.html @@ -0,0 +1,77 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 3

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + diff --git a/level4.html b/level4.html new file mode 100644 index 00000000..c6943120 --- /dev/null +++ b/level4.html @@ -0,0 +1,78 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 4

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + + diff --git a/level5.html b/level5.html new file mode 100644 index 00000000..4d6b1438 --- /dev/null +++ b/level5.html @@ -0,0 +1,77 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 5

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + diff --git a/level6.html b/level6.html new file mode 100644 index 00000000..7dadb8d4 --- /dev/null +++ b/level6.html @@ -0,0 +1,78 @@ + + + + + Mummy Maze + + + + + +
+
+

Level 6

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + + +