英文:
pong game having trouble with Javascript where in round 6 the AI gets faster and bigger and it won't execute the code
问题
It seems like you want to modify the game behavior when the round reaches 10 in your Pong game. To achieve this, you should use the following code snippet:
if (Pong.round === 10) {
Pong.paddle.speed += 300;
Pong.paddle.height += 50;
}
Make sure to place this code inside your update function, where you handle game logic, to ensure that it gets executed when the round reaches 10. Additionally, ensure that the variable names match the ones used in your code (e.g., Pong.round instead of this.rounds).
This code checks if the Pong.round is equal to 10 and then increases the paddle's speed and height accordingly.
英文:
I am making a pong game where when you get to round 6 the AI gets faster and bigger making it impossible to score, but the code is not being executed and I don't know why. what I have written in the code for that to happen is...
if (this.round === 10) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
but what happens is the game doesn't execute the code and continues going like the round before.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PONG - Softic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas>
<img src="LiverpoolLiverbird.jpg">
</canvas>
<script src="main.js"></script>
</body>
</html>
Javascript:
// Global Variables
var DIRECTION = {
IDLE: 0,
UP: 1,
DOWN: 2,
LEFT: 3,
RIGHT: 4
};
var rounds = [5, 5, 3, 3, 2, 10];
var colors = ['#C8102C', '#C8102A', '#C8102B', '#C8102A', '#C8102F'];
// The ball object (The cube that bounces back and forth)
var Ball = {
new: function (incrementedSpeed) {
return {
width: 15,
height: 15,
x: (this.canvas.width / 2) - 9,
y: (this.canvas.height / 2) - 9,
moveX: DIRECTION.IDLE,
moveY: DIRECTION.IDLE,
speed: incrementedSpeed || 10
};
}
};
// The paddle object (The two lines that move up and down)
var Paddle = {
new: function (side) {
return {
width: 20,
height: 75,
x: side === 'left' ? 100 : this.canvas.width - 100,
y: (this.canvas.height / 2) - 35,
score: 0,
move: DIRECTION.IDLE,
speed: 11.5
};
}
};
var Game = {
initialize: function () {
this.canvas = document.querySelector('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.width = 2595;
this.canvas.height = 1130;
this.canvas.style.width = (this.canvas.width / 2) + 'px';
this.canvas.style.height = (this.canvas.height / 2) + 'px';
this.player = Paddle.new.call(this, 'left');
this.paddle = Paddle.new.call(this, 'right');
this.ball = Ball.new.call(this);
this.paddle.speed = 8;
this.running = this.over = false;
this.turn = this.paddle;
this.timer = this.round = 0;
this.color = '#000000';
Pong.menu();
Pong.listen();
},
endGameMenu: function (text) {
// Change the canvas color
Pong.context.fillStyle = '#000000';
// Change the canvas font size and color
Pong.context.font = '50px FontsFree-Net-AlbertusMT';
Pong.context.fillStyle = this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
Pong.context.fillRect(
this.context.fillStyle,
Pong.canvas.width / 2 - 350,
Pong.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color
Pong.context.fillStyle = '#000000';
// Draw the end game menu text ('Game Over' and 'Winner')
Pong.context.fillText(text,
Pong.canvas.width / 2,
Pong.canvas.height / 2 + 15
);
setTimeout(function () {
Pong = Object.assign({}, Game);
Pong.initialize();
}, 3000);
},
menu: function () {
// Draw all the Pong objects in their current state
Pong.draw();
// Change the canvas color
Pong.context.fillStyle = 'clear';
// Change the canvas font size and color
this.context.font = '50px FontsFree-Net-AlbertusMT';
this.context.fillStyle = this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
this.context.fillRect(
this.context.fillStyle,
this.canvas.width / 2 - 350,
this.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color;
this.context.fillStyle = '#000000';
// Draw the 'press any key to begin' text
this.context.fillText('Press Any Key To Begin Press Any Key To Begin',
this.canvas.width / 2,
this.canvas.height / 2 + 15
);
},
// Update all objects (move the player, paddle, ball, increment the score, etc.)
update: function () {
if (!this.over) {
// If the ball collides with the bound limits - correct the x and y coords.
if (this.ball.x <= 0) Pong._resetTurn.call(this, this.paddle, this.player);
if (this.ball.x >= this.canvas.width - this.ball.width) Pong._resetTurn.call(this, this.player, this.paddle);
if (this.ball.y <= 0) this.ball.moveY = DIRECTION.DOWN;
if (this.ball.y >= this.canvas.height - this.ball.height) this.ball.moveY = DIRECTION.UP;
// Move player if they player.move value was updated by a keyboard event
if (this.player.move === DIRECTION.UP) this.player.y -= this.player.speed;
else if (this.player.move === DIRECTION.DOWN) this.player.y += this.player.speed;
// On new serve (start of each turn) move the ball to the correct side
// and randomize the direction to add some challenge.
if (Pong._turnDelayIsOver.call(this) && this.turn) {
this.ball.moveX = this.turn === this.player ? DIRECTION.LEFT : DIRECTION.RIGHT;
this.ball.moveY = [DIRECTION.UP, DIRECTION.DOWN][Math.round(Math.random())];
this.ball.y = Math.floor(Math.random() * this.canvas.height - 200) + 200;
this.turn = null;
}
// If the player collides with the bound limits, update the x and y coords.
if (this.player.y <= 0) this.player.y = 0;
else if (this.player.y >= (this.canvas.height - this.player.height)) this.player.y = (this.canvas.height - this.player.height);
// Move ball in intended direction based on moveY and moveX values
if (this.ball.moveY === DIRECTION.UP) this.ball.y -= (this.ball.speed / 1.5);
else if (this.ball.moveY === DIRECTION.DOWN) this.ball.y += (this.ball.speed / 1.5);
if (this.ball.moveX === DIRECTION.LEFT) this.ball.x -= this.ball.speed;
else if (this.ball.moveX === DIRECTION.RIGHT) this.ball.x += this.ball.speed;
// Handle paddle (AI) UP and DOWN movement
if (this.paddle.y > this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y -= this.paddle.speed / 10;
else this.paddle.y -= this.paddle.speed / 4;
}
if (this.paddle.y < this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX === DIRECTION.RIGHT) this.paddle.y += this.paddle.speed / 10;
else this.paddle.y += this.paddle.speed / 4;
}
// Handle paddle (AI) wall collision
if (this.paddle.y >= this.canvas.height - this.paddle.height) this.paddle.y = this.canvas.height - this.paddle.height;
else if (this.paddle.y <= 0) this.paddle.y = 0;
// Handle Player-Ball collisions
if (this.ball.x - this.ball.width <= this.player.x && this.ball.x >= this.player.x - this.player.width) {
if (this.ball.y <= this.player.y + this.player.height && this.ball.y + this.ball.height >= this.player.y) {
this.ball.x = (this.player.x + this.ball.width);
this.ball.moveX = DIRECTION.RIGHT;
}
}
// Handle paddle-ball collision
if (this.ball.x - this.ball.width <= this.paddle.x && this.ball.x >= this.paddle.x - this.paddle.width) {
if (this.ball.y <= this.paddle.y + this.paddle.height && this.ball.y + this.ball.height >= this.paddle.y) {
this.ball.x = (this.paddle.x - this.ball.width);
this.ball.moveX = DIRECTION.LEFT;
}
}
}
// Handle the end of round transition
// Check to see if the player won the round.
if (this.player.score === rounds[this.round]) {
// Check to see if there are any more rounds/levels left and display the victory screen if
// there are not.
if (!rounds[this.round + 1]) {
this.over = true;
setTimeout(function () { Pong.endGameMenu('You Win You Win'); }, 1000);
} else {
// If there is another round, reset all the values and increment the round number.
this.color = this._generateRoundColor();
this.player.score = this.paddle.score = 0;
this.player.speed += 0.5;
this.player.height += -5;
this.paddle.speed += 1;
this.paddle.height += 7.5;
this.ball.speed += 1.15;
this.round += 1;
// ROUND 6 MAYHEM!!! (WHAT I WANT LOOKED AT)-------------------------------
if (this.round === 10) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
}
}
// Check to see if the paddle/AI has won the round.
else if (this.paddle.score === rounds[this.round]) {
this.over = true;
setTimeout(function () { Pong.endGameMenu('Game Over Game Over'); }, 1000);
}
},
// Draw the objects to the canvas element
draw: function () {
// Clear the Canvas
this.context.clearRect(
0,
0,
this.canvas.width,
this.canvas.height
);
// Set the fill style to black
this.context.fillStyle = this.color;
// Draw the background
this.context.fillRect(
2595,
1130,
this.canvas.width,
this.canvas.height
);
// Set the fill styles for the paddles and the ball
this.context.fillStyle = '#000000';
// Draw the Player
this.context.fillRect(
this.player.x,
this.player.y,
this.player.width,
this.player.height
);
// Draw the Paddle
this.context.fillRect(
this.paddle.x,
this.paddle.y,
this.paddle.width,
this.paddle.height
);
// Draw the Ball
if (Pong._turnDelayIsOver.call(this)) {
this.context.fillRect(
this.ball.x,
this.ball.y,
this.ball.width,
this.ball.height
);
}
// Set the default canvas font and align it to the center
this.context.font = '100px FontsFree-Net-AlbertusMT';
this.context.textAlign = 'center';
// Draw the players score (left)
this.context.fillText(
this.player.score.toString(),
(this.canvas.width / 2) - 500,
200
);
// Draw the paddles score (right)
this.context.fillText(
this.paddle.score.toString(),
(this.canvas.width / 2) + 500,
200
);
// Change the font size for the center score text
this.context.font = '30px FontsFree-Net-AlbertusMT';
// Draw the winning score (center)
this.context.fillText(
'Round ' + (Pong.round + 1),
(this.canvas.width / 2),
35
);
// Change the font size for the center score value
this.context.font = '40px FontsFree-Net-AlbertusMT';
// Draw the current round number
this.context.fillText(
rounds[Pong.round] ? rounds[Pong.round] : rounds[Pong.round - 1],
(this.canvas.width / 2),
100
);
},
loop: function () {
Pong.update();
Pong.draw();
// If the game is not over, draw the next frame.
if (!Pong.over) requestAnimationFrame(Pong.loop);
},
listen: function () {
document.addEventListener('keydown', function (key) {
// Handle the 'Press any key to begin' function and start the game.
if (Pong.running === false) {
Pong.running = true;
window.requestAnimationFrame(Pong.loop);
}
// Handle up arrow and w key events
if (key.keyCode === 38 || key.keyCode === 87) Pong.player.move = DIRECTION.UP;
// Handle down arrow and s key events
if (key.keyCode === 40 || key.keyCode === 83) Pong.player.move = DIRECTION.DOWN;
});
// Stop the player from moving when there are no keys being pressed.
document.addEventListener('keyup', function (key) { Pong.player.move = DIRECTION.IDLE; });
},
// Reset the ball location, the player turns and set a delay before the next round begins.
_resetTurn: function(victor, loser) {
this.ball = Ball.new.call(this, this.ball.speed);
this.turn = loser;
this.timer = (new Date()).getTime();
victor.score++;
},
// Wait for a delay to have passed after each turn.
_turnDelayIsOver: function() {
return ((new Date()).getTime() - this.timer >= 1000);
},
// Select a random color as the background of each level/round.
_generateRoundColor: function () {
var newColor = colors[Math.floor(Math.random() * colors.length)];
if (newColor === this.color) return Pong._generateRoundColor();
return newColor;
}
};
var Pong = Object.assign({}, Game);
Pong.initialize();
CSS:
body {
display: block;
text-align: center;
background-color: black;
padding-top: 1.75rem;
}
canvas {
/* background-image: url(LiverpoolLogoForPongGame.jpg); (this is what is on my game but removed it for the question)*/
background-color: white;
max-width: 2595px;
max-height: 1130px;
background-size: 1295px;
}
I tried putting:
if (round === 6) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
if (rounds === 10) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
if(this.round === 6) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
if (this.rounds === 10) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
I tried many different variations of those 4 examples and I also tried putting those different variations in different places in the Javascript but haven't been able to find anything that works.
答案1
得分: 0
如果 (this.round === 5) { // 我们得到了 5，从 6 减 1 (最大轮次减 1)
this.paddle.speed += 300;
this.paddle.height += 50;
}
或者
如果 (this.round === (rounds.length - 1)) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
英文:
Try
if (this.round === 5) { // We got 5 from 6 - 1 (the max round minus 1)
this.paddle.speed += 300;
this.paddle.height += 50;
}
or
if (this.round === (rounds.length - 1)) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论