0
I am making a game board and when I try to replace the blocks with pictures, it returns me a block with the image and the identification string of that block. I intended to completely replace the 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>I wish that in houses where there is an image, just the image.