Question

方形球将从障碍物的顶部反弹，但如果它来自底部则直接通过它们。我可以添加什么来碰撞检测代码，以便它还可以检查底部的碰撞。提前致谢。代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Paddle Game</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }

    </style>
</head>
<body>
<h1>Instructions</h1>
<p>Hit the square with the paddle at the bottom of the screen. You have 5 lives. If you hit the square you gain 1 point but if you miss you loose 1 life. If your lives fall below 0 you loose and the game restarts. Score 10 points to win.</p>
<canvas id="myCanvas" width="1000" height="800"></canvas>

<script>
    var canvas; //This variable will be use as a reference to the canvas object
    var ctx; //A variable to hold the value of the context
    //Square Ball
    var rectX = 100;//rect X pos
    var rectY = 200;//rect Y pos
    var rectWidth = 25;//width
    var rectHeight = 25;//height
    var rectSpeedX = 10;
    var rectSpeedY = 10;
    //Paddle
    var rectX2 = 400;//rect X pos
    var rectY2 = 790;//rect Y pos
    var rectWidth2 = 100;//width
    var rectHeight2 = 20;//height
    //Obstruction
    var rectX3 = 500;
    var rectY3 = 600;
    var rectWidth3 = 300;
    var rectHeight3 = 25;
    //Obstruction
    var rectX4 = 200;
    var rectY4 = 300;
    var rectWidth4 = 300;
    var rectHeight4 = 25;

    var score = 0;
    var lives = 5;

    const WIDTH = 1000; //Width of the canvas
    const HEIGHT = 800; //Height of the canvas

    function mouseMove(event){
        rectX2 = rectX2 = event.pageX-((document.body.clientWidth-WIDTH)/2+ (rectWidth2/2));
    }
    document.addEventListener("mousemove", mouseMove);


    window.onload = function () {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');

        var framesPerSecond = 30; //FPS
    setInterval(function(){
        drawEverything();//Calling the rect function 30 FPS
        movement();
        gameReset();
        winCondition();
    }, 1000/framesPerSecond); //Calls the move and draw function using an inline function. 30 FPS 1000/30

    }
    function drawEverything(){
        ctx.fillStyle = 'red' //Draws the white background every frame covering square
        ctx.fillRect(0,0,WIDTH, HEIGHT); //background
        ctx.fillStyle = 'black'
        ctx.fillRect(rectX, rectY, rectWidth, rectHeight); //redraws the recntangle each frame which gives the illusion of movement. moving square
        ctx.fillRect(rectX2, rectY2, rectWidth2, rectHeight2); //paddle
        ctx.fillRect(rectX3, rectY3, rectWidth3, rectHeight3); //obstruction
        ctx.fillRect(rectX4, rectY4, rectWidth4, rectHeight4) //obstruction
        ctx.fillText("Score", 100,50);
        ctx.fillText(score, 100,100); //score count
        ctx.fillText("Lives", 900,50);
        ctx.fillText(lives, 900,100); //life count
    }
    function movement(){
        rectX += rectSpeedX;
        rectY += rectSpeedY;

        if (rectX > WIDTH-12.5|| rectX < 0){
            rectSpeedX = -rectSpeedX;
        }
        if (rectY > HEIGHT-12.5 || rectY < 0){
            rectSpeedY = -rectSpeedY;
        }
        //console.log(rectX2);
        if(rectX < rectX2 + rectWidth2 && rectX + rectWidth > rectX2 && rectY < rectY2 + rectHeight2 && rectHeight + rectY > rectY2){
            //console.log("Hi")
            score += 1
            //rectSpeedX++
            //rectSpeedY++
            var deltaY = rectY
                                -(rectY+rectHeight2/2); 
                                rectSpeedY = deltaY * 2;
        } else if(rectY > HEIGHT-12.5){
            //console.log('Bye');
            lives -=1

        }
        if(rectX < rectX3 + rectWidth3 && rectX + rectWidth > rectX3 && rectY < rectY3 + rectHeight3 && rectHeight + rectY > rectY3){
          var deltaY = rectY
                                -(rectY+rectHeight3/2); 
                                rectSpeedY = deltaY * 2;  
        }
        if(rectX < rectX4 + rectWidth4 && rectX + rectWidth > rectX4 && rectY < rectY4 + rectHeight4 && rectHeight + rectY > rectY4){
          var deltaY = rectY
                                -(rectY+rectHeight4/2); 
                                rectSpeedY = deltaY * 2;  
        }
    }
    function gameReset(){
        if(lives < 0){
            alert("Game Over. Click Ok to restart. Remember do not let your lives fall below 0");
            location.reload();
        }
    }
    function winCondition(){
        if(score >= 10){
            alert("Congratulations you won! Hit 'OK' to restart the game.");
            location.reload();
        }
    }
   //if(rectX < rectX2 + rectWidth2 && rectX + rectWidth > rectX2 && rectY < rectY2 + rectHeight2 && rectHeight + rectY > rectY2)
</script>

</body>

</html>

另外，如果您想告诉我您对此计划的看法，我将不胜感激，我更喜欢初学者。

Answer 1

我看了你的代码......

你在这里的比赛中取得了不错的开局，但在进一步发展之前，我认为你应该改进一些事情。主要是您需要完成工作并尝试使用objects ...

重写它

如果你看一下类似的html画布弹跳球我做了here，我想你会从我的代码中学到很多东西。您可以在我的github http://github.com/roadkillcat/UltiBouncingBall上查看该项目的来源。

如果你告诉我，我可以更简洁地写下你所拥有的内容并使其更容易阅读。但是，你的代码太乱了，无法理解并需要清理。如果你愿意，我很乐意提供帮助。

以下是进一步采取游戏的一些想法：

使用arc方法
停止球拍离开屏幕
随机定位障碍物（rect3 + rect4）和球

如何在游戏中的障碍物底部添加2d碰撞？

1 个答案:

我看了你的代码......

以下是进一步采取游戏的一些想法：