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>
