index.html

Game - basic movement
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Basic Game</title>
  </head>

  <body>
    <div class="section hero-section">
      <canvas id="canvas" style="background:rgba(34,45,23,0.4)" ></canvas>
    </div>

    <script>
      var can=document.getElementById('canvas');
      can.height=1000; can.width=1300;
      var ctx=can.getContext('2d');
      var x=10,y=100;
      ctx.fillStyle="black";
      ctx.fillRect(700,100,100,100);
      let up = false;
      let right = false;
      let left = false;
      let down = false;
      let attack = false;

      //player images
      var playerImage = new Image();
      playerImageCtr = 0;
      playerImages = ["run0.png","run1.png","run2.png","run3.png","run4.png","run5.png"];
      playerAttack = ["attack0.png","attack1.png","attack2.png","attack3.png"];
      playerImagesOpposite = ["run0-opposite.png","run1-opposite.png","run2-opposite.png","run3-opposite.png","run4-opposite.png","run5-opposite.png"];
      playerImage.src = "run0.png";

      function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.beginPath();
        // ctx.arc(x,y,20,0,2*Math.PI);
        ctx.drawImage(playerImage, x, y, 150, 104);
        // ctx.fillStyle='rgba(250,0,0,0.4)';
        // ctx.fill();

        // ctx.fillStyle="rgba(34,45,23,0.4)";
        // ctx.fillRect(0,0,can.width,can.height);
        requestAnimationFrame(draw);
        //ctx.clearRect(0,0,can.width,can.height);

        if (attack) {
          playerAttackCtr = 0;
          for (let x=0; x<=20; x++) {
            playerImage.src = playerAttack[Math.round(playerAttackCtr/5)];
          }
        }

        if (up && y>-20) {
          playerImageCtr++;
          playerImage.src = playerImages[Math.round(playerImageCtr/10)];
          y-=2;
        }
        if (down) {
          playerImageCtr++;
          playerImage.src = playerImagesOpposite[Math.round(playerImageCtr/5)];
          y+=2;
        }
        if (left && x>-20) {
          playerImageCtr++;
          playerImage.src = playerImagesOpposite[Math.round(playerImageCtr/5)];
          x-=2;
        }
        if (right && x<1150) {
          playerImageCtr++;
          playerImage.src = playerImages[Math.round(playerImageCtr/5)];
          x+=2;
        }

        if (playerImageCtr > 25) {
          playerImageCtr = 0;
        }
      } 

      window.addEventListener("keydown", onKeyDown, false);
      window.addEventListener("keyup", onKeyUp, false);

      function onKeyDown(event) {
        var keyCode = event.keyCode;
        if (keyCode === 68) {
          right = true;
        }
        else if (keyCode === 83) {
          down = true;
        }
        else if (keyCode === 65) {
          left = true;
        }
        else if (keyCode === 87) {
          up = true;
        }
        else if (keyCode === 32) {
          attack = true;
        }
      }

      function onKeyUp(event) {
        var keyCode = event.keyCode;
        // right
        if (keyCode === 68) {
          right = false;
        }
        else if (keyCode === 83) {
          down = false;
        }
        else if (keyCode === 65) {
          left = false;
        }
        else if (keyCode === 87) {
          up = false;
        }
        else if (keyCode === 32) {
          attack = false;
        }
      }

      draw();
    </script>

    <!-- <a class="transform-btn" href="https://cleverly.codes">*</a> -->
  </body>
</html>
Editor is loading...