Witam skonczyłem prostą gierke w canvas, postanowilem podzielic sie kodem zeby zapytac co mozna tutaj ulepszyć.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>beniz gra w JS</title>
</head>
<body>
<canvas>
</canvas>
<script>
const canvas= document.querySelector('canvas');
const ctx= canvas.getContext('2d');
canvas.width=1000;
canvas.height=500;
const cw = canvas.width;
const ch = canvas.height;
const ballSize=20;
let ballY=ch/2-ballSize/2;
let ballX=cw/2-ballSize/2;
const rocketHeight=100;
const rocketWidth=20;
const playerX=70;
const aiX=910;
let playerY=200;
let aiY=200;
const lineWidth=6;
const lineHeight=16;
let ballSpeedX=7;
let ballSpeedY=3;
function ai(){
if(aiY>=ch-rocketHeight){
aiY=ch-rocketHeight;
}
if(aiY<=0){
aiY=0;
}//if zeby paletka nie wychodzila za boisko
ctx.fillStyle='green';
ctx.fillRect(aiX,aiY,rocketWidth,rocketHeight);
}
function aiCrash(){
aiY=ballY-150;
//nie dziala bo ball() jest wczesniej itrzeba zrobic crash balla(juz zrobione)
if(aiY>=ch-rocketHeight){
aiY=ch-rocketHeight;
}
if(aiY<=0){
aiY=0;
}//if zeby paletka nie wychodzila za boisko
ctx.fillStyle='green';
ctx.fillRect(aiX,aiY,rocketWidth,rocketHeight);
}
function player(){
ctx.fillStyle='yellow';
ctx.fillRect(playerX,playerY,rocketWidth,rocketHeight);
}
function ball(){
ctx.fillStyle ='white';
ctx.fillRect(ballX,ballY,ballSize,ballSize);
ballX+=ballSpeedX;
ballY+=ballSpeedY;
aiY=ballY;// dla niepokonanego ai
if(ballY<=0||ballY+ballSize>=ch){
ballSpeedY=-ballSpeedY;
}
if(ballX<=0){
ballSpeedX=-ballSpeedX;
alert("przegrales");
}
if(ballX+ballSize>=cw){
ballSpeedX=-ballSpeedX;
alert("wygrales");
}
if(ballX<=playerX+rocketWidth && ballY>playerY && ballY<playerY+rocketHeight){
ballSpeedX=-ballSpeedX;// odbicie od paletki playera
}
if(ballX>=aiX-rocketWidth && ballY>=aiY && ballY<=aiY+rocketHeight){
ballSpeedX=-ballSpeedX; // odbicie od plaetki ai
}
}
function ballCrash(){
ctx.fillStyle ='white';
ctx.fillRect(ballX,ballY,ballSize,ballSize);
ballX+=ballSpeedX;
ballY+=ballSpeedY;
if(ballY<=0||ballY+ballSize>=ch){
ballSpeedY=-ballSpeedY;
}
if(ballX<=0){
ballSpeedX=-ballSpeedX;
alert("przegrales");
location.reload(true);
}
if(ballX+ballSize>=cw){
ballSpeedX=-ballSpeedX;
alert("wygrales");
location.reload(true);
}
if(ballX<=playerX+rocketWidth && ballY>playerY && ballY<playerY+rocketHeight){
ballSpeedX=-ballSpeedX;// odbicie od paletki playera
}
if(ballX>=aiX-rocketWidth && ballY>=aiY && ballY<=aiY+rocketHeight){
ballSpeedX=-ballSpeedX; // odbicie od plaetki ai
}
}
function table(){
ctx.fillStyle= 'black';
ctx.fillRect(0,0,cw,ch);
for(let linePosition =20; linePosition<ch; linePosition +=30)
{
ctx.fillStyle='gray';
ctx.fillRect(cw/2-lineWidth/2,linePosition,lineWidth,lineHeight);
}
}
topCanvas= canvas.offsetTop;
function playerPosition(event){
playerY= event.clientY-topCanvas-rocketHeight/2;
if(playerY>=ch-rocketHeight){
playerY=ch-rocketHeight;
}
if(playerY<=0){
playerY=0;
}
}
addEventListener("mousemove",playerPosition)
var czasZmianyFunkcji= 1200;
function game(){
table()
ball()
player()
ai()
if (counter===czasZmianyFunkcji){
clearInterval(setIntervalID);
}
counter++;
if(counter>czasZmianyFunkcji) {
setInterval(game1,1000/60)
}
}
function game1(){
table()
ballCrash()
player()
aiCrash()
}
var counter=0;
var setIntervalID = setInterval(game,1000/60);
</script>
</body>
</html>
