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 (1 - 12)
werdan
post
Post #2





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

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

http://jsbin.com/IJuTecI/1/edit?html,js,output
Go to the top of the page
+Quote Post
Mastersieciweb
post
Post #3





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

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

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


Ten post edytował Mastersieciweb 7.01.2014, 13:23:47
Go to the top of the page
+Quote Post
werdan
post
Post #4





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

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

http://jsbin.com/IJuTecI/2/edit?html,js,output
Go to the top of the page
+Quote Post
Mastersieciweb
post
Post #5





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

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

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


Ten post edytował Mastersieciweb 7.01.2014, 14:08:47
Go to the top of the page
+Quote Post
werdan
post
Post #6





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

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

http://jsbin.com/IJuTecI/3/edit?html,js,output

(IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mastersieciweb
post
Post #7





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

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

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
Go to the top of the page
+Quote Post
werdan
post
Post #8





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

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

[HTML] pobierz, plaintext 
  1. document.body.appendChild(div1);
[HTML] pobierz, plaintext


Element utworzyłes, ale go nigdzie nie podpiąłes. (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mastersieciweb
post
Post #9





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

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

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ę?(IMG:style_emoticons/default/wink.gif)


http://jsbin.com/IJuTecI/3/edit?html,js,output
Go to the top of the page
+Quote Post
werdan
post
Post #10





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

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

http://jsbin.com/IJuTecI/4/edit?html,js,output

(IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
Mastersieciweb
post
Post #11





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

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

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
Go to the top of the page
+Quote Post
werdan
post
Post #12





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
Mastersieciweb
post
Post #13





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

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

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..

Ten post edytował Mastersieciweb 7.01.2014, 21:24:36
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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