API tools faq
paste
Advertisement
bartkoo

pentago

bartkoo
Dec 8th, 2021
796
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 19.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Pentago - web</title>
  8.     <style>
  9.         *{
  10.             transition-duration: .5s;
  11.             margin: 0;
  12.             padding: 0;
  13.             font-family: Arial, Helvetica, sans-serif;
  14.         }
  15.         .info_window{
  16.             width: 800px;
  17.             height: 600px;
  18.             margin-top: -1000px;
  19.             margin-left: 50%;
  20.             transform: translateX(-50%);
  21.             border: 2px solid black;
  22.             position: absolute;
  23.             z-index: 1;
  24.             background-color: white;
  25.         }
  26.         .close_button{
  27.             height: 40px;
  28.             width: 40px;
  29.             display: inline-block;
  30.         }
  31.         .close_button p, .info_button p{
  32.             line-height: 40px;
  33.             font-size: 28px;
  34.             text-align: center;
  35.         }
  36.         .close_button:hover, .info_button:hover{
  37.             color: gray;
  38.             cursor: pointer;
  39.         }
  40.         .info_button{
  41.             height: 40px;
  42.             width: 40px;
  43.         }
  44.         .info p{
  45.             padding: 20px;
  46.             font-size: 20px;
  47.         }
  48.         .main{
  49.             position: fixed;
  50.             top: 50%;
  51.             left: 50%;
  52.             transform: translate(-50%, -50%);
  53.             width: 340px;
  54.             height: 530px;
  55.             z-index: 0;
  56.         }
  57.         .grid_container{
  58.             display: grid;
  59.             grid-template-columns: 170px 170px;
  60.             grid-template-rows: 95px 170px 170px 95px;
  61.         }
  62.         .grid_container > div{
  63.             padding: 10px;
  64.         }
  65.         .grid_container .rotating_board_part{
  66.             display: grid;
  67.             grid-template-columns: 50px 50px 50px;
  68.             grid-template-rows: 50px 50px 50px;
  69.         }
  70.         .rotating_board_part > div{
  71.             box-sizing: border-box;
  72.             border: 1px solid black;
  73.             background-color: white;
  74.             cursor: pointer;
  75.         }
  76.         .motion_button{
  77.             width: 50px;
  78.             height: 50px;
  79.             background-color: aquamarine;
  80.             border: 1px solid aquamarine;
  81.             color: white;
  82.             box-sizing: border-box;
  83.             margin-left: 50%;
  84.             margin-top: 50%;
  85.             transform: translate(-50%, -50%);
  86.         }
  87.         .motion_button:hover{
  88.             background-color: white;
  89.             color: aquamarine;
  90.             cursor: pointer;
  91.         }
  92.         .motion_button > p{
  93.             line-height: 42px;
  94.             font-size: 30px;
  95.             margin-left: 45%;
  96.             transform: translateX(-50%);
  97.         }
  98.         .motion_controls{
  99.             grid-template-columns: 75px 75px;
  100.             display: grid;
  101.         }
  102.     </style>
  103. </head>
  104. <body>
  105.     <div class="info_button"><p>?</p></div>
  106.     <section class="info_window">
  107.         <div class="close_button"><p>&#x2716;</p></div>
  108.         <article class="info">
  109.             <p>Gra w Pentago.<br>Pentago jest grą dwuosobową na planszy. Plansza skłąda się z 4 ruchomych części, które można obracać. Każda część zawiera 9 miejsc na żetony.<br>Gracze po kolei oddają ruch składający się z 2 etapów:<br> - dołożenia swojego żetonu na nezajęte pole planszy;<br> - obrót jednej z części planszy o 90 stopni w dowolnym kierunku.<br>Nie można pominąć żadnego etapu ruchu w swojej kolejce.<br>Wygrywa osoba, której 5 żetonów po PEŁNYM RUCHU jest ułożonych w rzędzie/kolumnie/po skosach (podobnie do gry w kółko i krzyżyk).</p>
  110.         </article>
  111.     </section>
  112.     <section class="main">
  113.         <div class="grid_container">
  114.             <div class="motion_controls">
  115.                 <div class="motion_button"><p>&#8592;</p></div>
  116.                 <div class="motion_button"><p>&#8594;</p></div>
  117.             </div>
  118.             <div class="motion_controls">
  119.                 <div class="motion_button"><p>&#8592;</p></div>
  120.                 <div class="motion_button"><p>&#8594;</p></div>
  121.             </div>
  122.             <div class="rotating_board_part" style="transform: rotate(0deg);"></div>
  123.             <div class="rotating_board_part" style="transform: rotate(0deg);"></div>
  124.             <div class="rotating_board_part" style="transform: rotate(0deg);"></div>
  125.             <div class="rotating_board_part" style="transform: rotate(0deg);"></div>
  126.  
  127.             <div class="motion_controls">
  128.                 <div class="motion_button"><p>&#8592;</p></div>
  129.                 <div class="motion_button"><p>&#8594;</p></div>
  130.             </div>
  131.             <div class="motion_controls">
  132.                 <div class="motion_button"><p>&#8592;</p></div>
  133.                 <div class="motion_button"><p>&#8594;</p></div>
  134.             </div>
  135.         </div>
  136.     </section>
  137. </body>
  138. <script>
  139.  
  140.     /*
  141.     ------------------
  142.     DEFINITIONS
  143.     ------------------
  144.     */
  145.  
  146.     var COLOR_TO_BE = {color: 1};
  147.     var TURN_PAHSES = [false, false];
  148.     var COLORS = ["white", "blue", "red"];
  149.  
  150.     class Square{
  151.  
  152.         // 0 -> no color | 1 -> blue | 2 -> red
  153.         color = 0;
  154.  
  155.         gui_representation;
  156.  
  157.         constructor(gui_element){
  158.             this.gui_representation = gui_element;
  159.             this.color = {color: 0};
  160.  
  161.             let color = this.color
  162.            
  163.             this.gui_representation.addEventListener("click", function (evt){
  164.                 if(TURN_PAHSES[0] == false && color.color == 0){
  165.                     color.color = COLOR_TO_BE.color;
  166.                     evt.currentTarget.style.backgroundColor = COLORS[COLOR_TO_BE.color];
  167.                     TURN_PAHSES[0] = true;
  168.                     if(COLOR_TO_BE.color == 1) COLOR_TO_BE.color = 2;
  169.                     else COLOR_TO_BE.color = 1;
  170.                 }
  171.             });
  172.  
  173.             this.gui_representation.addEventListener("mouseenter", function(evt){
  174.                 if(TURN_PAHSES[0] == false && color.color == 0){
  175.                     evt.currentTarget.style.backgroundColor = COLORS[COLOR_TO_BE.color];
  176.                     evt.currentTarget.style.opacity = 0.5;
  177.                 }
  178.             });
  179.  
  180.             this.gui_representation.addEventListener("mouseleave", function(evt){  
  181.                 evt.currentTarget.style.backgroundColor = COLORS[parseInt(color.color)];
  182.                 evt.currentTarget.style.opacity = 1;
  183.             });
  184.         }
  185.     }
  186.  
  187.     class RBoard{
  188.         squares = [[0,0,0],[0,0,0],[0,0,0]];
  189.  
  190.         constructor(table){
  191.             if(table.length == 3 && table[0].length == 3){
  192.                 for(let i = 0; i < 3; i++){
  193.                     for(let ii = 0; ii < 3; ii++){
  194.                         this.squares[i][ii]  = table[i][ii];
  195.                     }
  196.                 }
  197.             }else{
  198.                 for(let i = 0; i < 3; i++){
  199.                     for(let ii = 0; ii < 3; ii++){
  200.                         this.squares[i][ii] = null;
  201.                     }
  202.                 }
  203.             }
  204.         }
  205.        
  206.         rotate_clockwise() {
  207.             let tmp_t = [[],[],[]];
  208.             for(let i = 0; i < 3; i++){
  209.                 for(let ii = 0; ii < 3; ii++){
  210.                     tmp_t[i][ii] = this.squares[i][ii];
  211.                 }
  212.             }
  213.             for(let i = 0; i < 3; i++){
  214.                 for(let ii = 0; ii < 3; ii++){
  215.                     this.squares[i][ii] = tmp_t[2-ii][i];
  216.                 }
  217.             }
  218.         }
  219.  
  220.         rotate_counterclockwise(){
  221.             let tmp_t = [[],[],[]];
  222.             for(let i = 0; i < 3; i++){
  223.                 for(let ii = 0; ii < 3; ii++){
  224.                     tmp_t[i][ii] = this.squares[i][ii];
  225.                 }
  226.             }
  227.             for(let i = 0; i < 3; i++){
  228.                 for(let ii = 0; ii < 3; ii++){
  229.                     this.squares[i][ii] = tmp_t[ii][2-i];
  230.                 }
  231.             }
  232.         }
  233.     }
  234.  
  235.     class MainBoard{
  236.         r_boards_t = [0,0,0,0];
  237.         squares_map = [[],[],[],[],[],[]];
  238.  
  239.         constructor(table){
  240.             if(table.length == 4){
  241.                 for(let i = 0; i < 4; i++){
  242.                     this.r_boards_t[i] = table[i];
  243.                 }
  244.             }else{
  245.                 for(let i = 0; i < 4; i++){
  246.                     this.r_boards_t[i] = null;
  247.                 }
  248.             }
  249.         }
  250.  
  251.         drawBoard(rbt_t){
  252.             for(let i = 0; i < 4; i++){
  253.                 for(let ii = 0; ii < 3; ii++){
  254.                     for(let iii = 0; iii < 3; iii++){
  255.                         rbt_t[i].appendChild(this.r_boards_t[i].squares[ii][iii].gui_representation);
  256.                     }
  257.                 }
  258.             }
  259.         }
  260.  
  261.         updateSquaresMap(){
  262.             for(let a = 0; a < 2; a++){
  263.                 for(let b = 0; b < 2; b++){
  264.                    
  265.                     for(let i = 0; i < 3; i++){
  266.                         for(let ii = 0; ii < 3; ii++){
  267.                             this.squares_map[i+a*3][ii+b*3] = this.r_boards_t[2*a + b].squares[i][ii];
  268.                         }
  269.                     }
  270.  
  271.                 }
  272.             }
  273.         }
  274.  
  275.         checkIfWinner(){
  276.  
  277.             let red = false;
  278.             let blue = false;
  279.  
  280.             // horizontal lines
  281.  
  282.             for(let i = 0; i < 6; i++){
  283.                 let red_count = 0;
  284.                 let blue_count = 0;
  285.                 for(let ii = 0; ii < 6; ii++){
  286.                     if(this.squares_map[i][ii].color.color == 1){
  287.                         blue_count++;
  288.                     }else if(this.squares_map[i][ii].color.color == 2){
  289.                         red_count++;
  290.                     }
  291.                 }
  292.                 if(blue_count >= 5 || red_count >= 5){
  293.                     let continuity = 1;
  294.                     for(let ii = 0; ii < 5; ii++){
  295.                         if(this.squares_map[i][ii].color.color == this.squares_map[i][ii+1].color.color){
  296.                             continuity++;
  297.                             if(continuity == 5){
  298.                                 if(blue_count >= 5){
  299.                                     blue = true;
  300.                                 }else{
  301.                                     red = true;
  302.                                 }
  303.                                 break;
  304.                             }
  305.                         }else{
  306.                             continuity = 1;
  307.                         }
  308.                     }
  309.                     console.log(blue);
  310.                 }
  311.             }
  312.  
  313.             // vertical lines
  314.  
  315.             for(let i = 0; i < 6; i++){
  316.                 let red_count = 0;
  317.                 let blue_count = 0;
  318.                 for(let ii = 0; ii < 6; ii++){
  319.                     if(this.squares_map[ii][i].color.color == 1){
  320.                         blue_count++;
  321.                     }else if(this.squares_map[ii][i].color.color == 2){
  322.                         red_count++;
  323.                     }
  324.                 }
  325.                 if(blue_count >= 5 || red_count >= 5){
  326.                     let continuity = 1;
  327.                     for(let ii = 0; ii < 5; ii++){
  328.                         if(this.squares_map[ii][i].color.color == this.squares_map[ii+1][i].color.color){
  329.                             continuity++;
  330.                             if(continuity == 5){
  331.                                 if(blue_count >= 5){
  332.                                     blue = true;
  333.                                 }else{
  334.                                     red = true;
  335.                                 }
  336.                                 break;
  337.                             }
  338.                         }else{
  339.                             continuity = 1;
  340.                         }
  341.                     }
  342.                 }
  343.             }
  344.  
  345.             // diagonals
  346.  
  347.             // two short diagonals x 2
  348.  
  349.             let blue_count_t = [0, 0, 0, 0];
  350.             let red_count_t = [0, 0, 0, 0];
  351.             for(let a = 0; a < 5; a++){
  352.                 // [1][0] -> [5][4]
  353.                 if(this.squares_map[1+a][0+a].color.color == 1){
  354.                     blue_count_t[0]++;
  355.                 }else if(this.squares_map[1+a][0+a].color.color == 2){
  356.                     red_count_t[0]++;
  357.                 }
  358.  
  359.                 // [0][1] -> [4][5]
  360.                 if(this.squares_map[0+a][1+a].color.color == 1){
  361.                     blue_count_t[1]++;
  362.                 }else if(this.squares_map[0+a][1+a].color.color == 2){
  363.                     red_count_t[1]++;
  364.                 }
  365.  
  366.                 // [0][4] -> [4][0]
  367.                 if(this.squares_map[0+a][4-a].color.color == 1){
  368.                     blue_count_t[2]++;
  369.                 }else if(this.squares_map[0+a][4-a].color.color == 2){
  370.                     red_count_t[2]++;
  371.                 }
  372.  
  373.                 // [1][5] -> [5][1]
  374.                 if(this.squares_map[1+a][5-a].color.color == 1){
  375.                     blue_count_t[3]++;
  376.                 }else if(this.squares_map[1+a][5-a].color.color == 2){
  377.                     red_count_t[3]++;
  378.                 }
  379.             }
  380.             if(blue_count_t.includes(5)){
  381.                 blue = true;
  382.             }
  383.             if(red_count_t.includes(5)){
  384.                 red = true;
  385.             }
  386.  
  387.             // one long diagonal x 2
  388.             blue_count_t = [0, 0];
  389.             red_count_t = [0, 0];
  390.             let continuity_t = [1, 1];
  391.             for(let a = 0; a < 6; a++){
  392.                 // [0][0] -> [5][5]
  393.                 if(this.squares_map[0+a][0+a].color.color == 1) blue_count_t[0]++;
  394.                 else if(this.squares_map[0+a][0+a].color.color == 2) red_count_t[0]++;
  395.                 // [0][5] -> [5][0]
  396.                 if(this.squares_map[0+a][5-a].color.color == 1) blue_count_t[1]++;
  397.                 else if(this.squares_map[0+a][5-a].color.color == 2) red_count_t[1]++;
  398.             }
  399.  
  400.             if(blue_count_t[0] >= 5 || red_count_t[0] >= 5){
  401.                 for(let a = 0; a < 5; a++){
  402.                     if(this.squares_map[0+a][0+a].color.color == this.squares_map[0+a+1][0+a+1].color.color){
  403.                         continuity_t[0]++;
  404.                         if(continuity_t[0] == 5){
  405.                             if(blue_count_t[0] >= 5){
  406.                                 blue = true;
  407.                             }else{
  408.                                 red = true;
  409.                             }
  410.                             break;
  411.                         }
  412.                     }else{
  413.                         continuity_t[0] = 1;
  414.                     }
  415.                 }
  416.                
  417.             }
  418.  
  419.             if(blue_count_t[1] >= 5 || red_count_t[1] >= 5){
  420.                 for(let a = 0; a < 5; a++){
  421.                     if(this.squares_map[0+a][5-a].color.color == this.squares_map[0+a+1][5-a-1].color.color){
  422.                         continuity_t[1]++;
  423.                         if(continuity_t[1] == 5){
  424.                             if(blue_count_t[1] >= 5){
  425.                                 blue = true;
  426.                             }else{
  427.                                 red = true;
  428.                             }
  429.                             break;
  430.                         }
  431.                     }else{
  432.                         continuity_t[1] = 1;
  433.                     }
  434.                 }
  435.             }
  436.  
  437.             let result = 0;
  438.             if(blue && red) result = 3;
  439.             else if(red) result = 2;
  440.             else if(blue) result = 1;
  441.             return result;
  442.         }
  443.     }
  444.  
  445.     function show_info_window(){
  446.         info_window.style.marginTop = "100px";
  447.     }
  448.  
  449.     function hide_info_window(){
  450.         info_window.style.marginTop = "-1000px";
  451.     }
  452.    
  453.     /*
  454.     ------------------------
  455.     SCRIPT -> PREPARATION
  456.     ------------------------
  457.     */
  458.  
  459.     let rbt_t = document.getElementsByClassName("rotating_board_part");
  460.     let info_button = document.getElementsByClassName("info_button")[0];
  461.     let close_button = document.getElementsByClassName("close_button")[0];
  462.     let info_window = document.getElementsByClassName("info_window")[0];
  463.     let motion_buttons = document.getElementsByClassName("motion_button");
  464.  
  465.     info_button.addEventListener("click", show_info_window);
  466.     close_button.addEventListener("click", hide_info_window);
  467.  
  468.     /* BOARD CREATION */
  469.  
  470.     let r_table = [0, 0, 0, 0];
  471.  
  472.     for(let i = 0; i < 4; i++){
  473.         let sq_table = [[[],[],[]], [[],[],[]], [[],[],[]], [[],[],[]]];
  474.        
  475.         for(let ii = 0; ii < 3; ii++){
  476.             for(let iii = 0; iii < 3; iii++){
  477.  
  478.                 let r = document.createAttribute("r");
  479.                 let x = document.createAttribute("x");
  480.                 let y = document.createAttribute("y");
  481.  
  482.                 r.value = i;
  483.                 x.value = ii;
  484.                 y.value = iii;
  485.                 // r and (x; y) -> r_table[r][x][y]
  486.  
  487.                 let gui_element = document.createElement("div");
  488.                 gui_element.attributes.setNamedItem(r);
  489.                 gui_element.attributes.setNamedItem(x);
  490.                 gui_element.attributes.setNamedItem(y);
  491.                
  492.                 // gui_element, color_to_be, turn_phases, colors
  493.                 sq_table[i][ii].push(new Square(gui_element, COLOR_TO_BE, TURN_PAHSES, COLORS));
  494.             }
  495.         }
  496.         r_table[i] = new RBoard(sq_table[i]);
  497.     }
  498.  
  499.     let main_board = new MainBoard(r_table);
  500.  
  501.     /* BOARD ON SCREEN */
  502.  
  503.     main_board.drawBoard(rbt_t);
  504.  
  505.     /* BUTTONS FUNCTIONALITY */
  506.  
  507.     for(let i = 0; i < 8; i++){
  508.         motion_buttons[i].addEventListener("click", function(){
  509.  
  510.             // style placed in HTML elements
  511.             if(TURN_PAHSES[0] == true && TURN_PAHSES[1] == false){
  512.                 let element = rbt_t[Math.floor(i/2)];
  513.                 let rotation = element.style.transform;
  514.                 let in_value = (rotation.split('(')[1]).split('d')[0];
  515.                 let out_value = (i % 2 == 0) ? (parseInt(in_value, 10) - 90) : (parseInt(in_value, 10) + 90);
  516.                 element.style = "transform: rotate(" + out_value + "deg);";
  517.  
  518.                 // rotation of internal arrays
  519.  
  520.                 if(i % 2 == 0){
  521.                     main_board.r_boards_t[Math.floor(i/2)].rotate_counterclockwise();
  522.                 }else{
  523.                     main_board.r_boards_t[Math.floor(i/2)].rotate_clockwise();
  524.                 }
  525.  
  526.                 TURN_PAHSES[1] = true;
  527.             }      
  528.         });
  529.     }
  530.  
  531.     /*
  532.     ------------------------
  533.     SCRIPT -> GAMEPLAY
  534.     ------------------------
  535.     */
  536.  
  537.     // blue starts
  538.  
  539.     var game = window.setInterval(function(){
  540.         if(TURN_PAHSES[0] == true && TURN_PAHSES[1] == true){
  541.             main_board.updateSquaresMap();
  542.             let result = main_board.checkIfWinner();
  543.             if(result == 1){
  544.                 alert("BLUE WINS!");
  545.                 clearInterval(game);
  546.             }else if(result == 2){
  547.                 alert("RED WINS!");
  548.                 clearInterval(game);
  549.             }else if(result == 3){
  550.                 alert("IT IS A TIE!");
  551.                 clearInterval(game);
  552.             }else{
  553.                 TURN_PAHSES = [false, false];
  554.             }
  555.         }
  556.     },100);
  557.  
  558. </script>
  559. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!