Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [pomocy]css div w divie
Forum PHP.pl > Forum > Po stronie przeglądarki
bartek6949
11.10.2009, 20:27:00
Witam mam problem kombinuje jak tu zrobic postac ktora stoi na srodku a jak na cisne w,s,d,a to sie obrazek przesuwa chodzi mi cos takiego jak w "tibi"postac sie niby porusza a ciagle stoi po sierodku ekranu.to co narazie mam
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. 	<head>
  5. 		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6.  
  7. 		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  8. 		<script type="text/javascript">
  9. 			$(document).ready(function() {
  10. 				$(".health div").animate({ width: 25 }, 1000);
  11.  
  12. 				var last_walk = 0;
  13.  
  14. 				$("html").keydown(function(e) {
  15. 					if (new Date().getTime() - last_walk < 300) {//predkosc
  16. 						return true;
  17. 					}
  18.  
  19. 					var char = $("#bum").position();
  20.  
  21. 					if (e.keyCode == 37) {
  22. 						setTimeout(function() {
  23. 							$("#character").css({ backgroundPosition: "-70px 0px", left: char.left - 3 });
  24. 						}, 100);//szybkosc
  25.  
  26. 						setTimeout(function() {
  27. 							$("#character").css({ backgroundPosition: "-35px 0px", left: char.left - 6 });
  28. 						}, 200);//szybkosc
  29.  
  30. 						setTimeout(function() {
  31. 							$("#character").css({ backgroundPosition: "0px 0px", left: char.left - 9 });
  32. 						}, 300);//szybkosc
  33. 					} else if (e.keyCode == 38) {
  34. 						setTimeout(function() {
  35. 							$("#character").css({ backgroundPosition: "-70px -35px", top: char.top - 3 });
  36. 						}, 100);
  37.  
  38. 						setTimeout(function() {
  39. 							$("#character").css({ backgroundPosition: "-35px -35px", top: char.top - 6 });
  40. 						}, 200);
  41.  
  42. 						setTimeout(function() {
  43. 							$("#character").css({ backgroundPosition: "0px -35px", top: char.top - 9 });
  44. 						}, 300);
  45. 					} else if (e.keyCode == 39) {
  46. 						setTimeout(function() {
  47. 							$("#character").css({ backgroundPosition: "-70px -70px", left: char.left + 3 });
  48. 						}, 100);
  49.  
  50. 						setTimeout(function() {
  51. 							$("#character").css({ backgroundPosition: "-35px -70px", left: char.left + 6 });
  52. 						}, 200);
  53.  
  54. 						setTimeout(function() {
  55. 							$("#character").css({ backgroundPosition: "0px -70px", left: char.left + 9 });
  56. 						}, 300);
  57. 					} else if (e.keyCode == 40) {
  58. 						setTimeout(function() {
  59. 							$("#character").css({ backgroundPosition: "-70px -105px", top: char.top + 3 });
  60. 						}, 100);
  61.  
  62. 						setTimeout(function() {
  63. 							$("#character").css({ backgroundPosition: "-35px -105px", top: char.top + 6 });
  64. 						}, 200);
  65.  
  66. 						setTimeout(function() {
  67. 							$("#character").css({ backgroundPosition: "0px -105px", top: char.top + 9 });
  68. 						}, 300);
  69. 					}
  70.  
  71. 					last_walk = new Date().getTime();
  72. 				});
  73. 			});
  74. 		</script>
  75.  
  76. 		<style type="text/css">
  77.  
  78.  
  79.  
  80. 			#bum{
  81. 			background: #FFF url(bg.jpg);
  82. 				width: 800px;
  83. 				height: 800px;
  84. 				left: 0px;
  85. 				top: 0px;
  86.  
  87.  
  88. 			}
  89. 			#gra{
  90. 			background: #000;
  91. 				width: 300px;
  92. 				height: 300px;
  93. 				color: #000;
  94. 				font: normal 11px Verdana, sans-serif;
  95.  
  96.  
  97. 			}
  98. 			#character {
  99. 				background: transparent url(assassin.png) no-repeat;
  100. 				height: 35px;
  101. 				left: 150px;
  102. 				top: 150px;
  103. 				position: absolute;
  104. 				width: 35px;
  105.  
  106.  
  107. 			}
  108.  
  109. 			#character .health {
  110. 				background-color: #060;
  111. 				border: 1px solid #060;
  112. 				height: 2px;
  113. 				margin: -7px auto 0 auto;
  114. 				width: 25px;
  115. 			}
  116.  
  117. 			#character .health div {
  118. 				background-color: #6F0;
  119. 				height: 2px;
  120. 				width: 1px;
  121. 			}
  122. 		</style>
  123.  
  124. 		<title>Magnus</title>
  125.  
  126. 	</head>
  127.  
  128. 	<body>
  129.  
  130. 	<div id="gra">
  131. 	<div id="bum">
  132. 		<div id="character">
  133. 			<div class="health"><div></div></div>
  134. 		</div>
  135. 		</div>
  136. 		</div>
  137.  
  138. 	</body>
  139. </html>
[HTML] pobierz, plaintext

pomocy
kartofelek007
12.10.2009, 10:33:02
Ogólnie polecałbym chyba jednak użycie do tego Canvas, ale tak też da radę.
Masz więc diva na około pewnie z overflow:hidden i width, height
a po nacisnieciu jakiegos przycisku, div z tlem, ktory znajduje sie w tym ograniczajacym divie ma sie przesowac.

[HTML] pobierz, plaintext 
  1. <div id="wraper" style="overflow:hidden; width:200px; height:200px; position:relative">
  2.  
  3. <div id="tlo" style="position:absolute; left:0px; top:0px"></div>
  4. <div id="ludek"></div>
  5.  
  6. </div>
[HTML] pobierz, plaintext


jak naciskam np Prawo:
document.getElementById('tlo').style.left -= szybkosc_ruchu_ludka+'px';
document.getElementById('ludek').style.backgroundPosition -= "wspolzedne sprita ruchu w prawo ludka";
itp...

Pomysl dosc ciekawy, ale nie polecam go. Wyobraz sobie ze plansza ma powiedzmy 3000x3000 px (co wcale olbrzymim obszarem nie jest). 1 - musisz to wczytac, 2 - musisz to przewijac. Pal licho z wczytaniem (zrobisz preloadera), ale potem to plynnie przewijaj... Nie każdy ma w domu komputer od NASA - w koncu do takiej gry dorzucisz i inne kolizje itp, i większość maszyn się zadławi (chyba że to gra ala "panzer").

Osobiscie polecam techniki tworzenia map na spritach:
Na ponizszej stronie masz fajne objasnienia - z prawej strony jest seria tutoriali jak tworzyc gry z mapami we flashu. przeniesc to do JS to nie problem, chociaż wydajność spadnie.
http://oos.moxiecode.com/
+ bardzo fajny tutorial na bazie tamtego:
http://tonypa.pri.ee/tbw/start.html

jak mowilem na poczatku - moim zdaniem lepiej bylo by zastosowac Canvas, ktory jest calkiem latwy w obsludze (dodatkowo pozbedziesz sie dzieki temu problemu "zaznaczania kursorem obrazkow"), albo przeniesc sie na flasha. Moglbym wyswietlac cala grafike itp we flashu, a w razie czego wszystko przesylac do JS (chocby za pomoca getURL).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.