Spieleentwicklung mit JavaScript - Dynamische Spielfelder
(Unterschied zwischen Versionen)
K |
|||
| Zeile 9: | Zeile 9: | ||
Dieses Bild enthält 5 Teilstücke, die als Hintergrund für ein Jump'n'Run Spiel dienen können. | Dieses Bild enthält 5 Teilstücke, die als Hintergrund für ein Jump'n'Run Spiel dienen können. | ||
| - | + | == Sourcecode == | |
| + | <pre> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta http-equiv="content-type" content="text/html;charset=UTF-8"> | ||
| + | <title>Sample</title> | ||
| + | </head> | ||
| + | <script type="text/javascript"> | ||
| + | var canvas; | ||
| + | var context; | ||
| + | var tiles = new Array(); | ||
| + | var level = new Array( | ||
| + | 0,4,0,0,0,0,0,0, | ||
| + | 2,1,1,1,1,1,1,2, | ||
| + | 2,0,3,0,0,0,0,2, | ||
| + | 2,0,3,0,0,0,0,2, | ||
| + | 2,0,3,2,1,1,1,2, | ||
| + | 2,4,3,2,0,0,0,4, | ||
| + | 1,1,1,2,1,1,1,1, | ||
| + | 4,0,0,2,0,0,4,0 | ||
| + | ); | ||
| + | |||
| + | function init() | ||
| + | { | ||
| + | canvas = document.getElementById("board"); | ||
| + | context = canvas.getContext("2d"); | ||
| + | |||
| + | var tileset = document.getElementById("tileset"); | ||
| + | context.drawImage( tileset, 0, 0 ); | ||
| + | |||
| + | for( var i = 0; i < 5; i++ ) | ||
| + | { | ||
| + | tiles[i] = context.getImageData( i * 30, 0, 30, 30 ); | ||
| + | } | ||
| + | |||
| + | drawPlayfield( level ); | ||
| + | } | ||
| + | |||
| + | function drawPlayfield( level ) | ||
| + | { | ||
| + | for( y = 0; y < 8; y++ ) | ||
| + | { | ||
| + | for( x = 0; x < 8; x++ ) | ||
| + | { | ||
| + | context.putImageData( tiles[level[y*8+x]], x * 30, y * 30 ); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | <body onLoad="init();"> | ||
| + | <canvas id="board" width="240" height="240" style="border:1px black solid">Dieser Browser ist nicht geeignet.</canvas> | ||
| + | <img id="tileset" src="img/tileset.png" style="visibility:hidden;"> | ||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | |||
| + | == Vorbereiten des Tilesets == | ||
| + | Zuerst wird das TileSet als HTML-Element geladen. In der Funktion init() greifen wir darauf zu und kopieren es in den Canvas, um es in die einzelnen Teile zerlegen zu können. Mit der Canvas-Methode GetImageData ist es möglich, einen Bildausschnitt zu kopieren, den wir dann später beliebig oft wieder einfügen können. | ||
| + | |||
| + | Die einzelnen Tiles sind 30x30 Pixel groß und es sind insgesamt 5 Teile. | ||
| + | Folgender Code-Abschnitt erledigt diese Aufgabe: | ||
| + | <pre> | ||
| + | var tileset = document.getElementById("tileset"); | ||
| + | context.drawImage( tileset, 0, 0 ); | ||
| + | |||
| + | for( var i = 0; i < 5; i++ ) | ||
| + | { | ||
| + | tiles[i] = context.getImageData( i * 30, 0, 30, 30 ); | ||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | Im Anschluss befinden sich die einzelnen Tiles im tiles-Array. Die einzelnen Tiles haben einen Index von 0 bis 4. | ||
| + | |||
| + | == Definition des Spielfelds == | ||
Version vom 14:54, 1. Sep. 2010
Inhaltsverzeichnis |
Dynamische Spielfelder
Viele Spielfelder in Computer setzen sich aus einzelnen Elementen zusammen, die insgesamt das Spielfeld ergeben. Diese einzelnen Teile können unterschiedliche Funktionen und Attribute innehaben wie zum Beispiel "Dieses Feld kann vom Spieler betreten werden" oder "Wer auf dieses Feld kommt, wird weggebeamt".
Um ein solches Spielfeld erzeugen zu können, werden zuerst die Einzelteile benötigt, aus denen es sich zusammensetzt. Das sind sogenannte Tilesets, die alle einzelnen Elemente in einer Grafik zusammenfassen.
Dieses Bild enthält 5 Teilstücke, die als Hintergrund für ein Jump'n'Run Spiel dienen können.
Sourcecode
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Sample</title>
</head>
<script type="text/javascript">
var canvas;
var context;
var tiles = new Array();
var level = new Array(
0,4,0,0,0,0,0,0,
2,1,1,1,1,1,1,2,
2,0,3,0,0,0,0,2,
2,0,3,0,0,0,0,2,
2,0,3,2,1,1,1,2,
2,4,3,2,0,0,0,4,
1,1,1,2,1,1,1,1,
4,0,0,2,0,0,4,0
);
function init()
{
canvas = document.getElementById("board");
context = canvas.getContext("2d");
var tileset = document.getElementById("tileset");
context.drawImage( tileset, 0, 0 );
for( var i = 0; i < 5; i++ )
{
tiles[i] = context.getImageData( i * 30, 0, 30, 30 );
}
drawPlayfield( level );
}
function drawPlayfield( level )
{
for( y = 0; y < 8; y++ )
{
for( x = 0; x < 8; x++ )
{
context.putImageData( tiles[level[y*8+x]], x * 30, y * 30 );
}
}
}
</script>
<body onLoad="init();">
<canvas id="board" width="240" height="240" style="border:1px black solid">Dieser Browser ist nicht geeignet.</canvas>
<img id="tileset" src="img/tileset.png" style="visibility:hidden;">
</body>
</html>
Vorbereiten des Tilesets
Zuerst wird das TileSet als HTML-Element geladen. In der Funktion init() greifen wir darauf zu und kopieren es in den Canvas, um es in die einzelnen Teile zerlegen zu können. Mit der Canvas-Methode GetImageData ist es möglich, einen Bildausschnitt zu kopieren, den wir dann später beliebig oft wieder einfügen können.
Die einzelnen Tiles sind 30x30 Pixel groß und es sind insgesamt 5 Teile. Folgender Code-Abschnitt erledigt diese Aufgabe:
var tileset = document.getElementById("tileset");
context.drawImage( tileset, 0, 0 );
for( var i = 0; i < 5; i++ )
{
tiles[i] = context.getImageData( i * 30, 0, 30, 30 );
}
Im Anschluss befinden sich die einzelnen Tiles im tiles-Array. Die einzelnen Tiles haben einen Index von 0 bis 4.