Witam oglądnąłem tutorial robienia gry w JS i chciałbym teraz sprawic żeby po znalezieniu sie piłeczki na paletce odbił się czyli zmienił sie ballSpeedX = -ballSpeedX , miejsce implementacji w kodzie zaznaczylem prawymi slash'ami.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 500;
const cw = canvas.width;
const ch = canvas.height;
const ballSize = 20;//wielkosc pilki
let ballX = cw/2 - ballSize/2;
let ballY = ch/2 - ballSize/2;
const paddelHeight = 100;
const paddelWidth = 20;
const playerX = 70;
const aiX = 910;
let playerY = 200;
let aiY = 200;
const liniaWidth = 6;
const liniaHeight = 16;
let ballSpeedX = 6;
let ballSpeedY = 6;
function player()
{
ctx.fillStyle = '#7FFF00';
ctx.fillRect(playerX, playerY, paddelWidth, paddelHeight);
}
function AI()
{
ctx.fillStyle = 'yellow';
ctx.fillRect(aiX, aiY, paddelWidth, paddelHeight);
}
function drawball()
{
ctx.fillStyle = '#fff';
ctx.fillRect(ballX, ballY, ballSize, ballSize);
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if (ballY <= 0 || ballY + ballSize >= ch)
{
ballSpeedY = -ballSpeedY;
speedUP();
}
if( ballX <= 0 || ballX + ballSize >= cw )
{
ballSpeedX = -ballSpeedX;
speedUP();
}
}
function table()
{
//Stół
ctx.fillStyle = '#000';
ctx.fillRect( 0,0 , cw,ch );
//Linie na środku
for(let pozycjaLini = 20; pozycjaLini < ch; pozycjaLini = pozycjaLini + 30)
{
ctx.fillStyle = '#303030';
ctx.fillRect(cw/2 - liniaWidth/2, pozycjaLini, liniaWidth, liniaHeight);
}
}
topCanvas = canvas.offsetTop;
console.log(topCanvas);
function playerPosition(e)
{
//console.log("pozycja myszy to" + (e.clientY - topCanvas));
playerY = e.clientY - topCanvas - paddelHeight/2;
if (playerY >= ch - paddelHeight)
{
playerY = ch - paddelHeight;
}
if (playerY <= 0)
{
playerY = 0;
}
////////////////////////// W tym miejscu chce to zaimplementować ////////////////////////////////////////////////////
if ( )
{
}
//////////////////////////////////////////////////////////////////////////////////////////////////
}
function speedUP()
{
//console.log(ballSpeedX + "," + ballSpeedY);
if(ballSpeedX > 0 && ballSpeedX < 14)
{
ballSpeedX = ballSpeedX + 0.2;
}
else if ( ballSpeedX < 0 && ballSpeedX > -14 )
{
ballSpeedX = ballSpeedX - 0.2;
}
if(ballSpeedY > 0 && ballSpeedY < 14)
{
ballSpeedY = ballSpeedY + 0.2;
}
else if ( ballSpeedY < 0 && ballSpeedY > -14 )
{
ballSpeedY = ballSpeedY - 0.2;
}
}
function aiPaddelPosition()
{
var middlePaddel = aiY + paddelHeight/2;
var middleBall = ballY + ballSize/2;
if (ballX > 500)
{
if(middlePaddel-middleBall > 200)
{
//console.log("+200");
aiY = aiY - 10;
}
else if(middlePaddel-middleBall > 50)
{
//console.log("+50-200");
aiY = aiY - 20;
}
else if(middlePaddel-middleBall < -200)
{
//console.log("<-200");
aiY = aiY + 10;
}
else if(middlePaddel-middleBall < -500)
{
//console.log("<-50-200");
aiY = aiY + 20;
}
}
else if (ballX <= 500 && ballX > 150)
{
if(middlePaddel - middleBall > 100)
{
aiY = aiY - 3;
}
else if(middlePaddel - middleBall < -100)
{
aiY = aiY + 3;
}
}
}
canvas.addEventListener("mousemove", playerPosition);
function game()
{
table();
drawball();
player();
AI();
aiPaddelPosition();
}
setInterval(game, 1000/60);