Html5 game development-& quot; & quot; combined with map blocks to form a map & amp; Preliminary Exploration luf

I. preface this tutorial will explain how to use html5 to combine small map blocks into large maps and how to use the existing advanced html5 game development library lufylegend. js to develop games. First, let's get to know how to use html5 to implement animation. After all, "Dynamic and Static combination" means first moving and then static. After reading the content of the previous chapter, you may have a preliminary understanding of html5 animation implementation: 2. html5 uses small map blocks to create large maps. I have introduced this to you as early as the previous chapter. Many game maps are made with small map blocks. Since those games can be implemented through AS or other programming languages, our html5 is no inferior to them. Next is the image I want to prepare for you today: map.png images will be OK; if you have a picture, you can click the code. Map. several lines of code in js: var I; var j; window. onload = function () {gamemap ();} var mapimg = new Image (); var map = [[, 3, 2], [, 0], [, 0, 2], [, 0, 0, 0, 0,, 2], [, 2, 2], [, 3], [, 3,, 0], [, 0, 0, 0, 0, 0], [, 0,, 1], [, 1, 1],]; // create a two-dimensional array function gamemap () {var canvas = document. getElementById ("map"); var context = canvas. getContext ("2d"); mapimg. src = ". /image/map.png "; mapimg. onload = function () {context. fillRect (0, 0,416,416); // draw a rectangle with a length of 416 and a width of 416 for (I = 0; I <13; I ++) {for (j = 0; j <13; j ++) {drawTile (I * 32, j * 32, map [j]) ;}// call the map function cyclically until it is finished End} function drawTile (x, y, type) {var canvas = document. getElementById ("map"); var context = canvas. getContext ("2d"); context. drawImage (mapimg, type * 32, 0, 32, 32, x, y, 32, 32);} // very few lines of code in the map function html: <! DOCTYPE html>