Question

所以我正在为我的CS类制作一个纯Javascript Pong克隆，并且大约完成了一半。我目前的麻烦是使玩家无法玩游戏以及桨和球出现的区域似乎不起作用。关于如何使我的画布在页面上显示的所有文字和其他html的任何想法，使它成为一个看起来不错的网站？我尝试过查找，但似乎没有任何效果。 html中的canvas标签最初是我在意识到它不起作用时所拥有的，现在在它上面的div标签现在是我目前正在尝试创建画布并通过内部html放入的东西。

如果有人有什么技巧以及如何改善游戏，但仍然简单，这对您来说真是太神奇了！游戏的想法是，您将有3种困难可供选择，当您选择困难时，您将按下开始按钮，然后能够进行游戏。尽管我目前尚不确定如何操作按钮，但每个难度按钮在整个游戏过程中都会限制球速和AI桨速度，但在此后单击开始按钮除外。我可能会稍后再发布这部分内容，但我想我现在要问一下，也许可以节省一些时间。

感谢您的阅读和时间的答复！

<html>
<head>
     <script type="text/javascript">

        // Sets the FPS for the window so the game runs smooth
        var animate = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
                function(callback)
                    {
                        window.setTimeout(callback,1000/60);
                    };

         // Basic variables for the elements of the game
        var canvas = document.createElement("myCanvas");
            var width = 800;
            var height = 500;
            canvas.width = width;
            canvas.height = height;
                document.body.appendChild(canv);
                document.getElementById('PlayArea').appendChild(canv);

        var context = canvas.getContext('2d');
        var user = new User();
        var ai = new AI();
        var ball = new Ball(400,250);

        // Style for the stage
        var render = function ()
            {
             context.fillStyle = "#000000";
             context.fillRect(0, 0);
             user.render();
             ai.render();
             ball.render();
            };

        // Updates and renders the objects of the game
        var update = function ()
            {
                user.update();
                ai.update();
                ball.update(user.paddle, ai.paddle);
            };

        var step = function ();
            {
                update();
                render();
                animate(step);
            }

            // Sets up the paddles for the game
            function paddle(x, y, width, height)
                {
                    this.x = x;
                    this.y = y;
                    this.width = width;
                    this.height = height;
                    this.x_speed = 0;
                    this.y_speed = 0;
                }

                // Renders the paddles and sets up its movement function
                paddle.prototype.render = function ()
                    {
                        context.fillStyle = "#FFFFFF";
                        context.fillRect(this.x, this.y, this.width, this.height);
                    };

                    paddle.prototype.move = function (x, y)
                        {
                            this.x += x;
                            this.y += y;
                            this.y_speed += y;

                            if (this.y < 0)
                                {
                                    this.y = 0;
                                    this.y_speed = 0;
                                }
                            else if (this.y + this.height > 500)
                                {
                                    this.y = 500 - this.height;
                                    this.y_speed = 0;
                                }
                        };

                    function ai()
                        {
                            this.paddle = new Paddle(10, 250, 50, 10);
                        }
                        computer.prototype.render = function ()
                            {
                                this.paddle.render();
                            };


            function Pong(Difficulty)
                {
                    if (Difficulty == 1)
                        {

                        }

                    if (Difficulty == 2)
                        {

                        }

                    if (Difficulty == 3)
                        {

                        }


                document.body.appendChild(canvas);animate(step);

                }

     </script>

</head>

<body>

    <h1>
        Pong Game!
    </h1>

    <h2>
        Pong is a simple game where you and an AI player play a game similar to ping pong.
    </h2>

    <p>
        A point is awarded for every time you get the ball past the enemy AI.
    </p>
    <p>
        Score 3 points against the AI to win! If the AI scores 3 points against you, you lose.
    </p>
    <p>
        Controls: 
    </p>
    <p>
        Press which difficulty you would like to play on and then click the "START" button when you are ready to play!
    </p>

    <p>
        Difficulties:
        <input TYPE="button" value="Easy" onclick="Pong(1);">
        <input TYPE="button" value="Medium" onclick="Pong(2);">
        <input TYPE="button" value="Hard" onclick="Pong(3);">
    </p>

    <div id="PlayArea"></div>

    <canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;"></canvas>

</body>
</html>

无法使画布与内部物品一起出现

0 个答案: