2017-04-20 1 views
-1

Mon code donne une sortie boîte noire de 600 * 800 dimensions sans autre affichage.No Affichage lors du codage du jeu pong en Javascript

J'ai essayé de coder un jeu de base-pong la fonction anonyme appelle en conséquence

<canvas id = "gc" width = "640" height = "480"> </canvas> 
<script> 
userPlankYPosition =40; 
computerPlankYPosition = 40; 
plankWidth = 10; 
plankHeight =100; 
ballPositionX=ballPositionY=50; 
ballDimension =6; 
XVelocity=YVelocity=4; 
playerScore=ComputerScore=0; 
computerPlankSpeedinY=4; 
var canvas,canvasContext; 
    window.onload=function() { 
     canvas=document.getElementById('gc'); 
     canvasContext=canvas.getContext('2d'); 
     setInterval(update, 1000/30); 

    canvas.addEventListener('mousemove',function(e){ 
     userPlankYPosition = e.clientY-plankHeight/2; 
    }); 
}; 
function reset(){ 
    ballPositionX=canvas.width/2; 
    ballPositionY=canvas.height/2; 
    XVelocity-=XVelocity; 
    YVelocity=3; 
}; 
function update(){ 
    canvasContext.fillstyle='black'; 
    canvasContext.fillRect(0,0,canvas.width,canvas.height); 
    canvasContext.fillstyle='white'; 
    canvasContext.fillRect(0,userPlankYPosition,plankWidth,plankHeight); 
    canvasContext.fillRect(canvas.width-plankWidth,computerPlankYPosition,plankWidth,plankHeight); 
    canvasContext.fillRect(ballPositionX-ballDimension/2,ballPositionY-ballDimension/2,ballDimension,ballDimension); 
    canvasContext.fillText(playerScore,100,100); 
    canvasContext.fillText(ComputerScore,canvas.width-100,100); 
    ballPositionX+=XVelocity; 
    ballPositionY+=YVelocity; 
    if(ballPositionY<0 && YVelocity <0){ 
     YVelocity-=YVelocity; 
    } 
    if(ballPositionY>canvas.height && YVelocity <0){ 
     YVelocity-=YVelocity; 
    } 
    if(ballPositionX<0) 
    { 
     if(ballPositionY>userPlankYPosition && ballPositionY<userPlankYPosition+plankHeight){ 
      XVelocity-=XVelocity; 
      dy=ballPositionY-(userPlankYPosition+plankHeight/2); 
      YVelocity = dy*0.3; 
     } 
     else{ 
      ComputerScore++; 
      reset(); 
     } 
    } 

    if(ballPositionX>canvas.width) 
    { 
     if(ballPositionY>computerPlankYPosition && ballPositionY<computerPlankYPosition+plankHeight){ 
      XVelocity-=XVelocity; 
      dy=ballPositionY-(computerPlankYPosition+plankHeight/2); 
      YVelocity = dy*0.3; 
     } 
     else{ 
      playerScore++; 
      reset(); 
     } 
    }; 
    if(computerPlankYPosition+plankHeight/2<ballPositionY){ 
     computerPlankYPosition+=computerPlankSpeedinY; 
    } 
    else{ 
     computerPlankYPosition-=computerPlankSpeedinY; 
    } 
    // canvasContext.fillstyle='black'; 
    // canvasContext.fillRect(0,0,canvas.width,canvas.height); 
    // canvasContext.fillstyle='white'; 
    // canvasContext.fillRect(0,userPlankYPosition,plankWidth,plankHeight); 
    // canvasContext.fillRect(canvas.width-plankWidth,computerPlankYPosition,plankWidth,plankHeight); 
    // canvasContext.fillRect(ballPositionX-ballDimension/2,ballPositionY-ballDimension/2,ballDimension,ballDimension); 
    // canvasContext.fillText(playerScore,100,100); 
    // canvasContext.fillText(ComputerScore,canvas.width-100,100);  
}; 

la mise à jour la fonction() périodique qui appelle reset() et la sortie est: output

+2

Vous devriez probablement utiliser des noms de variables significatifs. Il est douloureux de lire ... – Badacadabra

+0

ok devrais-je éditer le code et poster? –

+0

Je le pense. Il est difficile de vous aider si nous ne pouvons pas comprendre ce que fait votre code. – Badacadabra

Répondre

0

Essayez d'appeler update à partir de setInterval sans les parenthèses.

+0

J'ai essayé d'appeler la mise à jour sans la paranthésis mais le problème persiste. –