rien n'est dessiné sur la page en utilisant javascript et canvas

J'essaie de développer un jeu et je commence à tremper mes orteils dans la balise HTML <canvas> et de l'utiliser avec javascript. Mon programme ici est mon travail en cours clone de PONG. J'ai réussi à ajouter les deux palettes sans erreur mais comme j'ai ajouté la fonction Ball, il refuse tout simplement de dessiner quoi que ce soit sur l'écran et donc on me donne une page recouverte en noir.rien n'est dessiné sur la page en utilisant javascript et canvas

Serait-ce parce que j'utilise les cours?

Voici le code:

// ctx.fillStyle = 'rgba(red, green, blue, alpha)'; 
 
// ctx.fillRect(x, y, width, height); 
 

 
var canvas; 
 
var ctx; 
 
var dx = 5; 
 
var dy = 5; 
 

 
//Class Definitions 
 
function Game(width, height, colour) { 
 
\t this.width = width; 
 
\t this.height = height; 
 
\t this.colour = colour; 
 
} 
 

 
function Player(width, height, colour, x, y, up, down) { 
 
\t this.width = width; 
 
\t this.height = height; 
 
\t this.colour = colour; 
 
\t this.x = x; 
 
\t this.y = y; 
 
\t this.up = up; 
 
\t this.down = down; 
 
\t this.move = function(ny) { 
 
\t \t this.y = this.y + ny; 
 
\t \t ctx.fillStyle = this.colour; 
 
\t \t ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t \t \t \t 
 
\t }; 
 
} 
 

 
function Ball(width, height, colour, x , y, isTouched, isInGoal) { 
 
\t this.width = width; 
 
\t this.height = height; 
 
\t this.colour = colour; 
 
\t this.x = x; 
 
\t this.y = y; 
 
\t this.isTouched = isTouched; 
 
\t this.isInGoal = isInGoal; 
 
\t this.move = function() { 
 
\t \t clear(); 
 
\t \t this.x = this.x + 1; 
 
\t \t ctx.fillStyle = this.colour; 
 
\t \t ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t }; 
 
} 
 

 
//Creating new Classes 
 

 
var gameStage = new Game((window.innerWidth), (window.innerHeight), 'rgb(0,0,0)'); 
 
var paddleOne = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/10), (gameStage.height/2), 38, 40); 
 
var paddleTwo = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/1.1), (gameStage.height/2), 87, 83); 
 
var ball = new Ball(20, 20, 'rgb(255,255,255)', (gameStage.width/2), (gameStage.height/2), 0, 0); 
 

 
//Initialisation 
 

 
function init(){ 
 
\t canvas = document.getElementById('game'); 
 
\t canvas.setAttribute('width', gameStage.width); 
 
\t canvas.setAttribute('height', gameStage.height); 
 
\t canvas.setAttribute('tabindex', 0); 
 
\t if (game.getContext){ 
 
\t \t ctx = canvas.getContext('2d'); 
 

 
\t \t return setInterval(ball.move, 10); 
 
\t \t return setInterval(draw, 10); 
 
\t } 
 

 
} 
 

 
//Canvas Functions 
 

 
function clear(){ 
 
\t ctx.clearRect(0, 0, gameStage.width, gameStage.height); 
 
} 
 

 
function draw() { 
 
\t clear(); 
 
\t ctx.fillStyle = gameStage.colour; 
 
\t ctx.fillRect(0, 0, gameStage.width, gameStage.height); 
 
\t \t 
 
\t ctx.fillStyle = paddleOne.colour; 
 
\t ctx.fillRect(paddleOne.x, paddleOne.y, paddleOne.width, paddleOne.height); 
 

 
\t ctx.fillStyle = paddleTwo.colour; 
 
\t ctx.fillRect(paddleTwo.x, paddleTwo.y, paddleTwo.width, paddleTwo.height); 
 

 
\t console.log("PlayerOne Y Coordinate: " + paddleOne.y + "\n"); 
 
\t console.log("PlayerTwo Y Coordinate: " + paddleTwo.y + "\n"); 
 
} 
 

 
//Player Control 
 

 
function doKeyDown(e) { 
 
\t if (e.keyCode == paddleOne.up){ 
 
\t \t paddleOne.move(-5); 
 
\t } else if (e.keyCode == paddleOne.down) { 
 
\t \t paddleOne.move(5); 
 
\t } else if (e.keyCode == paddleTwo.up) { 
 
\t \t paddleTwo.move(-5); 
 
\t } else if (e.keyCode == paddleTwo.down) { 
 
\t \t paddleTwo.move(5); 
 
\t } 
 
} 
 

 
//For HTML 
 

 
function beginStuff(){ 
 
\t init(); 
 
\t window.addEventListener('keydown', doKeyDown, true); 
 
}

* { margin: 0; padding: 0;} 
 

 
body, html {height: 100%;} 
 

 

 
#game { 
 
    position: absolute; 
 
    width:100%; 
 
    height:100%; 
 
\t background-color: #000000; 
 
}

<!DOCTYPE HTML> 
 
<htmL> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>A game</title> 
 
\t <script type="text/javascript" src="game.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body onload="beginStuff();" > 
 
    <canvas id="game"> 
 
     Please upgrade your browser to support HTML5. <br/> 
 
    </canvas> 
 
    </body> 
 
</htmL>

Source

2017-09-16 Querky Bren

Avec l'aide de @skirtle, je me suis déplacé le ball.move(); à la fonction draw() et retiré l'appel clear() de la fonction ball.move().

Source

2017-09-19 06:52:11

Cela semble mal me:

return setInterval(ball.move, 10); 
return setInterval(draw, 10);

Tout d'abord, vous avez 2 retours. Deuxièmement, vous avez perdu la liaison sur la méthode move:

return setInterval(ball.move.bind(ball), 10);

Si cela ne résout pas je suggère pas à pas dans un débogueur, ligne par ligne, en vous assurant que tout est en train de faire exactement ce que vous Attendez-vous à.

Source

2017-09-16 05:04:55 skirtle

mis en œuvre vos trucs de retour de liaison, la balle de ce qu'il est censé faire, mais les pagaies n'apparaissent pas. Si je tiens en haut ou en bas la palette gauche clignote et se déplace et vice versa pour la palette droite. Comment puis-je réparer ça? –

@QuerkyBren Vous devez tout redessiner après avoir effacé le canevas. Actuellement, après avoir appelé 'clear', vous dessinez les pagaies ou la balle, pas les deux. – skirtle

rien n'est dessiné sur la page en utilisant javascript et canvas

Répondre

Questions connexes