Skip to content
This repository was archived by the owner on Mar 16, 2025. It is now read-only.

create board #49

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

create board #49

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4484f3b
create board
clenclen Feb 25, 2016
c471388
added shuffle function
clenclen Mar 2, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,153 @@
<html>
<head>
<title>Memory exercise</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<style>
.memoryboard {
background-color: #CCC;

}

.memoryboard > div {
width: 71px;
height: 71px;
}

.flipped {
background-color: white !important;
}

.tile {
display: inline-block;
background-color: black;
margin: 10px;
}
</style>

</head>
<body>
<h1>memory</h1>
<div class = "memoryboard">
</div>
<div class = "msg"> pick a card</div>

<script>
var Tile = function(text) {
this.text = text
this.div = $("<div class=\"tile\"><span>" + this.text +"</span></div>");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: As a convention, name variables/properties that correspond to jQuery objects should be prefixed with $.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, it would be $this.text = text ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this.$div = ....

console.log("text", this.text)
$(".memoryboard").append(this.div)

var self = this
this.div.click(function(){
self.handleClick();
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, you could also write this as this.div.click(this.handleClick.bind(this)).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I sort of remember talking about this in class. I also just watched a tutorial about factory functions and how to avoid using "this", so trying to process that too, hehe.

}

Tile.prototype.handleClick = function() {
this.flip();
scoreBoard.push(this)
console.log("scoreBoard:", scoreBoard)

if (scoreBoard.length < 2) {
console.log("waiting for other click")
return;
}

var tile1 = scoreBoard[0];
var tile2 = scoreBoard[1];

if (tile1.matches(tile2)) {
console.log("matches")
setTimeout(function() {
tile1.div.css("visibility", "hidden")
tile2.div.css("visibility", "hidden")

}, 1000);
msg("matched")
} else {
console.log("nah")
setTimeout(function() {
tile1.unflip()
tile2.unflip()
}, 1000);
msg("try again")
}
scoreBoard = [];
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How could you break up this method?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should i move the two setTimeout functions into their own prototypes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, the bodies of if/elses are a good place to start.


Tile.prototype.flip = function() {
console.log("flipped");
this.div.addClass("flipped");
}

Tile.prototype.unflip = function() {
this.div.removeClass("flipped");
}

Tile.prototype.matches = function(otherTile) {
console.log("this.text:" + this.text);
console.log("othertile:" + otherTile.text);
if (this.text == otherTile.text) {
console.log("return true");
return true;
} else {
console.log("return false");
return false;
}
}

function shuffle(array) {
var counter = array.length;

// While there are elements in the array
while (counter > 0) {
// Pick a random index
var index = Math.floor(Math.random() * counter);

// Decrease counter by 1
counter--;

// And swap the last element with it
var temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}

return array;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you write this from scratch? If not, please cite your source!

http://advanced-js.github.io/syllabus/#instructor

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got this from stackoverflow :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for being honest.


function removeAndPrintElements(array) {
while (array.length > 0) {
var firstElem = array.splice(0, 1);
var tile = new Tile(firstElem[0]);
}
}

var msg = function(msg) {
$(".msg").text(msg)
}

//global variables

scoreBoard = []

$(document).ready(function(){

var array = ["A","A","B","B","C","C"];
var arraylength = array.length

var text = shuffle(array)

removeAndPrintElements(text)
});


// prevent it from clicking itself
// take away global variables
// shhoudl the code go into the "matches" method or the "handleClick" method?

</script>
</body>
</html>