Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/index.html

Last active May 24, 2017 04:07
Show Gist options
  • Save alexpelan/ba7627c7b2180e1f2e1f854dfebf2faa to your computer and use it in GitHub Desktop.
Save alexpelan/ba7627c7b2180e1f2e1f854dfebf2faa to your computer and use it in GitHub Desktop.
Download ZIP
Working version. Exported from Popcode. Click to import: https://popcode.org/?gist=ba7627c7b2180e1f2e1f854dfebf2faa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hi I'm a Game!</H1>
<p></p>
<div id="gameboard"></div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","editor.html"]}
Raw
script.js
var turn = "CARDONE";
var cardOne = "";
var cardTwo = "";
$("p").html(turn);
/*
TEAM ONE, DAY ONE:
1. In the HTML: Give your game a header with a name, and then create a div with id "gameboard"
2. In the Javascript: Create a for loop that appends 20 card images to the div. Set every images id to it's position on the board (image 0 has id=0, image 1 has id=1 etc). Set every image's class to "unmatched". Use this url for the image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
3. In the CSS: Set the width of your images so there are only 5 per row
*/
for(var i=0; i<20;i++){
$("#gameboard").append("<img id='"+i+"' class='unflip' src='https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png'>");
}
/*
TEAM TWO, DAY ONE:
1. In the Javascript: Create an array of 20 card image urls as strings. Each card image url should be repeated once (so it has a pair). Look here for card image urls: https://docs.google.com/document/d/19Ebl3siS53v2uCyl21WlQgpSfm9_PLFmNJ7-qm5UlAE/edit
2. In the Javascript: Create a new function called flipCard. Flip card should take one parameter called "cardIndex".
3. In flipCard, use jquery to get the image with the id "cardIndex". Change the src attribute to the string at an index of cardIndex in the array you created.
4. Test your flipCard function by calling flipCard(5);
*/
var cardArray = ["https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_diamonds.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_hearts.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_spades.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_diamonds.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_hearts.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_spades.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/4_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/4_of_diamonds.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_diamonds.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_hearts.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/2_of_spades.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_diamonds.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_hearts.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/3_of_spades.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/4_of_clubs.png","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/4_of_diamonds.png"
];
function flipCard(cardIndex){
$("#"+cardIndex).attr("src",cardArray[cardIndex]);
}
//flipCard(6);
/* DAY TWO, TEAM ONE:
1. In Javascript: Write a click handler that applies to all images
2. In that click handler, get the id of the image that was clicked and store it in a variable (hint: you'll need to use the keyword "this")
3. In the clickhandler, call the function flipCard, and give your variable as the argument.
TEST: If it works, every time you click a card, it should flip and show the other side.
*/
$("img").click(function(){
var index= $(this).attr("id");
updateState(index);
});
/* DAY TWO, TEAM TWO:
1. Create a variable called state. Set state equal to "TURNONE"
2. Create a function called updateState. It should have one parameter, cardIndex
3. In your function, if state is equal to "TURNONE", flip the card at cardIndex (by calling flipCard), and update state to "TURNTWO"
4. In your function, if state is equal to "TURNTWO", flip the card at cardIndex, and update state to "CHECKINGCARDS"
5. Test your function by calling it with updateState(0),updateState(1), updateState(2). If you did it right, the first two cards should flip, but the third should not.
6. When both team's are done, update team one's code to call updateState instead of flipCard
*/
function updateState(index){
if(turn === "CARDONE"){
cardOne = index;
flipCard(index);
turn = "CARDTWO";
$("p").html(turn);
} else if (turn === "CARDTWO"){
cardTwo = index;
flipCard(index);
turn = "CHECKING";
$("p").html(turn);
setTimeout(function(){
checkCards(cardOne,cardTwo);
turn="CARDONE";
$("p").html(turn);
},1000);
}
}
/* DAY THREE, BOTH TEAMS:
1. Create two variables called cardOne and cardTwo. Set them to blank strings.
2. In your updateState function, on TURNONE, set the cardOne variable equal to the current card index.
2. In your updateState function, on TURNTWO, set the cardTwo variable equal to the current card index.
3. Create a function called checkCards.
4. In your checkCards function, if the src URL of the image at cardOne equals the src URL of the image at cardTwo, set the class of the two images to "matched"
5. In your checkCards function, set the src of every image on the board with the class "unmatched", to the original card image: https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png
6. In your updateState function, if it's TURNTWO, call the the checkCards function and then set turn back to CARDONE.
*/
function checkCards(a,b){
var one = $("#"+a).attr("src");
var two = $("#"+b).attr("src");
if(one === two){
$("#"+a).attr("class","flip");
$("#"+b).attr("class","flip");
}
$(".unflip").attr("src","https://dl.dropboxusercontent.com/u/88121919/ScriptEd/cards/back.png");
}
Raw
styles.css
img{
width: 20%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment