So the game is Yahtzee, I should be able to roll the dice 3 times and save dice until the end, when I reset it, all my checks should disappear an I should be able to roll all dice again. I only did javascript for the dice[0]so for the first dice I haven't done it for the rest of the 4 other dice. I just want to save my first dice and then roll it and then when I uncheck it or reset it, It should roll it again but its not doing that. when I check and uncheck or reset it still thinks its checked and won't roll
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<style>
body{
background-color: #555555;
}
td {
width: 30%;
font-size: small;
}
.col-6{
padding-bottom: 30px;
padding-top: 25px;
color: white;
}
.col-6 span{
color: black;
padding-right: 20px;
}
.resTable span{
padding-left: 20px;
}
.resTable{
border-style: solid;
border-color: black;
border-width: thin;
}
h1 {
margin-bottom: -20px;
}
h1{
font-family: Papyrus;
font-size: 45px;
}
li a {
margin-top: 40px;
margin-left: 20px;
}
</style>
<script>
let dice = [
{'img': 'Die1.PNG', 'value': 1},
{'img': 'Die2.PNG', 'value': 2},
{'img': 'Die3.PNG', 'value': 3},
{'img': 'Die4.PNG', 'value': 4},
{'img': 'Die5.PNG', 'value': 5},
{'img': 'Die6.PNG', 'value': 6}
]
let userDice =[
{'dice': 0, 'checked': false, 'id': "d1"},
{'dice': 0, 'checked': false, 'id': "d2"},
{'dice': 0, 'checked': false, 'id': "d3"},
{'dice': 0, 'checked': false, 'id': "d4"},
{'dice': 0, 'checked': false, 'id': "d5"},
]
var turns = 9;
var rollsLeft = 3;
var wins =0;
var losses = 0;
const WINPOINTS=200;
function user(){
// document.getElementById("name").innerHTML= prompt("Enter your name");
}
function rollDice() {
if (rollsLeft > 0) {
for (let i = 0; i < userDice.length; i++) {
if (userDice[i].checked == false)
{
let rDie = Math.floor(Math.random() * 6);
document.getElementById(userDice[i].id).innerHTML = `<img src ="imgs/${dice[rDie].img}" height='50px' width='50px'> `;
//userDice[i].value = dice[rDie].value; //WHAT DOES THIS DO???
}
}
rollsLeft--;
var display = document.getElementById("rollsLeft")
display.innerHTML = rollsLeft;
} else {
alert("u gotta do somethin else")
for(let j = 0; j < userDice.length; j++)
{
// userDice[j].checked = false;
// rollsLeft = 3;
}
}
}
// let wins = document.getElementById("wins");
// let losses = document.getElementById("losses");
// if(wins > WINPOINTS){
// wins++
// }else {
// losses++
// }
$( document ).ready(function() {
resetThings();
console.log( "yo im ready!" );
//
//== $("#rollBtn").click(function() {
// rollsLeft--;
// var display = document.getElementById("rollsLeft")
// display.innerHTML = rollsLeft;
// var checkedItems =[];
// if (rollsLeft === 0) {
// alert("no more clicking")
// rollsLeft=3
// return;
// }else{
// checkedItems = $('input[name="diceCheck"]:checked' );
//
// setMyDice( checkedItems );
// displayDice();
// console.log(`check${checkedItems}`)
// }
//
// //=======================================
function resetThings(){
rollDice();
}
$("#reset").click(function() {
alert("reset this");
rollsLeft=3;
var display = document.getElementById("rollsLeft")
display.innerHTML = rollsLeft;
rollDice();
$('input[type=checkbox]:checked').each(function(){
$(this).prop('checked', false);
});
})
$("#d1Check").click(function() {
if(userDice[0].checked){
userDice[0].checked= false;
} else {
userDice[0].checked= true;
}
})
})
</script>
<title>Hello, world!</title>
</head>
<body onload="user()">
<div class ="container-fluid">
<header class=" mb-4 border-bottom border-dark">
<div class="row">
<div class="col-5">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="https://usbrandcolors.com/apple-colors/" class="nav-link active link-dark bg-dark text-light">Color</a>
</li>
</ul>
</div>
<div class="col-6">
<h1><span>Dark</span><img src="imgs/543598.png" width="180"height="80"></h1>
</div>
</div>
</header>
<div class="row">
<div class="col">
<div class="col-9">
PLAYERS NAME: <span id="name"></span>
</div>
<br>
<br>
<table class="resTable table-bordered">
<tbody>
<tr>
<th scope="row">Win points</th>
<td><span id="200">200</span></td>
</tr>
<tr>
<th scope="row">Wins</th>
<td><span id="wins">0</span></td>
</tr>
<tr>
<th scope="row">Losses</th>
<td><span id="losses">0</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-4">
<table class="table table-bordered border-dark border border-2 table-sm">
<caption>* if total score is 62 or over <br>** of upper section</caption>
<thead>
<tr>
<th scope="col">UPPER <br>SECTION</th>
<th scope="col">HOW TO <br>SCORE</th>
<th scope="col">GAME <br>#1</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ACE <img src="imgs/Die1.PNG" width="40"height="38" > =1</th>
<td>Count and <br> add only <br>ACES</td>
<td><div id="ace1"></div></td>
</tr>
<tr>
<th scope="row">TWOS <img src="imgs/Die2.PNG" width="40"height="38" > =2</th>
<td>Count and <br> add only <br>TWOS</td>
<td><div id="twos1"></div></td>
</tr>
<tr>
<th scope="row">THREES <img src="imgs/Die3.PNG" width="40"height="38" > =3</th>
<td>Count and <br> add only <br>THREES</td>
<td><div id="threes1"></div></td>
</tr>
<tr>
<th scope="row">FOURS <img src="imgs/Die4.PNG" width="40"height="38" > =4</th>
<td>Count and <br> add only <br>FOURS</td>
<td><div id="fours1"></div></td>
</tr>
<tr>
<th scope="row">FIVES <img src="imgs/Die5.PNG" width="40"height="38" > =5</th>
<td>Count and <br> add only <br>FIVES</td>
<td><div id="five1"></div></td>
</tr>
<tr>
<th scope="row">SIXES <img src="imgs/Die6.PNG" width="40"height="38" > =6</th>
<td>Count and <br> add only <br>SIXES</td>
<td><div id="sixes1"></div></td>
</tr>
<tr>
<th scope="row">3 of a kind</th>
<td>Add total <br> of all dice</td>
<td></td>
</tr>
<tr>
<th scope="row">4 of a kind</th>
<td>Add total <br> of all dice</td>
<td></td>
</tr>
<tr>
<th scope="row">FULL HOUSE</th>
<td>Score 25</td>
<td></td>
</tr>
<tr>
<th scope="row"><b>TOTAL SCORE</b></th>
<td> <img src="imgs/arrow.png" width="60" height="30"></td>
<td></td>
</tr>
<tr>
<th scope="row"><b>BONUS*</b></th>
<td>Add total <br> of all dice</td>
<td></td>
</tr>
<tr>
<th scope="row"><b>TOTAL**</b></th>
<td> <img src="imgs/arrow.png" width="60" height="30"> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-4">
<h3>Your Dice</h3>
<form id="shuffle">
<button type="button" class="btn btn-dark" id="rollBtn" onclick="rollDice();">Roll</button>
<button type="button" class="btn btn-dark" id="reset">Reset</button>
<p>Rolls left: <span id="rollsLeft">2</span></p>
</form>
<table class="table table-borderless table-sm table-hover ">
<tr> <td> Save: <input type="checkbox" name='diceCheck' id="d1Check" /> </input> </td>
<td id="d1"> <img src="imgs/Die1.PNG" height="50" width="50"> </td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d2Check" /> </input> </td>
<td id="d2"><img src="imgs/Die2.PNG" height="50" width="50"> </td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d3Check"/> </input> </td>
<td id="d3"> <img src="imgs/Die3.PNG" height="50" width="50"></td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d4Check"/> </input> </td>
<td id="d4"> <img src="imgs/Die4.PNG" height="50" width="50"></td>
</tr>
<tr> <td> Save: <input type="checkbox" name="diceCheck" id="d5Check"/> </input> </td>
<td id="d5"> <img src="imgs/Die5.PNG" height="50" width="50"></td>
</tr>
</table>
<br>
<br>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire