Diese Seite wurde vor mehr als 2 Jahren erstellt
und vor über einem Monat zuletzt bearbeitet. Eventuell ist längst ihr Mindesthaltbarkeitsdatum überschritten!
Für die Fehlerseite von gameart.onderka.com
musste ein funktionierender Quake-Teleporter her. Es ist 2021. Ein animiertes gif ist uncool, Flash kann
ich nicht (ha ha ...) — also dann HTML5:
HTML
<div id='canvas_wrapper' class='center shadow'>
<canvas id="teleporter_canvas" width="640" height="480">
Your browser does not support the canvas element. You're really old school!<br />
<a href='/'><img class='center shadow' src='/images/teleporter.jpg'></a>
</canvas>
<a href='/'><canvas id="particle_canvas" width="240" height="280"></canvas></a>
</div>
CSS
Das CSS dazu: 2 absolut platzierte <canvas>-Elemente in einem Wrapper
#canvas_wrapper {
position: relative;
width: 640px; /* Full size */
height: 480px; /* Full size */
}
#teleporter_canvas {
position: absolute;
top: 0; /* Full size */
left: 0; /* Full size */
border: 0;
width: 640px; /* Full size */
height: 480px; /* Full size */
}
#particle_canvas {
position: absolute;
top: 79px; /* Offset */
left: 242px; /* Offset */
border: 0;
width: 169px; /* Portal area */
height: 316px; /* Portal area */
}
Layer 1: Hintergrund
Die Hintergrund-Bilder, 640×480 Pixel:
Teleporter mit leerem Rahmen für <canvas>: teleporter.png
Teleporter statisch, als Fallback wenn <canvas> vom Browser nicht unterstützt wird: teleporter.jpg
Das Javaskript zum Initialisieren des Hintergrunds onload():
/* Init teleporter */
var canvas = document.getElementById("teleporter_canvas"),
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
var background = new Image();
background.src = "https://gameart.onderka.com/images/teleporter.png";
/* Set background onload() */
background.onload = function(){
ctx.drawImage(background,0,0);
}
Die Bilder (.jpg/.png), das CSS und die Skripte sind an vielen Stellen aufeinander abgestimmt: Sowohl die Abmessungen des Wrappers als auch der Offset (242px/79px) und die Größe (169px/316px) der Partikel-<canvas> innerhalb des Wrappers.