Translated with Google Translator
The code below is a simple block pushing game code I created.
We want to save the game board for calculation in the board variable and convert the board after calculation into an emoji according to each value in the show_board variable and send it to HTML to print.
However, a problem arises in the r() function. There’s no error, but it doesn’t work as expected.
The purpose of the r() function I designed is to copy the current state of the board to the show_board variable, leave the original board (i.e. the board variable) as is, and convert the show_board variable into an emoji according to the value and output it.
However, when you actually run it, the board variable is changed to an emoji even though there is no code anywhere in the code that directly changes the board variable to an emoji. (The show_board variable is also changed to emoji.)
What I wanted was to change only the show_board variable, but since the board variable, which is not even touched, is changed, calculations cannot be performed from the next time. I tried for 2 hours, but there was no error and I couldn’t find a solution. Please help.
This is my full code.
<html>
<head>
</head>
<body>
<table id="board" style="word-break:break-all; width: 140px;"></table>
<script>
// 0:box 1:block 2:air 3:goal(air) 4:goal(box) 5:player(air) 6:player(goal)
// 0:● 1:■ 2:□ 3:○ 4:◎ 5,6:★
// box can go: 2,3
// player can go: 2,3 / 0,4(push)
var board = [[1,1,1,1,1,1,1,1],[1,1,1,2,2,1,1,1],[1,1,1,2,3,2,1,1],[1,3,0,0,3,3,2,1],[1,2,1,2,2,2,2,1],[1,2,2,0,1,0,1,1],[1,1,1,2,5,2,1,1],[1,1,1,1,1,1,1,1]]
var show_board = []
var player = [6,4,5] //7 line, fifth, player(air)
var move = 0
document.getElementById("board").innerHTML = r()
document.addEventListener('keyup', function(event) {
if (event.keyCode === 37) {
left()
}
})
document.addEventListener('keyup', function(event) {
if (event.keyCode === 38) {
up()
}
})
document.addEventListener('keyup', function(event) {
if (event.keyCode === 39) {
right()
}
})
document.addEventListener('keyup', function(event) {
if (event.keyCode === 40) {
down()
}
})
function r() {// 0:● 1:■ 2:□ 3:○ 4:◎ 5,6:★
show_board = board
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
switch (show_board[i][j]) {
case 0:
show_board[i][j] = "●"
break
case 1:
show_board[i][j] = "■"
break
case 2:
show_board[i][j] = "□"
break
case 3:
show_board[i][j] = "○"
break
case 4:
show_board[i][j] = "◎"
break
case 5:
show_board[i][j] = "★"
break
case 6:
show_board[i][j] = "★"
break
}
}
}
return String(show_board).replace(/,/g, "")
}
function up() {
if (board[player[0] - 1][player[1]] == 0) {
if (board[player[0] - 2][player[1]] == 2) { //Check where the box will move
board[player[0] - 2][player[1]] = 0 //Placement of space where the box moves
board[player[0] - 1][player[1]] = 2 //Restore previous value of box
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0] - 2][player[1]] == 3) {
board[player[0] - 2][player[1]] = 4
board[player[0] - 1][player[1]] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
if (board[player[0] - 1][player[1]] == 1) {
return
}
if (board[player[0] - 1][player[1]] == 2) {
board[player[0] - 1][player[1]] = 5 //Placement of space moved by player
board[player[0]][player[1]] = player[2] - 3 // Restore pre-flare values
player = [player[0] - 1,player[1],5] // Change player position variable
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0] - 1][player[1]] == 3) {
board[player[0] - 1][player[1]] = 6
board[player[0]][player[1]] = player[2] - 3
player = [player[0] - 1,player[1],6]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0] - 1][player[1]] == 4) {
if (board[player[0] - 2][player[1]] == 2) {
board[player[0] - 2][player[1]] = 0
board[player[0] - 1][player[1]] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0] - 2][player[1]] == 3) {
board[player[0] - 2][player[1]] = 4
board[player[0] - 1][player[1]] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
}
function down() {
if (board[player[0] + 1][player[1]] == 0) {
if (board[player[0] + 2][player[1]] == 2) {
board[player[0] + 2][player[1]] = 0
board[player[0] + 1][player[1]] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0] + 2][player[1]] == 3) {
board[player[0] + 2][player[1]] = 4
board[player[0] + 1][player[1]] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
if (board[player[0] + 1][player[1]] == 1) {
return
}
if (board[player[0] + 1][player[1]] == 2) {
board[player[0] + 1][player[1]] = 5 //플레이어 움직인 칸 배치
board[player[0]][player[1]] = player[2 - 3
player = [player[0] + 1,player[1],5]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0] + 1][player[1]] == 3) {
board[player[0] + 1][player[1]] = 6
board[player[0]][player[1]] = player[2] - 3
player = [player[0] + 1,player[1],6]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0] + 1][player[1]] == 4) {
if (board[player[0] + 2][player[1]] == 2) {
board[player[0] + 2][player[1]] = 0
board[player[0] + 1][player[1]] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0] + 2][player[1]] == 3) {
board[player[0] + 2][player[1]] = 4
board[player[0] + 1][player[1]] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
}
function left() {
if (board[player[0]][player[1] - 1] == 0) {
if (board[player[0]][player[1] - 2] == 2) {
board[player[0]][player[1] - 2] = 0
board[player[0]][player[1] - 1] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0]][player[1] - 2] == 3) {
board[player[0]][player[1] - 2] = 4
board[player[0]][player[1] - 1] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
if (board[player[0]][player[1] - 1] == 1) {
return
}
if (board[player[0]][player[1] - 1] == 2) {
board[player[0]][player[1] - 1] = 5
board[player[0]][player[1]] = player[2] - 3
player = [player[0],player[1] - 1,5]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0]][player[1] - 1] == 3) {
board[player[0]][player[1] - 1] = 6
board[player[0]][player[1]] = player[2] - 3
player = [player[0],player[1] - 1,6]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0]][player[1] - 1] == 4) {
if (board[player[0]][player[1] - 2] == 2) {
board[player[0]][player[1] - 2] = 0
board[player[0]][player[1] - 1] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0]][player[1] - 2] == 3) {
board[player[0]][player[1] - 2] = 4
board[player[0]][player[1] - 1] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
}
function right() {
if (board[player[0]][player[1] + 1] == 0) {
if (board[player[0]][player[1] + 2] == 2) {
board[player[0]][player[1] + 2] = 0
board[player[0]][player[1] + 1] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0]][player[1] + 2] == 3) {
board[player[0]][player[1] + 2] = 4
board[player[0]][player[1] + 1] = 2
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
if (board[player[0]][player[1] + 1] == 1) {
return
}
if (board[player[0]][player[1] + 1] == 2) {
board[player[0]][player[1] + 1] = 5
board[player[0]][player[1]] = player[2] - 3
player = [player[0],player[1] + 1,5]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0]][player[1] + 1] == 3) {
board[player[0]][player[1] + 1] = 6
board[player[0]][player[1]] = player[2] - 3
player = [player[0],player[1] + 1,6]
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}
if (board[player[0]][player[1] + 1] == 4) {
if (board[player[0]][player[1] + 2] == 2) {
board[player[0]][player[1] + 2] = 0
board[player[0]][player[1] + 1] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
if (board[player[0]][player[1] + 2] == 3) {
board[player[0]][player[1] + 2] = 4
board[player[0]][player[1] + 1] = 3
move++
document.getElementById("board").innerHTML = r()
console.log(board)
return
}else {
return
}
}
}
}
</script>
</body>
</html>
New contributor
user24893032 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.