Spróbuj tak:
<html>
<canvas id="gameCanvas" width="800" height="600"> </canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50; // polozenie kuli w osi X
var ballY = 50; // polozenie kuli w osi Y
var ballSpeedX = 10; // szybkosc przemieszczania sie kuli w osi X
var ballSpeedY = 4; // szybkosc przemieszczania sie kuli w osi X
// punkty startowe graczy
var player1Score = 0;
var player2Score = 0;
var paddle1Y = 250; //polozenie paletki gracza na osi Y
var paddle2Y = 250; //polozenie paletki komputera na osi Y
const PADDLE_THICKNESS = 10; //grubosc paletek
const PADDLE_HEIGHT = 100; //wysokosc paletek
//sprawdzanie polozenia myszki
function calculateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return {
x:mouseX,
y:mouseY
};
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
});
}
// reset pozycji kuli
function ballReset() {
ballSpeedX = -ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
// automatyczne sterowanie
function computerMovement() {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 6;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 6;
}
}
function moveEverything() {
computerMovement();
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if(ballX < 0) {
if(ballY > paddle1Y &&
ballY < paddle1Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
} else {
ballReset();
player2Score++;
}
}
if(ballX > canvas.width) {
if(ballY > paddle2Y &&
ballY < paddle2Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
} else {
ballReset();
player1Score++;
}
}
if(ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function drawEverything() {
// czarne tlo
colorRect(0,0,canvas.width,canvas.height, "picture.jpg");
// lewa paletka
colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// prawa paletka (sterowana przez komputer)
colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// pilka
colorCircle(ballX, ballY, 10, '#0066CC');
//tablica punktow
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillText(player2Score, canvas.width-100, 100);
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
canvasContext.fill();
}
function colorRect(leftX,topY, width,height, drawColor) {
var image = new Image();
image.src = drawColor;
var pat=canvasContext.createPattern(image, "repeat");
canvasContext.fillStyle = pat;
canvasContext.fillRect(leftX,topY, width,height);
}
</script>
</html>
W miejscu w którym wczesniej podawales kolor teraz podaj sciezki do plików np dla tła:
colorRect(0,0,canvas.width,canvas.height, "picture.jpg");
analogicznie dla paletek