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

Question

 <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>

Does anyone know how i can make the kill() function work? 有谁知道我如何使kill（）函数起作用？ Whenever mario has the same coordinates as goomba i want goomba to be erased from the screen. 每当mario与goomba具有相同的坐标时，我希望从屏幕上删除goomba。 Please only in Javascript. 请只使用Javascript。 This is my first javascript project so please show some patience :) 这是我的第一个javascript项目，因此请耐心等待：)

Thanks in advance! 提前致谢！

Answer 1

Create a function you will use for drawing. 创建用于绘图的功能。 Currently you are doing it repeatedly, which makes your code difficult to maintain. 当前，您正在重复执行此操作，这使您的代码难以维护。

But before that, we should just create a set of images , like this: 但在此之前，我们应该只创建一组images ，如下所示：

var images = {};

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

When you initialize, add mario and goomba to images and their initial location and then implement a function to draw. 初始化时，将mario和goomba添加到图像及其初始位置，然后实现绘制功能。 So, let's have this function: 因此，让我们拥有以下功能：

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);
}

When you kill goomba , just set images["goomba"].display to false and call draw(images) again. 杀死goomba ，只需将images["goomba"].display为false然后再次调用draw(images) 。

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

问题描述

1 个解决方案

解决方案1
0 2015-09-07 22:52:57

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

问题描述

1 个解决方案

解决方案1 0 2015-09-07 22:52:57

解决方案1
0 2015-09-07 22:52:57