Well, the code here is from below where:
<html>
<head>
<style>
#main {
border:#333;
border-width:2px;
border-style:solid;
}
</style>
<script type="text/javascript">
var map = Array([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]);
var objectMap = Array([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
var objectDict = Array("casa1.png","arvore.png");
var tileDict = Array("water.png","land.png","swamp.png");
var charDict = Array("mario.png");
var charImg = new Array();
var tileImg = new Array();
var objectImg = new Array();
var loaded = 0;
var loadTimer;
var tileH = 25;
var tileW = 50;
var ymouse;
var xmouse;
var mapX = 550;
var mapY = -100;
var playerX = 10;
var playerY = 10;
var newplayerX = 15;
var newplayerY = 10;
var jogadores;
var xpos;
var ypos;
var x;
function loadImg(){
for(var i=0;i<tileDict.length;i++){
tileImg[i] = new Image();
tileImg[i].src = tileDict[i];
tileImg[i].onload = function(){
loaded++;
}
}
for(var i=0;i<charDict.length;i++){
charImg[i] = new Image();
charImg[i].src = charDict[i];
charImg[i].onload = function(){
loaded++;
}
}
for(var i=0;i<objectDict.length;i++){
objectImg[i] = new Image();
objectImg[i].src = objectDict[i];
objectImg[i].onload = function(){
loaded++;
}
}
}
function loadAll(){
if(loaded == tileDict.length + charDict.length + objectDict.length){
clearInterval(loadTimer);
loadTimer = setInterval(gameUpdate,1000);
}
}
function gameUpdate(){
ctx.clearRect(0,0,350,230)
drawMap();
}
function mouseCheck(e){
var x = e.pageX;
var y = e.pageY;
ymouse=(2*(y-canvas.offsetTop-mapY)-x+canvas.offsetLeft+mapX)/2;
xmouse=x+ymouse-mapX-25-canvas.offsetLeft
ymouse=Math.round(ymouse/25);
xmouse=Math.round(xmouse/25);
document.title = "tileY:" + ymouse + " | tileX:" + xmouse;
document.getElementById("vy").innerHTML = newplayerX;
document.getElementById("vx").innerHTML = newplayerY;
}
function drawMap(){
for(i=0;i<map.length;i++){
for(j=0;j<map[i].length;j++){
var drawTile = map[i][j];
var jogador = map[i][j];
var drawObj = objectMap[i][j];
var xpos = (i-j)*tileH + mapX;
var ypos = (i+j)*tileH/2+ mapY;
ctx.drawImage(tileImg[drawTile],xpos,ypos);
if(drawObj){
ctx.drawImage(objectImg[drawObj-1],xpos,ypos- (objectImg[drawObj-1].height/2));
}
if(i == xmouse && j == ymouse){
ctx.fillStyle = 'rgba(255, 255, 120, 0.7)';
ctx.beginPath();
ctx.moveTo(xpos, ypos+12.5);
ctx.lineTo(xpos+25, ypos);
ctx.lineTo(xpos+50, ypos+12.5);
ctx.lineTo(xpos+25, ypos+25);
ctx.fill();
}
}
}
};
function mouseClick(e)
{
var xpos = (newplayerX+newplayerY)*this.tileH/2 + mapX;
var ypos = (newplayerX+newplayerY)*this.tileH/2+ mapY;
ctx.drawImage(charImg[0],xpos,ypos);
newX = playerX; // local copies
newY = playerY;
if(xmouse > newX) newX++;
if(ymouse > newY) newY++;
if(xmouse < newX) newX--;
if(ymouse < newY) newY--;
if(objectMap[newX] && objectMap[newX][newY] !== 1 && map[newX] && map[newX][newY] !== undefined)
{
playerX = newX;
playerY = newY;
}
map[xmouse][ymouse]=2;
};
function init(){
canvas = document.getElementById('main')
ctx = canvas.getContext('2d');
loadImg();
loadTimer = setInterval(loadAll,100);
var Timer = setInterval(mouseClick,800);
canvas.addEventListener("mousedown", mouseCheck, false);
canvas.addEventListener("mousedown", mouseClick, false);
document.getElementById("send_string_array").value = map.join("],[");
};
</script>
</head>
<body onLoad="init();">
<p id="nickname"></p>
<canvas id="main" width="1024" height="550" style="margin-top:100px; margin-left:100px;"></canvas
onload="initPage();"
onunload="exitPage();"
>
<div id="y">posiçaox >> <span id="vy"></span></div>
<div id="y">posiçaoy >> <span id="vx"></span></div>
<p id="log"></p>
<p id="data_recieved"></p>
<body>
<form method="post" action="recebe.php" >
<input type="hidden" id="send_string_array" name="send_string_array" value="" />
<input type="submit" value="Enviar" />
</form>
</body>
<head>
ok so all right in the mouseclick function we have it here:
map[xmouse][ymouse]=2;
it edits the map array where it is 0 and someone clicks it with value 2 or if it is 1 and it clicks it gets the value 2, so far everything works perfectly, but see this code that is inside the function init:
document.getElementById("send_string_array").value = map.join("],[");
It is not capturing the map array with the editions, it is capturing the array that has not yet been edited when you click, why is this happening?
the above code captures the array and sends it to a php file that should display the edited code php is this code below:
<?php
//transforma a string de itens separados em array
$array_produtos = explode("|", $_POST['send_string_array']);
//mostra o conteúdo do array
echo $_POST['send_string_array'];
?>
I think it is a simple error to solve but I will come tonight and I still do not find the error.