• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Gra w Canvas - problem z "wariującą piłka" przy wjechaniu w paletkę.

VPS Starter Arubacloud
0 głosów
98 wizyt
pytanie zadane 19 marca 2019 w JavaScript przez jhoczi Nowicjusz (120 p.)

Witam serdecznie! Problem polega na tym, że w przypadku gdy piłka znajdzie się w "paletce" tzn. gdy jej współrzędne znajdziemy pomiędzy dwoma bokami paletki to piłka zaczyna wariować: zatrzymuje się, przetrzymuje, zmienia w niewytłumaczalny mi sposób tor lotu. Jeżeli ktoś byłby w stanie zwrócić mi uwagę na błędy w kodzie z góry liczę na pomocne rady! 

<!DOCTYPE HTML>
<html lang="pl">
<head>

    <title>Ping Pong</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        body
        {
            font-family:'Courier New', Courier, monospace;
            margin:0;
            padding:0;
            display:flex;
            align-items:center;
            justify-content: center;
            height: 100vh;
            background-color:darkgray;
        }
        canvas 
        {
            border:3px solid #fff;
        }

        #scoreboard
        {
            background-color:#0e0e0e;
            margin:auto;
            height:5em;
            width:30em;
           
            
        }

        #left_point
        {
            color:yellow;
            width:50%;
            height:100%;
            float:left;
            display:block;
            text-align:center;
            font-size: 4em;;
            border-right:2px solid #fff;
            border-top:2px solid #fff;
            
        }

        #right_point
        {
            color:orange;
            width:49%;
            height:100%;
            float:left;
            display:block;
            text-align:center;
            font-size: 4em;
            border-left:2px solid #fff;
            border-top:2px solid #fff;
            
        }

    </style>
</head>
<body>
    
    <div>
    <div id="scoreboard">
        <div id="left_point">0</div>
        <div id="right_point">0</div>
    </div>
    <canvas id="can"></canvas>
    </div>
    <script>
        
        const game = document.getElementById('can');

        const ctx = game.getContext('2d');

        game.width=1000;
        game.height=500;
        
        const gmw = game.width;
        const gmh = game.height;

        let playerScore = 0;
        let aiScore = 0;
        
        const ballSize = 20;
        let ballX =(gmw/2) - (ballSize/2);
        let ballY =(gmh/2) - (ballSize/2);
       

        const paddelWidth = 30;
        const paddelHeight = 120;

        const playerX=85;
        let playerY=(gmh/2)-60;

        const aiX=900;
        let aiY=(gmh/2)-60;

        const lineWidth = 6;
        const lineHeight = 16;

        const positionLineX = (gmw / 2) - (lineWidth/2);

        let ballSpeedX = 6;
        let ballSpeedY = 6;

        let aiSpeedY = 4;

        let PostPlayerY;

        function table()
        {
            ctx.fillStyle = '#000000';
            ctx.fillRect(0,0,gmw,gmh);
        
            for (positionLineY = 20; positionLineY < gmh ; positionLineY += 30)
            {
                    
                if (positionLineY%2==0)
               {
                    ctx.fillStyle = 'white';
                    ctx.fillRect(positionLineX,positionLineY,lineWidth,lineHeight);
                }
             }
        }

        function ball()
        {        
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(ballX, ballY, ballSize, ballSize);

            ballX += ballSpeedX;
            ballY += ballSpeedY;

     

            if (ballY+ballSize >= gmh || ballY <= 0)
            {
                ballSpeedY = -ballSpeedY;
                speedUp();
            }

            if (ballX+ballSize >= gmw || ballX <= 0)
            {
                
                goal(ballX);
            }

            if (ballX <= playerX + paddelWidth && ballY >= playerY - ballSize && ballY <= playerY + paddelHeight && ballX >= playerX)
            {
               
                ballSpeedX = -ballSpeedX;
            }

            if (ballX >= aiX - ballSize && ballY >= aiY - ballSize && ballY <= aiY + paddelHeight && ballX <= aiX + paddelWidth)
            {
                
                ballSpeedX = -ballSpeedX;
            }
           
           
        }

        function goal(value)
        {
            

            if (value < 0)
            {
                playerScore++;
                
                $( "#right_point" ).text( playerScore);
            } else 
             {
                aiScore++;
                $( "#left_point" ).text( aiScore );
             }

            ballSpeedX = 4;
            ballSpeedY = 4;
            
            
             ballX = (gmw/2) - (ballSize/2);
             ballY =(gmh/2) - (ballSize/2);
            
        }

        function player()
        {
            ctx.fillStyle = "yellow";
            ctx.fillRect(playerX,playerY,paddelWidth,paddelHeight);

            
        }

        function ai()
        {
            ctx.fillStyle = "orange";
            ctx.fillRect(aiX,aiY,paddelWidth,paddelHeight);

           
        }


        topCanvas = game.offsetTop;
       


        function mousePlayer(e)
        {

           
                postPlayerY = playerY;
                playerY = e.clientY - topCanvas - (paddelHeight /  2);

               
            
                if (playerY <= 0 )
                {
                    playerY = 0;
                }

                if (playerY >= gmh - paddelHeight)
                {
                   playerY = gmh - paddelHeight;
                }

      

               // aiY = playerY; //dwie naraz

        }

        game.addEventListener("mousemove", mousePlayer);

        function speedUp()
        {
           
           
           //console.log('X: ',ballSpeedX, ' Y: ',ballSpeedY);

            if (ballSpeedX > 0 && ballSpeedX < 16)
            {
                ballSpeedX += .2;
            } else if (ballSpeedX < 0 && ballSpeedX > -16)
            {
                ballSpeedX -= .2;
            } 

            if (ballSpeedY > 0 && ballSpeedY < 16)
            {
                ballSpeedY += .3;
            } else if (ballSpeedY < 0 && ballSpeedY > -16)
            {
                ballSpeedY -= .3;
            } 

        }

        function aiPosition()
        {
            var middlePaddel = aiY + paddelHeight / 2;
            
            var middleBall = ballY + ballSize / 2;

            if (ballX > 500)
            {
                
                if (middlePaddel - middleBall > 200)
                {
                    aiY -= 10;
                } else  if (middlePaddel - middleBall > 50)
                  {
                    aiY -= 5;
                  } else if (middlePaddel - middleBall < -200)
                    {
                        aiY += 10;
                    } else  if (middlePaddel - middleBall < -50)
                      {
                        aiY += 5;
                      }


            } else if (ballX > 150 && ballX <= 500)
              {
                    if (middlePaddel - middleBall > 100)
                    {
                        aiY -= 3;
                    } else if (middlePaddel - middleBall < -100)
                      {
                        aiY += 3;
                      }
              }

           
        }

        function fps()
        {
            table()
            ball()
            player()
            ai()
            aiPosition()
        }
        
       
      
      setInterval(fps, 1000 / 60);

    </script>

</body>
</html>

 

1
komentarz 23 marca 2019 przez MrxCI Dyskutant (8,260 p.)
Zrob funkcje sprawdzającą czy pileczka znajduje sie pomiędzy bloczkami gdzie wariuje, jeśli tak przeteleportuj ją obok lub w inne miejsce ekranu, ew. popraw kolizje by nie wpadala w miejsca gdzie nie powinna.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 487 wizyt
pytanie zadane 14 października 2018 w JavaScript przez Grzegorz :> Dyskutant (8,050 p.)
0 głosów
1 odpowiedź 237 wizyt
pytanie zadane 27 kwietnia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
0 głosów
1 odpowiedź 148 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...