0

Estou a fazer um tabuleiro de jogo e quando tento substituir os blocos por imagens, este devolve-me um bloco com a imagem e a string de identificação desse bloco. Eu pretendia substituir por completo a string.

"use strict"
function main() {

	var sGame = startGame(8, 4, 3)
	var pTurn = choosePlayer(pTurn)

	createGrid(sGame)
	//document.getElementById("game").innerHTML = tableOfGame; //passar para o html

	/*----Movimento dos jogadores-----*/
	if (playerTurn === 'P1') {
		var UP1 = document.getElementById("UP1");
		UP1.onclick = function () {
			sGame = moveUp(sGame, 'P1');
			createGrid(sGame)
		}

		var Down1 = document.getElementById("Down1");
		Down1.onclick = function () {
			sGame = moveDown(sGame, 'P1');
			createGrid(sGame)
		}

		var Left1 = document.getElementById("Left1");
		Left1.onclick = function () {
			sGame = moveLeft(sGame, 'P1');
			createGrid(sGame)
		}

		var Right1 = document.getElementById("Right1");
		Right1.onclick = function () {
			sGame = moveRight(sGame, 'P1');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P2') {
		var UP2 = document.getElementById("UP1");
		UP2.onclick = function () {
			sGame = moveUp(sGame, 'P2');
			createGrid(sGame)

		}

		var Down2 = document.getElementById("Down1");
		Down2.onclick = function () {
			sGame = moveDown(sGame, 'P2');
			createGrid(sGame)
		}

		var Left2 = document.getElementById("Left1");
		Left2.onclick = function () {
			sGame = moveLeft(sGame, 'P2');
			createGrid(sGame)
		}

		var Right2 = document.getElementById("Right1");
		Right2.onclick = function () {
			sGame = moveRight(sGame, 'P2');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P3') {
		var UP3 = document.getElementById("UP1");
		UP3.onclick = function () {
			sGame = moveUp(sGame, 'P3');
			createGrid(sGame)

		}

		var Down3 = document.getElementById("Down1");
		Down3.onclick = function () {
			sGame = moveDown(sGame, 'P3');
			createGrid(sGame)
		}

		var Left3 = document.getElementById("Left1");
		Left3.onclick = function () {
			sGame = moveLeft(sGame, 'P3');
			createGrid(sGame)
		}

		var Right3 = document.getElementById("Right1");
		Right3.onclick = function () {
			sGame = moveRight(sGame, 'P3');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P4') {
		var UP4 = document.getElementById("UP1");
		UP4.onclick = function () {
			sGame = moveUp(sGame, 'P4');
			createGrid(sGame)

		}

		var Down4 = document.getElementById("Down1");
		Down4.onclick = function () {
			sGame = moveDown(sGame, 'P4');
			createGrid(sGame)
		}

		var Left4 = document.getElementById("Left1");
		Left4.onclick = function () {
			sGame = moveLeft(sGame, 'P4');
			createGrid(sGame)
		}

		var Right4 = document.getElementById("Right1");
		Right4.onclick = function () {
			sGame = moveRight(sGame, 'P4');
			createGrid(sGame)
		}
	}


	/*-----Final do movimento dos jogadores----*/
	var playerTurn = 'P1';
	function choosePlayer() {
		if (playerTurn === 'P1') {
			playerTurn = 'P2';
		} else if (playerTurn === 'P2') {
			playerTurn = 'P3';
		} else if (playerTurn === 'P3') {
			playerTurn = 'P4';
		} else (playerTurn = 'P1')

	}

	//imagens = images()
}

/*-------Tabuleiro de Jogo------*/
function createTurtleBoard(boardSize) {
	let tabuleiro = [boardSize];
	for (let row = 0; row < boardSize; row++) {
		tabuleiro[row] = [boardSize];
		for (let column = 0; column < boardSize; column++) {
			tabuleiro[row][column] = 0;
			//playerPosition.addEventListener('click', movePlayer, false)
		}
	}
	return tabuleiro;
}

function jewelsInsert(tableOfGame) {
	let rowA = (tableOfGame.length) / 2;
	let rowB = (tableOfGame.length) / 2 - 1;
	let columnA = (tableOfGame.length) / 2;
	let columnB = (tableOfGame.length) / 2 - 1;
	tableOfGame[rowA][columnA] = 'J';
	tableOfGame[rowB][columnB] = 'J';
	tableOfGame[rowA][columnB] = 'J';
	tableOfGame[rowB][columnA] = 'J';
	return tableOfGame
}

/*
*
*
*
*/
function addPlayers(tableOfGame, numPlayers) {
	let position = tableOfGame.length - 1;
	switch (numPlayers) {
		case 1:
			tableOfGame[0][0] = 'P1';
			break;
		case 2:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			break;
		case 3:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			tableOfGame[position][position] = 'P3';
			break;
		default:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			tableOfGame[position][position] = 'P3';
			tableOfGame[0][position] = 'P4';
			break;
	}
	return tableOfGame
}


function wallInsert(tableOfGame, numWall) {
	let size = tableOfGame.length - 1;
	let count = 0;
	while (count < numWall) {
		let column = Math.floor((Math.random() * size))
		let row = Math.floor((Math.random() * size))
		if (tableOfGame[row][column] === 0) {
			tableOfGame[row][column] = 'W'
			count++
		}
	}
	return tableOfGame
}


function startGame(boardSize, numPlayers, numWall) {
	let board = createTurtleBoard(boardSize);
	board = jewelsInsert(board);
	board = addPlayers(board, numPlayers);
	board = wallInsert(board, numWall);

	return board;

}
/*--------Fim do tabuleiro-------*/
/*--------Posição do Jogador-------- */
function playerFinder(tableOfGame, player) {
	let len = tableOfGame.length;
	for (let row = 0; row <= len; row++) {
		for (let column = 0; column <= len; column++) {
			if (tableOfGame[row][column] == player) {
				return [row, column];
			}
		}
	}
}

function isItAllowed(tableOfGame, player, tag) {
	let pl = playerFinder(tableOfGame, player)
	let row = pl[0];
	let column = pl[1];

	if (tag = "mUp") {
		if (row == 0 || tableOfGame[row - 1][column] == "p1" || tableOfGame[row - 1][column] == "p2" || tableOfGame[row - 1][column] == "p3" || tableOfGame[row - 1][column] == "p4" || tableOfGame[row - 1][column] == "w") {
			return true;
		}
		else { return true }
	}

	else if (tag = "mDw") {
		if (row == tableOfGame.length - 1 || tableOfGame[row + 1][column] == "p1" || tableOfGame[row + 1][column] == "p2" || tableOfGame[row + 1][column] == "p3" || tableOfGame[row + 1][column] == "p4" || tableOfGame[row + 1][column] == "w") {
			return false;
		}
		else { return true }
	}

	else if (tag = "mLf") {
		if (column == 0 || tableOfGame[row][column - 1] == "p1" || tableOfGame[row][column - 1] == "p2" || tableOfGame[row][column - 1] == "p3" || tableOfGame[row][column - 1] == "p4" || tableOfGame[row][column - 1] == "w") {
			return false;
		}
		else { return true }
	}

	else if (tag = "mRt") {
		if (column == tableOfGame.length - 1 || tableOfGame[row][column + 1] == "p1" || tableOfGame[row][column + 1] == "p2" || tableOfGame[row][column + 1] == "p3" || tableOfGame[row][column + 1] == "p4" || tableOfGame[row][column + 1] == "w") {
			return false;
		}
		else { return true }
	}
}

/*--------Movimento do Jogador--------*/

function moveUp(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mUp")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row - 1][column] = player;

	}
	return table
}

function moveDown(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mDw")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row + 1][column] = player;

	}
	return table
}

function moveLeft(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mLf")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row][column - 1] = player;

	}
	return table
}

