Hi, trying to create basic 2 player risk game, yet i am failing at even 4 buttons. I don't know how to access/ assess each player properly.


Joined
Jun 22, 2022
Messages
6
Reaction score
0
i.e. should be able to choose either 'orange' player. Yet i cannot get it to work, spent about an hour or so each day for 2 weeks now... driving me mad.
 

Attachments

  • New Text Document.txt
    44.6 KB · Views: 2
Ad

Advertisements

Joined
Mar 11, 2022
Messages
82
Reaction score
8
I don't open fishy weird stuff from Websites.

Post your code (within code tags) and show your website. Than i may help you.
 
Joined
Jun 22, 2022
Messages
6
Reaction score
0
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



<style>

body {background-color: black;}

.player-0-panel {position: absolute; width: 30%; float: left; height: 50px; background-color: black; top: 10px; left :10px;}
.player-1-panel {position: absolute; width: 30%; float: left; height: 50px; background-color: black; top: 10px; left :250px;}

.player-name {position: absolute; font-size: 20px; text-align: center; text-transform: uppercase; letter-spacing: 3px; margin-top: 5px; margin-bottom: 20px; color: white; top: 10px; left :60px;}


.player-score-0 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center ; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 50px; left :50px;}

.player-score-1 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center ; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 100px; left :100px;}

.player-score-2 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 150px; left :150px;}

.player-score-3 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 200px; left :200px;}



.active-0 { background: pink;}
.active-1 { background: blue;}



/*Change colour of players' dice box*/

/*Change font of the label inside players' dice box*/

.player-dieroll-score {font-size: 40px;}

.player-dieroll-label {text-transform: uppercase; margin-bottom: 10px; margin: 0 auto; font-size: 25px; color: blue;}

.player-dieroll-box-0 {position: absolute; background-color: pink; color: black; width: 150px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 300px; left: 45px;}

.player-dieroll-box-1 {position: absolute; background-color: green; color: black; width: 150px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 300px; left: 100px;}


.player-troopScore-score {font-size: 30px;}

.player-troopScore-label {text-transform: uppercase; margin-bottom: 10px; margin: 0 auto; font-size: 15px; color: blue;}

.player-troopScore-box-0 {position: absolute; background-color: white; color: pink; width: 150px; height: 50px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 100px; left:550px;}

.player-troopScore-box-1 {position: absolute; background-color: white; color: black; width: 150px; height: 50px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 200px; left: 310px;}


/*Create message box informing players' actions*/
.message-box {position: absolute; background-color: crimson; color: black; width: 60%; padding: 12px; text-align: center; top: 450px; left :50px;}
.message-label {text-transform: uppercase; margin-bottom: 10px; font-size: 30px; color: blue;}
.message-score {font-size: 30px;}


.btn-Arg {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 65px; left: 65px;}

.btn-Ama {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 115px; left: 115px;}

.btn-Mex {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 165px; left: 165px;}

.btn-Bel {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 215px; left: 215px;}

.btn-player1AttFrom {position: absolute; width: 50px; height: 50px; padding: 50px; text-align: center; margin-top: 30px; margin-bottom: 30px; top: 110px; left: 110px;}
.btn-player1AttTo {position: absolute; width: 50px; height: 50px; padding: 50px; text-align: center; margin-top: 30px; margin-bottom: 30px; top: 110px; left: 370px;}

.btn-AttStop {position: absolute; width: 80px; padding: 10px; text-align: center; margin-top: 5px; color: willow; background-color: grey; margin-bottom: 30px; top: 240px; left: 400px; cursor: pointer;}

.btn-Add1 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 100px; left: 400px; cursor: pointer;}

.btn-Add2 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; margin-top: 5px; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 140px; left: 400px; cursor: pointer;}

.btn-Add3 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; margin-top: 5px; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 180px; left: 400px; cursor: pointer;}

</style>

</head>



<body>


<!--Set CSS for use -->

<div class="player-0-panel active-0">

<div class="player-name" id="name-0"></div>




<div class="player-dieroll-box-0">
<div class="player-dieroll-label">Die Roll 1</div>
<div class="player-dieroll-score" id="dieroll-0"></div>
</div>

