Autor Zpráva
juraj
Profil
#1 · Zasláno: 10. 2. 2014, 00:44:49 · Upravil/a: juraj o 4 minuty později
Odpovědět Citovat
Zdravím, ako mám upraviť kód, aby sa postava pohybovala spolu s prekážkou
ak som dal taký príkaz, riadok 134 
plane.x=pohybx
tak pohyb,doľava,doprava a výskok prestal fungovať.
kde premenná plane je postava
a premenná plank je prekážka
živá ukážka
tu
v internet exploreri nefunguje 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">

  <title></title>
              <style>
        
              #canvas{
                border: 2px solid #424163;
                margin: 0px auto;
              }
            </style>
            <script>
            
                     var canvas;
                     var ctx;
                     var width=800;
                     var  height=600;           

                   
                 var left = false;
                var right = false;
                var up = false;
                var down = false;
                          var backspace = false;           
                     
                     
                     var backgroundImage;
                                          var fantomas;
                          var plane = null;
                          
                      
           var planeW = 60; // plane width
           var planeH = 95; // plane height
             var   friction = 0.8;
     var gravity = 0.3;//0.1 skace vzssie 
var planks=null;
var plankw=275;
var plankh=16;
var iterationm=1;
  function background(){
         ctx.drawImage(backgroundImage, 0, 0,width, height); 
  }
  function Plane(x, y, w, h,imagesvila) {
    this.x =300;
    this.y = y;
    this.w = w;
    this.h = h;

        this.speed = 3;
   this.velX= 0;
       this.velY= 0;
     var jumping = false;
        this.imagesvila = imagesvila;
 
}
  function Prekazka(x, y, w, h,imagesp) {
    this.x = 400;
    this.y = 560;//560
    this.w = w;
    this.h = h;

        
        this.imagesp = imagesp;
 
}
                
                                  function startgame() {
    init();

}


                    window.onload = function(){
                        init();
                    }
                    
                        function init(){
                                 //canvas element
                        canvas = document.getElementById("canvas");
                        ctx = canvas.getContext('2d');

                canvas.width = width;
               canvas.height = height;

                          backgroundImage = new Image();
                          backgroundImage.src = 'mraky.png';
                          
                           fantomas= new Image();
                          fantomas.src = 'fantomas.png';
     plane = new Plane(width / 2, height - 5, planeW, planeH,fantomas);                      
                        
                            plank= new Image();
                         plank.src = 'plank.png';
           plank = new Prekazka(width / 2, height - 5, plankw, plankh,plank);

                            window.addEventListener('keydown', onKeyDown, true); //add listener
                            window.addEventListener('keyup', onKeyUp, true);
                                                    return setInterval(loop, 10);
                        }

   function loop() {
 
          ctx.clearRect(0, 0, width,height);
background();  
      
                        

  //ctx.fillStyle = "red";
//  ctx.fillRect(plane.x, plane.y, plane.w, plane.h);
  
   iterationm++;
    pohybx = height + (Math.sin(((iterationm * 5.5) /width)) * 150)- 110;
         ctx.drawImage(plane.imagesvila,plane.x, plane.y, plane.w, plane.h);
//alert(+plane.velY)
              // ctx.drawImage(plank,400,560,275,16);
                        ctx.drawImage(plank.imagesp, pohybx, plank.y, plank.w, plank.h);
                       
                        
                   if(  plane.y + plane.h >  plank.y 
                         && 
                         plane.y + plane.h < plank.y +plank.h
                         && 
                         plane.x+ plane.w > pohybx
                          &&
                          plane.x< pohybx+plank.w
             
                            ) { 
      ctx.fillText("opica", 150, 320);
                plane.y=plank.y-plane.h;//postavicka yostane na prekazke
             //plane.x=pohybx;
       plane.jumping = false;
   plane.velY += -gravity;//gravitacia zaporna aby postavicka nepresla cez prekazku

                            }
                                        //if (plane.x>=(390-plane.w) )return false;
              //    if (plane.x>(400-plane.w)){//plane.x>(400-plane.w)
            //    ctx.fillText("opicas", 150, 320);

          //}
            //  alert(+400-plane.w)
         ctx.fillText("plankx"+plank.x, 150, 340);                     
       ctx.fillText("planex"+plane.x , 150, 350);             
//listen for keyboard inputs, ship-pos, check boundaries


                 if(     plane.x<(pohybx+plank.w)
                             &&
           pohybx < (plane.x+plane.w)
           &&
          plane.y < (plank.y+plank.h)
          &&
          plank.y < (plane.y+plane.h)
         //  &&
           //plane.y+plane.h>plank.y+plank.h
                            ) {
        // plane.x=plane.h+plank.h;     
              
   plane.x -= plane.velX;
    plane.y += plane.velY;
    // plane.velY = +plane.speed*2;
  


          ctx.fillText("stop" , 150, 390);
          
                             }

   
    if( up ){ 
                       if(!plane.jumping){
       plane.jumping = true;
      plane.velY = -plane.speed*2;
      
      }
                      
}
 
                        if(right ){
   // right arrow
        if (plane.velX < plane.speed) {
            plane.velX++;

        }
                        }
 
                        if(left ){
   if (plane.velX > -plane.speed) {
            plane.velX--;
        }
                        }
                        
                        
 plane.velX *= friction;
   
    plane.velY += gravity;
  
   plane.x += plane.velX;
    plane.y += plane.velY;
if (plane.x >= width-plane.w) {
        plane.x = width-plane.w;
    } else if (plane.x <= 0) {
        plane.x = 0;
    }
  
    if(plane.y >= height-plane.h){
        plane.y = height - plane.h;
        plane.jumping = false;
    }
//alert(+plane.y )
      }
                                         
                        
  


                    //function/statements for keyDown
                    function onKeyDown(evt){
                        switch (evt.keyCode){ //get the key-code
                            case 38:  //up-arrow pressed
                                up = true;
        
                                break;
                            case 40:  //down-arrow pressed
                                down = true;
                                break;
                            case 37:  //left-arrow pressed
                                left = true;
                                
                                break;
                            case 39:  //right-arrow pressed
                                right = true;
                                
                                break;
                            case 32 :  //space-bar pressed

               if(!plane.jumping){
       plane.jumping = true;
      plane.velY = -plane.speed*2;
      }


                                break;
                         }
                     }
 
                    //function/statements for keyUp
                    function onKeyUp(evt){
                        switch (evt.keyCode) {
                            case 38:
                                up = false;
                                break;
                            case 40:
                                down = false;
                                break;
                            case 37:
                                left = false;
                                break;
                            case 39:
                                right = false;
                                break;
                            case 32:
                             
                                break;
                          }

                      }
                                         
                  </script>
  </head>
  <body>


            <canvas id="canvas"></canvas>
              <p>Odkaz na stiahnutie zdrojového kódu <a href="subory.zip">tu</a><br>

  </body>
</html>
peta
Profil
#2 · Zasláno: 10. 2. 2014, 13:32:50 · Upravil/a: peta o 7 minut později
Odpovědět Citovat
Prvne, pohyb neprestane fungovat. Nevim, zda jsi to uz nestihl ale spravit.
- Podarilo se mi ale navodit situaci, kdy ta jezdici plosinka jela skrz mne a zablokovalo mi to pohyb doprava a doleva.
- Podarilo se mi na plosinku skocit tak nestastne, ze to vypadalo, ze jsem na ni a zablokovalo pohyb.
- A po odkomentovani toho radku je nastaveno, ze poloha x bude stejna jako poloha desticky, takze se prestane hybat doprava a doleva. Coz je trochu problem, protoze nelze skocit na plosinku vic doprava, protoze to vyhodnoti, jakoze uz na plosince jsi. Konkretne docilis toho, ze 
//        plane.x=pohybx;
        plane.x + plane.w > pohybx && -- bude splneno A+cokoliv > A
        plane.x < pohybx + plank.w -- A < A + cokoliv

Mno, udelal jsem ti tam par bezvyznamnych zmen (oznaceno !), protoze se mi to nedarilo asi pul hodky rozpohybovat, jak ti to jede na webu. Tez by bylo dobre dat nizsi loop (vetsi cislo; f = 1/t; t = 0.01s; f = 100hz, muj monitor treba 100hz nema, tak to jen zbytecne blokuje procesor a prohlizec), moznost pauzy, prepsat parametry sveta do jedne promenne world. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">

    <title></title>
    <style>
#canvas {
    border: 2px solid #424163;
    margin: 0px auto;
}
    </style>
    <script>
function classTimer(func, time) {
    this.id = null;
    this.state = 0;
    this.start = function (func, time) {
        this.stop();
        this.init(func, time);
        this.id = setInterval(this.func, this.time);
        this.state = 1;
    }
    this.stop = function () {
        if (this.id != null) {
            clearInterval(this.id);
        }
        this.state = 0;
    }
    this.init = function (func, time) {
        this.func = typeof (func) !== 'undefined' ? func : this.func;
        this.time = typeof (time) !== 'undefined' ? time : this.time;
    }
    this.init(func, time);
}

var timer = null;

var game_images = {
    mraky: 'js-canv-mraky.png',
    fantom: 'js-canv-fantomas.png',
    plank: 'js-canv-plank.png'
};

var canvas;
var ctx;
var width = 800;
var height = 600;

var left = false;
var right = false;
var up = false;
var down = false;
var backspace = false;

var backgroundImage;
var fantomas;
var plank;        //!
var plane = null;

var planeW = 60; // plane width
var planeH = 95; // plane height
var friction = 0.8;
var gravity = 0.3; //0.1 skace vyssie !
var planks = null;
var plankw = 275;
var plankh = 16;
var iterationm = 1;
          
var pohybx;    //!

function background() {
    ctx.drawImage(backgroundImage, 0, 0, width, height);
}

function Plane(x, y, w, h, img) {
    this.x = 300;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = 3;
    this.velX = 0;
    this.velY = 0;
//    var jumping = false; !
    this.img = img;
}

function Prekazka(x, y, w, h, img) {
    this.x = 400;
    this.y = 560; //560
    this.w = w;
    this.h = h;
    this.img = img;
}

function startgame() {
    init();

}


window.onload = function () {
    init();
}

function init() {
    //canvas element
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    backgroundImage = new Image();
    backgroundImage.src = game_images.mraky;

    fantomas = new Image();
    fantomas.src = game_images.fantom;

    plank = new Image();
    plank.src = game_images.plank;


    plane = new Plane(width / 2, height - 5, planeW, planeH, fantomas);
    plank = new Prekazka(width / 2, height - 5, plankw, plankh, plank);

    window.addEventListener('keydown', onKeyDown, true); //add listener
    window.addEventListener('keyup'  , onKeyUp  , true);

    timer = new classTimer(loop, 10);
    timer.start();

}

function loop() {

    ctx.clearRect(0, 0, width, height);
    background();



    //ctx.fillStyle = "red";
    //  ctx.fillRect(plane.x, plane.y, plane.w, plane.h);

    iterationm++;
    pohybx = height + (Math.sin(((iterationm * 5.5) / width)) * 150) - 110;
    ctx.drawImage(plane.img, plane.x, plane.y, plane.w, plane.h);
    //alert(+plane.velY)
    // ctx.drawImage(plank,400,560,275,16);
    ctx.drawImage(plank.img, pohybx, plank.y, plank.w, plank.h);


    if (plane.y + plane.h > plank.y &&
        plane.y + plane.h < plank.y + plank.h &&
        plane.x + plane.w > pohybx &&
        plane.x < pohybx + plank.w

    ) {
        ctx.fillText("opica", 150, 320);
        plane.y = plank.y - plane.h; //postavicka zostane na prekazke !
//        plane.x=pohybx;
        plane.jumping = false;
        plane.velY += -gravity; //gravitacia zaporna aby postavicka nepresla cez prekazku

    }
    //if (plane.x>=(390-plane.w) )return false;
    //    if (plane.x>(400-plane.w)){//plane.x>(400-plane.w)
    //    ctx.fillText("opicas", 150, 320);

    //}
    //  alert(+400-plane.w)
    ctx.fillText("plankx = " + plank.x, 150, 340);
    ctx.fillText("planex = " + plane.x, 150, 350);
    ctx.fillText("pohybx = " + pohybx , 150, 370);
    //listen for keyboard inputs, ship-pos, check boundaries


    if (plane.x < (pohybx + plank.w) &&
        pohybx < (plane.x + plane.w) &&
        plane.y < (plank.y + plank.h) &&
        plank.y < (plane.y + plane.h)
        //  &&
        //plane.y+plane.h>plank.y+plank.h
    ) {
        // plane.x=plane.h+plank.h;     

        plane.x -= plane.velX;
        plane.y += plane.velY;
        // plane.velY = +plane.speed*2;



        ctx.fillText("stop", 150, 390);

    }

var pohyb_state = '---';

    if (up) {
        if (!plane.jumping) {
            plane.jumping = true;
            plane.velY = -plane.speed * 2;
pohyb_state = 'up';
        }

    }

    if (right) {
        // right arrow
        if (plane.velX < plane.speed) {
            plane.velX++;
        }
pohyb_state = 'right';
    }

    if (left) {
        if (plane.velX > -plane.speed) {
            plane.velX--;
        }
pohyb_state = 'left';
    }

ctx.fillText("pohyb = "+pohyb_state, 150, 400);

    plane.velX *= friction;

    plane.velY += gravity;

    plane.x += plane.velX;
    plane.y += plane.velY;
    if (plane.x >= width - plane.w) {
        plane.x = width - plane.w;
    } else if (plane.x <= 0) {
        plane.x = 0;
    }

    if (plane.y >= height - plane.h) {
        plane.y = height - plane.h;
        plane.jumping = false;
    }
    //alert(+plane.y )
}




//function/statements for keyDown
function onKeyDown(event) {
ctx.fillText("eventDown = "+eventKey(event), 150, 200);
    switch (eventKey(event)) { //get the key-code !
    case 38: //up-arrow pressed
        up = true;

        break;
    case 40: //down-arrow pressed
        down = true;
        break;
    case 37: //left-arrow pressed
        left = true;

        break;
    case 39: //right-arrow pressed
        right = true;

        break;
    case 32: //space-bar pressed

        if (!plane.jumping) {
            plane.jumping = true;
            plane.velY = -plane.speed * 2;
        }


        break;
    }
}

//function/statements for keyUp
function onKeyUp(event) {
ctx.fillText("eventUp = "+eventKey(event), 150, 210);
    switch (eventKey(event)) { //!
    case 38:
        up = false;
        break;
    case 40:
        down = false;
        break;
    case 37:
        left = false;
        break;
    case 39:
        right = false;
        break;
    case 32:

        break;
    }

}

function eventKey(event) {return event.charCode || event.keyCode || event.which || null;}    //!
    </script>
</head>

<body>


    <canvas id="canvas"></canvas>
    <p>Odkaz na stiahnutie zdrojového kódu <a href="subory.zip">tu</a>
        <br>
<input type=button value=stop  onclick="timer.stop()">
<input type=button value=start onclick="timer.start()">

</body>

</html>
juraj
Profil
#3 · Zasláno: 10. 2. 2014, 13:51:30
Odpovědět Citovat
Zdravím
ja mám,ale problém, že keď postavička skočí na plošinku, aby sa s ňou spolu pohybovala
a aby sa postavička dala ovládať aj šípkami.
Dolu pod canvasom je aj odkaz na stiahnutie súborov
peta
Profil
#4 · Zasláno: 10. 2. 2014, 14:27:24 · Upravil/a: peta o okamžik později
Odpovědět Citovat 
plane.x = pohybx
No, sak jo, ti to rikam, ze je to spatne. A tech duvodu je vic a jak se projevuji.
Pohybx je pohyb plosinky v bode plosinky 0,0. Kdyz na plosinku naskocis, tak musis zachovat rozdil od bodu 0,0, kam postavicka dopadne. Kdyz se pak pohnes doprava, tak se musi posunout a ne udrzovat stav: jsem na plosince, tudiz vse ignoruj a nuluj mou pozici na souradnice plane.x = pohybx. 
delta = pohybx2 - pohybx1; //1 pred vypoctem, 2 po vypoctu pohybu, cili prirustek polohy plosinky
plane.x += (naplosince==true ? delta : 0); // nevim, jak ten stav ted oznacujes, protoze v objektu plane nic this.naplosince neni
juraj
Profil
#5 · Zasláno: 10. 2. 2014, 15:04:17
Odpovědět Citovat
Do objektu Plane som pridal 
var naplosince=false;
potom som upravil takto 
pohybx = height + (Math.sin(((iterationm * 5.5) / width)) * 150) - 110;
    delta =  (pohybx-plane.x); 
        if (plane.y + plane.h > plank.y &&
        plane.y + plane.h < plank.y + plank.h &&
        plane.x + plane.w > pohybx &&
        plane.x < pohybx + plank.w
 
    ) {         
        ctx.fillText("opica", 150, 320);
        plane.y = plank.y - plane.h; //postavicka zostane na prekazke !
            plane.x += (naplosince=true ? delta : 0);
//       plane.x=pohybx;
       plane.jumping = false;

        plane.velY += -gravity; //gravitacia zaporna aby postavicka nepresla cez prekazku
 
    }
