A Pen by Michał Kardyś on CodePen.
Created
December 5, 2015 13:54
-
-
Save kardysm/9ca6fe1492cfc4993ffc to your computer and use it in GitHub Desktop.
RrwMeq
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
<div id="game"> | |
<div id="menu"> | |
<label id="player1"> | |
Player 1: | |
<div> | |
name: | |
<input id="p1Name" type="text"/> | |
</div> | |
<div id="player1Score">score: <span class="score">0</span></div> | |
</label> | |
<label id="player2"> | |
Player 2: | |
<div>name: | |
<input id="p2Name" type="text" /></div> | |
<div id="player2Score">score: <span class="score">0</span></div> | |
</label> | |
<label id="cols"> | |
Columns: | |
<input id="colsNum" type="number" min="7" max="100" value="7"/> | |
</label> | |
<label id="rows"> | |
Rows: | |
<input id="rowsNum" type="number" min="6" max="100" value="6"/> | |
</label> | |
<input type="submit" id="start" value="New game"/> | |
</div> | |
<div id="board"> | |
</div> | |
</div> |
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() { | |
game.create(); | |
$('#start').click(function(e) { | |
e.preventDefault(); | |
game.start(); | |
}) | |
}) | |
var game = {} | |
game.create = function() { | |
this.canvas = $('#game'); | |
this.board = $('#board'); | |
this.column = '<div class="column"></div>'; | |
this.cell = '<div class="cell"></div>'; | |
} | |
game.start = function() { | |
this.board.empty(); | |
$('#game').off('click', '.column'); | |
this.colNumber = $('#colsNum').val(); | |
this.rowNumber = $('#rowsNum').val(); | |
this.colNumber = this.colNumber < 7 ? 7 : this.colNumber; | |
this.rowNumber = this.rowNumber < 6 ? 6 : this.rowNumber; | |
for (i = 0; i < this.colNumber; i++) { | |
this.board.append(this.column); | |
var addedColumn = this.board.find('.column:eq(' + i + ')'); | |
for (j = 0; j < this.rowNumber; j++) { | |
addedColumn.append(this.cell); | |
} | |
} | |
var column_width = this.board.find('.column').first().width() | |
this.board.width(column_width * this.colNumber); | |
this.player = [{}, {}]; | |
this.player[0].name = $('#p1Name').val().length ? $('#p1Name').val() : "Gracz 1"; | |
this.player[1].name = $('#p2Name').val().length ? $('#p2Name').val() : "Gracz 2"; | |
this.player[0].score = this.player[1].score = 0; | |
this.activePlayer = Math.random() > 0.5 ? 1 : 2; | |
this.board.find('.cell').removeClass('.player-*'); | |
$('#game').on('click', '.column', function() { | |
game.move($(this)); | |
}) | |
} | |
game.move = function(column) { | |
var cellToFill = column.find('.cell:not(div[class^="player-"], div[class*=" player-"])').last(); | |
if (cellToFill.length > 0) { | |
cellToFill.addClass('player-' + this.activePlayer); | |
game.checkEnd(column.index(), cellToFill.index(), this.activePlayer) | |
this.activePlayer = (this.activePlayer === 1) ? 2 : 1; | |
} | |
} | |
game.checkEnd = function(i, j, player) { | |
var looper = function(i, j, player, i_iterator, j_iterator) { | |
var streak = 0; | |
m = i; | |
n = j; | |
while (m >= 0 && m < game.colNumber && m < i + 7 && m > i - 7 && | |
n >= 0 && n < game.rowNumber && n < j + 7 && n > i - 7) { | |
var currentElement = game.board.find('.column').eq(m).find('.cell').eq(n); | |
if (currentElement.length > 0 && currentElement.hasClass('player-' + player)) { | |
streak++; | |
} else { | |
streak = 0; | |
} | |
if (streak == 4) { | |
game.end(); | |
return true; | |
} | |
m = i_iterator(m); | |
n = j_iterator(n); | |
} | |
} | |
var i_horizontal = i - 3; | |
i_horizontal = i_horizontal >= 0 ? i_horizontal : 0; | |
looper(i_horizontal, j, player, function(i) { | |
return i + 1; | |
}, function(j) { | |
return j; | |
}); //horizontal | |
var j_vertical = j - 3; | |
j_vertical = j_vertical >= 0 ? j_vertical : 0; | |
looper(i, j_vertical, player, function(i) { | |
return i; | |
}, function(j) { | |
return j + 1; | |
}); // vertical | |
var i_diagonal1 = i - 3; | |
i_diagonal1 = i_diagonal1 >= 0 ? i_diagonal1 : 0; | |
var i_diff = i - i_diagonal1; | |
var j_diagonal1 = j - i_diff; | |
if (j_diagonal1 < 0) { | |
j_diagonal1 = 0; | |
var j_diff = j - j_diagonal1; | |
i_diagonal1 = i - j_diff; | |
} | |
looper(i_diagonal1, j_diagonal1, player, function(i) { | |
return i + 1; | |
}, function(j) { | |
return j + 1; | |
}); // diagonal1 | |
var i_diagonal2 = i - 3; | |
i_diagonal2 = i_diagonal2 >= 0 ? i_diagonal2 : 0; | |
//calculate how far cursor was moved to move the second dimension at same length | |
var i_diff2 = i - i_diagonal2; | |
var j_diagonal2 = j + i_diff2; | |
if (j_diagonal2 < 0) { | |
j_diagonal2 = 0; | |
//if second dimension's pointer is moved to far recalculate | |
var j_diff2 = j_diagonal2 - j; | |
i_diagonal2 = i - j_diff2; | |
} | |
looper(i_diagonal2, j_diagonal2, player, function(i) { | |
return i + 1; | |
}, function(j) { | |
return j - 1; | |
}); // diagonal2 | |
} | |
game.end = function() { | |
$('#board').find('.cell').removeClass('player-1').removeClass('player-2'); | |
this.player[this.activePlayer - 1].score++; | |
$('#player1Score .score').text(this.player[0].score); | |
$('#player1Score .score').text(this.player[1].score); | |
alert("Player " + this.player[this.activePlayer - 1].name + " scores!"); | |
} |
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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.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
$board-color: #FF9457 | |
$board-hover: #FF5C00 | |
$cell-color: #FFF7F3 | |
$player-1: #C1FC57 | |
$player-2: #6979F4 | |
* | |
font-family: sans-serif | |
#board | |
margin: 2em | |
float: left | |
.column | |
background-color: $board-color | |
float: left | |
display:inline-block | |
.cell | |
width: 1em | |
height: 1em | |
margin: 0.5em | |
background-color: $cell-color | |
border-radius: 50% | |
transition: background-color 0.3s | |
&.player-1 | |
background-color: $player-1 | |
&.player-2 | |
background-color: $player-2 | |
&:hover | |
background-color: $board-hover | |
outline: 3px solid #FFBE9A | |
position: relative | |
z-index: 1 | |
#menu | |
background-color: #FFBE9A | |
float: left | |
width: 15em | |
padding: 1em | |
border-radius: 5px | |
label | |
display: block | |
padding: .5em 1em | |
&#player1 | |
background-color: $player-1 | |
input | |
background-color: $player-1 | |
&#player2 | |
background-color: $player-2 | |
input | |
background-color: $player-2 | |
input | |
float: right | |
.score | |
float: right | |
#start | |
border-radius: 5px | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment