Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <canvas id="gameCanvas" width="800" height="600"></canvas>
- <script>
- var canvas;
- var canvasContext;
- var ballX = 50;
- var ballY = 50;
- var ballSpeedX= 10;
- var ballSpeedY= 10;
- var player1Score = 0;
- var player2Score = 0;
- const WINNING_SCORE = 5;
- var showingWinScreen = false;
- var paddle1Y = 250;
- var paddle2Y = 250;
- const PADDLE_THICKNESS = 10;
- const PADDLE_HEIGHT = 100;
- 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
- };
- }
- function handleMouseClick(evt) {
- if (showingWinScreen) {
- showingWinScreen = false;
- player1Score = 0;
- player2Score = 0;
- }
- }
- window.onload = function() {
- canvas = document. getElementById('gameCanvas');
- canvasContext = canvas.getContext('2d');
- var framesPerSecond = 30;
- setInterval(function () {
- moveEverything();
- drawEverything();
- }, 1000/framesPerSecond );
- canvas.addEventListener('mousedown',handleMouseClick);
- canvas.addEventListener('mousemove',
- function(evt) {
- var mousePos = calculateMousePos(evt);
- paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
- });
- }
- function ballReset() {
- if(player1Score >= WINNING_SCORE ||
- player2Score >= WINNING_SCORE) {
- player1Score= 0;
- player2Score= 0;
- }
- ballSpeedX = -ballSpeedX;
- ballX = canvas.width/2;
- ballY = canvas.height/2;
- }
- function computerMovement() {
- var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
- if(paddle2YCenter < ballY-25) {
- paddle2Y += 6;
- } else if(paddle2YCenter > ballY+25) {
- paddle2Y -= 6;
- }
- }
- function moveEverything() {
- if(showingWinScreen) {
- return;
- }
- computerMovement();
- ballX += ballSpeedX;
- ballY += ballSpeedY;
- if(ballX < 0) {
- if(ballY > paddle1Y &&
- ballY < paddle1Y+PADDLE_HEIGHT) {
- ballSpeedX = -ballSpeedX;
- var dektaY = ballY
- -(paddle1Y+PADDLE_HEIGHT/2);
- ballSpeedY = deltaY * 0.35;
- } else {
- player2Score++; //must be BEFORE ballReset()
- ballReset();
- showingWinScreen = true;
- }
- }
- if(ballX > canvas.width) {
- if(ballY > paddle2Y &&
- ballY < paddle2Y+PADDLE_HEIGHT) {
- ballSpeedX = -ballSpeedX;
- var dektaY = ballY
- -(paddle2Y+PADDLE_HEIGHT/2);
- ballSpeedY = deltaY * 0.35;
- } else {
- player1Score++; //must be BEFORE ballReset()
- ballReset();
- showingWinScreen = true;
- }
- }
- if(ballY < 0) {
- ballSpeedY = -ballSpeedY;
- }
- if(ballY > canvas.height) {
- ballSpeedY = -ballSpeedY;
- }
- }
- function drawEverything() {
- // next line blanks out the screen with black
- colorRect (0,0,canvas.width,canvas.height,'black');
- if(showingWinScreen) {
- canvasContext.fillStyle = 'white';
- canvasContext.fillText ("click to continue", 100, 100);
- return;
- }
- // this is left player paddle
- colorRect (0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT,'white');
- // this is right computer paddle
- colorRect (canvas.width-PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT,'white');
- //next line draws the ball
- colorCircle(ballX, ballY, 10, 'white');
- 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) {
- canvasContext.fillStyle = drawColor;
- canvasContext.fillRect(leftX,topY,width,height);
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement