如何使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>

有誰知道我如何使kill（）函數起作用？ 每當mario與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 個解決方案

解決方案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