そこで、ユーザーが AI と対戦する三目並べのゲームを作成しています。プログラマーは自分が AI であると想定しています。
いくつかの配列があります:
myWinsAIが勝つことができる組み合わせが含まれています。
yourWins人間が勝つことができる組み合わせが含まれています。
freeWins両方に開かれた組み合わせが含まれています。
人間が手を動かすたびに、プログラムは を呼び出し、配列と検討中の正方形findWinningCombinations()を渡します。__winsこれは、AI と人間の動きの両方に使用することを目的としています。
それから、検討中のボタン removeOwnedSquares()もあります。__wins
ポイントは、長さが 1 の組み合わせが含まれている
場合、AI は次の手で勝つことができるということです。長さが 1 の組み合わせが含まれて myWinsいれば、人間が勝つことができます。yourWins
すべてが の配列に基づいていStringます。ただし、配列は途中で配列であることがわかります。
出力は次のとおりです。
Human Picked::: 5 Human's Array is:: 46,37,28,19
I Could Not Take 5. My Array Now Is:: 39
Human Picked::: 3 Human's Array is:: 7,28,19,12
あるはずだった["7","28","19","12"]
完全なコード
<!DOCTYPE html>
<html>
<title> 1Player </title>
<style>
#stage{
width: 400px;
height: 400px;
padding: 0px;
position: relative;
}
.square{
user-select : none;
-webkit-user-select: none;
-moz-user-select: none;
width: 64px;
height: 64px;
background-color: gray;
position: absolute;
}
</style>
<body>
<div id="stage">
</div>
</body>
<script>
const ROWS = 3;
const COLS = 3;
const GAP = 10;
const SIZE = 64;
var stage = document.querySelector("#stage");
var lotOfButtons = [];
var isUsed = [false,false,false,false,
false,false,false,false,false];
var myPositions = "";
var yourPositions = "";
var youPicked = "";
var iPicked = "";
var isX = true;
var isFirstMove = true;
var myWins = [];
var yourWins = [];
var freeWins = ["123","159","147",
"258",
"369","357",
"456",
"789"];
prepareBoard();
stage.addEventListener("click",clickHandler,false);
function prepareBoard(){ //Prepare the board on which the users will play.
for(var row = 0;row<ROWS;row++){ // Prepare the rows.
for(var col = 0;col < COLS;col++){ //Prepare the columns.
var square = document.createElement("button"); //Prepare the button which represents a square.
square.setAttribute("class","square"); //Make it a square 'officially'.
stage.appendChild(square); //Add the square to the play area..
lotOfButtons.push(square); //Keep a record of squares.
square.style.left = col * (SIZE+GAP) + "px"; //Properly set the horizontal spacing.
square.style.top = row * (SIZE+GAP) + "px"; //Properly set the vertical spacing.
}
}
}
function clickHandler(event){
var targetIndex = lotOfButtons.indexOf(event.target);
if(targetIndex === -1 || !isX || isUsed[targetIndex]){
return;
}
isX = false;
isUsed[targetIndex] = true;
event.target.style.backgroundImage = "url(../img/X.PNG)";
yourMove(targetIndex+1);
myMove();
}
function yourMove(buttonIndex){
yourWins = findWinningCombinations(yourWins,buttonIndex);
yourWins = removeOwnedSquares(yourWins,buttonIndex);
console.log("Human Picked::: " + buttonIndex + " Human's Array is:: " + yourWins);
if(myWins.length != 0){
myWins = removeCommonCombinations(myWins,buttonIndex);
}
}
function findWinningCombinations(combinationArray,targetIndex){
for(var i = (freeWins.length-1);i >= 0;i--){
if(freeWins[i].indexOf(targetIndex) !== -1){
combinationArray.push(freeWins[i]);
freeWins.splice(i,1);
}
}
return combinationArray;
}
function removeOwnedSquares(combinationArray,targetIndex){
for(var i = (combinationArray.length-1); i >= 0;i--){
if(combinationArray[i].indexOf(targetIndex) != -1){
combinationArray[i] = combinationArray[i].replace(targetIndex,"");
}
}
return combinationArray;
}
function myMove(){
if(isUsed[4] === false){ //TAKE 5
isFirstMove = false;
isX = true;
isUsed[4] = true;
var fifthSquare = lotOfButtons[4];
fifthSquare.style.backgroundImage = "url(../img/O.PNG)";
myWins = findWinningCombinations(myWins,5);
myWins = removeOwnedSquares(myWins,5);
yourWins = removeCommonCombinations(yourWins,5);
console.log("I Took 5. My Array Now Is:: " + myWins);
}else if(isUsed[4] === true && isFirstMove){//FIVE NOT AVAILABLE ?? TAKE A RANDOM SQUARE.
while(true){
var randomNumber = Math.round(Math.random()*8);
if(isUsed[randomNumber] === false){
isX = true;
isFirstMove = false;
isUsed[randomNumber] = true;
lotOfButtons[randomNumber].style.backgroundImage = "url(../img/O.PNG)";
myWins = findWinningCombinations(myWins,randomNumber+1);
myWins = removeOwnedSquares(myWins,randomNumber+1);
yourWins = removeCommonCombinations(yourWins,randomNumber+1);
break;
}
}
console.log("I Could Not Take 5. My Array Now Is:: " + myWins);
}else{//PLAY USING STRATEGY.
//TODO add logic here
}
}
function removeCommonCombinations(combinationArray,someIndex){
if(combinationArray.length === 0){
return;
}
for(var i = (combinationArray.length-1);i >= 0;i--){
if(combinationArray[i].indexOf(someIndex) != -1){
combinationArray.splice(i,1);
}
}
return combinationArray;
}
</script>
</html>
なぜこうなった？