Есть ли способ избежать object.prototype.constructor при создании игры tic tac toe с javascript?

Question

Я создал игру с tic tac toe с JavaScript и взял чисто функциональный подход. Однако теперь я застреваю, потому что я не могу заставить игрока иметь возможность выбирать между x и o. Игроку автоматически присваивается x, но никогда не о. Я использую bootstrap, и у меня модальный, который появляется, когда пользователь приземляется на странице. Я должен выполнить пользовательскую историю, в которой пользователь может выбирать между x и o через модальные кнопки. Тогда противоположный символ, т. Е. О, будет находиться на доске tic tac, когда модаль отклоняется. Сейчас эта работа отлично работает. ОДНАКО, если пользователь должен выбрать 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, но никогда не о.

Как назначаются игроки? Это просто предназначено для локального воспроизведения в одном браузере? Когда мышь нажата, очередь игрока завершена, и тогда это очередь следующего игрока?

Есть ли способ сделать это возможным без создания объекта object.prototype.constructor?

я мог бы рекомендовать вам взглянуть на Kestrel («постоянной») комбинатор

const K = x => y => x 
 

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

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

с K, вы можете передать любое значение, и все последующие вызовы результирующей функции приведет к первоначальному значению. Если вы хотите связать любые другие данные с игроком, вы можете использовать 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

Я надеюсь, что я понял намерение вашего вопроса, и что информация, представленная здесь, является полезной в некотором роде. Если нет, сообщите мне. Я счастлив помочь.