nothing is drawn on page using javascript and canvas
Question
I am trying to develop a game and i am starting to dip my toes into the HTML <canvas> tag and using it with javascript. My program here is my work in progress clone of PONG. I have managed to add the two paddles with no error but as i have added the Ball function it simply refuses to draw anything on the screen and thus i am given a page covered in black.
Could it be because i am using classes?
Here is the 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) { this.width = width; this.height = height; this.colour = colour; } function Player(width, height, colour, x, y, up, down) { this.width = width; this.height = height; this.colour = colour; this.x = x; this.y = y; this.up = up; this.down = down; this.move = function(ny) { this.y = this.y + ny; ctx.fillStyle = this.colour; ctx.fillRect(this.x, this.y, this.width, this.height); }; } function Ball(width, height, colour, x , y, isTouched, isInGoal) { this.width = width; this.height = height; this.colour = colour; this.x = x; this.y = y; this.isTouched = isTouched; this.isInGoal = isInGoal; this.move = function() { clear(); this.x = this.x + 1; ctx.fillStyle = this.colour; ctx.fillRect(this.x, this.y, this.width, this.height); }; } //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(){ canvas = document.getElementById('game'); canvas.setAttribute('width', gameStage.width); canvas.setAttribute('height', gameStage.height); canvas.setAttribute('tabindex', 0); if (game.getContext){ ctx = canvas.getContext('2d'); return setInterval(ball.move, 10); return setInterval(draw, 10); } } //Canvas Functions function clear(){ ctx.clearRect(0, 0, gameStage.width, gameStage.height); } function draw() { clear(); ctx.fillStyle = gameStage.colour; ctx.fillRect(0, 0, gameStage.width, gameStage.height); ctx.fillStyle = paddleOne.colour; ctx.fillRect(paddleOne.x, paddleOne.y, paddleOne.width, paddleOne.height); ctx.fillStyle = paddleTwo.colour; ctx.fillRect(paddleTwo.x, paddleTwo.y, paddleTwo.width, paddleTwo.height); console.log("PlayerOne Y Coordinate: " + paddleOne.y + "\\n"); console.log("PlayerTwo Y Coordinate: " + paddleTwo.y + "\\n"); } //Player Control function doKeyDown(e) { if (e.keyCode == paddleOne.up){ paddleOne.move(-5); } else if (e.keyCode == paddleOne.down) { paddleOne.move(5); } else if (e.keyCode == paddleTwo.up) { paddleTwo.move(-5); } else if (e.keyCode == paddleTwo.down) { paddleTwo.move(5); } } //For HTML function beginStuff(){ init(); window.addEventListener('keydown', doKeyDown, true); }
* { margin: 0; padding: 0;} body, html {height: 100%;} #game { position: absolute; width:100%; height:100%; background-color: #000000; }
<!DOCTYPE HTML> <htmL> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>A game</title> <script type="text/javascript" src="game.js"></script> <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>
2 answers
solution1
0 2017-09-16 05:04:55
This looks wrong to me:
return setInterval(ball.move, 10);
return setInterval(draw, 10);
Firstly, you've got 2 returns. Secondly, you've lost the binding on the move method:
return setInterval(ball.move.bind(ball), 10);
If that doesn't fix it I suggest stepping through in a debugger, line-by-line, making sure that everything is doing exactly what you expect it to.
solution2
0 ACCPTED 2017-09-19 06:52:11
With help from @skirtle, i moved the ball.move(); to the draw() function and removed the clear() call from the ball.move() function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.