SHARE
TWEET

Untitled

a guest Apr 20th, 2019 103 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <style>
  4.       canvas {
  5.         background: #aaa;
  6.         display: block;
  7.         margin: 0 auto;
  8.         margin-top: 50px;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.  
  14.     <canvas id="xyz" width="500" height="300"></canvas>
  15.  
  16.     <script type="text/javascript">
  17.       var canvas = document.getElementById('xyz');
  18.       var ctx = canvas.getContext('2d');
  19.       /**
  20.        *
  21.        *
  22.        */
  23.       var initialState = {
  24.         score: 0,
  25.         delta: 5,
  26.         enemies: {
  27.           config: {
  28.             width: 30,
  29.             height: 10,
  30.             x: 0,
  31.             y: 40,
  32.             padding: 15,
  33.             offsetLeftMin: 15,
  34.             offsetLeft: 15,
  35.             direction: '+',
  36.           },
  37.           list: [
  38.             { id: 'a0', isAlive: true },
  39.             { id: 'a1', isAlive: true },
  40.             { id: 'a2', isAlive: true },
  41.             { id: 'a3', isAlive: true },
  42.             { id: 'a4', isAlive: true },
  43.             { id: 'a5', isAlive: true },
  44.           ]
  45.         },
  46.         paddle: {
  47.           width: 60,
  48.           height: 10,
  49.           y: canvas.height - 15,
  50.           x: 10,
  51.           direction: '',
  52.           isPressing: false, // better named `isMoving`
  53.           isFiring: false,
  54.         },
  55.         bullets: {
  56.           config: { radius: 5 },
  57.           list: []
  58.         },
  59.       };
  60.       /**
  61.        *
  62.        *
  63.        */
  64.       var stateStore = [];
  65.       /**
  66.        *
  67.        *
  68.        */
  69.       function clone(state) {
  70.         return JSON.parse(
  71.           JSON.stringify(
  72.             state
  73.           )
  74.         );
  75.       }
  76.       /**
  77.        *
  78.        *
  79.        */
  80.       function update(state) {
  81.         var {
  82.           delta,
  83.           ball,
  84.           enemies,
  85.           paddle,
  86.           bullets,
  87.         } = state;
  88.         // --------------------------------------------------
  89.         // update paddle coordinates positions
  90.         // --------------------------------------------------
  91.         if (paddle.isPressing) {
  92.           paddle.x = paddle.direction === '+'
  93.             ? paddle.x + delta
  94.             : paddle.x - delta;
  95.         }
  96.         if (paddle.isFiring) {
  97.           bullets.list.push({
  98.             // start bullet from the middle
  99.             // of the paddle
  100.             x: paddle.x + (paddle.width / 2),
  101.             y: paddle.y,
  102.           });
  103.         }
  104.         if (paddle.x >= canvas.width) {
  105.           paddle.x = canvas.width;
  106.         }
  107.         if (paddle.x <= 0) {
  108.           paddle.x = 0;
  109.         }
  110.         // --------------------------------------------------
  111.         // update bullets list coordinates
  112.         // --------------------------------------------------
  113.         bullets.list.forEach(bullet => {
  114.           bullet.y -= delta;
  115.         });
  116.         // --------------------------------------------------
  117.         // update enemies offsetLeft
  118.         // --------------------------------------------------
  119.         var { config, list } = enemies;
  120.  
  121.         config.offsetLeft = config.direction === '+'
  122.           ? config.offsetLeft + delta
  123.           : config.offsetLeft - delta;
  124.  
  125.         var allWidth = (
  126.             (config.width + config.padding) // single enemy width
  127.             * list.length)
  128.           + config.offsetLeftMin - config.padding;
  129.  
  130.         if (config.offsetLeft + allWidth >= canvas.width) {
  131.           config.direction = '-';
  132.           config.y += 15;
  133.         }
  134.  
  135.         if (config.offsetLeft <= config.offsetLeftMin) {
  136.           config.direction = '+';
  137.           config.y += 15;
  138.         }
  139.         // --------------------------------------------------
  140.         // bullet vs enemy collision detection
  141.         // --------------------------------------------------
  142.         bullets.list.forEach(bullet => {
  143.         });
  144.         return state;
  145.       }
  146.       /**
  147.        *
  148.        *
  149.        */
  150.       function draw(state) {
  151.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  152.         // draw paddle
  153.         var paddle = state.paddle;
  154.         ctx.fillRect(paddle.x, canvas.height - 15, paddle.width, paddle.height);
  155.         // draw enemies
  156.         var { list, config } = state.enemies;
  157.         list.forEach((enemy, idx) => {
  158.           var xPosition = (idx * (config.width + config.padding)) + config.offsetLeft;
  159.           var yPosition = config.y;
  160.           ctx.fillRect(
  161.             xPosition,
  162.             yPosition,
  163.             config.width,
  164.             config.height
  165.           );
  166.         });
  167.         // draw bullets
  168.         state.bullets.list.forEach(bullet => {
  169.           ctx.beginPath();
  170.           ctx.arc(
  171.             bullet.x,
  172.             bullet.y,
  173.             state.bullets.config.radius,
  174.             0,
  175.             2 * Math.PI
  176.           );
  177.           ctx.fill();
  178.         });
  179.         // draw score
  180.         ctx.font = '15px serif';
  181.         ctx.fillText('Score: ' + state.score, 20, 20);
  182.       }
  183.       /**
  184.        *
  185.        *
  186.        */
  187.       function main() {
  188.         // document.addEventListener('keypress', e => {
  189.         //   if (e.key === 'n') {
  190.         //     var currentState = stateStore[stateStore.length - 1];
  191.         //     var nextState = update(clone(currentState));
  192.         //     draw(nextState);
  193.         //     stateStore.push(nextState);
  194.         //   }
  195.         //   if (e.key === 'p') {
  196.         //     var previousState = stateStore.pop();
  197.         //     draw(previousState);
  198.         //   }
  199.         // }, false);
  200.         var firstState = update(clone(initialState));
  201.         draw(firstState);
  202.         stateStore.push(firstState);
  203.         setInterval(() => {
  204.           var currentState = stateStore[stateStore.length - 1];
  205.           var nextState = update(clone(currentState));
  206.           draw(nextState);
  207.           stateStore.push(nextState);
  208.         }, 50);
  209.         document.addEventListener('keydown', e => {
  210.           var { paddle } = stateStore[stateStore.length - 1];
  211.           if (e.key === 'ArrowRight') {
  212.             paddle.isPressing = true;
  213.             paddle.direction = '+';
  214.           }
  215.           if (e.key === 'ArrowLeft') {
  216.             paddle.isPressing = true;
  217.             paddle.direction = '-';
  218.           }
  219.           if (e.key === 'f') paddle.isFiring = true;
  220.         }, false);
  221.         document.addEventListener('keyup', e => {
  222.           var { paddle } = stateStore[stateStore.length - 1];
  223.           if (e.key === 'ArrowRight') paddle.isPressing = false;
  224.           if (e.key === 'ArrowLeft') paddle.isPressing = false;
  225.           if (e.key === 'f') paddle.isFiring = false;
  226.         }, false);
  227.       }
  228.       main();
  229.     </script>
  230.   </body>
  231. </html>
RAW Paste Data
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!
 
Top