Witam. Przychodzę z pewnym problemem. Dlaczego budynek nie pojawia się w odpowiednim miejscu?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var grid = {
width: 5,
height: 5
}
var tile = new Image();
tile.src = 'img/tile.png';
var building = new Image();
building.src = 'img/icecream.png';
var build = [];
var oldBuild = [];
$('#draggable').draggable();
$('#draggable2').draggable();
var buildingName = '';
$.ajax({
type : "GET",
url : "dane.php",
async : false,
success : function(msg) {
oldBuild = msg;
}
});
$('#canvas').droppable({
drop: function( event, ui) {
var gridOffsetX = (canvas.width / 2) - (tile.width / 2); //Bierzemy poprawkę na wyśrodkowanie siatki
var gridOffsetY = 0;
var col = (event.clientY - gridOffsetY) * 2;
col = ((gridOffsetX + col) - event.clientX) / 2;
var row = ((event.clientX + col) - tile.height) - gridOffsetX;
row = Math.round(row / tile.height);
col = Math.round(col / tile.height);
if (row >= 0 &&
col >= 0 &&
row <= grid.width &&
col <= grid.height) {
build[row] = (build[row] === undefined) ? [] : build[row];
build[row][col] = 1;
buildingName = ui.draggable.attr('date-name');
$.ajax({
type : "GET",
url : "zapisz.php",
data : {
name: buildingName,
row: row,
col: col
},
success : function(msg) {
alert(msg);
}
});
draw();
}
}
});
function draw() {
context.clearRect (0, 0, canvas.width, canvas.height);
for (row = 0; row < grid.width; row++){
for (col = 0; col < grid.height; col++){
var tilePositionX = (row-col) * (tile.width/2);
tilePositionX += (canvas.width / 2) - (tile.width / 2);
var tilePositionY = (row+col) * (tile.height/2);
if (oldBuild[row] && oldBuild[row][col]){
tilePositionY -= building.height - tile.height;
tilePositionX -= (building.width / 2) - (tile.width / 2);
context.drawImage(building, Math.round(tilePositionX), Math.round(tilePositionY), building.width, building.height);
}
else if (build[row] != null && build[row][col] != null) {
tilePositionY -= building.height - tile.height;
tilePositionX -= (building.width / 2) - (tile.width / 2);
context.drawImage(building, Math.round(tilePositionX), Math.round(tilePositionY), building.width, building.height);
}
else
{
context.drawImage(tile, tilePositionX, tilePositionY);
}
}
}
alert(build);
alert(oldBuild);
}
draw();
}
</script>
</head>
<body>
<div id='container'>
<canvas id="canvas" width="600" height="600">
brak
</canvas>
</div>
<div id='draggable' style='width: 128px; height: 111px;' date-name='elem' ><img src='img/icecream.png'></div>
<div id='draggable2' style='width: 128px; height: 111px;' date-name='elem2' ><img src='img/icecream.png'></div>
</body>
</html>
Plik dane.php
<?php
$serwer = 'localhost';
$uzytkownik = 'root';
$haslo = '';
//ustanawiamy połączenie
$polaczenie = mysql_connect($serwer, $uzytkownik, $haslo);
if(!$polaczenie)
{
die('Błąd połączenia: ' . mysql_error());
}
//wybieramy bazę
mysql_select_db('metropoliss', $polaczenie);
//umieszczamy nowy wpis w tabeli
$row = mysql_real_escape_string($_GET['row']);
$col = mysql_real_escape_string($_GET['col']);
$name = mysql_real_escape_string($_GET['name']);
$sql = mysql_query("SELECT * FROM test");
$return=[];
while($RES = mysql_fetch_array($sql))
{
if(!isset($return[$RES['row']]))
$return[$RES['row']]=[];
$return[$RES['row']][$RES['col']]= true; //albo rodzaj budynku
}
echo json_encode($return, JSON_FORCE_OBJECT);
mysql_close($polaczenie);
?>