Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <style>

    </style>
  </head>
  <body>
    <canvas id="game" width="256" height="256" style="background: #333;"></canvas>
    <img style="display: none;" src="https://image.ibb.co/ndE8Ww/character.png">
    <img style="display: none;" src="https://image.ibb.co/m7sqdb/grass.png">
    <script>
        var sprites = {
          character1: {sprite_w: 16,sprite_h: 28,sprite_x: 0,sprite_y: 0, canvas_x: 100, canvas_y: 100},
        }
      // First lets make this a function, so we can call it everytime we need to load the graphics.
      function graphics(sprites)
      {

        var resource = new Image();
            resource.src = "https://image.ibb.co/ndE8Ww/character.png";

        var canvas = document.getElementById('game');
        var context = canvas.getContext("2d");

        for(var key in sprites)
            {
              console.log(key);
              context.drawImage(resource, sprites[key]['sprite_x'], sprites[key]['sprite_y'], sprites[key]['sprite_w'], sprites[key]['sprite_h'], sprites[key]['canvas_x'], sprites[key]['canvas_y'], sprites[key]['sprite_w'],sprites[key]['sprite_h']);
            }
      }


      // Now we want to listen to see if there are any clicks.
      var element = document.getElementById('game'); // define element
          element.addEventListener('click', move, false);
      function move(e)
      {
            var clickX = e.pageX; // get x cord of click
            var clickY = e.pageY; // get y cord of click
            var canvas = document.getElementById('game'); // set element
            var canvasLocationX = clickX - canvas.offsetLeft; // gets the actually click location in the canvas
            var canvasLocationY = clickY - canvas.offsetTop; // gets the actually click location in the canvas

            console.log('X:' + canvasLocationX + 'Y: ' + canvasLocationY);

            sprites['character1']['canvas_x'] = canvasLocationX;
            sprites['character1']['canvas_y'] = canvasLocationY;
            graphics(sprites);

      }

      document.onkeydown = function(e) {
        var canvas = document.getElementById('game');
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
        if (e.key == "d") {
          sprites['character1']['canvas_x'] = sprites['character1']['canvas_x']+10;

        }
        if (e.key == "s") {
          sprites['character1']['canvas_y'] = sprites['character1']['canvas_y']+10;


        }

        if (e.key == "w") {
          sprites['character1']['canvas_y'] = sprites['character1']['canvas_y']-10;


        }
        if (e.key == "a") {
          sprites['character1']['canvas_x'] = sprites['character1']['canvas_x']-10;


        }
        drawMap(mappack);
        graphics(sprites);

      }
        var mappack = {
          t0: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 0},
          t1: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 32},
          t2: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 64},
          t3: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 96},
          t4: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 128},
          t5: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 160},
          t6: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 192},
          t7: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 192+32},
          t8: {sprite_w: 32,sprite_h: 32,sprite_x: 0,sprite_y: 0, canvas_x: 0, canvas_y: 32*8},
        }
      function drawMap(mappack) {
        var map = new Image();
           map.src = "https://image.ibb.co/m7sqdb/grass.png";

        var canvas = document.getElementById('game');
        var context = canvas.getContext("2d");

        for(var key in mappack)
            {
              console.log(key);
              context.drawImage(map, mappack[key]['sprite_x'], mappack[key]['sprite_y'], mappack[key]['sprite_w'], mappack[key]['sprite_h'], mappack[key]['canvas_x'], mappack[key]['canvas_y'], mappack[key]['sprite_w'],mappack[key]['sprite_h']);
            }
}

    drawMap(mappack);
    graphics(sprites);


    </script>
  </body>
</html>