javascript - 井字游戏中玩家的 Angular 色选择选项

Question

我做了一个井字棋游戏。为此我必须为每个玩家制作一个 Angular 色选择模块。玩家必须在x和o之间进行选择。如果第一个选择“o”，其他玩家就无法选择那。他必须选择'x'。但是包括html行，我写的代码几乎有50行，而且非常脆弱，我找不到任何其他方法来缩短这段代码。选择选项是游戏中的基本内容。任何有关此问题的专家解决方案将不胜感激

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'>

Answer 1

而不是使用 prompt ，最好使用 HTML <input>元素。

演示 Fiddle

HTML:

<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>

JavaScript:

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'
    }
});

CSS:

.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;
    }
}