我目前正在尝试为Javascript版本的noughts和crosses设置一些简单的视觉效果，但是我很难将图像添加到表单中。更具体地说，我试图将背景图像设置为板，然后用图像版本替换X和O.基本上我在尝试整理onclicks之前尝试实现更好的GUI。任何建议都将不胜感激。
感谢。
HTML
<body onload = "play_game()">
<form id="print_board">
<button id="position1"></button>
<button id="position2"></button>
<button id="position3"></button>
<br>
<button id="position4"></button>
<button id="position5"></button>
<button id="position6"></button><br>
<button id="position7"></button>
<button id="position8"></button>
<button id="position9"></button>
</form>
</body>
的JavaScript
var turn = 0 // A counter for the number of turns that have passed
var win = false // Tracking whether the main game loop should continue
var space = ' ' // The symbol we will use for an empty space on the board
var player1 = 'O' // The symbol we will use for player 1
var player2 = 'X' // The symbol we will use for player 2
// The board will be represented by a 2D list
// (a list of rows, with each row being itself a list)
board = []
board[0] = [space, space, space]
board[1] = [space, space, space]
board[2] = [space, space, space]
// Take a board variable called b and print out a nice text
// representation of the board.
// The board variable should be a 2D list with each element containing space, 'X' or 'O'
function printboard(b) {
var position1 = board[0][0]
var position2 = board[0][1]
var position3 = board[0][2]
var position4 = board[1][0]
var position5 = board[1][1]
var position6 = board[1][2]
var position7 = board[2][0]
var position8 = board[2][1]
var position9 = board[2][2]
document.getElementById("position1").innerHTML = position1;
document.getElementById("position2").innerHTML = position2;
document.getElementById("position3").innerHTML = position3;
document.getElementById("position4").innerHTML = position4;
document.getElementById("position5").innerHTML = position5;
document.getElementById("position6").innerHTML = position6;
document.getElementById("position7").innerHTML = position7;
document.getElementById("position8").innerHTML = position8;
document.getElementById("position9").innerHTML = position9;
}
// Take a player type (X or O) and play a single move on the board
// for that player.
// At the moment this just prompts the player for their move and
// then makes the move if possible. The move is lost if they try
// an already occupied position. At the moment no attempt it made
// to validate the input
function playMove(player) {
("Your turn player", player)
row = parseInt(prompt("enter row:"))
col = parseInt(prompt("enter column:"))
if (board[row][col] === player1 || board[row][col] === player2) {
("Already taken! Move skipped")
} else {
board[row][col] = player
}
}
// Take a board (2D list of space, 'X' or 'O') and a player marker
// Returns True if that player has won on the board, and False if they
// have not
function checkWin(b, player) {
// Check each row
for (var r = 0; r < b.length; r = r + 1) {
row = b[r];
if (row[0] === player && row[1] === player && row[2] === player) {
return true
}
}
// Check diagonals
if (b[0][0] === player && b[1][1] === player && b[2][2] === player) {
return true
}
// Todo: second diagonal
// Check columns
for (var col = 0; col < 3; col = col + 1) {
if (b[0][col] === player && b[1][col] === player && b[2][col] === player) {
return true
}
}
// If we have not already returned by now then there was no win position.
return false
}
function play_game() {
printboard(board)
while (win === false) {
playMove(player1)
printboard(board)
win = checkWin(board, player1)
if (!win) {
playMove(player2)
printboard(board)
win = checkWin(board, player2)
}
}
document.write("Game over")
}