Question

In: Computer Science

Follow these steps to implement the following browser-based puzzle game:(Javascript/html/css) 1. Get a photo of yourself...

Follow these steps to implement the following browser-based puzzle game:(Javascript/html/css)
1. Get a photo of yourself and save it as an image file
2. Use a image-splitting program such as splitter.imageonline.co to break the image into 9 roughly equal parts (3 x 3). Save those files in a directory
3. Write Javascript that takes these nine images and randomly rearranges them in a 3 x 3 grid.
4. Each cell in the grid will also have a checkbox.
5. At each turn, the user will click two checkboxes, press a Swap button, and the program will swap the two images that were checked.
6. Play continues until all the sub-images are in their correct positions.
7. The program will state how many turns (swaps) it took to solve the puzzle.
8. Use CSS to make your puzzle game aesthetically (stylistically) pleasing
9. Upload your game (and the photo pieces) to your website.
10. Provide the URL of your puzzle game where it can be tested.

Solutions

Expert Solution

<html>
   <title> Image puzzle </title>
   <center><head> Welcome to image puzzle game </head></center>
   </br>
   </br>
   <script>
       function puzzle(){
           var check = document.getElementsByName('check');
           var i = 0,j = 0;
          
           for(i = 0;i < check.length; i++){
               if(check[i].checked)
                   j++;
           }
           if(j == 2 ){
               var index = new Array();
               var table_rows = new Array();
               for(i = 0;i < check.length; i++){
                   if(check[i].checked){
                      
                       if(i < 3){
                           var r = 0;
                           table_rows.push(r);
                           if(i == 0){
                               r = 0;
                               index.push(r);}
                           else if(i == 1){
                               r = 1;
                               index.push(r);}
                           else if(i == 2){
                               r = 2;
                               index.push(r);}

                       }
                       else if(i > 2 && i < 6){
                           var r = 1;
                           table_rows.push(r);
                           if(i == 3){
                               r = 0;
                               index.push(r);}
                           else if(i == 4){
                               r = 1;
                               index.push(r);}
                           else if(i == 5){
                               r = 2;
                               index.push(r);}

                       }
                       else if(i > 5 && i < 9){
                           var r = 2;      
                           table_rows.push(r);
                           if(i == 6){
                               r = 0;
                               index.push(r);}
                           else if(i == 7){
                               r = 1;
                               index.push(r);}
                           else if(i == 8){
                               r = 2;
                               index.push(r);}
                       }
                      
                   }
               }
               alert("Selected rows = "+table_rows +"\nindexes = "+index);
               var tab = document.getElementById('puzzle');
              
              
                   var temp = tab.rows[table_rows[0]].cells[index[0]].innerHTML;
                   tab.rows[table_rows[0]].cell[index[0]].innerHTML = tab.rows[table_rows[1]].cell[index[1]].innerHTML;
                   tab.rows[table_rows[1]].cell[index[1]].innerHTML = temp;
              
           }
           else if(j < 2){
               alert("Please select two images to swap");
           }
           else{
               alert("Please select two images only to swap");
           }
       }
   </script>
   <body>
       <table id="game" align = "center">
           <tr>
               <td>
                   <b style="color:blue">Original image</b>
                   <div id = "origianlimage" >
                       <img src = "/labrador.jpg" width = "250" height = "250"/>
                   </div>
               </td>
          
               <td>
                   <b style="color:green">Puzzled Image</b>
                   <div id = "puzzledimage">
                       <table id="puzzle">
                           <?php
                               $count = 0;
                               $numbers=range(1,9);
                           shuffle($numbers);
                          
                             
                               for($i = 0; $i < 3; $i++){
                           ?>
                                   <tr>
                           <?php
                                   for($j = 0; $j < 3; $j++){
                           ?>
                                       <td id = "<?php echo 'td'.($count+1); ?>">
                                           <input type = "checkbox" name = "check" id = "<?php echo 'ch'.($j);?>"/>
                                           <img
                                               id = "<?php echo 'img'.($count+1);?>"
                                               src = "<?php echo '/'.($numbers[$count]).'.jpg';?>" height="100" width="100" />
                                       </td>
                           <?php   
                                      
                                   $count++;
                                   }
                          
                           ?>
                                   </tr>
                           <?php
                               }
                           ?>
                          
                       </table>
                   </div>
               </td>
           </tr>
           <tr>
               <td></td>
               <td>
                   <input type = "submit" value = "Swap" id = "swap" name = "swap" onclick = "return puzzle();"/>
               </td>
           </tr>
       </table>
      
   </body>
  
  
</html>

venereology answered 1 day ago
Next > < Previous

Related Solutions

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button"> 2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">. Use CSS in embeded style to set <style type="text/css">     #sc{ border-style: dotted; /* Required to animate border width */ border-color: red; border-width: 0; } </style> 3. <script> - "Start", call "animate()" function to move it to right by 300px for each click, speed is 2000. left: "+=300px". Hint:...
Design and implement a JavaScript program to accomplish the following: 1. Iterate and accept N test...
Design and implement a JavaScript program to accomplish the following: 1. Iterate and accept N test scores and N student names (where 10 <= N <= 20). 2. Compute the sum and average of the scores (display these values). 3. Implement a function that determines the highest score (display this value). 4. Implement a function that determines the lowest score (display this value). 5. Implement a function that determines the letter grade of each score: 90-100 (A); 80 - 89...
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis...
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis plan (3) analyze sample data (4) interpret the results You may use the TI-83 to calculate the test statistic and p-value, but be sure you indicate which test you are using. Test III – Test a New Drug (Part 2) Suppose the Acme Drug Company develops a new drug, designed to prevent colds. The company states that the drug is more effective for women...
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis...
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis plan (3) analyze sample data (4) interpret the results You may use the TI-83 to calculate the test statistic and p-value, but be sure you indicate which test you are using. Test II – Test a New Drug Suppose the Acme Drug Company develops a new drug, designed to prevent colds. The company states that the drug is equally effective for men and women....
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis...
For each test below, follow the following steps. (1) state the hypotheses, (2) formulate an analysis plan (3) analyze sample data (4) interpret the results You may use the TI-83 to calculate the test statistic and p-value, but be sure you indicate which test you are using. Test III – Test a New Drug (Part 2) Suppose the Acme Drug Company develops a new drug, designed to prevent colds. The company states that the drug is more effective for women...
implement a Message Authentication Code program in either C/C++ or Python. See the following steps. 1....
implement a Message Authentication Code program in either C/C++ or Python. See the following steps. 1. Accept a message as keyboard input to your program. 2. Accept a secret key for the sender/recipient as keyboard input to your program. 3. Your hash function H() is simply the checksum. To compute the checksum, you add all the characters of the string in ASCII codes. For example, the checksum of a string "TAMUC" would be 84 + 65 + 77 + 85...
1. All of the following are steps in evaluating life insurance needs based on the expense...
1. All of the following are steps in evaluating life insurance needs based on the expense approach EXCEPT: a)a pay off amount of any debts b)estimating the economic value of home production done by the insured family member c)Social Security survivor's benefits d)the potential for their children or surviving spouse to pick up some of the "economic slack" by earning additional incomed) E)All of the above are included in the expense approach 2. Which of the following scenarios best shows...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT