In diesem Tutorial wollen wir unsere Bühne erstellen in dieser Spielt sich das ganze Spiel ab.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Fighting Monk</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="Stage" width="480" height="320"> <p>Your browser does not support HTML5!</p> </canvas> |
Was wir benötigen ist ein einfachen Canvas Element. Diesen habe ich die ID Stage zugewiesen. und eine Breite von 480px und eine Höhe von 320px.
Im Head bereich habe ich eine .css eingebunden und darüber einfach nur einen schwarzen Rahmen für die Stage erstellt.
|
1 2 3 |
#Stage{ border: 1px solid black; } |
Nun müssen wir die Stage noch über javascript inizilasieren.
|
1 2 3 4 5 6 |
var canvas = document.getElementById("Stage"); canvas.width = 320; canvas.height = 192; var context = canvas.getContext("2d"); var width = canvas.getAttribute('width'); var height = canvas.getAttribute('height'); |
wir verändern direkt an Anfang die Werte für Breite und Höhe der Stage. in der Variable Context speichern wir den context der Bühne und in width und height die jeweiligen Daten dazu.
Mehr brauchen wir eigentlich nicht die Bühne ist startbereit, nachfolgend noch ein Beispielcode um diese mit Leben zu füllen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var currentLevel = 0; var mapArray=[ [0,0,0,1,1,1,0,0,0,0], [0,0,0,0,0,1,1,1,0,0], [0,0,0,0,0,1,1,0,0,0], [0,0,0,1,1,1,0,0,0,0], [0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,0,0] ]; var grass = new Image(); var stone = new Image(); grass.src = 'img/grass.png'; stone.src = 'img/stone.jpg'; var tilesize = 32; for(var i = 0;i < mapArray.length;i++){ for(var j = 0;j < mapArray[i].length;j++){ if(mapArray[i][j] == 0){ context.drawImage(grass, j * tilesize, i * tilesize, tilesize, tilesize); } if(mapArray[i][j] == 1){ context.drawImage(stone, j * tilesize, i * tilesize, tilesize, tilesize); } } } |
Die Grafiken für grass und stone müsst ihr natürlich bei auch im Verzeichnis haben, sonst geht es nicht.
Schreibe einen Kommentar