我正在做一个乒乓球游戏,当你进入第6轮时,AI变得更快更大,使其不可能得分,但代码没有被执行,我不知道为什么。我在代码里写的是
if (this.round === 10) {
this.paddle.speed += 300;
this.paddle.height += 50;
}
但实际上游戏并没有执行代码,而是像前一轮一样继续进行。
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;
}
我试着写:
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;
}
我尝试了这4个例子的许多不同的变体,我也尝试将这些不同的变体放在Javascript的不同地方,但没有找到任何有效的方法。
1条答案
按热度按时间h4cxqtbf1#
试试看
或