Przydzielanie żetonu wielbłąda, wizerunek maharaja, pokazywanie punktów dopiero po przyznaniu wielbłada. Wydzielenie styli do osobnego pliku. Dodanie kodu gry w pliki html bez pliku php.
This commit is contained in:
kplaczek
415
index.html
Normal file
415
index.html
Normal file
@@ -0,0 +1,415 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl-PL">
|
||||
<head>
|
||||
<title>Jaipur score</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script>
|
||||
|
||||
function coin(value, group) {
|
||||
this.value = value;
|
||||
this.group = group;
|
||||
}
|
||||
|
||||
function player(name, id) {
|
||||
this.score = 0;
|
||||
this.roundsWon = 0;
|
||||
this.coins = [];
|
||||
this.bonus = [];
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.selector = '.players .player.player' + id;
|
||||
|
||||
this.hasCamelCoin = true;
|
||||
|
||||
this.calculateScore = function () {
|
||||
var score = 0;
|
||||
for (var i in this.coins) {
|
||||
score += this.coins[i];
|
||||
}
|
||||
for (var i in this.bonus) {
|
||||
score += this.bonus[i];
|
||||
}
|
||||
|
||||
if (this.hasCamelCoin) {
|
||||
score += 5;
|
||||
}
|
||||
return this.score = score;
|
||||
};
|
||||
|
||||
this.wonRound = function () {
|
||||
this.roundsWon += 1;
|
||||
};
|
||||
|
||||
this.reset = function () {
|
||||
this.roundsWon = 0;
|
||||
this.score = 0;
|
||||
this.coins = [];
|
||||
};
|
||||
|
||||
this.removePoints = function () {
|
||||
var playerScore = document.querySelectorAll(this.selector + ' .score');
|
||||
for (var i = 0; i < playerScore.length; i++) {
|
||||
playerScore[i].remove();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.drawPoints = function () {
|
||||
this.removePoints();
|
||||
var scoreDiv = document.querySelector(this.selector);
|
||||
for (var i = 0; i < this.score; i++) {
|
||||
var score = document.createElement("span");
|
||||
score.classList.add('score');
|
||||
scoreDiv.appendChild(score)
|
||||
}
|
||||
};
|
||||
|
||||
this.addPoint = function () {
|
||||
this.score++;
|
||||
this.drawPoints();
|
||||
}
|
||||
}
|
||||
|
||||
function game(player1, player2, board) {
|
||||
this.round = 1;
|
||||
this.player1 = player1;
|
||||
this.player2 = player2;
|
||||
this.activePlayer = null;
|
||||
this.board = board;
|
||||
this.isOver = false;
|
||||
this.selectedCointType = false;
|
||||
|
||||
this.setActivePlayer = function (playerId) {
|
||||
if (playerId == 1) {
|
||||
jaipur.activePlayer = this.player1;
|
||||
document.querySelector('.players .player.player1').classList.add("selected");
|
||||
document.querySelector('.players .player.player2').classList.remove("selected");
|
||||
jaipur.showAcceptButton();
|
||||
} else if (playerId == 2) {
|
||||
jaipur.activePlayer = this.player2;
|
||||
|
||||
document.querySelector('.players .player.player1').classList.remove("selected");
|
||||
document.querySelector('.players .player.player2').classList.add("selected");
|
||||
jaipur.showAcceptButton();
|
||||
} else {
|
||||
document.querySelector('.players .player.player1').classList.remove("selected");
|
||||
document.querySelector('.players .player.player2').classList.remove("selected");
|
||||
jaipur.activePlayer = false;
|
||||
|
||||
}
|
||||
|
||||
return this.activePlayer;
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
this.initializePlayerButtons();
|
||||
this.initializeAcceptButton();
|
||||
this.initializeCoins();
|
||||
this.initializeCamels();
|
||||
};
|
||||
|
||||
this.reset = function () {
|
||||
this.player1.reset();
|
||||
this.player2.reset();
|
||||
this.isOver = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* sprawdza czy runda jest już zakończona (jest 3 lub mniej typów dóbr)
|
||||
* @returns {boolean}
|
||||
*/
|
||||
this.isRoundOver = function () {
|
||||
var emptyRows = 0;
|
||||
for (var i in board.goods) {
|
||||
emptyRows += !board.goods[i].length ? 1 : 0;
|
||||
|
||||
console.info(board.goods[i]);
|
||||
}
|
||||
return emptyRows >= 3;
|
||||
};
|
||||
|
||||
this.initializePlayerButtons = function () {
|
||||
document.querySelector('.players .player.player1').addEventListener('click', function () {
|
||||
jaipur.setActivePlayer(1)
|
||||
});
|
||||
document.querySelector('.players .player.player2').addEventListener('click', function () {
|
||||
jaipur.setActivePlayer(2)
|
||||
});
|
||||
};
|
||||
|
||||
this.showAcceptButton = function () {
|
||||
if (!!jaipur.activePlayer && !!document.querySelector('.coin.selected')) {
|
||||
document.querySelector('.players .accept').style.visibility = 'visible';
|
||||
}
|
||||
};
|
||||
|
||||
this.hideAcceptButton = function () {
|
||||
document.querySelector('.players .accept').style.visibility = 'hidden';
|
||||
};
|
||||
|
||||
this.camelClick = function (player) {
|
||||
document.querySelector('.nobody').classList.remove('selected');
|
||||
document.querySelector('.player1_camel').classList.remove('selected');
|
||||
document.querySelector('.player2_camel').classList.remove('selected');
|
||||
|
||||
if (player == 1) {
|
||||
document.querySelector('.player1_camel').classList.add('selected');
|
||||
jaipur.player1.hasCamelCoin = true;
|
||||
jaipur.player2.hasCamelCoin = false;
|
||||
} else if (player == 2) {
|
||||
document.querySelector('.player2_camel').classList.add('selected');
|
||||
jaipur.player1.hasCamelCoin = false;
|
||||
jaipur.player2.hasCamelCoin = true;
|
||||
} else if (player == 0) {
|
||||
document.querySelector('.nobody').classList.add('selected');
|
||||
jaipur.player1.hasCamelCoin = false;
|
||||
jaipur.player2.hasCamelCoin = false;
|
||||
|
||||
}
|
||||
jaipur.player1.calculateScore();
|
||||
jaipur.player2.calculateScore();
|
||||
jaipur.showScore();
|
||||
};
|
||||
|
||||
this.coinClick = function () {
|
||||
|
||||
if (!jaipur.selectedCointType) {
|
||||
jaipur.selectedCointType = this.dataset.group;
|
||||
}
|
||||
|
||||
if (jaipur.selectedCointType == this.dataset.group) {
|
||||
|
||||
//ustawienie active inactive na wszystkich grupach
|
||||
var groups = document.querySelectorAll('.group');
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
groups[i].classList.add('inactive');
|
||||
}
|
||||
|
||||
//usuniecie inactive na tej jednej klikniętej grupie
|
||||
this.selectedCointType = this.dataset.group;
|
||||
document.querySelector('.group.' + this.dataset.group).classList.remove('inactive');
|
||||
|
||||
if (this.classList.contains('selected')) {
|
||||
//wyłaczenie selected na ostatniej wybranym żetonie
|
||||
document.querySelector('.coin.selected.' + this.dataset.group).classList.remove('selected');
|
||||
|
||||
//usunięcie blokady wybranego typu żetonu
|
||||
if (document.querySelectorAll('.coin.selected.' + this.dataset.group).length == 0) {
|
||||
jaipur.selectedCointType = false;
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
groups[i].classList.remove('inactive');
|
||||
}
|
||||
jaipur.hideAcceptButton();
|
||||
}
|
||||
} else {
|
||||
//ustawienie selected na elemencie z kliniętej grupy
|
||||
var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)');
|
||||
[].slice.call(coinsFromRow).pop().classList.add('selected');
|
||||
jaipur.showAcceptButton();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
this.showScoreBoard = function () {
|
||||
|
||||
document.querySelector('.scoreTable').classList.add('visible');
|
||||
|
||||
|
||||
};
|
||||
|
||||
this.showScore = function () {
|
||||
document.querySelector('.player1_score').innerText = jaipur.player1.calculateScore();
|
||||
document.querySelector('.player2_score').innerText = jaipur.player2.calculateScore();
|
||||
document.querySelector('.score_section').classList.add('show');
|
||||
};
|
||||
|
||||
this.initializeAcceptButton = function () {
|
||||
document.querySelector('.players .accept').addEventListener('click', this.clickAcceptButton)
|
||||
};
|
||||
|
||||
|
||||
this.clickAcceptButton = function () {
|
||||
|
||||
var coins = document.querySelectorAll('.coin.selected');
|
||||
|
||||
for (var i = 0; i < coins.length; i++) {
|
||||
var group = coins[i].dataset.group;
|
||||
jaipur.board.goods[group].pop();
|
||||
|
||||
// jaipur.activePlayer.coins.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group});
|
||||
jaipur.activePlayer.coins.push(parseInt(coins[i].innerText));
|
||||
coins[i].remove();
|
||||
}
|
||||
var bonus = false;
|
||||
if (coins.length == 3) {
|
||||
var bonusGroup = 'three';
|
||||
bonus = jaipur.board.bonus.three.pop()
|
||||
} else if (coins.length == 4) {
|
||||
var bonusGroup = 'four';
|
||||
bonus = jaipur.board.bonus.four.pop()
|
||||
} else if (coins.length >= 5) {
|
||||
var bonusGroup = 'five';
|
||||
bonus = jaipur.board.bonus.five.pop()
|
||||
}
|
||||
|
||||
if (!!bonus) {
|
||||
// { value: parseInt(coins[i].innerText), type: 'goods', group: group}
|
||||
// jaipur.activePlayer.bonus.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group});
|
||||
jaipur.activePlayer.bonus.push(bonus);
|
||||
}
|
||||
//
|
||||
|
||||
var groups = document.querySelectorAll('.group');
|
||||
jaipur.selectedCointType = false;
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
groups[i].classList.remove('inactive');
|
||||
}
|
||||
jaipur.hideAcceptButton();
|
||||
jaipur.setActivePlayer(false);
|
||||
if (jaipur.isRoundOver()) {
|
||||
jaipur.showScoreBoard();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.initializeCamels = function () {
|
||||
|
||||
document.querySelector('.player1_camel').addEventListener('click', function () {
|
||||
jaipur.camelClick(1);
|
||||
});
|
||||
document.querySelector('.player2_camel').addEventListener('click', function () {
|
||||
jaipur.camelClick(2);
|
||||
});
|
||||
document.querySelector('.nobody').addEventListener('click', function () {
|
||||
jaipur.camelClick(0);
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
this.initializeCoins = function () {
|
||||
var coins = document.querySelectorAll('.coin');
|
||||
for (var i = 0; i < coins.length; i++) {
|
||||
coins[i].addEventListener('click', jaipur.coinClick);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
board = {'goods': {}, 'bonus': {}};
|
||||
board.goods.leather = [1, 1, 1, 1, 1, 1, 2, 3, 4];
|
||||
board.goods.fabric = [1, 1, 2, 2, 3, 3, 5];
|
||||
board.goods.spice = [1, 1, 2, 2, 3, 3, 5];
|
||||
board.goods.silver = [5, 5, 5, 5, 5];
|
||||
board.goods.gold = [5, 5, 5, 6, 6];
|
||||
board.goods.diamond = [5, 5, 5, 7, 7];
|
||||
|
||||
board.bonus.five = [8, 9, 10, 10];
|
||||
board.bonus.four = [4, 4, 6, 6, 5, 5];
|
||||
board.bonus.three = [1, 1, 2, 2, 2, 3, 3];
|
||||
board.bonus.camel = [5];
|
||||
|
||||
var player1 = new player('Kicia', 1);
|
||||
var player2 = new player('Cysio', 2);
|
||||
jaipur = new game(player1, player2, board);
|
||||
|
||||
jaipur.init();
|
||||
|
||||
console.info(jaipur.isRoundOver());
|
||||
};
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="players">
|
||||
<div class="player player1" data-player="1">Kicia</div>
|
||||
<div class="accept">Przydziel</div>
|
||||
<div class="player player2" data-player="2">Cysio</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="group leather">
|
||||
<span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">1
|
||||
</span><span class="coin leather" data-group="leather">2
|
||||
</span><span class="coin leather" data-group="leather">3
|
||||
</span><span class="coin leather" data-group="leather">4
|
||||
</span>
|
||||
</div>
|
||||
<div class="group fabric">
|
||||
<span class="coin fabric" data-group="fabric">1
|
||||
</span><span class="coin fabric" data-group="fabric">1
|
||||
</span><span class="coin fabric" data-group="fabric">2
|
||||
</span><span class="coin fabric" data-group="fabric">2
|
||||
</span><span class="coin fabric" data-group="fabric">3
|
||||
</span><span class="coin fabric" data-group="fabric">3
|
||||
</span><span class="coin fabric" data-group="fabric">5
|
||||
</span>
|
||||
</div>
|
||||
<div class="group spice"><span class="coin spice" data-group="spice">1
|
||||
</span><span class="coin spice" data-group="spice">1
|
||||
</span><span class="coin spice" data-group="spice">2
|
||||
</span><span class="coin spice" data-group="spice">2
|
||||
</span><span class="coin spice" data-group="spice">3
|
||||
</span><span class="coin spice" data-group="spice">3
|
||||
</span><span class="coin spice" data-group="spice">5</span>
|
||||
</div>
|
||||
<div class="group silver"><span class="coin silver" data-group="silver">5
|
||||
</span><span class="coin silver" data-group="silver">5
|
||||
</span><span class="coin silver" data-group="silver">5
|
||||
</span><span class="coin silver" data-group="silver">5
|
||||
</span><span class="coin silver" data-group="silver">5</span>
|
||||
</div>
|
||||
<div class="group gold"><span class="coin gold" data-group="gold">5
|
||||
</span><span class="coin gold" data-group="gold">5
|
||||
</span><span class="coin gold" data-group="gold">5
|
||||
</span><span class="coin gold" data-group="gold">6
|
||||
</span><span class="coin gold" data-group="gold">6</span></div>
|
||||
<div class="group diamond"><span class="coin diamond" data-group="diamond">5
|
||||
</span><span class="coin diamond" data-group="diamond">5
|
||||
</span><span class="coin diamond" data-group="diamond">5
|
||||
</span><span class="coin diamond" data-group="diamond">7
|
||||
</span><span class="coin diamond" data-group="diamond">7</span></div>
|
||||
|
||||
|
||||
<div class="scoreTable">
|
||||
<h1>Wynik</h1>
|
||||
|
||||
|
||||
<div class="players_section">
|
||||
<div class="player1_name">Kicia</div>
|
||||
<div></div>
|
||||
<div class="player2_name">Cysio</div>
|
||||
</div>
|
||||
<div class="camel_section">
|
||||
<div class="player1_camel selected"></div>
|
||||
<div class="nobody selected">remis</div>
|
||||
<div class="player2_camel selected"></div>
|
||||
</div>
|
||||
<div class="score_section">
|
||||
<div class="player1_score">0</div>
|
||||
<div class="separator">:</div>
|
||||
<div class="player2_score">0</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user