Witam. Nie wiem czy dobrze napisałem temat ale chodzi o to aby podczas rysowania siatki skrypt sprawdzał przy pomocy ajax-a czy dane cord-y są zapisane w bazie. Jeżeli tak to rysuje budynek jeżeli nie to rysuje element siatki.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>Canvas</title>
  6. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  7. 		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  8. 		<script type="text/javascript">
  9. 			window.onload = function() {
  10. 				var canvas = document.getElementById('canvas');
  11. 				var context = canvas.getContext('2d');
  12.  
  13. 				var grid = {
  14. 					width: 5,
  15. 					height: 5
  16. 				}
  17.  
  18. 				var tile = new Image();
  19. 				tile.src = 'img/tile.png';
  20.  
  21. 				var building = new Image();
  22. 				building.src = 'img/icecream.png';
  23.  
  24. 				var build = [];
  25.  
  26. 				var oldBuild = [];
  27.  
  28. 				$('#draggable').draggable();
  29. 				$('#draggable2').draggable();
  30.  
  31. 				var buildingName = '';
  32.  
  33. 				$.ajax({
  34. 					type     : "GET",
  35. 					url      : "dane.php",
  36. 					success : function(msg) {
  37. 						oldBuild = msg;
  38. 					}
  39. 				});
  40.  
  41. 				$('#canvas').droppable({
  42. 					drop: function( event, ui) {
  43. 						var gridOffsetX = (canvas.width / 2) - (tile.width / 2); //Bierzemy poprawkę na wyśrodkowanie siatki
  44. 						var gridOffsetY = 0;
  45.  
  46. 						var col = (event.clientY - gridOffsetY) * 2;
  47. 						col = ((gridOffsetX + col) - event.clientX) / 2;
  48.  
  49. 						var row = ((event.clientX + col) - tile.height) - gridOffsetX;
  50.  
  51. 						row = Math.round(row / tile.height);
  52. 						col = Math.round(col / tile.height);
  53.  
  54. 						if (row >= 0 && 
  55. 							col >= 0 && 
  56. 							row <= grid.width &&
  57. 							col <= grid.height) {
  58. 							build[row] = (build[row] === undefined) ? [] : build[row];
  59.  
  60. 							build[row][col] = 1;
  61. 							buildingName = ui.draggable.attr('date-name');
  62. 							$.ajax({
  63. 								type     : "GET",
  64. 								url      : "zapisz.php",
  65. 								data     : {
  66. 										name: buildingName,
  67. 										row: row,
  68. 										col: col
  69. 								},
  70. 								success : function(msg) {
  71. 									alert(msg);
  72. 								}
  73. 							});
  74. 							draw();
  75. 						}
  76. 					}
  77. 				});
  78.  
  79. 				function draw() {
  80. 					context.clearRect (0, 0, canvas.width, canvas.height);
  81. 					for (row = 0; row < grid.width; row++){
  82. 						for (col = 0; col < grid.height; col++){
  83. 							var tilePositionX = (row-col) * (tile.width/2);
  84. 							tilePositionX += (canvas.width / 2) - (tile.width / 2);
  85. 							var tilePositionY = (row+col) * (tile.height/2);
  86. 							if (build[row] != null && build[row][col] != null) {
  87. 								tilePositionY -= building.height - tile.height;
  88. 								tilePositionX -= (building.width / 2) - (tile.width / 2);
  89. 								context.drawImage(building, Math.round(tilePositionX), Math.round(tilePositionY), building.width, building.height);
  90. 							}
  91. 							else if (oldBuild[row] && oldBuild[row][col]) {
  92. 								tilePositionY -= building.height - tile.height;
  93. 								tilePositionX -= (building.width / 2) - (tile.width / 2);
  94. 								context.drawImage(building, Math.round(tilePositionX), Math.round(tilePositionY), building.width, building.height);
  95. 							}
  96. 							else
  97. 							{
  98. 								context.drawImage(tile, tilePositionX, tilePositionY);
  99. 							}
  100. 						}
  101. 					}
  102. 					alert(build);
  103. 					alert(oldBuild);
  104. 				}
  105. 				draw();
  106. 			}
  107. 		</script>
  108. 	</head>
  109. 	<body>
  110. 		<div id='container'>
  111. 		<canvas id="canvas" width="600" height="600">
  112. 		brak
  113. 		</canvas>
  114. 		</div>
  115. 		<div id='draggable' style='width: 128px; height: 111px;' date-name='elem' ><img src='img/icecream.png'></div>
  116. 		<div id='draggable2' style='width: 128px; height: 111px;' date-name='elem2' ><img src='img/icecream.png'></div>
  117. 	</body>
  118. </html>
[HTML] pobierz, plaintext


dane.php
[PHP] pobierz, plaintext 
  1. <?php
  2. $serwer = 'localhost';
  3. $uzytkownik = 'root';
  4. $haslo = '';
  5.  
  6. //ustanawiamy połączenie
  7. $polaczenie = mysql_connect($serwer, $uzytkownik, $haslo);
  8. if(!$polaczenie)
  9. {
  10.     die('Błąd połączenia: ' . mysql_error());
  11. }
  12.  
  13. //wybieramy bazę
  14. mysql_select_db('metropoliss', $polaczenie);
  15.  
  16. //umieszczamy nowy wpis w tabeli
  17. $row = mysql_real_escape_string($_GET['row']);
  18. $col = mysql_real_escape_string($_GET['col']);
  19. $name = mysql_real_escape_string($_GET['name']);
  20.  
  21. $sql = mysql_query("SELECT * FROM test");
  22. $return=[];
  23. while($RES = mysql_fetch_array($sql))
  24. {
  25.     if(!isset($return[$RES['row']]))
  26.     $return[$RES['row']]=[];
  27.     $return[$RES['row']][$RES['col']]=true; //albo rodzaj budynku
  28. }
  29. echo json_encode($return, JSON_FORCE_OBJECT);
  30.  
  31. mysql_close($polaczenie);
  32. ?>
[PHP] pobierz, plaintext


Zwracany obiekt json
Cytat
{"0":{"0":true},"3":{"1":true,"3":true},"4":{"2":true}}


Rekordy w bazie:

0
0

3
1

3
3

4
2