HTML5 - Simples Tile System

HTML5 - Simples Tile System

Tiles, tiles, tiles...

Um das Tilesystem welches wir in den nächsten Schritten entwickeln sehen zu können, brauchen wir passende Grafiken.

Diese Tiles wurden von mir erstellt und können frei verwendet werden.

index.html

Wir brauchen zuerst eine HTML Seite, die wir einfach index.html nennen. Diese HTML Datei besteht aus dem HTML 5 Grundgerüst inkl. Canvas Element, was wie folgt aussieht.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
    </body>
</html>

Aus Einfachheit packen wir den Javascript Teil direkt in die HTML Datei. Dieser ist auch nicht besonders groß. Um das HTML5 Canvas Element anzusprechen benötigen wir getElementById und um später in diesem Canvas zeichnen zu können, benötigen wir noch den Kontext. Die Tiles speichern wir in einem Array.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var tiles = new Array();

construct(...)

Jetzt kommt schon die Funktion um die es hier hauptsächlich geht, die construct Funktion, welche einen eingehenden String in eine Tile Landschaft übersetzt.

function construct(str)
{
var strTiles = str.split(",");
var x = 0, y = 0;
            
for(var i = 0; i < strTiles.length; ++i)
{
if(strTiles[i] != 0)
{
var tile = { img: new Image(), posX: x, posY: y };
tile.img.src = "tile_" + strTiles[i] + ".png";
tiles[tiles.length] = tile;
}
                
x += 32;
if(x >= canvas.width) { y += 32; x = 0; }
}
}

So würde beispielsweise die Zeichenfolge "1,1,1,2,2,2,1,1,1" aussehen.

construct("1,1,1,2,2,2,1,1,1");


Um das ganze jetzt in unserem Canvas Element sichtbar zu machen, benötigen wir eine Funktion, die jede Sekunde aufgerufen wird. Außerdem brauchen wir eine Zählschleife die durch alle Tiles iteriert und diese dann an kalkulierter Position zeichnet.

setInterval(function()
{
for(var i = 0; i < tiles.length; ++i)
{
ctx.drawImage(tiles[i].img, tiles[i].posX, tiles[i].posY);
}     
}, 1000);
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text