Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
- colorRectBg(0,0,canvas.width,canvas.height, "game-bg.png");
- // 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, 30, 'img/kula2.png');
- //tablica punktow
- canvasContext.fillText(player1Score, 100, 100);
- canvasContext.fillText(player2Score, canvas.width-100, 100);
- }
- function colorCircle(centerX, centerY, radius, drawColor) {
- var image = new Image();
- image.src = drawColor;
- var pat=canvasContext.createPattern(image, "repeat");
- canvasContext.fillStyle = pat;
- 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);
- }
- function colorRectBg(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);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement