2
well the code is that down here 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 far all right in function mouseclick we have it here:
map[xmouse][ymouse]=2;
it edits the map array where 0 is and someone clicks with value 2 or if 1 and it clicks is value 2, so far everything works perfectly, but see this code inside the init function:
document.getElementById("send_string_array").value = map.join("],[");
it is not capturing the array map with the editions, it is capturing the array that has not yet been edited when clicking, because this is happening?
Obs: the above code captures the array and sends it to a php file that should show the edited php code 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’s a simple mistake to solve but I’ll come tonight and still can’t find the error.