i have made a tic-tac-toe game.For which i have to make a character selection module for each player.Players have to choose between x and o.If first one selects 'o' ,other player can not select that.he has to choose 'x'.But including html lines ,the code i have written is almost 50 lines and very fragile, i can't find any other way to shorten this code.selection option is a basic thing in games.Any expert solution on this matter would be appreciated
function Player(name,val){
this.name=name;
this.val=val;
}
var ps=document.getElementById('ps');
ps.addEventListener('click',function(e){
player1=prompt('input player1');
char1=prompt('input char between x/o');
if((char1 != 'x') && (char1 != 'o')){
for(;;){
alert('select between x an o please');
char1=prompt('between x/o');
if((char1 === 'x')|| (char1 === 'o')){
break;
}
}
}
player2 = prompt('input player2');
char2 = prompt('input your char O/X');
if((char2 === char1) || ((char2 != 'x') && (char2 != 'o'))){
for(;;){
alert('you can not have this char');
char2=prompt('try again');
if(((char2 === 'o') || (char2 === 'x')) && (char2 != char1)){
break;
}
}
}
p1=new Player(player1,char1);
p2=new Player(player2,char2);
document.body.innerHTML+='\n'+p1.name+' : '+p1.val+'\n'+p2.name+' : '+p2.val;
});<input type='button' value='Player Setup' id='ps'>Instead of using prompt, its better to make use of HTML <input> elements.
<div class="container">
<div class="p1">
<label>Player 1:</label>
<input id="p1" type="text" />
<br />
<br />
<label>Choose your Character:</label>
<br />
<input class="charac" type="radio" name="characP1" value="X" />
<label class="charac">X</label>
<br />
<input class="charac" type="radio" name="characP1" value="O" />
<label class="charac">O</label>
</div>
<div class="p2">
<label>Player 2:</label>
<input id="p2" type="text" />
<br />
<br />
<label>Choose your Character:</label>
<br />
<input class="charac cp2" type="radio" name="characP2" value="X" />
<label class="charac">X</label>
<br />
<input class="charac cp2" type="radio" name="characP2" value="O" />
<label class="charac">O</label>
</div>
<div class="btnContainer">
<input id="btn" class="btn" type="button" value="Submit" />
</div>
<div id="message"></div>
</div>
var ps = document.getElementById('btn');
var c1 = document.getElementsByName('characP1');
var c2 = document.getElementsByName('characP2');
var msg = document.getElementById('message');
var char1;
var char2;
function Player(name, val) {
this.name = name;
this.val = val;
}
for (i = 0; i < c1.length; i++) {
c1[i].addEventListener('change', function () {
if (this.checked) {
this.value == 'X' ? c2[1].checked = true : c2[0].checked = true;
char1 = this.value;
char2 = this.value == 'X' ? 'O' : 'X';
}
});
}
for (i = 0; i < c2.length; i++) {
c2[i].addEventListener('change', function () {
if (this.checked) {
this.value == 'X' ? c1[1].checked = true : c1[0].checked = true;
char2 = this.value
char1 = this.value == 'X' ? 'O' : 'X';
}
});
}
ps.addEventListener('click', function () {
var player1 = document.getElementById('p1').value;
var player2 = document.getElementById('p2').value;
p1 = new Player(player1, char1);
p2 = new Player(player2, char2);
if (p1.name && p1.val && p2.name && p2.val) {
msg.innerHTML = p1.name + ' : ' + p1.val + '<br />' + p2.name + ' : ' + p2.val;
} else {
msg.innerHTML = 'Please fill all input fields'
}
});
.charac {
position: relative;
left: 0px;
}
.container {
width: 250px;
margin: 0 auto;
}
.p1, .p2, #message {
width: 100%;
height: 100%;
border: 4px solid #51634b;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
#message {
text-align: center;
border: none;
}
.btnContainer {
padding: 10px;
margin-left: 40px;
}
input.charac {
position: relative;
top: 3px;
}
input[type=text] {
height: 25px;
background: transparent;
border-radius: 6px;
outline: none;
color: #51634b;
font-size: 12px;
border: 1px solid #51634b;
margin-left: 5px;
padding: 2px;
text-align: center;
}
input[type=text]:focus {
box-shadow: 0px 0px 4px #62745c;
}
input[type=radio] {
cursor: pointer;
}
body {
background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black;
}
label {
color: #51634b;
}
#message {
color: #51634b;
font-size: 15px;
}
.btn {
display: block;
width: 120px;
height: 30px;
background-color: transparent;
color: black;
border: 2px solid #51634b;
border-radius: 5px;
cursor: pointer;
color: #51634b;
font-size: 15px;
margin: 15px;
margin: 0 auto;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn:hover {
-webkit-animation: btn 0.5s 1;
-moz-animation: btn 0.5s 1;
-o-animation: btn 0.5s 1;
animation: btn 0.5s 1;
background-color: #51634b;
color: #000000;
}
input.btn:active {
padding: 0;
}
@-webkit-keyframes btn {
from {
background-color: transparent;
color: #51634b;
}
to {
background-color:#51634b;
color: #000000;
}
}
@-moz-keyframes btn {
from {
background-color: transparent;
color: #51634b;
}
to {
background-color:#51634b;
color: #000000;
}
}
@-o-keyframes btn {
from {
background-color: transparent;
color: #51634b;
}
to {
background-color:#51634b;
color: #000000;
}
}
@keyframes btn {
from {
background-color: transparent;
color: #51634b;
}
to {
background-color:#51634b;
color: #000000;
}
}