Написал игру на чистом JS которая играет по таким правилам:
The game has 2 players, playing in rounds
In each turn, a player rolls a dice as many times as he wishes. Each result get added to his ROUND score
BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
The player can choose to 'Hold', which means that his ROUND score gets added to his GLOBAL score. After that, it's the next player's turn
The first player to reach 100 points on GLOBAL score wins the game
YOUR 3 CHALLENGES
Change the game to follow these rules:
1. A player looses his ENTIRE score when he rolls two 6 in a row. After that, it's the next player's turn.
(Hint: Always save the previous dice roll in a separate variable)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2. Add an input field to the HTML where players can set the winning score, so that they can change the predefined score of 100.
(Hint: you can read that value with the .value property in JavaScript. This is a good oportunity to use google to figure this out :)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3. Add another dice to the game, so that there are two dices now. The player looses his current score when one of them is a 1.
(Hint: you will need CSS to position the second dice, so take a look at the CSS code for the first one.)
/*
YOUR 3 CHALLENGES
Change the game to follow these rules:
1. A player looses his ENTIRE score when he rolls two 6 in a row. After that, it's the next player's turn.
(Hint: Always save the previous dice roll in a separate variable)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2. Add an input field to the HTML where players can set the winning score, so that they can change the predefined score of 100.
(Hint: you can read that value with the .value property in JavaScript. This is a good oportunity to use google to figure this out :)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3. Add another dice to the game, so that there are two dices now. The player looses his current score when one of them is a 1.
(Hint: you will need CSS to position the second dice, so take a look at the CSS code for the first one.)
*/
var scores , roundScore , activePlayer , gamePlaying , i , array , changeScore ;
init();
document.querySelector('.btn-roll').addEventListener( 'click' , function () {
if (gamePlaying) {
var dice = Math.floor(Math.random()*6)+1;
var diceTwo = (Math.floor(Math.random()*6)+1);
var diceDOM= document.querySelector('.dice');
diceDOM.style.display = 'block';
document.querySelector('.dice-two').style.display = 'block';
diceDOM.src = 'dice-' + dice +'.png';
document.querySelector('.dice-two').src = 'dice-' + diceTwo +'.png';
if (dice !== 1 && diceTwo !== 1) {
roundScore =roundScore + dice + diceTwo;
document.getElementById('current-'+ activePlayer).textContent = roundScore;
array[i]=dice;
i = i +1 ;
if (dice == 6 && array[i-2] == 6 ) {
nextPlayer();
}
} else {
nextPlayer();
}
}
})
document.querySelector('.btn-hold').addEventListener( 'click' , function () {
if (gamePlaying) {
scores[activePlayer] += roundScore;
document.querySelector('#score-'+ activePlayer).textContent = scores[activePlayer];
if (scores[activePlayer] >= changeScore ) {
document.getElementById('name-'+ activePlayer).textContent = "Winner!";
document.querySelector('.dice').style.display = 'none';
document.querySelector('.player-' + activePlayer +'-panel').classList.add('winner');
document.querySelector('.player-' + activePlayer +'-panel').classList.remove('active');
gamePlaying = false ;
} else {
nextPlayer();
}
}
})
function nextPlayer () {
activePlayer === 1 ? activePlayer = 0 : activePlayer = 1;
roundScore = 0;
document.getElementById('current-0').textContent = '0';
document.getElementById('current-1').textContent = '0';
document.querySelector('.player-0-panel').classList.toggle('active');
document.querySelector('.player-1-panel').classList.toggle('active');
document.querySelector('.dice').style.display = 'none';
document.querySelector('.dice-two').style.display = 'none';
array = [];
}
document.querySelector('.btn-new').addEventListener( 'click' , init);
document.getElementById('changeScore-btn').addEventListener( 'click' , function(){
changeScore = document.getElementById("changeScore-input").value;
alert("to win you need "+changeScore+" score points ");
});
function init() {
scores = [0,0];
roundScore = 0;
activePlayer = 0;
gamePlaying = true;
document.getElementById('score-0').textContent = '0';
document.getElementById('score-1').textContent = '0';
document.getElementById('current-0').textContent = '0';
document.getElementById('current-1').textContent = '0';
document.querySelector('.dice').style.display = 'none';
document.querySelector('.dice-two').style.display = 'none';
document.getElementById('name-0').textContent = "Player 1!";
document.getElementById('name-1').textContent = "Player 2!";
document.querySelector('.player-0-panel').classList.remove('active');
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
i = 0;
array = [];
changeScore = 20;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Pig Game</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">43</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</div>
</div>
</div>
<div class="player-1-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player-score" id="score-1">72</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
</div>
</div>
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="dice-5.png" alt="Dice" class="dice">
<img src="dice-5.png" alt="Dice" class="dice-two">
</div>
<input type="text" id="changeScore-input" >
<button id="changeScore-btn">change score</button>
<script src="app.js"></script>
</body>
</html>
Правильно ли все сделано ? Какие есть замечания.
Песочница
https://jsfiddle.net/fd34zasc/ 