function moveRight(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mRt")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row][column + 1] = player;

	}
	return table
}

/*--------Fim do movimento----------*/

function createGrid(tableOfGame) {
	var table = document.getElementById("gridOfGame");
	table.innerHTML = '';
	var n = tableOfGame.length;
	for (let i = 0; i < n; i++) {
		var tablerow = document.createElement("tr");
		var tableData;
		table.appendChild(tablerow)
		for (let j = 0; j < n; j++) {
			tableData = document.createElement("td");
			tableData.innerHTML = (tableOfGame[i][j]);
			tablerow.appendChild(tableData);
			if(tableOfGame[i][j] ==='P1'){
				var gridImage = document.createElement('img');
				gridImage.src = "./p1.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P2'){
				gridImage = document.createElement('img');
				gridImage.src = "./p2.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P3'){
				gridImage = document.createElement('img');
				gridImage.src = "./Don.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P4'){
				gridImage = document.createElement('img');
				gridImage.src = "./Mike.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='W'){
				gridImage = document.createElement('img');
				gridImage.src = "./place.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='J'){
				gridImage = document.createElement('img');
				gridImage.src = "./joia_1.png"
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='0'){
				gridImage = document.createElement('img');
				gridImage.src = "./place.png"
				tableData.appendChild(gridImage)}

			
			tablerow.appendChild(tableData)
		}
		//y.appendChild(tablerow);
	}

	return;
}

var picList = ["./5c0e83e719108403932c84cd.png", "./frog.png", "./wall.png", "./turtel_6.png"]

/*
function images(tableOfGame) {
	var y = document.getElementById("gridOfGame");
	y.innerHTML = '';
	var n = tableOfGame.length;
	for (let i = 0; i < n; i++) {
		var tablerow = document.createElement("tr");
		var tableData;
		for (let j = 0; j < n; j++) {
			tableData = document.createElement("td");
			tableData.innerHTML = (tableOfGame[i][j]);
			tablerow.appendChild(tableData);
			tableData = document.createElement("img")
			tableData.src = "./wall.png"
			tablerow.appendChild(tableData)
		}
		y.appendChild(tablerow);
	}
}*/
document.addEventListener("DOMContentLoaded", function (event) { main() });
<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="utf-8">
  <!--<link rel="stylesheet" type="text/CSS" href="style.css">-->

  <link href="style.css" rel="stylesheet">
  <link href="position.css" rel="stylesheet">
  <title>Play</title>
</head>

<body>
  <img class="Home" src="RT-Banner-Cópia.jpg" width="100%" height="100%">
  <audio autoplay>

    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <h2 class="Home1 Login"><a href="Login.html">Login</a></h2>
  <h2 class="Home2"><a href="Regras.html">Como Jogar</a></h2>
  <h2 class="Home3"><a href="Pontuações.html">Classificação</a></h2>
  <h2 class="Home4"><a href="Historia.html">História</a></h2>
  <h2 class="Home5 Login"><a href="Registo.html">Registar</a></h2>
  <header>
    <h1>Game</h1>
    <select name="sPlayer">
      <option value="P1" selected>P1</option>
      <option value="P2">P2</option>
      <option value="P3">P3</option>
      <option value="P4">P4</option>
    </select>
    <table id="gridOfGame">

    </table>

    <p id="game"></p>

  </header>
  <section>
    <button id='UP1'>Up</button>
    <button id='Left1'>Left</button>
    <button id='Right1'>Right</button>
    <button id="Down1">Down</button>
    <h5><a href="Home.html">Início</a></h5>
    <!-- <script id ="js" src="game.js"></script>-->
    <script src="test.js"></script>
</body>

</html>

Queria que nas casas em que existe uma imagem, ficasse só mesmo a imagem.

1 Resposta 1

1

Esvazie o elemento antes de fazer o append com a imagem. Assim o elemento (td) estará vazio e após o append só estará a imagem.

Antes de cada tableData.appendChild(gridImage), coloque tableData.innerHTML = '';

"use strict"
function main() {

	var sGame = startGame(8, 4, 3)
	var pTurn = choosePlayer(pTurn)

	createGrid(sGame)
	//document.getElementById("game").innerHTML = tableOfGame; //passar para o html

	/*----Movimento dos jogadores-----*/
	if (playerTurn === 'P1') {
		var UP1 = document.getElementById("UP1");
		UP1.onclick = function () {
			sGame = moveUp(sGame, 'P1');
			createGrid(sGame)
		}

		var Down1 = document.getElementById("Down1");
		Down1.onclick = function () {
			sGame = moveDown(sGame, 'P1');
			createGrid(sGame)
		}

		var Left1 = document.getElementById("Left1");
		Left1.onclick = function () {
			sGame = moveLeft(sGame, 'P1');
			createGrid(sGame)
		}

		var Right1 = document.getElementById("Right1");
		Right1.onclick = function () {
			sGame = moveRight(sGame, 'P1');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P2') {
		var UP2 = document.getElementById("UP1");
		UP2.onclick = function () {
			sGame = moveUp(sGame, 'P2');
			createGrid(sGame)

		}

		var Down2 = document.getElementById("Down1");
		Down2.onclick = function () {
			sGame = moveDown(sGame, 'P2');
			createGrid(sGame)
		}

		var Left2 = document.getElementById("Left1");
		Left2.onclick = function () {
			sGame = moveLeft(sGame, 'P2');
			createGrid(sGame)
		}

		var Right2 = document.getElementById("Right1");
		Right2.onclick = function () {
			sGame = moveRight(sGame, 'P2');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P3') {
		var UP3 = document.getElementById("UP1");
		UP3.onclick = function () {
			sGame = moveUp(sGame, 'P3');
			createGrid(sGame)

		}

		var Down3 = document.getElementById("Down1");
		Down3.onclick = function () {
			sGame = moveDown(sGame, 'P3');
			createGrid(sGame)
		}

		var Left3 = document.getElementById("Left1");
		Left3.onclick = function () {
			sGame = moveLeft(sGame, 'P3');
			createGrid(sGame)
		}

		var Right3 = document.getElementById("Right1");
		Right3.onclick = function () {
			sGame = moveRight(sGame, 'P3');
			createGrid(sGame)
		}
	}

	if (playerTurn === 'P4') {
		var UP4 = document.getElementById("UP1");
		UP4.onclick = function () {
			sGame = moveUp(sGame, 'P4');
			createGrid(sGame)

		}

		var Down4 = document.getElementById("Down1");
		Down4.onclick = function () {
			sGame = moveDown(sGame, 'P4');
			createGrid(sGame)
		}

		var Left4 = document.getElementById("Left1");
		Left4.onclick = function () {
			sGame = moveLeft(sGame, 'P4');
			createGrid(sGame)
		}

		var Right4 = document.getElementById("Right1");
		Right4.onclick = function () {
			sGame = moveRight(sGame, 'P4');
			createGrid(sGame)
		}
	}


	/*-----Final do movimento dos jogadores----*/
	var playerTurn = 'P1';
	function choosePlayer() {
		if (playerTurn === 'P1') {
			playerTurn = 'P2';
		} else if (playerTurn === 'P2') {
			playerTurn = 'P3';
		} else if (playerTurn === 'P3') {
			playerTurn = 'P4';
		} else (playerTurn = 'P1')

	}

	//imagens = images()
}

/*-------Tabuleiro de Jogo------*/
function createTurtleBoard(boardSize) {
	let tabuleiro = [boardSize];
	for (let row = 0; row < boardSize; row++) {
		tabuleiro[row] = [boardSize];
		for (let column = 0; column < boardSize; column++) {
			tabuleiro[row][column] = 0;
			//playerPosition.addEventListener('click', movePlayer, false)
		}
	}
	return tabuleiro;
}

function jewelsInsert(tableOfGame) {
	let rowA = (tableOfGame.length) / 2;
	let rowB = (tableOfGame.length) / 2 - 1;
	let columnA = (tableOfGame.length) / 2;
	let columnB = (tableOfGame.length) / 2 - 1;
	tableOfGame[rowA][columnA] = 'J';
	tableOfGame[rowB][columnB] = 'J';
	tableOfGame[rowA][columnB] = 'J';
	tableOfGame[rowB][columnA] = 'J';
	return tableOfGame
}

/*
*
*
*
*/
function addPlayers(tableOfGame, numPlayers) {
	let position = tableOfGame.length - 1;
	switch (numPlayers) {
		case 1:
			tableOfGame[0][0] = 'P1';
			break;
		case 2:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			break;
		case 3:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			tableOfGame[position][position] = 'P3';
			break;
		default:
			tableOfGame[0][0] = 'P1';
			tableOfGame[position][0] = 'P2';
			tableOfGame[position][position] = 'P3';
			tableOfGame[0][position] = 'P4';
			break;
	}
	return tableOfGame
}


function wallInsert(tableOfGame, numWall) {
	let size = tableOfGame.length - 1;
	let count = 0;
	while (count < numWall) {
		let column = Math.floor((Math.random() * size))
		let row = Math.floor((Math.random() * size))
		if (tableOfGame[row][column] === 0) {
			tableOfGame[row][column] = 'W'
			count++
		}
	}
	return tableOfGame
}


function startGame(boardSize, numPlayers, numWall) {
	let board = createTurtleBoard(boardSize);
	board = jewelsInsert(board);
	board = addPlayers(board, numPlayers);
	board = wallInsert(board, numWall);

	return board;

}
/*--------Fim do tabuleiro-------*/
/*--------Posição do Jogador-------- */
function playerFinder(tableOfGame, player) {
	let len = tableOfGame.length;
	for (let row = 0; row <= len; row++) {
		for (let column = 0; column <= len; column++) {
			if (tableOfGame[row][column] == player) {
				return [row, column];
			}
		}
	}
}

function isItAllowed(tableOfGame, player, tag) {
	let pl = playerFinder(tableOfGame, player)
	let row = pl[0];
	let column = pl[1];

	if (tag = "mUp") {
		if (row == 0 || tableOfGame[row - 1][column] == "p1" || tableOfGame[row - 1][column] == "p2" || tableOfGame[row - 1][column] == "p3" || tableOfGame[row - 1][column] == "p4" || tableOfGame[row - 1][column] == "w") {
			return true;
		}
		else { return true }
	}

	else if (tag = "mDw") {
		if (row == tableOfGame.length - 1 || tableOfGame[row + 1][column] == "p1" || tableOfGame[row + 1][column] == "p2" || tableOfGame[row + 1][column] == "p3" || tableOfGame[row + 1][column] == "p4" || tableOfGame[row + 1][column] == "w") {
			return false;
		}
		else { return true }
	}

	else if (tag = "mLf") {
		if (column == 0 || tableOfGame[row][column - 1] == "p1" || tableOfGame[row][column - 1] == "p2" || tableOfGame[row][column - 1] == "p3" || tableOfGame[row][column - 1] == "p4" || tableOfGame[row][column - 1] == "w") {
			return false;
		}
		else { return true }
	}

	else if (tag = "mRt") {
		if (column == tableOfGame.length - 1 || tableOfGame[row][column + 1] == "p1" || tableOfGame[row][column + 1] == "p2" || tableOfGame[row][column + 1] == "p3" || tableOfGame[row][column + 1] == "p4" || tableOfGame[row][column + 1] == "w") {
			return false;
		}
		else { return true }
	}
}

/*--------Movimento do Jogador--------*/

function moveUp(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mUp")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row - 1][column] = player;

	}
	return table
}

function moveDown(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mDw")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row + 1][column] = player;

	}
	return table
}

function moveLeft(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mLf")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row][column - 1] = player;

	}
	return table
}

function moveRight(tableOfGame, player) {
	var table = tableOfGame;
	let pl = playerFinder(table, player)
	let row = pl[0];
	let column = pl[1];
	console.log("pos" + table[row][column])
	let control = isItAllowed(table, player, "mRt")
	console.log("control" + control)
	if (control == true) {
		var n = table.length
		table[row][column] = 0;
		table[row][column + 1] = player;

	}
	return table
}

/*--------Fim do movimento----------*/

function createGrid(tableOfGame) {
	var table = document.getElementById("gridOfGame");
	table.innerHTML = '';
	var n = tableOfGame.length;
	for (let i = 0; i < n; i++) {
		var tablerow = document.createElement("tr");
		var tableData;
		table.appendChild(tablerow)
		for (let j = 0; j < n; j++) {
			tableData = document.createElement("td");
			tableData.innerHTML = (tableOfGame[i][j]);
			tablerow.appendChild(tableData);
			if(tableOfGame[i][j] ==='P1'){
				var gridImage = document.createElement('img');
				gridImage.src = "./p1.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P2'){
				gridImage = document.createElement('img');
				gridImage.src = "./p2.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P3'){
				gridImage = document.createElement('img');
				gridImage.src = "./Don.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='P4'){
				gridImage = document.createElement('img');
				gridImage.src = "./Mike.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='W'){
				gridImage = document.createElement('img');
				gridImage.src = "./place.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='J'){
				gridImage = document.createElement('img');
				gridImage.src = "./joia_1.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}
			else if(tableOfGame[i][j]==='0'){
				gridImage = document.createElement('img');
				gridImage.src = "./place.png"
        tableData.innerHTML = '';
				tableData.appendChild(gridImage)}

			
			tablerow.appendChild(tableData)
		}
		//y.appendChild(tablerow);
	}

	return;
}

var picList = ["./5c0e83e719108403932c84cd.png", "./frog.png", "./wall.png", "./turtel_6.png"]

/*
function images(tableOfGame) {
	var y = document.getElementById("gridOfGame");
	y.innerHTML = '';
	var n = tableOfGame.length;
	for (let i = 0; i < n; i++) {
		var tablerow = document.createElement("tr");
		var tableData;
		for (let j = 0; j < n; j++) {
			tableData = document.createElement("td");
			tableData.innerHTML = (tableOfGame[i][j]);
			tablerow.appendChild(tableData);
			tableData = document.createElement("img")
			tableData.src = "./wall.png"
			tablerow.appendChild(tableData)
		}
		y.appendChild(tablerow);
	}
}*/
document.addEventListener("DOMContentLoaded", function (event) { main() });
<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="utf-8">
  <!--<link rel="stylesheet" type="text/CSS" href="style.css">-->

  <link href="style.css" rel="stylesheet">
  <link href="position.css" rel="stylesheet">
  <title>Play</title>
</head>

<body>
  <img class="Home" src="RT-Banner-Cópia.jpg" width="100%" height="100%">
  <audio autoplay>

    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <h2 class="Home1 Login"><a href="Login.html">Login</a></h2>
  <h2 class="Home2"><a href="Regras.html">Como Jogar</a></h2>
  <h2 class="Home3"><a href="Pontuações.html">Classificação</a></h2>
  <h2 class="Home4"><a href="Historia.html">História</a></h2>
  <h2 class="Home5 Login"><a href="Registo.html">Registar</a></h2>
  <header>
    <h1>Game</h1>
    <select name="sPlayer">
      <option value="P1" selected>P1</option>
      <option value="P2">P2</option>
      <option value="P3">P3</option>
      <option value="P4">P4</option>
    </select>
    <table id="gridOfGame">

    </table>

    <p id="game"></p>

  </header>
  <section>
    <button id='UP1'>Up</button>
    <button id='Left1'>Left</button>
    <button id='Right1'>Right</button>
    <button id="Down1">Down</button>
    <h5><a href="Home.html">Início</a></h5>
    <!-- <script id ="js" src="game.js"></script>-->
    <script src="test.js"></script>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .