在我的FlappyBird游戏重拍中没有出现的块

Question

我正在尝试重新创建我自己的FlappyBird版本。你可以在这里看到我的游戏：http://ps11.pstcc.edu/~c2375a22/lab6/lab6.html

我遇到的唯一问题是我的“块”都没有出现。如果您从未玩过FlappyBird，则块是您必须避免的对象，以便在整个游戏过程中保持进展。如果你碰到一个街区，你就输了。

我的播放器控件正在工作，碰撞系统似乎也很好。有什么想法吗？

这是我的代码：

 $(function () {

	alert("Welcome to Space Dodge!" 
		+ "\n\nNavigate your vessel through the unknown for as long as you can!"
		+ "\n\nUse 'Spacebar' to control the ship."
		+ "\n\nIf the ship hits a block, the top, or the bottom, you lose!")

	//Game variables
	var game_area = $('#game_area');
    var ship = $('#ship');
    var block = $('.block');
    var block1 = $('#block1');
    var block2 = $('#block2');
    var score = $('#score');
    var restart_button = $('#restart_button');

    //Set up variables
    var game_width = parseInt(game_area.width());
    var game_height = parseInt(game_area.height());
    var block_initial_position = parseInt(block.css('right'));
    var block_initial_height = parseInt(block.css('height'));
    var ship_left = parseInt(ship.css('left'));
    var ship_height = parseInt(ship.height());

    //Starting speed - this will increase by +1 every time the player goes through a checkpoint
    var speed = 10;

    var go_up = false;
    var update_score = false;
    var game_over = false;

    var the_game = setInterval(function () {

        if (collision(ship, block1) || collision(ship, block2) || parseInt(ship.css('top')) <= 0 || parseInt(ship.css('top')) > game_height - ship_height) {

            end_game();
            alert("Game Over! \n\nClick 'Restart' to play again. ")

        } else {

            var block_current_position = parseInt(block.css('right'));

            //Update the score when the poles have passed the bird successfully
            if (block_current_position > game_width - ship_left) {
                if (score_updated === false) {
                    score.text(parseInt(score.text()) + 1);
                    score_updated = true;
                }
            }

            //Check whether the poles went out of the container
            if (block_current_position > game_width) {
                var new_height = parseInt(Math.random() * 100);

                //Change the pole's height
                block1.css('height', block_initial_height + new_height);
                block2.css('height', block_initial_height - new_height);

                //Increase speed,
                speed = speed + 1;
                score_updated = false;
                pole_current_position = pole_initial_position;
            }

            //Move blocks
            block.css('right', block_current_position + speed);

            if (go_up === false) {
                go_down();
            }
        }

    }, 40);

    //Determine collison domains
    function collision($div1, $div2) {
    	
    	//First set of axis
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;

        //Second set of axis
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        // If the ship meets this condition, collision is false
        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
        return true;
    }

    function go_down() {
        ship.css('top', parseInt(ship.css('top')) + 5);
    }

    function up() {
        ship.css('top', parseInt(ship.css('top')) - 10);
    }

    function end_game() {
        clearInterval(the_game);
        game_over = true;
    }

     $(document).on('keydown', function (e) {
        var key = e.keyCode;
        if (key === 32 && go_up === false && game_over === false) {
            go_up = setInterval(up, 50);
        }
    });

    $(document).on('keyup', function (e) {
        var key = e.keyCode;
        if (key === 32) {
            clearInterval(go_up);
            go_up = false;
        }
    });

    //Reload the page and reset the game
    restart_button.click(function () {
        location.reload();
    });

});

 body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: black;
    }

    #game_area {
    position: relative;
    height: 400px;
    width: 90%;
    border: 2px solid chartreuse;
    background-color: black;
    margin-top: 4%;
    margin-bottom: 4%;
    margin-left: 4%;
    overflow: hidden;
    }

    #ship {
    position: absolute;
    background: url('ship.png');
    height: 42px;
    width: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 20%;
    left: 15%;
    }

    .block {
    position: absolute;
    height: 130px;
    width: 50px;
    background-color: chartreuse;
    right: -50px;
    }

    #block1 {
    top: 0;
    }

    #block2 {
    bottom: 0;
    }
    
    #score_area {
    text-align: center;
    font-size: 40px;
    color: chartreuse;
    }

<body>
	<!-- Game area on the page -->
	<div class="container" id="game_area">
		<div id="ship"></div>
		<div id="block1"></div>
		<div id="block2"></div>
	</div>

	<!-- Score section -->
	<div class="container" id="score_area">
		<P>Score: <span id="score">0</span></P>
	</div>

	<!-- Restart button -->
	<div class="container" id="restart_area">
	<center><button type="button" class="btn btn-primary" 
    id="restart_button">Restart</button></center>
    </div>

    <!-- Game script -->
    <script src="lab6_game.js"></script>

    </body>
    </html>

Answer 1

将类块添加到... blocks：p

    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>

而不是

    <div id="block1" ></div>
    <div id="block2" ></div>