javascriptでtic tac toeゲームを作成するときにobject.prototype.constructorを回避する方法はありますか？

Question

JavaScriptを使ってtic tac toeゲームを作成し、純粋に機能的なアプローチをとった。しかし、私は、プレイヤーにxとoの間で選択させることができないように見えないので、今は詰まっています。プレーヤーには自動的にxが割り当てられますが、決してoは割り当てられません。私はブートストラップを使用しています。ユーザーがページに着くと表示されるモーダルがあります。ユーザーがモーダル・ボタンを使ってxとoの間で選択できるユーザー・ストーリーを実現する必要があります。その後、反対の記号、すなわちoは、モーダルが解消されたときにtic tac toeボード上にあります。その部分は今すぐうまく動作します。しかし、ユーザがoを選択し、xがボード上に現れた場合、ユーザが正方形をクリックすると、別のxが現れる。私はxを表示したくありません。代わりにoが表示されます。だから、基本的にユーザーはボードと対戦している（またはあなたが好きならコンピュータと呼ぶことができる）が、モーダルでxまたはoボタンのどちらかを押してxまたはoとして再生するかどうかを選択することができる。 object.prototype.constructorを作成せずにこれを可能にする方法はありますか？私のgithubレポへのリンク：https://interglobalmedia.github.io/xoApp/ - 最初の死んだリンクのため申し訳ありません - 今は動作します！

function fetchBoard() { 
    var board = ['', '', '', '', '', '', '', '', '']; 
    $(".game-field").each(function (index) { 
     board[index] = $(this).html(); 
    }); 
    return board; 
} 

/* return 1 if all params 'x', -1 if o, and otherwise 0 */ 
function checkRow(a, b, c) { 
    if (a === 'x' && b === 'x' && c === 'x') { 
     return 1; 
    } else if (a === 'o' && b === 'o' && c === 'o') { 
     return -1; 
    } else { 
     return 0; 
    } 
} 
function checkWin(board) { 
    return checkRow(board[0], board[1], board[2]) // rows 
    + checkRow(board[3], board[4], board[5]) 
    + checkRow(board[6], board[7], board[8]) 
    + checkRow(board[0], board[3], board[6]) // columns 
    + checkRow(board[1], board[4], board[7]) 
    + checkRow(board[2], board[5], board[8]) 
    + checkRow(board[0], board[4], board[8]) // main diagonal rows 
    + checkRow(board[2], board[4], board[6]) // reverse diagonal row 
} 

function selectMove(board) { 
    var i, options; 
    options = []; 
    for (i = 0; i < 9; i += 1) { 
     if (board[i] === '') { 
      options.push(i); 
     } 
    } 
    if (options.length === 0) { 
     return -1; 
    } else { 
     return options[Math.floor(Math.random() * options.length)]; 
    } 
} 

function showGameOver(result) { 
    var target = $("#result"); 
    if (result > 0) { 
     target.css('color', '#db0000'); 
     target.html("you win!"); 
    } else if (result < 0) { 
     target.css('color', "#db0000"); 
     target.html("i win!"); 
    } else { 
     target.css('color', '#db0000'); 
     target.html("tie game."); 
    } 
} 

function resetGame() { 
    var target; 
    $(".game-field").html(''); 
    target = $("#result"); 
    target.css('color', '#db0000'); 
    target.html('click a square'); 
} 

function moveAt() { 
    var xCell, board, result, oLocation, oCell; 
    xCell = $(this); 

    if (xCell.html() !== '' || checkWin(fetchBoard()) !== 0) { 
     return; 
    } 
    xCell.css('color', '#db0000'); 
    xCell.html('x'); 
    board = fetchBoard(); 
    result = checkWin(board); 
    if (result !== 0) { 
     showGameOver(result); 
     return; 
    } 
    oLocation = selectMove(board); 
    if (oLocation < 0) { 
     showGameOver(); 
     return; 
    } 
    board[oLocation] = 'o'; 
    oCell = $('#cell' + oLocation); 
    oCell.css('color', '#fff'); 
    oCell.html('o'); 

    result = checkWin(board); 
    if (result !== 0) { 
     showGameOver(result); 
     return; 
    } 
} 

$(document).ready(function() { 
    $('#iconModal').modal('show'); 
    $('.game-field').click(moveAt); 
    $('#tictacreset').click(resetGame); 
    resetGame(); 
}); 

[1]: https://github.com/interglobalmedia/xoApp/tree/master/src/html 

Answer 1

私はプレイヤーがxとOの間で選択することができるようにすることができるように見えることはできませんので、今私はこだわっています。プレーヤーには自動的にxが割り当てられますが、決してoは割り当てられません。

プレーヤーの割り当て方法は？これは、同じブラウザでローカルに再生することを意味していますか？マウスをクリックすると、プレイヤーのターンが終了し、次のプレイヤーのターンになりますか？

object.prototype.constructorを作成せずにこれを行う方法はありますか？

私はKと

const K = x => y => x 
 

 
const p1 = K('x') 
 
const p2 = K('o') 
 

 
console.log(p1(), p2(), p1(), p2()) 
 
// x o x o

をコンビネータ、あなたが任意の値と結果の関数へのすべての後続の呼び出しを渡すことができますが、チョウゲンボウ（「定数」）を見てお勧めかもしれません初期値になります。他のデータをプレーヤーに関連付ける場合は、K(['x', otherData])を使用して、必要に応じてセレクタを構築します。

---

それとも、ラムダを使用してプレイヤーを定義することができ、私はここで二つのフィールドを選択しましたが、この方法で実装する方法多くの制限は事実上ありません。私はあなたの質問の意図を理解し、ここで提供される情報は、何らかの方法で有用であることを願っていますが^ _^

const player = (name,marker) => p => p(name,marker) 
 
const playerName = p => p((name,marker) => name) 
 
const playerMarker = p => p((name,marker) => marker) 
 

 
const p1 = player('Bob', 'x') 
 
const p2 = player('Alice', 'o') 
 

 
console.log(playerName(p1), playerMarker(p1)) 
 
// Bob x 
 

 
console.log(playerName(p2), playerMarker(p2)) 
 
// Alice o

を好きなだけ多くを追加します。そうでない場合は、私に知らせてください。私はさらに助けてくれることに満足しています。