Moving piece, adds new game board

Asked

Viewed 90 times

3

Good morning, I’m having a little problem drafting a board game. When I try to move a tile by returning a new frame(array of arrays), it is added to the page instead of replacing itself. I get two and three frames according to the moves I make.

My code is this::

"use strict"
function main() {

	var sGame = startGame(8, 4, 3)


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

	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)
	}
}


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[2][2] = '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;

}


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 false;
		}
		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 }
	}
}



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
}



function createGrid(tableOfGame) {
	var y = document.getElementById("gridOfGame");
	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);
		}
		y.appendChild(tablerow);
	}
}

function delRow() {
	let x = tableOfGame.length;
	for (let i = 0; i < x; i++) {
		function moveUp() {
			document.getElementById("myTable").deleteRow(i);
		}
	}
}



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>
    <table id="gridOfGame">

    </table>
    <button id='UP1'>UP</button>
	<button id = 'Left1'>Left</button><button id = 'Right1'>Right</button>
	<button id = "Down1">Down</button>
    <p id="game"></p>

  </header>
<h5><a href="Home.html">Início</a></h5>
  <!-- <script id ="js" src="game.js"></script>-->
  <script src="test.js"></script>
</body>

</html>

Pressing in any direction the 'P1' will change position, but will duplicate the frame.

How do I not do it and return me the altered painting only?

Thanks for the help.

javascript html array
  • 1

    I believe it’s doubling because with each interaction you make the call again of the method of creation. Soon I believe that an alternative is to "clean" the #gridOfGame before recreating the table, search about removing elements with javascript. That is, in your createGrid(tableOfGame) function do some way to clear <table id="gridOfGame">. If you use your browser element inspecter to better understand the flow. I hope I’ve helped.

1 answer

2


Empty the div that receives the table before doing the appendChild putting:

y.innerHTML = '';

After:

var y = document.getElementById("gridOfGame");

In function createGrid.

Browser other questions tagged javascript html array

You are not signed in. Login or sign up in order to post.