API tools faq
paste
Advertisement
Guest User

ValamiSzar

a guest
Apr 6th, 2015
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.41 KB | None | 0 0
raw download clone embed print report
  1. <DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf8"/>
  5.         <style>
  6.             html, body{margin: 0; padding: 0; background: #95a5a6;}
  7.             #start{
  8.                 width: 600px;
  9.                 height: 100px;
  10.                 font-size: 65px;
  11.                 font-family: verdana;
  12.                 text-align: center;
  13.                 position: absolute;
  14.                 cursor: pointer;
  15.                 color: #34495e;
  16.             }
  17.             #ball{
  18.                 width: 20px;
  19.                 height: 20px;
  20.                 position: absolute;
  21.                 background: #d35400;
  22.                 margin-top: -10px;
  23.                 margin-left: -10px;
  24.                 border-radius: 10px;
  25.             }
  26.             #wall{
  27.                 width: 190px;
  28.                 background: #34495e;
  29.                 margin: 0;
  30.                 padding: 0;
  31.             }
  32.             #points{
  33.                 width: 100px;
  34.                 height: 50px;
  35.                 position: absolute;
  36.                 top: 10;
  37.                 left: 10;
  38.                 font-size: 24px;
  39.                 font-family: verdana;
  40.                 color: #95a5a6;
  41.             }
  42.             #player1{
  43.                 width: 5px;
  44.                 height: 100px;
  45.                 background: #e67e22;
  46.                 position: absolute;
  47.                 border-radius: 5px;
  48.             }
  49.         </style>
  50.         <script>
  51.             var windowWidth = window.innerWidth;
  52.             var windowHeight = window.innerHeight;
  53.            
  54.             var ballRandomStartX = Math.floor((Math.random() * (windowWidth-310)) + 300);
  55.             var ballRandomStartY = Math.floor((Math.random() * (windowHeight/2)) + 10);
  56.             var mouseY;
  57.             var endGame = false;
  58.             var pointCounter = 0;
  59.  
  60.             var xVar = -1;
  61.             var yVar = 0.5;
  62.  
  63.             function editStart(){
  64.                 var start = document.getElementById("start");
  65.                 start.style.top = (windowHeight-100)/2;
  66.                 start.style.left = (windowWidth-600)/2;
  67.             }
  68.  
  69.             function startGame(){
  70.                 document.getElementById("start").style.display = "none";
  71.                 var newBall = document.createElement("div");
  72.                 var wall = document.createElement("div");
  73.                 var points = document.createElement("div");
  74.                 var player1 = document.createElement("div");
  75.                 newBall.id = "ball";
  76.                 newBall.style.top = ballRandomStartY;
  77.                 newBall.style.left = ballRandomStartX;
  78.                 wall.id = "wall";
  79.                 wall.style.height = windowHeight;
  80.                 points.id = "points";
  81.                 points.innerHTML = pointCounter;
  82.                 player1.id = "player1";
  83.                 player1.style.left = window.innerWidth-100;
  84.                 player1.style.top = 0;
  85.                 document.body.appendChild(newBall);
  86.                 document.body.appendChild(wall);
  87.                 document.body.appendChild(points);
  88.                 document.body.appendChild(player1);
  89.             }      
  90.             function moveBall(){
  91.                 var ball = document.getElementById("ball");
  92.                 if(ballRandomStartX === 200){
  93.                     xVar = 1;
  94.                 }
  95.                 if(ballRandomStartY === windowHeight-10){
  96.                     yVar = -1;
  97.                 }
  98.                 if(ballRandomStartY === 10){
  99.                     yVar = 1;
  100.                 }
  101.  
  102.                 if(ballRandomStartX === windowWidth-110 && (ballRandomStartY >= mouseY && ballRandomStartY <= mouseY+100)){
  103.                     xVar = -1;
  104.                     pointCounter++;
  105.                     document.getElementById("points").innerHTML = pointCounter;
  106.                 }
  107.                 else{
  108.                     endGame = true;
  109.                     //xVar = -1;
  110.                 }
  111.                 ballRandomStartY = ballRandomStartY + yVar;
  112.                 ballRandomStartX = ballRandomStartX + xVar;
  113.                 ball.style.top = ballRandomStartY;
  114.                 ball.style.left = ballRandomStartX;
  115.             }  
  116.             function movePlayer(){
  117.                 mouseY = event.clientY;
  118.                 var palyer1 = document.getElementById("player1");
  119.                 if(!(mouseY>windowHeight-100)){
  120.                 player1.style.top = mouseY;
  121.                 }
  122.             }
  123.         </script>
  124.     </head>
  125.     <body onmousemove="movePlayer()">
  126.         <div id="start" onclick="startGame()">Click to START!</div>
  127.         <script>
  128.             editStart();
  129.             if(endGame === false){
  130.                 setInterval(moveBall, 1);
  131.             }
  132.             else{
  133.                 clearInterval(moveBall);
  134.             }
  135.         </script>
  136.     </body>
  137. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!