Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z funkcja onKeyDown..js
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mastersieciweb
7.01.2014, 11:51:43
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
werdan
7.01.2014, 12:34:40
http://jsbin.com/IJuTecI/1/edit?html,js,output
Mastersieciweb
7.01.2014, 13:21:10
dziękuje WERDAN:-)

No ale w takim razie dlaczego to nie działa?..

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.  
  4.   <title>snake</title>
  5.   </head>
  6.  
  7.   <body>
  8.   <script>
  9.  function na(e){
  10.  var bb=e.keyCode;
  11.  var cc= document.getElementById('jeden').style;
  12.  if (bb==38){
  13.  
  14.  cc.left=parseInt(cc.left)+300;}
  15.  }
  16.  
  17. document.onkeydown = na;
  18.   </script>
  19.   <div id="jeden" style="width:100px;height:50px;background-color:red;margin-left:0px" ></div>
  20.   </body>
  21. </html>
  22.  
[HTML] pobierz, plaintext
werdan
7.01.2014, 13:36:31
http://jsbin.com/IJuTecI/2/edit?html,js,output
Mastersieciweb
7.01.2014, 14:00:03
a to jeszcze mam pytanko do tej funkcji, żeby po naciśnięciu klawisza już samo moje pole sie przemieszczało o zadaną wartość:

[HTML] pobierz, plaintext 
  1.  
  2. function na(e){
  3.   bb=e.keyCode;
  4.   cc= document.getElementById('jeden').style;
  5.  if (bb==39){
  6.   function ol(){
  7.   cc.left=parseInt(cc.left)+10+"px";
  8.   var d=setTimeout("ol();",100);
  9.   }
  10. return ol();
  11. }
  12. d=document.onkeydown = na;
  13.  
  14.  
[HTML] pobierz, plaintext
werdan
7.01.2014, 14:19:28
http://jsbin.com/IJuTecI/3/edit?html,js,output

biggrin.gif
Mastersieciweb
7.01.2014, 17:47:35
ale jaja:-) dziękuje, w razie W bede pytal dalej:-)

jeszcze pytanko mam, dlaczego nie tworzy mi ta funkcja nowego diva.. jesli warunek jest spełniony

[HTML] pobierz, plaintext 
  1. function ol4(){
  2.                       cc.top=parseInt(cc.top)-50+"px";
  3.                       if(parseInt(cc.top)<0){
  4.                        cc.top=parseInt(cc.top)+500+"px";;}
  5.                        if(parseInt(cc.top)>500){
  6.                        cc.top=parseInt(cc.top)-500+"px";;}
  7.                        if((parseInt(cc.left)==parseInt(cc2.left))&&(parseInt(cc.top)==parseInt(cc2.top))){
  8.                       cc2.left=i+"px";
  9.                       cc2.top=ii+"px";
  10.                       var div1 = document.createElement('div');
  11.                       div1.style.width="50px";
  12.                       div1.style.height="50px";
  13.                       div1.style.color="yellow";
  14.                       div1.style.position="absolute";
  15.                       div1.style.left=parseInt(div1.style.left)+30+"px"; 
  16.                       div1.style.top=parseInt(div1.style.top)+30+"px";} 
  17.                        }
[HTML] pobierz, plaintext
werdan
7.01.2014, 17:53:12 
[HTML] pobierz, plaintext 
  1. document.body.appendChild(div1);
[HTML] pobierz, plaintext


Element utworzyłes, ale go nigdzie nie podpiąłes. biggrin.gif
Mastersieciweb
7.01.2014, 19:53:28
mam jeszcze pytanie:-) jeśli nacisne ponownie klawisz ta funkcja przyspieszy mi poruszanie się mojego kwadratu a jak zrobić żeby ponowne naciśnięcie nie przyspieszało jeszcze bardziej tego przemieszczania się?wink.gif


http://jsbin.com/IJuTecI/3/edit?html,js,output
werdan
7.01.2014, 20:15:57
http://jsbin.com/IJuTecI/4/edit?html,js,output

biggrin.gif
Mastersieciweb
7.01.2014, 20:36:34
spojrzalbys na ten kod?:-) badziewnie pewnie wyglada,moim zadaniem bylo zrobienie takiej gierki(snake) z tym że nie wiem czy tą metodą co robie jestem w stanie taki efekt uzyskać. Pomieszałem troche tego wszystkiego, przetestuj ten problem jak możesz, ewentualnie jakieś sugestie, poprawki, co mógłbym zrobić, bo zostaje kwestia jeszcze klonowania diva, ale nie mam zielonego pojęcia jak tu to umiejscowić itp..;-)

[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(){ol();},500);
  21.           }}else {clearInterval(d1);} 
  22.           if (bb==40){
  23.           if(!isMoving){
  24.       isMoving = true;
  25.  
  26.           d2=setInterval(function(){ol2();},500);
  27.           }}else {clearInterval(d2);}
  28.           if (bb==37){
  29.           if(!isMoving){
  30.       isMoving = true;
  31.  
  32.           d3=setInterval(function(){ol3();},500);
  33.           }}else {clearInterval(d3);}
  34.           if (bb==38){
  35.           if(!isMoving){
  36.       isMoving = true;
  37.  
  38.           d4=setInterval(function(){ol4();},500);
  39.           }} else {clearInterval(d4);}
  40.  
  41.  
  42.  
  43.  
  44.                   function ol(){
  45.                   cc.left=parseInt(cc.left)+50+"px";
  46.  
  47.                    if(parseInt(cc.left)>500){
  48.                    cc.left=parseInt(cc.left)-550+"px";;}
  49.                    if((parseInt(cc.left)==parseInt(cc2.left))&&(parseInt(cc.top)==parseInt(cc2.top))){
  50.                       cc2.left=i+"px";
  51.                       cc2.top=ii+"px";
  52.                       }
  53.                 } 
  54.  
  55.  
  56.  
  57.  
  58.                   function ol2(){
  59.                   cc.top=parseInt(cc.top)+50+"px";
  60.  
  61.                    if(parseInt(cc.top)>500){
  62.                    cc.top=parseInt(cc.top)-550+"px";;}
  63.                    if((parseInt(cc.left)==parseInt(cc2.left))&&(parseInt(cc.top)==parseInt(cc2.top))){
  64.                       cc2.left=i+"px";
  65.                       cc2.top=ii+"px";
  66.                       }
  67.                 } 
  68.  
  69.  
  70.  
  71.                     function ol3(){
  72.  
  73.                     cc.left=parseInt(cc.left)-50+"px";
  74.  
  75.                      if(parseInt(cc.left)<0){
  76.                      cc.left=parseInt(cc.left)+550+"px";;}
  77.  
  78.                      if((parseInt(cc.left)==parseInt(cc2.left))&&(parseInt(cc.top)==parseInt(cc2.top))){
  79.                       cc2.left=i+"px";
  80.                       cc2.top=ii+"px";}
  81.                       } 
  82.  
  83.  
  84.  
  85.  
  86.                       function ol4(){
  87.                       cc.top=parseInt(cc.top)-50+"px";
  88.                       if(parseInt(cc.top)<0){
  89.                        cc.top=parseInt(cc.top)+550+"px";;}
  90.  
  91.                        if((parseInt(cc.left)==parseInt(cc2.left))&&(parseInt(cc.top)==parseInt(cc2.top))){
  92.                       cc2.left=i+"px";
  93.                       cc2.top=ii+"px";
  94.  
  95.                       } 
  96.                        }
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  } 
  104.  
  105. d=document.onkeydown = na;
  106.   </script>
  107.   <div id="tlo"  style="position:absolute;width:550px;height:550px;background-color:green;left:0px;top:0px;" ></div>
  108.   <div id="jeden"  style="position:absolute;width:50px;height:50px;background-color:red;left:0px;top:0px;" ></div>
  109.   <div id="dwa"   style="position:absolute;width:50px;height:50px;background-color:blue;left:100px;top:0px;" ></div>
  110.  
  111.   </body>
  112. </html>
  113.  
  114.  
[HTML] pobierz, plaintext
werdan
7.01.2014, 21:11:40 
[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 biggrin.gif. Weza najlepiej trzymac w tablicy biggrin.gif


U ciebie sa 4 loopy. Sprobuj zrobić 1 loop (setInterval), a w tych 4 funkcjach tylko ustawiać przesuniecia X i Y.

Mastersieciweb
7.01.2014, 21:16:52
nie wiem za bardzo w jaki sposób wykorzystac tutaj petle i przypisac kierunki..


a zalozmy ze wszystko jest do przyjecia tylko zostaje kwestia dodania klonu? ktory porusza sie jak nasz div, jest taki sam i dodajemy go w momencie (nalozenia)na niebieskiego.. tylko że nie wiem w jaki sposob zapisac ze klon ma miec doklanie taka sama pozycje jak div ruch wczesniej.. nie mam pojecia..
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.