dynamiczna zmiana wyniku- pong

pytanie zadane 28 listopada 2016 w JavaScript przez Meenti Nowicjusz (160 p.)

Witam, Mam problem przy stałym wyświetlaniu wyników po odbiciu paletek.Wynik się wyświetla ale znika po 1s.

<html>
<head>
</head>
<body onkeydown="keydown(event);" onkeyup="keyup(event)">
    <canvas width="500" height="300" id="canvas"></canvas>
    <script src="pong2.js"></script>
    

</body>
</html>

function Ball(x, y) {
    this.x = x;
    this.y = y;
    this.dx = 5;
    this.dy = 5;
    this.r = 10;
    
};



Ball.prototype.draw = function(ctx) {
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
    ctx.fillStyle=this.color;
    ctx.fill();
}

Ball.prototype.move = function(ctx) {
        if(this.x>=495 || this.x<=5) {
            this.dx=this.dx*-1;
        }
        if(this.y>=295 || this.y<=5) {
            this.dy=this.dy*-1;
        }
    this.x = this.x+this.dx;
    this.y = this.y+this.dy;
    this.draw(ctx);    
}

function Pad() {
    this.x = 0;
    this.y = 0;
    this.dy = 0;
    this.w = 5;
    this.h = 50;
}

Pad.prototype.draw = function(ctx) {
    ctx.beginPath();
    ctx.rect(this.x, this.y, 5, 50);
    ctx.fillStyle = "#3B0B3B";
    ctx.fill();
}

Pad.prototype.move = function(ctx) {
    this.y = this.y + this.dy;
    this.draw(ctx);
    if(this.y < 0) {
        this.y = 0;
    }
    
    if(this.y > 250) {
        this.y = 250;
    }
}
var wynik1 = 0 ;
var wynik2 = 0;
Pad.prototype.hit = function (ball){
    
    if((ball.y>=this.y) && (ball.y<=(this.y + this.h))){
        if(ball.dx>0){
            if((ball.x+ball.r)==this.x){
                ball.dx=-ball.dx;
                ball.color="#D18100";
                var t1 = wynik1++;
                ctx.fillText(t1,400,200);
           
                
               
            }
        }
        else{
            if((ball.x-ball.r)==(this.x + this.w)){
                ball.dx=-ball.dx;
                ball.color="#00BEFF";
                 var t2 = wynik2++;
                ctx.fillText(t2,200,200);
                
             
            }
        }
    }
} 


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var pad1 = new Pad();
pad1.x = 10;
pad1.draw(ctx);

var pad2 = new Pad();
pad2.x = 485;
pad2.draw(ctx);

var ball = new Ball(100, 100);

function keydown(event) {
    var char  = event.which || event.keyCode
    document.title = char;
    
    //w
    if(char == 87) {
        pad1.dy = -5;
    }
        
    //s    
    if(char == 83) {
        pad1.dy = 5;
    }
    
    //strzalka w gore
    if (char==38) {
        pad2.dy = -5;
    }
    
    //strzalka w dol
    if (char==40) {
        pad2.dy = 5;
    }

}

function keyup(event) {
    var char = event.which || event.keyCode
    //w
    if(char == 87) {
        pad1.dy = 0;
    }
        
    //s    
    if(char == 83) {
        pad1.dy = 0;
    }
    
    //strzalka w gore
    if (char==38) {
        pad2.dy = 0;
    }
    
    //strzalka w dol
    if (char==40) {
        pad2.dy = 0;
    }
}

var wynik2 = 0 ;


function play() {
    ctx.fillStyle = "#F0C8F0";
    ctx.fillRect(0, 0, 500, 300);
    
    


    pad1.move(ctx);
    pad2.move(ctx);
    ball.move(ctx);
    
    pad1.hit(ball);
    pad2.hit(ball);
    ctx.fillStyle="black";
    ctx.font="30px Verdana";
    //ctx.fillText(wynik1,400,200)
        //wynik1++;
  
}

setInterval(play, 25);

1 odpowiedź

odpowiedź 28 listopada 2016 przez Predo Bywalec (2,260 p.)

Przejrzyj kod bo masz błędy. W HTMLu niepotrzebny średnik

<body onkeydown="keydown(event);"

A co to jest? To jedna instrukcja, czy brak średnika? I co tu robi operator logiczny OR?

var char  = event.which || event.keyCode
    document.title = char;

komentarz 28 listopada 2016 przez Meenti Nowicjusz (160 p.)

brak średnika ;)

Pad.prototype.hit = function (ball){
     
    if((ball.y>=this.y) && (ball.y<=(this.y + this.h))){
        if(ball.dx>0){
            if((ball.x+ball.r)==this.x){
                ball.dx=-ball.dx;
                ball.color="#D18100";
                var t1 = wynik1++;
                ctx.fillText(t1,400,200);
            
                 
                
            }
        }
        else{
            if((ball.x-ball.r)==(this.x + this.w)){
                ball.dx=-ball.dx;
                ball.color="#00BEFF";
                 var t2 = wynik2++;
                ctx.fillText(t2,200,200);
                 
              
            }
        }
    }
}

Głównie chodzi mi o ten fragment kodu.W nim zawarte jest liczenie punktów.

var t2 = wynik2++; ctx.fillText(t2,200,200);