Created
May 14, 2016 17:30
-
-
Save mjumbewu/3744c19b14167034535c2e0e97a74bfd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| html,body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #left-paddle { | |
| background-color: green; | |
| left: 10px; | |
| } | |
| #right-paddle { | |
| background-color: blue; | |
| right: 10px; | |
| } | |
| .paddle { | |
| top: 0; | |
| height: 200px; | |
| width: 10px; | |
| position: absolute; | |
| } | |
| .ball { | |
| width: 20px; | |
| height: 20px; | |
| background-color: red; | |
| border-radius: 10px; | |
| position: absolute; | |
| left: 50px; | |
| top: 50px; | |
| } | |
| .score { | |
| position: absolute; | |
| top: 0; | |
| } | |
| #left-score { | |
| left: 10%; | |
| } | |
| #right-score { | |
| right: 10%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| ezpzxd | |
| <div class="paddle" id="left-paddle"></div> | |
| <div class="paddle" id="right-paddle"></div> | |
| <div class="ball" id="ball"></div> | |
| <h1 class="score" id="left-score">0</h1> | |
| <h1 class="score" id="right-score">0</h1> | |
| <script> | |
| 'use strict'; | |
| var paddleLeft = document.getElementById('left-paddle'); | |
| var paddleRight = document.getElementById('right-paddle'); | |
| var ball = document.getElementById('ball'); | |
| var paddleLeftTop = 0; | |
| var paddleRightTop = 0; | |
| var paddleLeftHeight = 200; | |
| var paddleRightHeight = 200; | |
| var paddleRightDirection = 0; | |
| var paddleRightTimer; | |
| var paddleLeftDirection = 0; | |
| var paddleLeftTimer; | |
| paddleLeft.style.top = 0; | |
| paddleRight.style.top = 0; | |
| var ballXPos = 50; | |
| var ballYPos = 50; | |
| var ballXDir = 5; | |
| var ballYDir = 5; | |
| var ballWidth = 20; | |
| var ballHeight = 20; | |
| var leftScoreDisplay = document.getElementById('left-score'); | |
| var rightScoreDisplay = document.getElementById('right-score'); | |
| var leftScore = 0; | |
| var rightScore = 0; | |
| function updateScoreDisplay() { | |
| leftScoreDisplay.innerHTML = leftScore; | |
| rightScoreDisplay.innerHTML = rightScore; | |
| } | |
| function moveBall() { | |
| var newBallXPos = ballXPos + ballXDir; | |
| var newBallYPos = ballYPos + ballYDir; | |
| if (newBallXPos + ballWidth > window.innerWidth) { | |
| ballXDir = -Math.abs(ballXDir); | |
| } | |
| if (newBallYPos + ballHeight > window.innerHeight) { | |
| ballYDir = -Math.abs(ballYDir); | |
| } | |
| if (newBallXPos < 0) { | |
| ballXDir = Math.abs(ballXDir); | |
| } | |
| if (newBallYPos < 0) { | |
| ballYDir = Math.abs(ballYDir); | |
| } | |
| ballXPos += ballXDir; | |
| ballYPos += ballYDir; | |
| if (ballXPos < 20 && | |
| (ballYPos + 20 < paddleLeftTop || | |
| ballYPos > paddleLeftTop + paddleLeftHeight)) { | |
| rightScore += 1; | |
| updateScoreDisplay(); | |
| } | |
| if (ballXPos + 20 > window.innerWidth - 20 && | |
| (ballYPos + 20 < paddleRightTop || | |
| ballYPos > paddleRightTop + paddleRightHeight)) { | |
| leftScore += 1; | |
| updateScoreDisplay(); | |
| } | |
| ball.style.top = ballYPos + 'px'; | |
| ball.style.left = ballXPos + 'px'; | |
| } | |
| function moveRightPaddle() { | |
| paddleRightTop += paddleRightDirection; | |
| paddleRight.style.top = paddleRightTop + 'px'; | |
| } | |
| function moveLeftPaddle() { | |
| paddleLeftTop += paddleLeftDirection; | |
| paddleLeft.style.top = paddleLeftTop + 'px'; | |
| } | |
| setInterval(moveBall, 25); | |
| setInterval(function() { | |
| if (ballXDir < 50) ballXDir *= 1.1; | |
| if (ballYDir < 50) ballYDir *= 1.1; | |
| }, 10000) | |
| document.addEventListener('keydown', function(evt) { | |
| switch (evt.code) { | |
| case 'ArrowDown': | |
| if (!paddleRightTimer) { | |
| paddleRightDirection = 10; | |
| paddleRightTimer = setInterval(moveRightPaddle, 100); | |
| } | |
| break; | |
| case 'ArrowUp': | |
| if (!paddleRightTimer) { | |
| paddleRightDirection = -10; | |
| paddleRightTimer = setInterval(moveRightPaddle, 100); | |
| } | |
| break; | |
| case 'KeyS': | |
| if (!paddleLeftTimer) { | |
| paddleLeftDirection = 10; | |
| paddleLeftTimer = setInterval(moveLeftPaddle, 100); | |
| } | |
| break; | |
| case 'KeyW': | |
| if (!paddleLeftTimer) { | |
| paddleLeftDirection = -10; | |
| paddleLeftTimer = setInterval(moveLeftPaddle, 100); | |
| } | |
| break; | |
| } | |
| console.log(evt); | |
| }) | |
| document.addEventListener('keyup', function(evt) { | |
| switch (evt.code) { | |
| case 'ArrowDown': | |
| case 'ArrowUp': | |
| clearInterval(paddleRightTimer); | |
| paddleRightTimer = null; | |
| break; | |
| case 'KeyS': | |
| case 'KeyW': | |
| clearInterval(paddleLeftTimer); | |
| paddleLeftTimer = null; | |
| break; | |
| } | |
| console.log(evt); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
not nice
f
what's not nice
the thing doesn't work uncool man uncool
This is ok but if it WORKED it would do better
It works very cool just slow that is it and you should try to write on a normal notepad and SAVE AS "pong.html" it works really :)
i know, but not good.
i can make way better
i can fix it
and i will
The problems with this
The main issue with this is that it is very slow
it is very easy to just change the speed. Now
You have to fix the other problems like moving
The paddle out of the roof. And finally you have
to make the paddles smaller and change that
crappy color scheme.
how to do this (most of it)
change the color:
background-color:blue
background-color:green
background-color:red
Change it to:
background-color:white
background-color:white
background-color:white
or your own color choices
Size
change the size after
You get to find this line
height: 200px;
Change it to a less extreme value
such as 150 or 160.
send the whole script
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
why