Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> problem z funkcja onKeyDown..js, problem z funkcja onKeyDown..js
Mastersieciweb
post
Post #1





Grupa: Zarejestrowani
Postów: 84
Pomógł: 0
Dołączył: 14.10.2013

Ostrzeżenie: (0%)
-----

Witam, nie wiem w jaki sposób uaktywnić funkcję żeby za pomocą klawisza strzałki do góry moje pole zwiększyło się, gdzie tu jest błąd..z góry dziękuje
[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.  
  4.  
  5.   </head>
  6.  
  7.   <body>
  8.   <script>
  9.   function na(e){
  10.  var bb=e.keyCode;
  11.  var cc= document.getElementById('jeden');
  12.  if (bb==38){
  13.  cc.style.width="300px";}
  14.  }
  15.   </script>
  16.   <div id="jeden" onkeydown="na(e)" style="width:100px;height:50px;background-color:red" ></div>
  17.   </body>
  18. </html>
  19.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
werdan
post
Post #2





Grupa: Zarejestrowani
Postów: 354
Pomógł: 100
Dołączył: 14.11.2013
Skąd: Płock

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <meta charset=utf-8 />
  4.         <title>snake2</title>
  5.     </head>
  6.  
  7.     <body>
  8.         <script>
  9.             function na(e) {
  10.                 bb = e.keyCode;
  11.                 cc = document.getElementById('jeden').style;
  12.                 cc2 = document.getElementById('dwa').style;
  13.                 var i = 100 * Math.round(5 * (Math.random()));
  14.                 var ii = 100 * Math.round(5 * (Math.random()));
  15.                 var isMoving = false;
  16.  
  17.                 if (bb == 39) {
  18.                     if (!isMoving) {
  19.                         isMoving = true;
  20.                         d1 = setInterval(function() {
  21.                             ol();
  22.                         }, 500);
  23.                     }
  24.                 } else {
  25.                     clearInterval(d1);
  26.                 }
  27.                 if (bb == 40) {
  28.                     if (!isMoving) {
  29.                         isMoving = true;
  30.  
  31.                         d2 = setInterval(function() {
  32.                             ol2();
  33.                         }, 500);
  34.                     }
  35.                 } else {
  36.                     clearInterval(d2);
  37.                 }
  38.                 if (bb == 37) {
  39.                     if (!isMoving) {
  40.                         isMoving = true;
  41.  
  42.                         d3 = setInterval(function() {
  43.                             ol3();
  44.                         }, 500);
  45.                     }
  46.                 } else {
  47.                     clearInterval(d3);
  48.                 }
  49.                 if (bb == 38) {
  50.                     if (!isMoving) {
  51.                         isMoving = true;
  52.  
  53.                         d4 = setInterval(function() {
  54.                             ol4();
  55.                         }, 500);
  56.                     }
  57.                 } else {
  58.                     clearInterval(d4);
  59.                 }
  60.  
  61.  
  62.  
  63.  
  64.                 function ol() {
  65.                     cc.left = parseInt(cc.left) + 50 + "px";
  66.  
  67.                     if (parseInt(cc.left) > 500) {
  68.                         cc.left = parseInt(cc.left) - 550 + "px";
  69.                     }
  70.                     if ((parseInt(cc.left) == parseInt(cc2.left)) && (parseInt(cc.top) == parseInt(cc2.top))) {
  71.                         cc2.left = i + "px";
  72.                         cc2.top = ii + "px";
  73.                     }
  74.                 }
  75.  
  76.  
  77.  
  78.  
  79.                 function ol2() {
  80.                     cc.top = parseInt(cc.top) + 50 + "px";
  81.  
  82.                     if (parseInt(cc.top) > 500) {
  83.                         cc.top = parseInt(cc.top) - 550 + "px";
  84.                     }
  85.                     if ((parseInt(cc.left) == parseInt(cc2.left)) && (parseInt(cc.top) == parseInt(cc2.top))) {
  86.                         cc2.left = i + "px";
  87.                         cc2.top = ii + "px";
  88.                     }
  89.                 }
  90.  
  91.  
  92.  
  93.                 function ol3() {
  94.  
  95.                     cc.left = parseInt(cc.left) - 50 + "px";
  96.  
  97.                     if (parseInt(cc.left) < 0) {
  98.                         cc.left = parseInt(cc.left) + 550 + "px";
  99.                     }
  100.  
  101.                     if ((parseInt(cc.left) == parseInt(cc2.left)) && (parseInt(cc.top) == parseInt(cc2.top))) {
  102.                         cc2.left = i + "px";
  103.                         cc2.top = ii + "px";
  104.                     }
  105.                 }
  106.  
  107.  
  108.  
  109.  
  110.                 function ol4() {
  111.                     cc.top = parseInt(cc.top) - 50 + "px";
  112.                     if (parseInt(cc.top) < 0) {
  113.                         cc.top = parseInt(cc.top) + 550 + "px";
  114.                     }
  115.  
  116.                     if ((parseInt(cc.left) == parseInt(cc2.left)) && (parseInt(cc.top) == parseInt(cc2.top))) {
  117.                         cc2.left = i + "px";
  118.                         cc2.top = ii + "px";
  119.  
  120.                     }
  121.                 }
  122.             }
  123.  
  124.             d = document.onkeydown = na;
  125.         </script>
  126.         <div id="tlo"  style="position:absolute;width:550px;height:550px;background-color:green;left:0px;top:0px;" ></div>
  127.         <div id="jeden"  style="position:absolute;width:50px;height:50px;background-color:red;left:0px;top:0px;" ></div>
  128.         <div id="dwa"   style="position:absolute;width:50px;height:50px;background-color:blue;left:100px;top:0px;" ></div>
  129.  
  130.     </body>
  131. </html>
  132.  
  133.  
  134.  
[HTML] pobierz, plaintext



Dobrze Ci idzie. Wyglada jak wygląda. Coś tam poprawiłem, bo jakieś błedy były (średniki, nawias).
Troche dziwnie działa.
Jak daje np. w prawo to idzie w prawo i do góry, bo wczesniej szedł do góry.

Troche sie inaczej to robi. W grach zawsze jest loop (czyli petla która sie wykonuje np. 60x na sekunde). I to własnie w tej petli sterujemy graczem i innymi elementami. Klikając kursory ustawiamy przesuniecia X i Y, a potem w petli wykonujemy je. W petli tez należałoby zrobić zjadanie "obiektu" (ofiary). Jesli pozycja głowy weza jest taka sama jak ofiary, to ofiare usuwamy, tworzymy nowa, a weza wydłuzamy (IMG:style_emoticons/default/biggrin.gif) . Weza najlepiej trzymac w tablicy (IMG:style_emoticons/default/biggrin.gif)


U ciebie sa 4 loopy. Sprobuj zrobić 1 loop (setInterval), a w tych 4 funkcjach tylko ustawiać przesuniecia X i Y.
Go to the top of the page
+Quote Post

Posty w temacie
- Mastersieciweb   problem z funkcja onKeyDown..js   7.01.2014, 11:51:43
- - werdan   http://jsbin.com/IJuTecI/1/edit?html,js,output   7.01.2014, 12:34:40
- - Mastersieciweb   dziękuje WERDAN:-) No ale w takim razie dlaczego ...   7.01.2014, 13:21:10
- - werdan   http://jsbin.com/IJuTecI/2/edit?html,js,output   7.01.2014, 13:36:31
- - Mastersieciweb   a to jeszcze mam pytanko do tej funkcji, żeby po n...   7.01.2014, 14:00:03
- - werdan   http://jsbin.com/IJuTecI/3/edit?html,js,output   7.01.2014, 14:19:28
- - Mastersieciweb   ale jaja:-) dziękuje, w razie W bede pytal dalej:-...   7.01.2014, 17:47:35
- - werdan   [HTML] pobierz, plaintext document.body.appendChil...   7.01.2014, 17:53:12
- - Mastersieciweb   mam jeszcze pytanie:-) jeśli nacisne ponownie klaw...   7.01.2014, 19:53:28
- - werdan   http://jsbin.com/IJuTecI/4/edit?html,js,output   7.01.2014, 20:15:57
- - Mastersieciweb   spojrzalbys na ten kod?:-) badziewnie pewnie wygla...   7.01.2014, 20:36:34
- - werdan   [HTML] pobierz, plaintext <html> <head...   7.01.2014, 21:11:40
- - Mastersieciweb   nie wiem za bardzo w jaki sposób wykorzystac tutaj...   7.01.2014, 21:16:52

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 26.12.2025 - 13:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn