Javascript 我需要创建一个颜色选择器，但我不知道如何将其添加到我的代码中
这里有html和javascript代码，我不知道如何在javascript代码中完成colorPicker函数。沿途有一些注释解释了大部分代码，请尝试展示或告诉我如何修复我的colorChange函数，以便用户可以选择他们想要的自定义颜色。Javascript 我需要创建一个颜色选择器，但我不知道如何将其添加到我的代码中,javascript,html,Javascript,Html,这里有html和javascript代码，我不知道如何在javascript代码中完成colorPicker函数。沿途有一些注释解释了大部分代码，请尝试展示或告诉我如何修复我的colorChange函数，以便用户可以选择他们想要的自定义颜色。 井字棋 表，th，td{ 边框：3倍纯黑； 边界塌陷：塌陷； } 表格中心{ 左边距：自动； 右边距：自动； } 身体{ 背景图片：url（“./Story1页面+BoardSetup/src/resources/bg.jpg”）； 背景大小：100%
井字棋
表，th，td{
边框：3倍纯黑；
边界塌陷：塌陷；
}
表格中心{
左边距：自动；
右边距：自动；
}
身体{
背景图片：url（“./Story1页面+BoardSetup/src/resources/bg.jpg”）；
背景大小：100%100%；
}
var startBtn=document.getElementById（“播放”）；
var p1=document.getElementById（“p1”）；
p1.addEventListener（“单击”，p1菜单）；
var p2=document.getElementById（“p2”）；
p2.addEventListener（“单击”，p2菜单）；
var backBtn=document.createElement（“按钮”）；
backBtn.innerHTML=“Back”；
var confirmBtn=document.createElement（“按钮”）；
confirbmtn.innerHTML=“确认”；
var gameBoard=[3]；
var gameInProgress=0//检查游戏是否已开始
var player1={用户名：“玩家1”，游戏令牌：“X”，颜色：“蓝色”}；
var player2={用户名：“玩家2”，游戏令牌：“O”，颜色：“红色”}；
var playerTurn=1；
var piecePlace=new sound（“./Story1页面+BoardSetup/src/resources/piecePlace.mp3”）；
var gameStartSound=新声音（“./Story1页+BoardSetup/src/resources/gameStart.wav”）；
var gameWinSound=new sound（“./Story1页面+BoardSetup/src/resources/gameWin.wav”）；
//创建一条简单的消息，向玩家显示相关信息
var message=document.getElementById（“消息”）；
message.innerHTML=“欢迎来到我们的井字游戏！”；
函数resetGame（）{
//重置游戏板
游戏板=[3]；
对于（变量i=0；i<3；i++）{
gameBoard[i]=新数组（3）；//在gameBoard的每个位置创建大小为3的数组
}
var gridCount=1；//用于网格ID
对于（变量i=0；i<3；i++）{
对于（var j=0；j<3；j++）{
var name=“b”+gridCount；//用于获取ID名称
游戏板[i][j]=“-”；
document.getElementById（name）.value=“-”；//重置并设置值
document.getElementById（name.style.background=“白色”；//重置背景颜色
document.getElementById（名称）.style.visibility=“可见”；
gridCount++；
}
}
gameInProgress=1；//现在可以放置棋子了
playerTurn=1；//从播放器1开始
message.innerHTML=player1.username+“现在可以开始游戏了”；
控制台日志（游戏板）；
}
函数updateGameBoard（）{
var count=1；//用于网格ID
对于（变量i=0；i<3；i++）{
对于（var j=0；j<3；j++）{
var name=“b”+count；//用于网格ID名称
gameBoard[i][j]=document.getElementById（名称）.value//获取游戏板中的值
计数++；
}
}
}
函数checkForWin（）{
让boardFull=true；
对于（变量i=0；i <head>
<title>TicTacToe</title>
<style>
table, th, td {
border: 3px solid black;
border-collapse: collapse;
}
table.center {
margin-left: auto;
margin-right: auto;
}
body {
background-image: url("./Story1-Page+BoardSetup/src/resources/bg.jpg");
background-size: 100% 100%;
}
</style>
</head>
<body>
<p align='center'><input id="play" type="button" value="Start a game" /></p>
<p align='center'><input id="p1" type="button" value="Player 1 Settings" /></p>
<p align='center'><input id="p2" type="button" value="Player 2 Settings" /></p>
<p id="message" align='center'></p>
<table style="width:700px" class = "center">
<tr>
<td style="text-align:center"> <input id="b1" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b2" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b3" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
</tr>
<tr>
<td style="text-align:center"> <input id="b4" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b5" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b6" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
</tr>
<tr>
<td style="text-align:center"> <input id="b7" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b8" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
<td style="text-align:center"> <input id="b9" type="button" style="width: 230px; font-size:200px; visibility: hidden" value="" width="700" height="700" onclick="setValue(this.id)" /></td>
</tr>
</table>
<script src="./Story1-Page+BoardSetup/src/tictactoe.js"></script>
</body>
</html>
var startBtn = document.getElementById("play");
var p1 = document.getElementById("p1");
p1.addEventListener("click", p1Menu);
var p2 = document.getElementById("p2");
p2.addEventListener("click", p2Menu);
var backBtn = document.createElement("Button");
backBtn.innerHTML = "Back";
var confirmBtn = document.createElement("Button");
confirmBtn.innerHTML = "Confirm";
var gameBoard = [3];
var gameInProgress = 0;//Checks if a game has started yet
var player1 = { username: "Player 1", gameToken: 'X', color: "blue" };
var player2 = { username: "Player 2", gameToken: 'O', color: "red" };
var playerTurn = 1;
var piecePlace = new sound("./Story1-Page+BoardSetup/src/resources/piecePlace.mp3");
var gameStartSound = new sound("./Story1-Page+BoardSetup/src/resources/gameStart.wav");
var gameWinSound = new sound("./Story1-Page+BoardSetup/src/resources/gameWin.wav");
//Creates a simple message to display relevant information to the players
var message = document.getElementById("message");
message.innerHTML = "Welcome to our Tic-tac-toe game!";
function resetGame() {
//Resets the game board
gameBoard = [3];
for (var i = 0; i < 3; i++) {
gameBoard[i] = new Array(3);//Creates array of size 3 in each spot of gameboard
}
var gridCount = 1;//Used for the grid IDs
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var name = "b" + gridCount;//Used to get the ID names
gameBoard[i][j] = "-";
document.getElementById(name).value = "-";//Resets and sets up value
document.getElementById(name).style.background = "white";//Resets bg color
document.getElementById(name).style.visibility = "visible";
gridCount++;
}
}
gameInProgress = 1;//Pieces can now be placed
playerTurn = 1;//Starts back at Player 1
message.innerHTML = player1.username + " may now begin the game";
console.log(gameBoard);
}
function updateGameBoard() {
var count = 1;//Used for the grid IDs
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var name = "b" + count;//Used for the grid ID names
gameBoard[i][j] = document.getElementById(name).value//Gets values in game board
count++;
}
}
}
function checkForWin() {
let boardFull = true;
for (var i = 0; i < gameBoard.length; i++) {
for (var j = 0; j < gameBoard[0].length; j++) {
if (gameBoard[i][j] == '-') {
boardFull = false;
break;
}
}
}
/*if(gameBoard[0][0] == gameBoard[0][1] && gameBoard[0][2] == gameBoard[0][1] && (gameBoard[0][0] != '-') ){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][0];
}
else if(gameBoard[1][0] == gameBoard[1][1] && gameBoard[1][2] == gameBoard[1][1] && (gameBoard[1][0] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[1][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[1][0];
}
else if(gameBoard[2][0] == gameBoard[2][1] && gameBoard[2][2] == gameBoard[2][1] && (gameBoard[2][0] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[2][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[2][0];
}
else if(gameBoard[0][0] == gameBoard[1][0] && gameBoard[2][0] == gameBoard[1][0] && (gameBoard[0][0] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][0];
}
else if(gameBoard[0][1] == gameBoard[1][1] && gameBoard[2][1] == gameBoard[1][1] && (gameBoard[0][1] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][1] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][1];
}
else if(gameBoard[0][2] == gameBoard[1][2] && gameBoard[2][2] == gameBoard[1][2] && (gameBoard[0][2] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][2] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][2];
}
else if(gameBoard[0][0] == gameBoard[1][1] && gameBoard[2][2] == gameBoard[1][1] && (gameBoard[0][0] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][0];
}
else if(gameBoard[0][2] == gameBoard[1][1] && gameBoard[2][0] == gameBoard[1][1] && (gameBoard[0][2] != '-')){
document.getElementById("play").value="Play Again";
alert("Player " + gameBoard[0][0] + " won!!");
gameInProgress = 0;
message.innerHTML="Game ended in a win for " + gameBoard[0][2];
}*/
for (var i = 0; i < 3; i++) {
if (gameBoard[i][0] == gameBoard[i][1] && gameBoard[i][0] == gameBoard[i][2] && gameBoard[i][1] == gameBoard[i][2] && gameBoard[i][0] != "-" && gameBoard[i][1] != "-" && gameBoard[i][2] != "-") {
gameWinSound.play();
if (gameBoard[i][0] == player1.gameToken) {
message.innerHTML = player1.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player1.username + " (" + player1.gameToken + ")" + " won!!");
}
else {
message.innerHTML = player2.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player2.username + " (" + player2.gameToken + ")" + " won!!");
}
gameInProgress = 0;
}
else if (gameBoard[0][i] == gameBoard[1][i] && gameBoard[0][i] == gameBoard[2][i] && gameBoard[1][i] == gameBoard[2][i] && gameBoard[0][i] != "-" && gameBoard[1][i] != "-" && gameBoard[2][i] != "-") {
gameWinSound.play();
if (gameBoard[0][i] == player1.gameToken) {
message.innerHTML = player1.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player1.username + " (" + player1.gameToken + ")" + " won!!");
}
else {
message.innerHTML = player2.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player2.username + " (" + player2.gameToken + ")" + " won!!");
}
gameInProgress = 0;
}
}
if (gameBoard[0][0] == gameBoard[1][1] && gameBoard[0][0] == gameBoard[2][2] && gameBoard[1][1] == gameBoard[2][2] && gameBoard[0][0] != "-" && gameBoard[1][1] != "-" && gameBoard[2][2] != "-") {
gameWinSound.play();
if (gameBoard[0][0] == player1.gameToken) {
message.innerHTML = player1.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player1.username + " (" + player1.gameToken + ")" + " won!!");
}
else {
message.innerHTML = player2.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player2.username + " (" + player2.gameToken + ")" + " won!!");
}
gameInProgress = 0;
}
else if (gameBoard[0][2] == gameBoard[1][1] && gameBoard[0][2] == gameBoard[2][0] && gameBoard[1][1] == gameBoard[2][0] && gameBoard[0][2] != "-" && gameBoard[1][1] != "-" && gameBoard[2][0] != "-") {
gameWinSound.play();
if (gameBoard[0][2] == player1.gameToken) {
message.innerHTML = player1.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player1.username + " (" + player1.gameToken + ")" + " won!!");
}
else {
message.innerHTML = player2.username + " Wins!";
document.getElementById("play").value = "New Game";
alert(player2.username + " (" + player2.gameToken + ")" + " won!!");
}
gameInProgress = 0;
}
else if (boardFull && gameInProgress == 1)//Needs the gameInProgress or else will say someone won, and a tie on full board
{
alert("Tie game");
message.innerHTML = "Game ended in a tie";
document.getElementById("play").value = "New Game";
gameInProgress = 0;
}
}
function setValue(id) {
if (document.getElementById(id).value == "-" && gameInProgress == 1) {
if (playerTurn == 1) {
document.getElementById(id).value = player1.gameToken;
document.getElementById(id).style.background = player1.color;
piecePlace.play();
playerTurn++;
message.innerHTML = player2.username + "'s turn";
}
else {
document.getElementById(id).value = player2.gameToken;
document.getElementById(id).style.background = player2.color;
piecePlace.play();
playerTurn--;
message.innerHTML = player1.username + "'s turn";
}
updateGameBoard();
checkForWin();
}
else if (gameInProgress == 1) {
if (playerTurn == 1) {
message.innerHTML = player1.username + "'s turn, selected spot is already occupied";
}
else {
message.innerHTML = player2.username + "'s turn, selected spot is already occupied";
}
}
}
startBtn.onclick = function startGame() {
document.getElementById("play").value = "Reset Game";
gameStartSound.play();
resetGame();//Ensure game board is set-up
}
/*
* Displays the settings menu for p1
*/
function p1Menu() {
message.innerHTML = player1.username + "'s piece: " + player1.gameToken.fontcolor(player1.color) + " ";
settingsButtons(1);
}
/*
* Displays the settings menu for p2
*/
function p2Menu() {
message.innerHTML = player2.username + "'s piece: " + player2.gameToken.fontcolor(player2.color) + " ";
settingsButtons(2);
}
/*
* Adds the settings buttons to either player's menu
*/
function settingsButtons(turn) {
var changeNameBtn = document.createElement("Button");
changeNameBtn.innerHTML = "Change Username";
changeNameBtn.onclick = function () { changeNameMenu(turn); }
var changePieceBtn = document.createElement("Button");
changePieceBtn.innerHTML = "Change Game Piece";
changePieceBtn.onclick = function () { changePieceMenu(turn); }
var changeColorBtn = document.createElement("Button");
changeColorBtn.innerHTML = "Change Piece Color";
message.appendChild(changeNameBtn);
message.appendChild(changePieceBtn);
message.appendChild(changeColorBtn);
}
function colorChange(turn){
message.innerHTML = "Pick your new Color and click Confirm";
message.prepend(backBtn);
var changeColorBtn = document.createElement("INPUT");
}
/*
* Handles the menu for when a player attempts to change their username
*/
function changeNameMenu(turn) {
message.innerHTML = " Enter your new Username in the box and click Confirm: ";
message.prepend(backBtn);
var changeNameText = document.createElement("INPUT");
changeNameText.setAttribute("type", "text");
message.appendChild(changeNameText);
message.appendChild(confirmBtn);
if (turn == 1) {
backBtn.onclick = function () { p1Menu(); }
changeNameText.defaultValue = player1.username;
confirmBtn.onclick = function () {
if (changeNameText.value == "SecretGame") {
window.location.replace("./Story1-Page+BoardSetup/src/resources/picross.html");
}
player1.username = changeNameText.value;
p1Menu();
}
}
else if (turn == 2) {
backBtn.onclick = function () { p2Menu(); }
changeNameText.defaultValue = player2.username;
confirmBtn.onclick = function () {
player2.username = changeNameText.value;
p2Menu();
}
}
}
/*
* Handles the menu for when a player attempts to change their game piece
*/
function changePieceMenu(turn) {
message.innerHTML = " Enter your new game token in the box and click Confirm: ";
message.prepend(backBtn);
var changePieceText = document.createElement("INPUT");
changePieceText.setAttribute("type", "text");
changePieceText.setAttribute("maxlength", "1");
changePieceText.setAttribute("size", "1");
message.appendChild(changePieceText);
message.appendChild(confirmBtn);
if (turn == 1) {
backBtn.onclick = function () { p1Menu(); }
changePieceText.defaultValue = player1.gameToken;
confirmBtn.onclick = function () {
if (changePieceText.value != player2.gameToken) {
player1.gameToken = changePieceText.value;
gridCount = 1; //Used for the grid IDs
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
//Checks if each tile isn't the other player's token or the default token
if (gameBoard[i][j] != player2.gameToken && gameBoard[i][j] != "-") {
//If it passes the above if, it must be the current player's old token
var name = "b" + gridCount;
//Set the old token to the new one
gameBoard[i][j] = player1.gameToken;
document.getElementById(name).value = player1.gameToken;
}
gridCount++;
}
}
p1Menu();
}
else {
alert("The token you entered matches that of the other player");
}
}
}
else if (turn == 2) {
backBtn.onclick = function () { p2Menu(); }
changePieceText.defaultValue = player2.gameToken;
confirmBtn.onclick = function () {
if (changePieceText.value != player1.gameToken) {
player2.gameToken = changePieceText.value;
gridCount = 1; //Used for the grid IDs
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
//Checks if each tile isn't the other player's token or the default token
if (gameBoard[i][j] != player1.gameToken && gameBoard[i][j] != "-") {
//If it passes the above if, it must be the current player's old token
var name = "b" + gridCount;
//Set the old token to the new one
gameBoard[i][j] = player2.gameToken;
document.getElementById(name).value = player2.gameToken;
}
gridCount++;
}
}
p2Menu();
}
else {
alert("The token you entered matches that of the other player");
}
}
}
}
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
}
}
//Exports information from this file for use in our test file
try {
module.exports.resetGame = resetGame;
}
catch (error) {
console.log('error with module.exports!');
}