A Pen by VenomSnake on CodePen.
Created
December 29, 2017 10:12
-
-
Save HuangStanley050/d89d26089f47406a1e63ff7f2cf1ab33 to your computer and use it in GitHub Desktop.
Match Game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Title Goes Here</title> | |
| <link href="./resources/something.css" type="text/css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <h1>Match Game</h1> | |
| <h3>Rules</h3> | |
| <p> | |
| Click on a card to reveal the number on the other side. Click on a second card to try and find a match to the first. If you succeed, the pair will be removed from play. If not, try again! | |
| </p> | |
| <h3>How to Win</h3> | |
| <p> | |
| You win when all pairs have been found. | |
| </p> | |
| </div> | |
| <div class="col-sm-8"> | |
| <div class="row"> | |
| <div class="col-sm-3"> | |
| <div class="card" id="card1"> | |
| </div> | |
| <div class="card" id="card2"> | |
| </div> | |
| <div class="card" id="card3"> | |
| </div> | |
| <div class="card" id="card4"> | |
| </div> | |
| </div> | |
| <div class="col-sm-3"> | |
| <div class="card" id="card5"> | |
| </div> | |
| <div class="card" id="card6"> | |
| </div> | |
| <div class="card" id="card7"> | |
| </div> | |
| <div class="card" id="card8"> | |
| </div> | |
| </div> | |
| <div class="col-sm-3"> | |
| <div class="card" id="card9"> | |
| </div> | |
| <div class="card" id="card10"> | |
| </div> | |
| <div class="card" id="card11"> | |
| </div> | |
| <div class="card" id="card12"> | |
| </div> | |
| </div> | |
| <div class="col-sm-3"> | |
| <div class="card" id="card13"> | |
| </div> | |
| <div class="card" id="card14"> | |
| </div> | |
| <div class="card" id="card15"> | |
| </div> | |
| <div class="card" id="card16"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var card_position = []; | |
| var card_position2 = []; | |
| var final_pos = []; | |
| var cards_flipped=[]; | |
| var number; | |
| var pre_click; | |
| var current_click; | |
| var pre_id; | |
| var cur_id; | |
| var clicks = 0; | |
| var match_count = 0; | |
| for (var i = 0; i < 8; i++) { | |
| //fill in the first half of the card positions | |
| number = Math.floor(Math.random() * 8) + 1; | |
| if (card_position.indexOf(number) == -1) { | |
| card_position[i] = number; | |
| } else { | |
| i--; | |
| } | |
| } | |
| for (i = 0; i < 8; i++) { | |
| //fill in the 2nd half of the card positions | |
| number = Math.floor(Math.random() * 8) + 1; | |
| if (card_position2.indexOf(number) == -1) { | |
| card_position2[i] = number; | |
| } else { | |
| i--; | |
| } | |
| } | |
| final_pos = card_position.concat(card_position2); | |
| //console.log(final_pos); | |
| //assign card position to dom element | |
| $("#card1").val(final_pos[0]); | |
| $("#card2").val(final_pos[1]); | |
| $("#card3").val(final_pos[2]); | |
| $("#card4").val(final_pos[3]); | |
| $("#card5").val(final_pos[4]); | |
| $("#card6").val(final_pos[5]); | |
| $("#card7").val(final_pos[6]); | |
| $("#card8").val(final_pos[7]); | |
| $("#card9").val(final_pos[8]); | |
| $("#card10").val(final_pos[9]); | |
| $("#card11").val(final_pos[10]); | |
| $("#card12").val(final_pos[11]); | |
| $("#card13").val(final_pos[12]); | |
| $("#card14").val(final_pos[13]); | |
| $("#card15").val(final_pos[14]); | |
| $("#card16").val(final_pos[15]); | |
| //$(".card").click(function(event) { | |
| // alert($(this).val()); | |
| $(".card").on("click", function() { | |
| if (clicks == 0) { | |
| //$(this).css("background-color", "red");ge | |
| console.log(cur_id); | |
| pre_id = $(this).attr("id"); | |
| // cards_flipped.push(pre_id); | |
| pre_click = $(this).val(); | |
| //alert(pre_click); | |
| change_color(pre_click, pre_id); | |
| //console.log(pre_id); | |
| //console.log(pre_click); | |
| clicks++; | |
| console.log(cards_flipped); | |
| } else if (clicks == 1) { | |
| //$(this).css("background-color", "red"); | |
| //$(this).on("click"); | |
| //$("#"+pre_id).on("click"); | |
| cur_id = $(this).attr("id"); | |
| //cards_flipped.push(cur_id); | |
| current_click = $(this).val(); | |
| console.log(cards_flipped); | |
| //$("#"+cur_id).on("click"); | |
| if(cur_id==pre_id){ | |
| alert("clicked on the same button"); | |
| //$("#"+cur_id).off(); | |
| } | |
| else{ | |
| change_color(current_click, cur_id); | |
| } | |
| //alert(current_click); | |
| //console.log(current_click); | |
| if (pre_click === current_click && pre_id != cur_id) { | |
| //alert("Match"); | |
| match_count++; | |
| //console.log(match_count); | |
| $("#" + pre_id).css("background-color", "rgb(153,153,153)"); | |
| $("#" + cur_id).css("background-color", "rgb(153,153,153)"); | |
| $("#" + pre_id).off(); | |
| $("#" + cur_id).off(); | |
| win_condition(match_count); | |
| } else { | |
| /*$("#" + pre_id).css("background-color", "rgb(32,64,86)"); | |
| $("#" + cur_id).css("background-color", "rgb(32,64,86)");*/ | |
| //after wrong selection, color changes back in 1.5 sec | |
| //$("#"+pre_id).on("click"); | |
| setTimeout(function() { | |
| $("#" + pre_id).css("background-color", "rgb(32,64,86)"); | |
| $("#" + pre_id).empty(); | |
| $("#" + cur_id).css("background-color", "rgb(32,64,86)"); | |
| $("#" + cur_id).empty(); | |
| }, 300); | |
| } | |
| clicks = 0; | |
| console.log(clicks); | |
| }//click ==1 if statement end | |
| }); //click function end | |
| }); //document onload function end | |
| function win_condition(count) { | |
| if (count == 8) { | |
| alert("You win!"); | |
| } | |
| } | |
| function change_color(card, ID) { | |
| //$("#"+ID).css("background-color", "red"); | |
| if (card == 1) { | |
| $("#" + ID).css("background-color", "hsl(25,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>1</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 2) { | |
| $("#" + ID).css("background-color", "hsl(55,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>2</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 3) { | |
| $("#" + ID).css("background-color", "hsl(90,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>3</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 4) { | |
| $("#" + ID).css("background-color", "hsl(160,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>4</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 5) { | |
| $("#" + ID).css("background-color", "hsl(220,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>5</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 6) { | |
| $("#" + ID).css("background-color", "hsl(265,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>6</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 7) { | |
| $("#" + ID).css("background-color", "hsl(310,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>7</h4>") | |
| .addClass("number"); | |
| } | |
| if (card == 8) { | |
| $("#" + ID).css("background-color", "hsl(360,85%,65%)"); | |
| $("#" + ID) | |
| .append("<h4>8</h4>") | |
| .addClass("number"); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-size: 14px; | |
| font-family: "Work Sans", sans-serif; | |
| } | |
| .container-fluid{ | |
| background-color: rgb(255,242,242); | |
| /*height: 800px;*/ | |
| margin-top: 5.25rem; | |
| } | |
| .row{ | |
| /*background-color: blue;*/ | |
| height: 700px; | |
| } | |
| .col-sm-4{ | |
| /*background-color: orange;*/ | |
| heigth: 400px; | |
| } | |
| .col-sm-8{ | |
| /*background-color: pink;*/ | |
| } | |
| h1{ | |
| font-weight: bold; | |
| font-size: 2.5rem; | |
| color: rgb(32,64,86); | |
| } | |
| h3 { | |
| font-weight: bold; | |
| font-size: 1rem; | |
| color: rgb(32,64,86); | |
| } | |
| p{ | |
| rgb(74,74,74); | |
| } | |
| .col-sm-3{ | |
| /* background-color: orange;*/ | |
| height: 100%; | |
| } | |
| .card { | |
| background-color: rgb(32,64,86); | |
| height: 22%; | |
| width: 100%; | |
| margin-top: 4px; | |
| border: 4px solid #ffffff; | |
| border-radius: 8px; | |
| } | |
| .number h4{ | |
| font-weight: 900; | |
| font-size: 7rem; | |
| color: rgb(255,255,255); | |
| /*margin-left: 20px;*/ | |
| display:flex; | |
| align-content: center; | |
| justify-content: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment