Question

＆＃13;

<html>

<head>
  <title>TileMap2</title>
  <style>
    #canvas {
      outline: 3px solid black;
    }
  </style>
</head>

<body>
  <canvas id="canvas" height="400" width="1000"></canvas>
  <script>
    window.onload = function() {
      drawMap();
      context.drawImage(mario, xpos, ypos, 50, 50);
      context.drawImage(goomba, 50, 50, 50, 50);

    }




    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');


    var xpos = 0;
    var ypos = 0;
    var grass = new Image();
    var water = new Image();
    var dirt = new Image();
    var mario = new Image();
    var goomba = new Image();

    mario.src = 'Mario.png';
    grass.src = 'grass1.jpg';
    water.src = 'water.jpg';
    dirt.src = 'dirt.jpg';
    goomba.src = "goomba.png";



    var map = [
      [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1]

    ];

    function drawMap() {
      var localX = 0;
      var localY = 0;

      for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {

          if (parseInt(map[i][j]) == 0) {
            context.drawImage(grass, localX, localY);
          }

          if (parseInt(map[i][j]) == 1) {
            context.drawImage(dirt, localX, localY)
          };
          if (parseInt(map[i][j]) == 2) {
            context.drawImage(water, localX, localY);
          }
          localX += 100;
        }
        localX = 0;
        localY += 100;
      }


    }



    function kill() {
      if (mario.left === goomba.left && mario.top === goomba.top) {
        goomba.style.display = "none";
      }
    }
    kill();

    function move(e) {


      if (e.keyCode == 39) {
        xpos += 50;
      }


      if (e.keyCode == 37) {
        xpos -= 50;
      }

      if (e.keyCode == 38) {
        ypos -= 50;
      }

      if (e.keyCode == 40) {
        ypos += 50;
      }
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawMap();
      context.drawImage(mario, xpos, ypos, 50, 50);
      context.drawImage(goomba, 50, 50, 50, 50);
    }
    document.onkeydown = move;
  </script>

</body>

</html>

＆＃13;

有谁知道我怎样才能使kill（）函数有效？每当马里奥具有与goomba相同的坐标时，我希望从屏幕上擦除goomba。请仅在Javascript中。这是我的第一个javascript项目，所以请耐心等待：）

提前致谢！

Answer 1

创建一个用于绘图的功能。目前，您正在反复执行此操作，这使您的代码难以维护。

但在此之前，我们应该创建一组images，如下所示：

var images = {};

function addToImage(key, obj, x, y) {
    images[key] = {obj: obj, x: x, y: y, display: true};
}

初始化时，将mario和goomba添加到图片及其初始位置，然后实现绘制功能。所以，让我们有这个功能：

function draw(images) {
    drawMap();
    for (var imageIndex in images) {
        if (images[imageIndex].display) {
            context.drawImage(images[imageIndex].obj.src, images[imageIndex].x, images[imageIndex].y, images[imageIndex].obj.width, images[imageIndex].obj.height);
        }
    }
}

window.onload = function() {
    draw(images);
}

当你杀死goomba时，只需将images["goomba"].display设为false并再次致电draw(images)。

如何让Image（）在Javascript中消失？

1 个答案: