PC-HELP.CZ

Čaute, riešim jeden celkom zásadný problém. Robím na hre s názvom Breakout. Jej cieľom je zostreľovať tehličky v hernom poli pomocou odrazov guličky. Pohyb guličky je v poriadku, normálne sa odráža od stien, no dáko mám problém s rozpohybovaním bumperu pomocou myši. Momentálne je to v takom štádiu, že mi momentálne nechytí x a nejde...mám dáky problém so syntaxou. Kto by mi bol ochotný pomôcť to rozbehať? tu je zdroják:

Kód: Vybrat vše

  var canvas
  var ctx
  var text
  var frame = 0
  
  //var mouse = {x: 0, y: 0}
 
setInterval(step,33);
  // Model - uchovava vsetky objekty v scene a modeluje ich vlastnosti
  
  var ball = {
    x: 50,
    y: 50,
    dx: 10,
    dy: 3,
  
    move: function() {
      // Logika
      if (this.x >= canvas.width || this.x <= 0)
         { this.dx *= -1 };
      if (this.y >= canvas.height || this.y <= 0 ) 
         { this.dy *= -1 };
     /*if (this.y = canvas.height)
     {   frame = 0      }*/

      // Posun
      this.x = this.x - this.dx;
      this.y = this.y - this.dy;
     }
   }
/* var bumper = {
  x: 120,
  y: 20, 
  ddx: 5,   

var ddx = mouse.x - this.x
    }*/
  


  // View - stara sa len o vykreslovanie ale pozna model
  function drawBall() {
    // Zmaz plochu
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // lopta
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
  }
  function drawBumper(){
   ctx.beginPath();
      ctx.rect(/*bumper.x*/275, 362, 300, 365);
      ctx.fillStyle = 'blue';
      ctx.fill();
  
  }

 /* function setText() {
    text.innerHTML = "Frame: " + frame;
  }*/

  // Controller - ovlada beh aplikacie
  function step() {
    frame++;
    ball.move();
    drawBall();
   bumper.move();
   drawBumper();
   // setText();
  }

  // Inicializacia
  window.onload = function() {
    
    text = document.getElementById("text");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
  }
/*window.onmousemove = function(event) {
    mouse.x = event.x
    mouse.y = event.y
  }*/

Čau,
to je celý kod?
Nějak tam nevidím metodu bumber.move + je to nějaký zakomentovaný...
Pošli sem verzi, s kterou máš problém.

no nejak som si s daným problémom poradil, teraz riešim vykreslenie tehličiek...čo mám spraviť? ešte stále niektoré veci nefungujú...tak isto ako zmena pozície lopty po páde mimo a odrátavanie životov
a ešte debugger hlási:
Uncaught TypeError: object is not a function
Uncaught ReferenceError: ClearInterval is not defined

čo sa týka onClick-u, chcel som pomocou toho spúšťať loptu po štarte a po resete pozície

tu je komplet celý kód:

Kód: Vybrat vše

<html>
<head>
  <title>Breakout</title>
  <script>
  var canvas
  var ctx
  var text
  var frame = 0
  var intervalId = 0
  var mouse = {x: 340}
 
  var balls = 3
  
  intervalId = setInterval(draw,33);
  
  var ball = {
    x: 400,
    y: 375,
    dx: 10,
    dy: 5,
  
    move: function() {

      if (this.x >= canvas.width || this.x <= 0)
            { this.dx *= -1 };
      if (this.y >= canvas.height || this.y <= 0 ) 
            { this.dy *= -1 };
      
     
      if (ball.y > 375) {
        if (ball.x > bumper.x && ball.x < bumper.x + 150)
        ball.dy *= -1;
      else { 
        balls--;
        ClearInterval(intervalId);
      if (ClearInterval = true){
        window.setTimeout(draw,5000);
        intervalId = setInterval(draw,33);
    }
    
    if (balls = 0)
      text.innerHTML = "GAME OVER!";
      
     
    }
  }
  
    

      // Posun
      this.x = this.x - this.dx;
      this.y = this.y - this.dy;
      }
      
    
      
    }

    
  


  // vykresli loptu
  function drawBall() {
    // Zmaz plochu
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // lopta
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
  }
  
  
  
   var bumper = {
  x: 325,
  y: 375,

  move: function() {
bumper.x = mouse.x - 75;//- this.x




}
}
  
  
  
  /*if (dy = 375 && dx >= bumper.x||(dy = 375 && dx <= bumper.x + 150){
   ball.dx *= -1;
   ball.dy *= -1;
  }*/
  
  
  
  //vykresli bumper
  function drawBumper(){
   ctx.beginPath();
      ctx.rect(bumper.x, 375, 150, 385);
      ctx.fillStyle = 'blue';
      ctx.fill(); 
  }

  function bricks(){
  rows: 5;
  cols: 20;
  width: 40;
  height: 15;
  padding: 1; 

  bricks = new Array (this.rows);
  for (i=0;i<= this.rows;i++){
    bricks[i] = new Array(this.cols);
    for (j=0; j < this.cols; j++) {
      bricks[i][j] = 1;
    }
  }
    //vykresli tehly
  for (i=0; i < this.rows; i++) {
    for (j=0; j < this.cols; j++) {
      if (bricks[i][j] == 1) {
        rect((j * (this.width + this.padding)) + this.padding, 
             (i * (this.height + this.padding)) + this.padding,
             this.width, this.height);
        }
    }
}
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  function setText() {
    //text.innerHTML = "Frame: " + frame;
    //text.innerHTML = "x: " + event.x;
    text.innerHTML = "Balls: " + balls;
  }

  // Controller - ovlada beh aplikacie
  function draw() {
    frame++;
    ball.move();
    drawBall();
    bumper.move();
    drawBumper();
    bricks();
    setText();
    
  }

  function click(event){
  var x = event.pageX
  var y = event.PageY
  
  
  }
  // Inicializacia
  window.onload = function() {
    // Nastavenie premennych
    
    text = document.getElementById("text");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
  }
  
  
  window.onmousemove = function(event) {
    mouse.x = event.x
    mouse.y = event.y
  }
  </script>
  <style>
  #canvas {
    border-style: solid;
    //margin-left: 30%;
    color : black;
    border-width: 1px;
    cursor: none;
  }
  
 #text{
 font-size:24px;
 font-style:bold;
 }
  </style>
</head>
<body>
  <p>
    <canvas id="canvas" width="800" height="400" ></canvas>
    <p id="text"></p>
  </p>
</body>
</html>

ten zakomentovaný kód tam je na skúšku

--- Doplnění předchozího příspěvku (06 Dub 2015 23:05) ---

takže niečo som spravil, no teraz mám zas iný problém...ako mám spraviť, aby sa hra znovu spustila v stave ako na začiatku s tým, že odčíta tú loptu? momentálne to mám tak, že ju odčíta a spustí sa clearInterval
kolízie s tehličkami nejak doriešim

Kód: Vybrat vše

<html>
<head>
  <title>Breakout</title>
  <script>
  var canvas;
  var ctx;
  var text;
  var frame = 0;
  var intervalId = 0;
  var mouse = {x: 340};
 
  var balls = 3;
  
  var xbricks;
  
  //bricks:
  var rows = 5;
  var cols = 9;
  var width = 88;
  var height = 15;
  var padding = 1;
  
 intervalId = setInterval(draw,33);
  

  
  var ball = {
    x: 400,
    y: 375,
    dx: 10,
    dy: 5,
  
    move: function() {

      if (this.x >= canvas.width || this.x <= 0)
            { this.dx *= -1 };
      if (this.y >= canvas.height || this.y <= 0 ) 
            { this.dy *= -1 };
      
      if (ball.y > 375) {
        if (ball.x > bumper.x && ball.x < bumper.x + 150)
        ball.dy *= -1;
      else { 
        balls--;
        clearInterval(intervalId);
        /*intervalId = setTimeout(draw,5000);
        intervalId == 0;
        ball.x == 400;
        ball.y == 375;
        bumper.x == 325;*/
        
        
      /*if (clearInterval == true){
        intervalId = setTimeout(draw,5000);
        intervalId = setInterval(draw,33);
        
    }*/
    
    if (balls <= 0)
      text.innerHTML = "GAME OVER!";
      
     
    }
  }
  
    

      // Posun
      this.x = this.x - this.dx;
      this.y = this.y - this.dy;
      }
      
    
      
    }

    
  


  // vykresli loptu
  function drawBall() {
    // Zmaz plochu
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // lopta
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
  }
  
  
  
   var bumper = {
  x: 325,
  y: 375,

  move: function() {
  bumper.x = mouse.x - 75;




}
}
  
  
  
  /*if (dy = 375 && dx >= bumper.x||(dy = 375 && dx <= bumper.x + 150){
   ball.dx *= -1;
   ball.dy *= -1;
  }*/
  
  
  
  //vykresli bumper
  function drawBumper(){
   ctx.beginPath();
   ctx.rect(bumper.x, 375, 150, 385);
   ctx.closePath();
   ctx.fillStyle = "blue";
   ctx.fill();
     
  }

  function bricks(){
 /* var rows = 5;
  var cols = 20;
  var width = 40;
  var height = 15;
  var padding = 1; */
  
  xbricks = new Array(rows);
  for (var i=0; i<= rows; i++){
    xbricks[i] = new Array(cols);
    for (var j=0; j <= cols; j++) {
      xbricks[i][j] = 1;
    }
  }
}
  function drawBricks(){
  var rowcolors = ["red", "green", "yellow", "purple", "black"];
  for (var i=0; i < rows; i++) {
    ctx.fillStyle = rowcolors[i];
    for (var j=0; j < cols; j++) {
      if (xbricks[i][j] == 1) {
        ctx.beginPath();
        ctx.rect((j * (width + padding)) + padding, 
                (i * (height + padding)) + padding,
                width, height);
        ctx.closePath();
        
        ctx.fill();
        }
    }
    
  }
  
}


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  function setText() {
    //text.innerHTML = "Frame: " + frame;
    //text.innerHTML = "x: " + event.x;
    text.innerHTML = "Balls: " + balls;
  }

  // Controller - ovlada beh aplikacie
  function draw() {
    frame++;
    ball.move();
    drawBall();
    bumper.move();
    drawBumper();
    bricks();
    drawBricks();
    setText();
    
  }

  function click(event){
  var x = event.pageX;
  var y = event.pageY;
  
  
  }
  // Inicializacia
  window.onload = function() {
    // Nastavenie premennych
    
    text = document.getElementById("text");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
  }
  
  
  window.onmousemove = function(event) {
    mouse.x = event.x
    mouse.y = event.y
  }
  </script>
  <style>
  #canvas {
    border-style: solid;
    //margin-left: 30%;
    color : black;
    border-width: 1px;
    cursor: none;
  }
  
 #text{
 font-size:24px;
 font-style:bold;
 }
  </style>
</head>
<body>
  <p>
    <canvas id="canvas" width="800" height="400" ></canvas>
    <p id="text"></p>
  </p>
</body>
</html>

Čaute, takže som sa nedočkal vašich rád, tak by som vás poprosil, aby ste mi pomohli vychytať tieto chyby:

-nemiznú tehličky
-hra sa po páde loptičky zastavuje

Prosím pomôžte mi čo najskôr.Ďakujem.

Kód: Vybrat vše

<html>
<head>
  <title>Breakout</title>
  <script>
  var canvas
  var ctx
  var text
  var frame = 0
  var intervalId = 0
  var mouse = {x: 340}
 
  var balls = 3
  
  intervalId = setInterval(draw,33);
  
  var ball = {
    x: 400,
    y: 375,
    dx: 10,
    dy: 5,
  
    move: function() {

      if (this.x >= canvas.width || this.x <= 0)
            { this.dx *= -1 };
      if (this.y >= canvas.height || this.y <= 0 ) 
            { this.dy *= -1 };
      
     
      if (ball.y > 375) {
        if (ball.x > bumper.x && ball.x < bumper.x + 150)
        ball.dy *= -1;
      else { 
        balls--;
        ClearInterval(intervalId);
      if (ClearInterval = true){
        window.setTimeout(draw,5000);
        intervalId = setInterval(draw,33);
    }
    
    if (balls = 0)
      text.innerHTML = "GAME OVER!";
      
     
    }
  }
  
    

      // Posun
      this.x = this.x - this.dx;
      this.y = this.y - this.dy;
      }
      
    
      
    }

    
  


  // vykresli loptu
  function drawBall() {
    // Zmaz plochu
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // lopta
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
  }
  
  
  
   var bumper = {
  x: 325,
  y: 375,

  move: function() {
bumper.x = mouse.x - 75;//- this.x




}
}
  
  
  
  /*if (dy = 375 && dx >= bumper.x||(dy = 375 && dx <= bumper.x + 150){
   ball.dx *= -1;
   ball.dy *= -1;
  }*/
  
  
  
  //vykresli bumper
  function drawBumper(){
   ctx.beginPath();
      ctx.rect(bumper.x, 375, 150, 385);
      ctx.fillStyle = 'blue';
      ctx.fill(); 
  }

  function bricks(){
  rows: 5;
  cols: 20;
  width: 40;
  height: 15;
  padding: 1; 

  bricks = new Array (this.rows);
  for (i=0;i<= this.rows;i++){
    bricks[i] = new Array(this.cols);
    for (j=0; j < this.cols; j++) {
      bricks[i][j] = 1;
    }
  }
    //vykresli tehly
  for (i=0; i < this.rows; i++) {
    for (j=0; j < this.cols; j++) {
      if (bricks[i][j] == 1) {
        rect((j * (this.width + this.padding)) + this.padding, 
             (i * (this.height + this.padding)) + this.padding,
             this.width, this.height);
        }
    }
}
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  function setText() {
    //text.innerHTML = "Frame: " + frame;
    //text.innerHTML = "x: " + event.x;
    text.innerHTML = "Balls: " + balls;
  }

  // Controller - ovlada beh aplikacie
  function draw() {
    frame++;
    ball.move();
    drawBall();
    bumper.move();
    drawBumper();
    bricks();
    setText();
    
  }

  function click(event){
  var x = event.pageX
  var y = event.PageY
  
  
  }
  // Inicializacia
  window.onload = function() {
    // Nastavenie premennych
    
    text = document.getElementById("text");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
  }
  
  
  window.onmousemove = function(event) {
    mouse.x = event.x
    mouse.y = event.y
  }
  </script>
  <style>
  #canvas {
    border-style: solid;
    //margin-left: 30%;
    color : black;
    border-width: 1px;
    cursor: none;
  }
  
 #text{
 font-size:24px;
 font-style:bold;
 }
  </style>
</head>
<body>
  <p>
    <canvas id="canvas" width="800" height="400" ></canvas>
    <p id="text"></p>
  </p>
</body>
</html>

PC-HELP.CZ

Javascript - ako na pohyb objektu

Javascript - ako na pohyb objektu

Re: Javascript - ako na pohyb objektu

Re: Javascript - ako na pohyb objektu

Re: Javascript - ako na pohyb objektu

Re: Javascript - ako na pohyb objektu

Re: Javascript - ako na pohyb objektu Vyřešeno