JS Learning Map Generation

First, on the map image

Next, JS, we can think of the picture as a block of 32*32 pixels

vari;varJ;window.onload=function() {Gamemap ("Map.jpg", ten, Ten.);}varMapimg =NewImage ();varMap = [    [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18],    [18, 18, 18, 17, 17, 17, 17, 17, 17, 17, 17, 17, 55, 55, 18],    [18, 18, 17, 17, 17, 17, 18, 18, 17, 17, 17, 17, 55, 55, 18],    [18, 17, 17, 17, 18, 18, 18, 18, 18, 17, 17, 55, 55, 17, 18],    [18, 17, 17, 18, 22, 23, 23, 23, 24, 18, 17, 55, 55, 17, 18],    [18, 17, 17, 18, 25, 28, 26, 79, 27, 18, 55, 55, 17, 17, 18],    [18, 17, 17, 17, 17, 10, 11, 12, 18, 18, 55, 55, 17, 17, 18],    [18, 18, 17, 17, 10, 16, 16, 16, 11, 55, 55, 17, 17, 17, 18],    [18, 18, 17, 17, 77, 16, 16, 16, 16, 21, 21, 17, 17, 17, 18],    [18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18]];//Create a two-dimensional array that makes up the mapfunctionGamemap (x, y, num, url) {//Length, width, number of rows, picture path    varCanvas = document.getElementById ("Map"); varContext = Canvas.getcontext ("2d"); MAPIMG.SRC=URL; Mapimg.onload=function() {Context.fillrect (0, 0, x *, Y * 32); //draw a rectangle with a length of 480 and a width of 320         for(i = 0; i < x; i++) {             for(j = 0; J < y; J + +) {Drawtile (i* +, J * 32, map[j][i], num); }        }        //Loop calls the function that draws the map until the drawing is finished    }}functiondrawtile (x, y, type, num) {varCanvas = document.getElementById ("Map"); varContext = Canvas.getcontext ("2d"); Context.drawimage (mapimg, type% num *, parseint (type/num) *, X, Y, 32, 32);} 

Finally, the page calls

<!DOCTYPE HTML><HTML><Head>    <title>Map generation</title>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />      <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />    <Scripttype= "Text/javascript"src= "Map.js"></Script></Head><Body>    <CanvasID= "Map"width= "480px"Height= "320px"style= "border:1px solid gray;"></Canvas></Body></HTML>

：

JS Learning Map Generation