Post
Ask Question

Puzzle Game In JavaScript

Introduction

 
In this blog, you  will learn basic concepts of  puzzle game in JavaScript and purpose of JavaScript used in  Applications. It gives the puzzle game an initial stage to start within JavaScript. JavaScript is a scripting language, it's used for within HTML Web pages. It is a lightweight programming language. JavaScript code is used directly in HTML pages. 
 
Step 1
 
First, open a Sublime Text editor, 
  • Open start -> Sublime Text Editor.
  • Go to file -> File -> New File
Step 2
 
Now, that in the below sample, you can insert CSS styles inside the <style> tag.
  1. html {  
  2.   height: 100%;  
  3. }  
  4.   
  5. body {  
  6.   height: 100%;  
  7.   background-image: linear-gradient(#7B9F35, #226666);  
  8.   display: flex;  
  9.   justify-content: center;  
  10.   align-items: center;  
  11.   flex-direction: column;  
  12. }  
  13.   
  14. .game {  
  15.   /* position: absolute; 
  16.   top: 50%; 
  17.   left: 50%; 
  18.   transform: translate(-50%, -50%); */  
  19.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);  
  20.   padding: 15px;  
  21.   background-color: #AA3939;  
  22.   border-radius: 5px;  
  23. }  
  24.   
  25. .grid {  
  26.   display: grid;  
  27.   grid-template-columns: 80px 80px 80px 80px;  
  28.   grid-template-rows: 80px 80px 80px 80px;  
  29.   border: 1px solid #550000;  
  30. }  
  31.   
  32. .grid button {  
  33.   background-color: #cfcfcf;  
  34.   color: #003333;  
  35.   font-size: 24px;  
  36.   font-weight: bold;  
  37.   border: 1px solid #550000;  
  38.   outline: none;  
  39.   cursor: pointer;  
  40. }  
  41.   
  42. .footer {  
  43.   margin-top: 15px;  
  44.   display: flex;  
  45.   justify-content: space-between;  
  46. }  
  47.   
  48. .footer button {  
  49.   border: none;  
  50.   font-size: 20px;  
  51.   font-weight: bold;  
  52.   border-radius: 5px;  
  53.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);  
  54.   padding: 5px;  
  55.   width: 80px;  
  56.   background-color: #D4EE9F;  
  57.   color: #003333;  
  58.   outline: none;  
  59.   cursor: pointer;  
  60. }  
  61.   
  62. .footer button:hover {  
  63.   color: #D4EE9F;  
  64.   background-color: #003333;  
  65. }  
  66.   
  67. .footer span {  
  68.   flex: 1;  
  69.   text-align: center;  
  70.   font-size: 20px;  
  71.   color: #D4EE9F;  
  72.   font-weight: bold;  
  73.   margin: auto 0;  
  74. }  
  75.   
  76. .message {  
  77.   color:#AA3939;  
  78.   height: 80px;  
  79. } 
Step 3
 
Now let's write a function to an object in JavaScript. In the following example, you will see how to do that with the following code.
  1. class Box {  
  2.   constructor(x, y) {  
  3.     this.x = x;  
  4.     this.y = y;  
  5.   }  
  6.   
  7.   getTopBox() {  
  8.     if (this.y === 0) return null;  
  9.     return new Box(this.x, this.y - 1);  
  10.   }  
  11.   
  12.   getRightBox() {  
  13.     if (this.x === 3) return null;  
  14.     return new Box(this.x + 1, this.y);  
  15.   }  
  16.   
  17.   getBottomBox() {  
  18.     if (this.y === 3) return null;  
  19.     return new Box(this.x, this.y + 1);  
  20.   }  
  21.   
  22.   getLeftBox() {  
  23.     if (this.x === 0) return null;  
  24.     return new Box(this.x - 1, this.y);  
  25.   } 
Step 4
 
In the  following code, you declared a function called “getNextdoorBoxes()” and takes four parameters. In the next line, we are creating one object of the “getRandomNextdoorBox()” function and at the time of creation we pass two parameters into it.
  1. getNextdoorBoxes() {  
  2.     return [  
  3.       this.getTopBox(),  
  4.       this.getRightBox(),  
  5.       this.getBottomBox(),  
  6.       this.getLeftBox()  
  7.     ].filter(box => box !== null);  
  8.   }  
  9.   
  10.   getRandomNextdoorBox() {  
  11.     const nextdoorBoxes = this.getNextdoorBoxes();  
  12.     return nextdoorBoxes[Math.floor(Math.random() * nextdoorBoxes.length)];  
  13.   }  
  14. }  
  15.   
  16. const swapBoxes = (grid, box1, box2) => {  
  17.   const temp = grid[box1.y][box1.x];  
  18.   grid[box1.y][box1.x] = grid[box2.y][box2.x];  
  19.   grid[box2.y][box2.x] = temp;  
  20. };  
  21.   
  22. const isSolved = grid => {  
  23.   return (  
  24.     grid[0][0] === 1 &&  
  25.     grid[0][1] === 2 &&  
  26.     grid[0][2] === 3 &&  
  27.     grid[0][3] === 4 &&  
  28.     grid[1][0] === 5 &&  
  29.     grid[1][1] === 6 &&  
  30.     grid[1][2] === 7 &&  
  31.     grid[1][3] === 8 &&  
  32.     grid[2][0] === 9 &&  
  33.     grid[2][1] === 10 &&  
  34.     grid[2][2] === 11 &&  
  35.     grid[2][3] === 12 &&  
  36.     grid[3][0] === 13 &&  
  37.     grid[3][1] === 14 &&  
  38.     grid[3][2] === 15 &&  
  39.     grid[3][3] === 0  
  40.   );  
  41. };  
  42.   
  43. const getRandomGrid = () => {  
  44.   let grid = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]];  
  45.   
  46.   // Shuffle  
  47.   let blankBox = new Box(3, 3);  
  48.   for (let i = 0; i < 1000; i++) {  
  49.     const randomNextdoorBox = blankBox.getRandomNextdoorBox();  
  50.     swapBoxes(grid, blankBox, randomNextdoorBox);  
  51.     blankBox = randomNextdoorBox;  
  52.   }  
  53.   
  54.   if (isSolved(grid)) return getRandomGrid();  
  55.   return grid;  
  56. };  
  57.   
  58. class State {  
  59.   constructor(grid, move, time, status) {  
  60.     this.grid = grid;  
  61.     this.move = move;  
  62.     this.time = time;  
  63.     this.status = status;  
  64.   }  
  65.   
  66.   static ready() {  
  67.     return new State(  
  68.       [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]],  
  69.       0,  
  70.       0,  
  71.       "ready"  
  72.     );  
  73.   }  
  74.   
  75.   static start() {  
  76.     return new State(getRandomGrid(), 0, 0, "playing");  
  77.   }  
  78. }  
  79.   
  80. class Game {  
  81.   constructor(state) {  
  82.     this.state = state;  
  83.     this.tickId = null;  
  84.     this.tick = this.tick.bind(this);  
  85.     this.render();  
  86.     this.handleClickBox = this.handleClickBox.bind(this);  
  87.   }  
  88.   
  89.   static ready() {  
  90.     return new Game(State.ready());  
  91.   }  
  92.   
  93.   tick() {  
  94.     this.setState({ time: this.state.time + 1 });  
  95.   }  
  96.   
  97.   setState(newState) {  
  98.     this.state = { ...this.state, ...newState };  
  99.     this.render();  
  100.   }  
  101.   
  102.   handleClickBox(box) {  
  103.     return function() {  
  104.       const nextdoorBoxes = box.getNextdoorBoxes();  
  105.       const blankBox = nextdoorBoxes.find(  
  106.         nextdoorBox => this.state.grid[nextdoorBox.y][nextdoorBox.x] === 0  
  107.       );  
  108.       if (blankBox) {  
  109.         const newGrid = [...this.state.grid];  
  110.         swapBoxes(newGrid, box, blankBox);  
  111.         if (isSolved(newGrid)) {  
  112.           clearInterval(this.tickId);  
  113.           this.setState({  
  114.             status: "won",  
  115.             grid: newGrid,  
  116.             move: this.state.move + 1  
  117.           });  
  118.         } else {  
  119.           this.setState({  
  120.             grid: newGrid,  
  121.             move: this.state.move + 1  
  122.           });  
  123.         }  
  124.       }  
  125.     }.bind(this);  
  126.   }  
  127.   
  128.   render() {  
  129.     const { grid, move, time, status } = this.state;  
  130.   
  131.     // Render grid  
  132.     const newGrid = document.createElement("div");  
  133.     newGrid.className = "grid";  
  134.     for (let i = 0; i < 4; i++) {  
  135.       for (let j = 0; j < 4; j++) {  
  136.         const button = document.createElement("button");  
  137.   
  138.         if (status === "playing") {  
  139.           button.addEventListener("click", this.handleClickBox(new Box(j, i)));  
  140.         }  
  141.   
  142.         button.textContent = grid[i][j] === 0 ? "" : grid[i][j].toString();  
  143.         newGrid.appendChild(button);  
  144.       }  
  145.     }  
  146.     document.querySelector(".grid").replaceWith(newGrid);  
  147.   
  148.     // Render button  
  149.     const newButton = document.createElement("button");  
  150.     if (status === "ready") newButton.textContent = "Play";  
  151.     if (status === "playing") newButton.textContent = "Reset";  
  152.     if (status === "won") newButton.textContent = "Play";  
  153.     newButton.addEventListener("click", () => {  
  154.       clearInterval(this.tickId);  
  155.       this.tickId = setInterval(this.tick, 1000);  
  156.       this.setState(State.start());  
  157.     });  
  158.     document.querySelector(".footer button").replaceWith(newButton);  
  159.   
  160.     // Render move  
  161.     document.getElementById("move").textContent = `Move: ${move}`;  
  162.   
  163.     // Render time  
  164.     document.getElementById("time").textContent = `Time: ${time}`;  
  165.   
  166.     // Render message  
  167.     if (status === "won") {  
  168.       document.querySelector(".message").textContent = "You win!";  
  169.     } else {  
  170.       document.querySelector(".message").textContent = "";  
  171.     }  
  172.   }  
  173. }  
  174.   
  175. const GAME = Game.ready(); 
The HTML 5 code below shows how to complete the code for this awesome puzzle game!
  1. <!doctype html> 
  2. <html>  
  3.   <head>  
  4.     <title>Puzzle game</title>  
  5.     <link rel="stylesheet" type="text/css" href="style.css">  
  6.   </head>  
  7.   
  8.   <body>  
  9.   
  10.     <h1>PRABAKARAN ACT</h1>  
  11.     <div class="game">  
  12.       <div class="grid">  
  13.         <button>1</button>  
  14.         <button>2</button>  
  15.         <button>3</button>  
  16.         <button>4</button>  
  17.         <button>5</button>  
  18.         <button>6</button>  
  19.         <button>7</button>  
  20.         <button>8</button>  
  21.         <button>9</button>  
  22.         <button>10</button>  
  23.         <button>11</button>  
  24.         <button>12</button>  
  25.         <button>13</button>  
  26.         <button>14</button>  
  27.         <button>15</button>  
  28.         <button></button>  
  29.       </div>  
  30.   
  31.       <div class="footer">  
  32.         <button>Play</button>  
  33.         <span id="move">Move: 100</span>  
  34.         <span id="time">Time: 100</span>  
  35.       </div>  
  36.     </div>  
  37.     <h1 class="message">You win!</h1>  
  38.   
  39.   
  40.     <script src="script.js"></script>  
  41.   </body>  
  42. </html> 
In JavaScript, you can create an puzzle game and set a number values on move. Here is an example output of the code above.
 
 
 
Output
 
The following is a simple HTML 5 code for displaying puzzle games in the browser.
 
 
 
 
 
 

Conclusion

 
In this blog, you learned how to define a puzzle game in JavaScript. In the upcoming blog, you will learn some more advanced game and application concepts in JavaScript. Thanks for reading :)