How can i make an Image() disappear in 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? Whenever mario has the same coordinates as goomba i want goomba to be erased from the screen. Please only in Javascript. This is my first javascript project so please show some patience :)
Thanks in advance!
1 answers
solution1
0 2015-09-07 22:52:57
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:
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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.