0
私はキャンバスでブロック打ち切りのゲームを作成する必要があるプロジェクトを持っていますが、何らかの理由でコードがキャンバスで描画を停止し、問題の解決策を見つけることができませんでした。キャンバスに描画することができません
//global variable
//setting the canvas state
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Boolean variables for each stage of the game
var startscreen = true;
var gameplaying = false;
var Game_over = false;
//Setting the ball position and size
var ball_x = canvas.width/2;
var ball_y = canvas.height - 30;
var ballRadius = 5;
//Setting the ball movement
var dx = 2;
var dy = -2;
//PLayer paddle size
var p_height = 10;
var p_width = 100;
//Player paddle start position
var Paddlex = (canvas.width - p_width)/2;
var Paddley = canvas.height - p_height;
//making sure the paddle doesnt move on its own
var paddleright = false;
var paddleleft = false;
//Set up the target blocks
var brickRowCount = 5;
var brickColumnCount = 13;
var brickWidth = 24;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var rowColours = ["#2294B2", "#FF3175", "#17CEFF", "#CCBF27", "#B2A507"];
var bricks = [];
for (c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (r = 0; r < brickRowCount; r++) {
bricks[c][r] = {
x: 0,
y: 0,
status: 1
};
}
}
//setting the event listeners to detect keypresses
document.addEventListener("Keydown", keyDownHandler, false);
document.addEventListener("Keyup", keyUpHandler, false);
//Detecting the key press
function keyDownHandler(e) {
if (e.keyCode == 39) {
paddleright = true;
}
if (e.keyCode == 37) {
paddleleft = true;
}
}
//Detecting the Key press has stopped
function keyUpHandler(e) {
if (e.keyCode == 39) {
paddleright = false;
}
if (e.keyCode == 37) {
paddleleft = false;
} else if (e.keyCode == 13) {
startscreen = false;
gameplaying = true;
Game_over = false;
}
}
//drawing the ball
function ball() {
ctx.beginPath();
ctx.arc(ball_x, ball_y, ballRadius, 0, Math.pi * 2);
ctx.fillstyle = "red";
ctx.fill();
ctx.closePath();
}
//drawing player paddle
function paddle() {
ctx.beginPath();
ctx.rect(Paddlex, Paddley, p_width, p_height);
ctx.fillstyle = "green";
ctx.fill();
ctx.closePath();
}
//Drawing the blocks
function drawBricks() {
for (c = 0; c < brickColumnCount; c++) {
for (r = 0; r < brickRowCount; r++) {
ctx.fillstyle = rowColours[r];
if (bricks[c][r].status === 1) {
var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fill();
ctx.closePath();
}
}
}
}
//drawing the above functions to the screen
function draw() {
//Startscreen and main menu
if (startscreen) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Set background colour
var gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addcolorstop(0, 'blue');
gradient.addcolorstop(0, 'orange');
ctx.fillstyle = gradient;
ctx.fillRect(0, 0, 500, 500);
//Welcome title
ctx.font = '20px verdana';
ctx.fillstyle = "white";
ctx.fillText("Block Breaker", 50, 50);
//Welcome tagline
ctx.fillText("Break some blocks", 50, 100);
//Rules of play text
ctx.fillText("How to play:", 80, 200);
ctx.fillText("To play, move the paddle", 80, 280);
ctx.fillText("with the left and right arrow keys", 80, 310);
ctx.fillText("Press ENTER to begin.", 80, 250);
// Call key up function
keyUpHandler();
}
//Game play
if (gameplaying) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//calling the ball, paddle and blocks in the draw function
ball();
paddle();
drawBricks();
//bounce off the walls
if (ball_x + dx > canvas.width - ballRadius || ball_x + dx < ballRadius) {
console.log("Ball bounced off the side");
sx = -dx;
}
//if the ball hits the top
if (ball_y + dy < ballRadius) {
console.log("Ball bounced off the top");
}
//If the ball hits the bottom
if (ball_y + dy > canvas.height - ballRadius) {
//If the ball hits the player1 paddle
if (ball_y + dy > Paddley && ball_x > Paddlex && ball_x < Paddlex + p_width) {
console.log("Ball hit the player paddle");
dy = -dy;
}
//the ball hits the base
else if (ball_y + dy > canvas.height) {
console.log("Ball hit the bottom of the screen");
gameplaying = false;
Game_over = true;
}
}
}
//Gameover screen
if (Game_over) {
var gradient = ctx.createLinearGradient(0, 0, 0, 170);
gradient.addcolorstop(0, "blue");
gradient.addcolorstop(0, "orange");
ctx.fillstyle = gradient;
ctx.fillRect(0, 0, 500, 500);
//Welcome title
ctx.font = '20px verdana';
ctx.fillstyle = "white";
ctx.fillText("Game Over", 50, 50);
//Main Text body
ctx.fillText("Press Enter to return tot the main menu", 80, 200);
//Reload the game
function keyUpHandler(e) {
if (e.keyCode == 13) {
startscreen = true;
Game_over = false;
}
}
}
//If the ball hits a block
if (ball_x)
//Movement speed of the paddle
if (paddleright && Paddlex < canvas.width - p_width) {
Paddlex += 5;
} else if (paddleleft && Paddlex > 0) {
Paddlex -= 5;
}
ball_x += dx;
ball_y += dy;
//Setting the framerate
setInterval(draw, 10);
}<canvas id="canvas"></canvas>
作業から非稼働になったときに注意することが重要です。あなたのエラーはおそらくそこにあります。あなたのHTMLを投稿することも役立ちます。 – Observer
コンソールにエラーが表示されますか？ （ヒットF12）キャンバスに描画を停止したと言います。あなたが描いていたときと描いていなかったときの間に何を変えましたか？ –
私はそれがtbhの描画を停止した時点ではあまりにも確信していません。また、コンソールデバッガに問題は表示されません。 – dermy96