一个pong游戏遇到了Javascript的问题，在第6轮AI变得更快更大，它不会执行代码

myzjeezk  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(61)

我正在做一个乒乓球游戏，当你进入第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的不同地方，但没有找到任何有效的方法。

JavaScript

1条答案

按热度按时间
h4cxqtbf

h4cxqtbf1#

试试看

if (this.round === 5) { // We got 5 from 6 - 1 (the max round minus 1)
    this.paddle.speed += 300;
    this.paddle.height += 50;
}

或

if (this.round === (rounds.length - 1)) {
    this.paddle.speed += 300;
    this.paddle.height += 50;
}
赞(0）分享  回复(0）举报  2023-05-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com