井字游戏玩家的角色选择选项

character selction option for the players in tic-tac-toe

本文关键字：角色选择选项玩家游戏更新时间：2023-09-26

我做了一个井字游戏。为此，我必须为每个玩家制作一个角色选择模块。玩家必须在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'>

与其使用prompt，不如使用HTML <input>元素。

小提琴演示

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