ako sa vypočíta potom pohybx2 a pohybx1?
dakujem
peta
Profil
#6 · Zasláno: 10. 2. 2014, 15:38:06
Odpovědět Citovat
juraj: 
0.
pohybx2 = 0;
1.
pohybx1 = pohybx2;
pohybx2 = height + (Math.sin(((iterationm * 5.5) / width)) * 150) - 110;
Taky muzes sam premyslet nez to das do fora. Tva uloha, tve vzorecky, cizi clovek to musi nastudovat a pochopit.
Pokud si nevystacis s hlavou a papirem, tak jsou ruzne debugovaci nastroje, ktere vypisuji obsah promennych a umoznuji spoustet program radek po radku, pripadne zastavit v nejakem presnem okamziku. ty si na to muzes udelat funkci, ktera ti pri zmacknuti klavesy zastavi casovac.
juraj
Profil
#7 · Zasláno: 10. 2. 2014, 15:58:10
Odpovědět Citovat 
iterationm++;
    
    pohybx1 = pohybx;
    pohybx = height + (Math.sin(((iterationm * 5.5) / width)) * 150) - 110;
    delta =  pohybx - pohybx1;  

        ctx.fillText("delta = " + delta, 150, 380);
    ctx.drawImage(plane.img, plane.x, plane.y, plane.w, plane.h);
    //alert(+plane.velY)
    // ctx.drawImage(plank,400,560,275,16);
    ctx.drawImage(plank.img, pohybx, plank.y, plank.w, plank.h);
 
 
    if (plane.y + plane.h > plank.y &&
        plane.y + plane.h < plank.y + plank.h &&
        plane.x + plane.w > pohybx &&
        plane.x < pohybx + plank.w
 
    ) {         
        ctx.fillText("opica", 150, 320);
        plane.y = plank.y - plane.h; //postavicka zostane na prekazke !
            plane.x += delta;
//       plane.x=pohybx;
       plane.jumping = false;

        plane.velY += -gravity; //gravitacia zaporna aby postavicka nepresla cez prekazku
 
    }
    //if (plane.x>=(390-plane.w) )return false;
    //    if (plane.x>(400-plane.w)){//plane.x>(400-plane.w)
    //    ctx.fillText("opicas", 150, 320);
 
    //}
    //  alert(+400-plane.w)
    ctx.fillText("plankx = " + plank.x, 150, 340);
    ctx.fillText("planex = " + plane.x, 150, 350);
    ctx.fillText("pohybx = " + pohybx , 150, 370);
ďakujem ti veľmi pekne,už mi to funguje ako som to chcel
juraj
Profil
#8 · Zasláno: 10. 2. 2014, 18:53:40
Odpovědět Citovat
Ešte mám jednu otázku,ako zistim, či veľmi zaťažujem procesor?
peta
Profil
#9 · Zasláno: 11. 2. 2014, 08:27:46 · Upravil/a: peta o 2 minuty později
Odpovědět Citovat
ctrl+shift+esc - zobrazi win Spravce uloh, tam si muzes pridat sloupec procesor a sledovat zatez firefoxu. Pak totez udelej na nejakem starsim pc nebo starsim prohlizeci a budes prekvapen :)
A ted si k tomu pust treba skype a prehravani filmu. Zkus pak ten program ovladat. Pokud se ti podari pc zatizit, tak to muze delat zajimave kousky :)
Časová prodleva: 10 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0