- Wenn ich folgende Website lokal aufrufe ist das Image zwar in F12 sichtbar aber hat weder höhe noch breite, kurz wird nicht angezeigt
- wenn ich die Website aber in irgendeinem online live editor starte geht alles.
wenn ich IM BROWSER daraus <image href="spaceship.png" width="20" height="20" x="20" y="20"/> masche ändert der Browser es wieder zu
<image href="spaceship.png" width="20" height="20" x="20" y="20"></image> und es geht alles......
HTML:
<!DOCTYPE html>
<html lang="en" style="overflow: hidden; width: 100%; height: 100%">
<head>
<meta charset="UTF-8">
<title>WebSite</title>
</head>
<body onload="main();" onkeydown="Keyboard.keyEvent(event.keyCode, true)" onkeyup="Keyboard.keyEvent(event.keyCode, false)" style="margin: 0px; width: 100%; height: 100%">
<svg id="gameField" viewBox="0 0 100 100" width="100%" height="100%">
</svg>
<script>
function main()
{
var shipImg = document.createElement("image");
shipImg.setAttribute("href", "spaceship.png");
shipImg.setAttribute("width", 20);
shipImg.setAttribute("height", 20);
shipImg.setAttribute("x", 20);
shipImg.setAttribute("y", 20);
document.getElementById("gameField").appendChild(shipImg);
//document.getElementById("gameField").update(); FAIL
var ship = new Ship(shipImg);
}
var Keyboard =
{
KeyMap:
{
Up: 38,
Down: 40,
Left: 37,
Right: 39
},
pressedKeys: new Array(),
keyEvent: function keyEvent(key, press)
{
if(press)
{
if(this.pressedKeys.indexOf(key) == -1)
{
this.pressedKeys.push(key);
}
}
else
{
this.pressedKeys.splice(this.pressedKeys.indexOf(key), 1);
}
},
isKeyDown: function(key)
{
return this.pressedKeys.indexOf(key) != -1;
}
}
class Ship
{
renderElement = null;
pos =
{
x: 0,
y: 0
};
constructor(renderElement)
{
this.renderElement = renderElement;
setInterval(function()
{
if(Keyboard.isKeyDown(Keyboard.KeyMap.Up))
{
console.log("UP");
}
if(Keyboard.isKeyDown(Keyboard.KeyMap.Down))
{
console.log("Down");
}
if(Keyboard.isKeyDown(Keyboard.KeyMap.Left))
{
console.log("Left");
}
if(Keyboard.isKeyDown(Keyboard.KeyMap.Right))
{
console.log("Right");
}
}, 10);
}
}
</script>
</body>
</html>
Zuletzt bearbeitet:
