daily pastebin goal
36%
SHARE
TWEET

Untitled

a guest Mar 19th, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CANVAS</title>
  5. </head>
  6. <body>
  7. <canvas id="myCanvas" width="600" height="400" style="border: 1px solid black;"></canvas>
  8. <div id="barek"></div>
  9.  
  10. </body>
  11. <style>
  12. #barek {
  13.     position: absolute;
  14.     top: 390px;
  15.     left: 10px;
  16.     width: 100px;
  17.     height: 10px;
  18.     background: yellow;
  19.     border: 1px solid black;
  20. }
  21.  
  22. </style>
  23. <script>
  24.     var c=document.getElementById('myCanvas');
  25.     var ctx=c.getContext('2d');
  26.     var bar=c.getContext('2d');
  27.     var z;
  28.     function table(){
  29.         ctx.fillStyle="lightgreen";
  30.         ctx.fillRect(0,0,600,400);
  31.     }
  32.  
  33.  
  34.     var ballx=0;
  35.     var bally=0;
  36.     var ballSpeedx=1;
  37.     var ballSpeedy=1;
  38.     var ballSize=20;
  39.  
  40.     function ball(){
  41.         ctx.beginPath();
  42.         ctx.arc(ballx, bally, ballSize, 0, 2*Math.PI);
  43.         ctx.fillStyle="yellow";
  44.         ctx.fill();
  45.         ctx.stroke();
  46.         ballx=ballx+ballSpeedx;
  47.         bally=bally+ballSpeedy;
  48.  
  49.         if(ballx>600){
  50.             ballSpeedx=-ballSpeedx;
  51.         }
  52.         if (ballx<0){
  53.             ballSpeedx=-ballSpeedx;
  54.         }
  55.         if (bally>400){
  56.             ballSpeedy=-ballSpeedy;
  57.         }
  58.         if (bally<0){
  59.             ballSpeedy=-ballSpeedy;
  60.         }
  61.     }
  62.  
  63.     function przesun(e){
  64.         var key=document.getElementById('barek');
  65.         switch(e.keyCode){
  66.             case 37: key.style.left=key.offsetLeft-20+"px"; break;
  67.             case 39: key.style.left=key.offsetLeft+20+"px"; break;
  68.        
  69.         }
  70.     }
  71.     document.addEventListener("keydown", przesun);
  72.  
  73.  
  74.  
  75.  
  76.     function game(){
  77.         table();
  78.         ball();
  79.         barOn();
  80.     }
  81.  
  82.     z=setInterval(game,10);
  83.  
  84.    
  85.    
  86.     /*
  87.     ctx.fillStyle="lightgreen";
  88.     ctx.fillRect(0,0,600, 400);
  89.     ctx.moveTo(0,0);
  90.     ctx.lineTo(300,200);
  91.     ctx.stroke();
  92.     ctx.moveTo(600,0);
  93.     ctx.lineTo(300,200);
  94.     ctx.stroke();
  95.     ctx.beginPath();
  96.     ctx.arc(300,200,100,0,2*Math.PI);
  97.     ctx.stroke();
  98.     ctx.font = "40px Arial";
  99.     ctx.rotate(20*Math.PI/180);
  100.     ctx.strokeText("skad ty to znasz",170,50);
  101.     */
  102.  
  103. </script>
  104. </html>
RAW Paste Data
Top