<div class="player-troopScore-box-0">
<div class="player-troopScore-label">Player 1 Troops</div>
<div class="player-troopScore-score" id="troopScore-0"></div>
</div>


</div>

<div class="player-score-0" id="score-0">0</div>
<div class="player-score-1" id="score-1">0</div>
<div class="player-score-2" id="score-2">0</div>
<div class="player-score-3" id="score-3">0</div>


<div class="player-1-panel active-1">

<div class="player-name" id="name-1"></div>

<div class="player-dieroll-box-1">
<div class="player-dieroll-label">Die Roll 2</div>
<div class="player-dieroll-score" id="dieroll-1"></div>
</div>

<div class="player-troopScore-box-1">
<div class="player-troopScore-label">Player 2 Troops</div>
<div class="player-troopScore-score" id="troopScore-1"></div>
</div>

</div>

<!--issue with ama arg 1 or 2 etc and about adding more regions -->


<!--Set message box for player messages-->
<div class="message-box">
<div class="message-label">Player action</div>
<div class="message-score" id="message">Add one to an empty space</div>
</div>




<button class="btn-Arg" title = "Argentina" id="Arg"></button>

<button class="btn-Ama" title = "Amazon" id="Ama"></button>

<button class="btn-Mex" title = "Mexico" id="Mex"></button>

<button class="btn-Bel" title = "Belize" id="Bel"></button>

<button class="btn-player1AttFrom" id="player1AttFrom" disabled hidden> </button>
<button class="btn-player1AttTo" id="player1AttTo" disabled hidden> </button>

<button class="btn-AttStop" id="Stop" disabled hidden >Stop attack</button>

<button class="btn-Add1" id="Add1" disabled hidden>Add1</button>

<button class="btn-Add2" id="Add2" disabled hidden>Add2</button>

<button class="btn-Add3" id="Add3" disabled hidden>Add3</button>




<script>

var troopScore, energyScore, activePlayer, gamePlaying, scores;

//buttons to be used are defined
var btnArg = document.querySelector('.btn-Arg');

var btnAma = document.querySelector('.btn-Ama');

var btnMex = document.querySelector('.btn-Mex');

var btnBel = document.querySelector('.btn-Bel');

var btnAdd1 = document.querySelector('.btn-Add1');

var btnAdd2 = document.querySelector('.btn-Add2');

var btnAdd3 = document.querySelector('.btn-Add3');



///nothing happenns without an onclick or on hover function!

init();


function Arghover() //{if
//((document.getElementById("Add3").style.backgroundColor == "red")&&
//(document.querySelector('#name-0').backgroundColor = "pink")&&
//(document.getElementById("score-0").style.backgroundColor == "orange"))
{document.getElementById('Arg').style.background = "yellow";}//}

function Argout() {document.getElementById('Arg').style.background = "none";}

function Amahover() {document.getElementById('Ama').style.background = "yellow";}
function Amaout() {document.getElementById('Ama').style.background = "none";}

function Mexhover() {document.getElementById('Mex').style.background = "yellow";}
function Mexout() {document.getElementById('Mex').style.background = "none";}

function Belhover() {document.getElementById('Bel').style.background = "yellow";}
function Belout() {document.getElementById('Bel').style.background = "none";}

function Add1hover() {document.getElementById('Add1').style.background = "yellow";}
function Add1out() {document.getElementById('Add1').style.background = "grey";}

function Add2hover() {document.getElementById('Add2').style.background = "yellow";}
function Add2out() {document.getElementById('Add2').style.background = "grey";}

function Add3hover() {document.getElementById('Add3').style.background = "yellow";}
function Add3out() {document.getElementById('Add3').style.background = "grey";}


//position of next player can affect outcomes
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Arg() { if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-0").style.background = "orange"; document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";


nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";

document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";

document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";

document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

document.querySelector('#message').textContent = "Add 3 to owned territories";

document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;

document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;

document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;



troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];

troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

nextPlayer();

}

///////////////////////////////////////////////////////////////////////////////////////

else if ((document.getElementById("score-0").textContent == "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent != "1")

&&

(document.getElementById("Add3").background == "red"))

{ document.getElementById("score-0").textContent = "4";

troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";

document.getElementById("Add3").disabled = false;



nextPlayer();

}


}





/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Ama() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer();}


else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }


else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";

document.querySelector('#message').textContent = "Add 3 to owned territories";

document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;

document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;

document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;



troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];

troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

nextPlayer();


}

///////////////////////////////////////////////////////////////////////////////////////

else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent == "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent != "1")

&&

(document.getElementById("Add3").background == "red"))

{ document.getElementById("score-1").textContent = "4";

troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";


document.getElementById("Add3").disabled = false;

nextPlayer();

}




}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


function Mex() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer();}

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0") && (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))

{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";



document.querySelector('#message').textContent = "Add 3 to owned territories";

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;

document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;

document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;


troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];

troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

nextPlayer();


}

///////////////////////////////////////////////////////////////////////////////////////

else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent == "1")||
(document.getElementById("score-3").textContent != "1")

&&

(document.getElementById("Add3").background == "red"))

{ document.getElementById("score-2").textContent = "4";

troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";

document.getElementById("Add3").disabled = false;

nextPlayer();
}



}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Bel() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer();}


else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer();}


else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer(); }

else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))

{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer();

document.querySelector('#message').textContent = "Add 3 to owned territories";

document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;

document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;

document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;

troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];

troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

}

///////////////////////////////////////////////////////////////////////////////////////

else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent == "1")

&&

(document.getElementById("Add3").background == "red"))

{ document.getElementById("score-3").textContent = "4";

troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];

document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";

nextPlayer();

}

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////




function Add3() {

if ((document.getElementById("score-0").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-0").style.background == "orange"))

{document.getElementById("Arg").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}



///////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-0").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-0").style.background == "red"))

{document.getElementById("Arg").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

if ((document.getElementById("score-1").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-1").style.background == "orange"))

{document.getElementById("Ama").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}


///////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-1").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-1").style.background == "red"))

{document.getElementById("Ama").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

if ((document.getElementById("score-2").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-2").style.background == "orange"))

{document.getElementById("Mex").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}



///////////////////////////////////////////////////////////////////////////////////////


if ((document.getElementById("score-2").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-2").style.background == "red"))

{document.getElementById("Mex").disabled = false;
document.getElementById("Add3").style.background = "red";
document.getElementById("Add3").disabled = false;
}



}


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


let ar = document.getElementById('Arg');

ar.addEventListener("mouseover", Arghover);
ar.addEventListener("mouseout", Argout);
ar.addEventListener("click", Arg);



let am = document.getElementById('Ama');

am.addEventListener("mouseover", Amahover);
am.addEventListener("mouseout", Amaout);
am.addEventListener("click", Ama);



let me = document.getElementById('Mex');

me.addEventListener("mouseover", Mexhover);
me.addEventListener("mouseout", Mexout);
me.addEventListener("click", Mex);



let be = document.getElementById('Bel');

be.addEventListener("mouseover", Belhover);
be.addEventListener("mouseout", Belout);
be.addEventListener("click", Bel);



let add1 = document.getElementById('Add1');

add1.addEventListener("mouseover", Add1hover);
add1.addEventListener("mouseout", Add1out);
add1.addEventListener("click", Add1);


let add2 = document.getElementById('Add2');

add2.addEventListener("mouseover", Add2hover);
add2.addEventListener("mouseout", Add2out);
add2.addEventListener("click", Add2);


var add3 = document.getElementById('Add3');

add3.addEventListener("mouseover", Add3hover);
add3.addEventListener("mouseout", Add3out);
add3.addEventListener("click", Add3);




//init2();



//document.querySelector('.btn-Arg').addEventListener('click', function()

//{

//if (gamePlaying && (scores[activePlayer+1] ==0) && (scores[activePlayer] ==0)) {

//scores[activePlayer] += 1;

//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];

//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'orange';}


//else if (gamePlaying && (scores[activePlayer] == 1) && (scores[activePlayer+1] =0))

//{

//scores[activePlayer] += 1;

//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];

//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'red';}


// nextPlayer();

//});


//document.querySelector('.btn-Ama').addEventListener('click', function()

//{

//if ( gamePlaying && (scores[activePlayer+1] == 0) && (scores[activePlayer] == 0) ) {

//scores[activePlayer+1] += 1;

//document.querySelector('#score-' + (activePlayer+1)).textContent = scores[activePlayer+1];

//document.querySelector('.player-score-' + [activePlayer+1]).style.backgroundColor = 'orange';}

//else if ( gamePlaying && (scores[activePlayer] == 0) && (scores[activePlayer+1] = 1) ) {

//scores[activePlayer] += 1;

//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];

//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'red';}



//nextPlayer();

// });






function init()
{

scores = [0,0];
roundScore = 0;
activePlayer = 0;
troopScore = [0,0];
gamePlaying = true;



//energyScore = 0;

//argScore = [0,0];
//amaScore = [0,0];

document.getElementById('score-0').textContent = '0';
document.getElementById('score-1').textContent = '0';
document.getElementById('score-2').textContent = '0';
document.getElementById('score-3').textContent = '0';

document.getElementById('troopScore-0').textContent = '0';
document.getElementById('troopScore-1').textContent = '0';

document.getElementById('dieroll-0').textContent = ".";
document.getElementById('dieroll-1').textContent = '0';

document.querySelector('#name-0').textContent = 'Player 1';
document.querySelector('#name-1').textContent = 'Player 2';

document.querySelector('.player-0-panel').classList.add('active-0');


//sets up initial classList needed
}



function nextPlayer() {

var icons = document.getElementsByTagName('i');

for (i=0; i < icons.length; i++) //classlist remove

{icons.classList.remove('color-' + activePlayer);}

document.querySelector('.player-' + [activePlayer] + '-panel').classList.remove('active-' + [activePlayer]);


activePlayer ===0? activePlayer = 1 : activePlayer = 0;


for (i=0; i < icons.length; i++) //classlist add

{icons.classList.add('color-' + [activePlayer]);}


document.querySelector('.player-' + [activePlayer] + '-panel').classList.add('active-' + [activePlayer]);

document.querySelector('#dieroll-0').textContent = '.';
document.querySelector('#dieroll-1').textContent = '0';




}




</script>

</body>

</html>


















PS. I would say that i am very knew to this. I don't know if i should post everything etc... it's quite a lot of junk
 
Joined
Jun 22, 2022
Messages
6
Reaction score
0
Fortunately, I have resolved this. By changing selection of 'assessors' and adding a few 'disable buttons'

Should anyone wish to comment on my code and add advice about how to be neater or simplify things - that would be very welcome.

This is just something of a hobby of mine, no formal training - or feedback of anykind.
 
Joined
Nov 13, 2020
Messages
141
Reaction score
23
@mdearsley, At the top of the message box, are some icons. The second from the right is labeled "code" and looks like </> Click that and post your code in the box that pops up. A lot easier on all concerned.
PS. Last time I looked at your code I searched for "Match" and did not find it. Something necessary to do a random roll of the dice.
randomNumber = Math.floor(Math.random() * 6) + 1;
 
Joined
Jun 22, 2022
Messages
6
Reaction score
0
Cheers, I see what you mean. Will remember to use that should (probably when) I get stuck again.
 
Ad

Advertisements

Joined
Jun 22, 2022
Messages
6
Reaction score
0
I have all the die rolling stuff elsewhere. I did create a successful 2 button game with die rolling. Just trying to set up the starting actions for a 4 button game.

nb: die rolling doesn't start until all players have placed their troops
 
Joined
Jun 22, 2022
Messages
6
Reaction score
0
I need about 56 buttons and upto 5 players! I may well lose interest at this rate.

Then there's potentially making it playable online (friends and I often play this game in the board game version)
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
141
Reaction score
23
I would think the first a player does during their turn is roll the die. In writing code for a game, I think you would write the path that every player takes. Roll the die, pick a number of troops from a location, and then march them to a new location, do or don't do battle.
And figure out a way everyone can enter and perform those actions so you don't write the same code for every player. I don't see that in your code.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top