├── .gitattributes
├── .gitignore
├── README.md
├── editor.html
├── editor.lite.html
├── editor.lite.zip
├── editor.old.html
├── index.html
├── l.js
├── t.js
└── t.png


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | js13k-level-editor
  2 | ==
  3 | 
  4 | This projects contains a level editor specially conceived for the js13kgames.com competition.
  5 | 
  6 | It can be used to produce built-in levels for your js13k game.
  7 | 
  8 | The lite version (1.1kb gzipped) can also be included directly in your entry as a custom level editor for your game.
  9 | 
 10 | Feel free to fork it and adapt it to your needs.
 11 | 
 12 | The levels made with this editor are shareable as text or with an URL.
 13 | 
 14 | There's also a [tiny level reader script](http://xem.github.io/js13k-level-editor/l.js) that you can use to load custom levels from an URL.
 15 | 
 16 | You can join the discussion on Slack: https://js13kgames.slack.com/messages/level-editor-share/
 17 | 
 18 | ---
 19 | 
 20 | 
 21 | Editor
 22 | --
 23 | 
 24 | The editor lets you pick tiles from a tileset and paste them on a blank map.
 25 | 
 26 | The tileset (on top) is a canvas called "a", with a context2D called "c".
 27 | 
 28 | It loads automatically the image {url}/t.png and the script {url}/s.js at the root of the project specified in the "URL" field.
 29 | 
 30 | The JS script is executed, then the png file is drawn on the canvas.
 31 | 
 32 | Any of these two files can be omitted (your spritesheet can be png only or js only).
 33 | 
 34 | Of course, these files can also be used in your game.
 35 | 
 36 | The editor lets you choose a tile size in px (like 16x16 or 32x32) and a level size, in tiles.
 37 | 
 38 | The editor creates a hash that can be used to the URL by your game (to play the level), or the level editor (to edit it).
 39 | 
 40 | It also outputs the map as a text block, which is a much more efficient way to store built-in levels in your zipped entry. (scroll the page to see it)
 41 | 
 42 | Demo (blank level):
 43 | 
 44 | http://xem.github.io/js13k-level-editor/editor.html
 45 | 
 46 | Demo (existing, editable level):
 47 | 
 48 | https://xem.github.io/js13k-level-editor/editor.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27
 49 | 
 50 | Tileset files used by this demo:
 51 | 
 52 | - http://xem.github.io/js13k-level-editor/t.png
 53 | - http://xem.github.io/js13k-level-editor/t.js
 54 | 
 55 | ---
 56 | 
 57 | Editor LITE
 58 | --
 59 | 
 60 | The lite editor can be included in your entry.
 61 | 
 62 | The difference with the normal editor are:
 63 | 
 64 | - No URL field (the tileset is necessarily in the current folder)
 65 | - No text block output
 66 | - No tile size field (the tile size is hardcoded at the end of editor.lite.html (d={t:32}). You can edit it manually.
 67 | - The source code is minified
 68 | 
 69 | Demo (blank level):
 70 | 
 71 | http://xem.github.io/js13k-level-editor/editor.lite.html
 72 | 
 73 | Demo (existing, editable level):
 74 | 
 75 | https://xem.github.io/js13k-level-editor/editor.lite.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27
 76 | 
 77 | ---
 78 | 
 79 | Level reader
 80 | --
 81 | 
 82 | It's a JS script containing a load_level() function, that can be used by the editor and by your game. (l.js)
 83 | 
 84 | It reads the hash passed in argument and stores all the important information in the object d, which is returned:
 85 | 
 86 | ````
 87 | d = {
 88 |   t: // tile size in px
 89 |   w: // level width in tiles,
 90 |   h: // level height in tiles,
 91 |   z: // use tile zero by default
 92 |   m: // tiles used on the map:
 93 |   [
 94 |     [tile_index, x coordinate, y coordinate],
 95 |     [tile_index, x coordinate, y coordinate],
 96 |     ... // one entry for each tile of the map
 97 |   ]
 98 | }
 99 | ````
100 | 
101 | Demo:
102 | 
103 | http://xem.github.io/js13k-level-editor/index.html#@H/1%20.%22!.%22%22.%22#.%22$.%22%25.%22&.%22%27.%22..%22/.%220.%221.%222.%22A.%22B.%22C.%22D.%22E.%22F.%22G.%22G-%22F-%22E-%22D-%22C-%22B-%22@.%22?.%22%3E.%22=.%22%3C.%22;.%22:.%229.%228.%227.%226.%225.%224.%223.%223-%222-%221-%220-%22/-%22.-%224-%225-%226-%227-%228-%229-%22:-%22;-%22%3C-%22=-%22%3E-%22?-%22@-%22A-%22%27-%22&-%22%25-%22$-%22#-%22%22-%22!-%22%20-%22(-%22(.%22).%22)-%220**1*+0+:0,:1+;1,;$)$%27)$B&,B%27%3CB(%3CB)%3CB*%3CB+%3CB,%3CE,%3ED+0D,0F+0F,0E+.D*-F*-E*/E)0E(-!,1%22,2#,35,76+77*78+89*9:+9;,98))8*(7+(6,(7,(8,(9,(9+(:,(=,!%3E,!%3E+!?,!?+!?*!@,!@+!@*!@)!3$44$55$56$57$63#%254#&5#&6#&7#%27
104 | 
105 | ---
106 | 
107 | 
108 | Structure of a map stored to URL / text
109 | --
110 | 
111 | Maps saved as hash have the following form:
112 | 
113 |     http://(game_url)/index.html#twhzTTT...
114 | 
115 | with:
116 | 
117 | - t: String.fromCodePoint(d.t) // 1 char
118 | - w: String.fromCodePoint(d.w) // 1 char
119 | - h: String.fromCodePoint(d.h) // 1 char
120 | - z: +d.z // 1 char (0 or 1)
121 | 
122 | for each tile i
123 | - T: String.fromCodePoint(i[0])+String.fromCodePoint(i[1])+String.fromCodePoint(i[2]) // 3 chars
124 | 
125 | <br>
126 | 
127 | Maps saved as text have the following form:
128 | 
129 | ````
130 |                                         
131 |                                         
132 |                                         
133 |                    %&&&'                
134 |                    45556                
135 |                                         
136 |                                   ,     
137 |                                   <     
138 |                                   <  -  
139 |     $  $                )       ! <  0  
140 |                 *+     7(9     !! < -/- 
141 |                 :;    7(8(9   !!! < 0.0 
142 |  123            :;   7(((((9 !!!! < 0>0 
143 | """"""""""    """"""""""""""""""""""""""
144 | """"""""""    """"""""""""""""""""""""""
145 | ````
146 | 
147 | Each char represents the index of the tile used, starting from U+0020 (to have only printable characters).
148 | 
149 | The lines breaks are made with "\n" chars.
150 | 
151 | To read a tile at [x:y] in this kind of map, just use: ````map_ascii.split("\n")[y].charCodeAt(x)-32````
152 | 
153 | <br>
154 | 
155 | ---
156 | 
157 | License
158 | --
159 | 
160 | Public domain
161 | 


--------------------------------------------------------------------------------
/editor.html:
--------------------------------------------------------------------------------
  1 | <a href=//github.com/xem/js13k-level-editor><img style="position:absolute;top:-18px;right:-20px;border:0;z-index:1" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
  2 | <p>
  3 |   Game URL <input id=u value="." size=33 oninput=init()>
  4 |   - Tile size <input id=t value=32 size=3 oninput=d.t=+value;init()>
  5 |   - Map size <input id=w value=50 size=3 oninput=d.w=+value;init()> x <input id=h value=30 size=3 oninput=d.h=+value;init()>
  6 |   - <input type=checkbox id=z onchange=d.z=checked;init() checked> Use 1st tile by default
  7 |   - <input type=checkbox id=E> Erase
  8 |   - <a href=editor.html>Reset</a>
  9 | <p>
 10 |   Map <input id=o style=width:80vw oninput=init()>
 11 |   - <a href=# id=l>share</a>
 12 |   - <a href=# id=k>play</a>
 13 |   
 14 | <p>
 15 |   <div style="border:1px solid;width:98vw;overflow:auto;position:relative">
 16 |     <canvas id=a width=2048 height=32></canvas>
 17 |     <v style="border:3px solid red;position:absolute;top:0;left:0"id=p>
 18 |   </div>
 19 | <p>
 20 |   <div id=D style="border:1px solid;width:98vw;height:65vh;overflow:auto;position:relative">
 21 |     <canvas id=A oncontextmenu=return!1 onmouseup=m=0 onmousedown=m=event.which;A.onmousemove(event)>
 22 |   </div>
 23 | <br>
 24 | Text output: <a id=download download=map.txt href="">Download</a>
 25 | <br>
 26 | <p>
 27 |   <pre id=map_array style="border:1px solid;display:inline-block">
 28 | 
 29 | <script src=l.js></script>
 30 | <script>
 31 | 
 32 | // Init the two canvases
 33 | // =====================
 34 | 
 35 | // Tileset
 36 | c=a.getContext`2d`;
 37 | 
 38 | // Map
 39 | C=A.getContext`2d`;
 40 | 
 41 | // Init the data
 42 | // =============
 43 | 
 44 | d={};
 45 | 
 46 | // Reset map
 47 | // =========
 48 | 
 49 | o.value = "";
 50 | 
 51 | 
 52 | // Load/update settings
 53 | // ====================
 54 | 
 55 | onload=()=>{
 56 |   init(1);
 57 | }
 58 | 
 59 | init=(e)=>{
 60 |   
 61 |   // Read map hash
 62 |   if(!o.value){
 63 |     o.value=(decodeURI(location.hash)).slice(1);
 64 |   }
 65 |   d=load_level(o.value);
 66 |   
 67 |   // tile size
 68 |   if(e && o.value) t.value = d.t;
 69 |   else d.t = +t.value;
 70 |   
 71 |   // Map size
 72 |   if(e && o.value) w.value = d.w;
 73 |   else d.w = +w.value;
 74 |   
 75 |   if(e && o.value) h.value = d.h;
 76 |   else d.h = +h.value;
 77 |   
 78 |   // Tile zero by default
 79 |   if(e && o.value) z.checked = !!d.z;
 80 |   else d.z = +z.checked;
 81 |   
 82 |   // map as array of tile coordinates
 83 |   d.m = d.m || [];
 84 |   
 85 |   // map as text
 86 |   d.M = d.M || "";
 87 |   
 88 |   // Write map
 89 |   write_map();
 90 |   
 91 |   // Reset tileset canvas height and content
 92 |   a.height=d.t;
 93 |   
 94 |   // Resize map container
 95 |   D.style.height="calc(99vh - "+ (d.t + 150)+"px)"
 96 |   
 97 |   // Load t.js containing the JS part of the tileset (optional)
 98 |   s=document.createElement("script");
 99 |   s.src=u.value+"/t.js";
100 |   s.onload=s.onerror=()=>{
101 |   
102 |     // t.js is executed if it exists
103 |     
104 |     // Draw t.png containing the image part of the tileset (optional)  
105 |     I=new Image();
106 |     I.src=u.value+"/t.png";
107 |     I.onload=I.onerror=()=>{
108 |       c.drawImage(I,0,0);
109 |       
110 |       // Resize the tile picker
111 |       p.style.width=p.style.height=d.t-5;
112 |       
113 |       // Reset map canvas size and content
114 |       A.width=d.t*d.w;
115 |       A.height=d.t*d.h;
116 |       
117 |       // Fill the map with tile 0 (if checked)
118 |       if(z.checked){
119 |         for(i=0;i<d.w;i++){
120 |           for(j=0;j<d.h;j++){
121 |             C.drawImage(a,0,0,d.t,d.t,i*d.t,j*d.t,d.t,d.t);
122 |           }
123 |         }
124 |       }
125 | 
126 |       // Draw existing map
127 |       for(i in d.m){
128 |         C.drawImage(a,d.m[i][2]*d.t,0,d.t,d.t,d.m[i][0]*d.t,d.m[i][1]*d.t,d.t,d.t);
129 |       }
130 |       
131 |       // Draw grid
132 |       c.fillStyle=C.fillStyle="#888";
133 |       for(i=0;i<5e5;i+=d.t){
134 |         c.fillRect(i,0,1,5e5);
135 |         C.fillRect(i,0,1,5e5);
136 |       }
137 |       for(i=0;i<5e5;i+=d.t){
138 |         c.fillRect(0,i,5e5,1);
139 |         C.fillRect(0,i,5e5,1);
140 |       }
141 |     }
142 |   };
143 |   
144 |   // Finish loading t.js
145 |   document.body.appendChild(s);
146 | }
147 | 
148 | onhashchange=()=>{
149 |   o.value=(decodeURI(location.hash)).slice(1);
150 |   init();
151 | }
152 | 
153 | // Select a tile
154 | // =============
155 | 
156 | T=0;
157 | a.onclick=e=>{
158 | 
159 |   // T = tile index
160 |   T=~~((e.pageX-a.getBoundingClientRect().left)/d.t);
161 |   
162 |   // Move red tile picker
163 |   p.style.left=T*d.t+"px";
164 | }
165 | 
166 | // Draw / erase
167 | // ============
168 | m=0;
169 | A.onmousemove=e=>{
170 |   
171 |   // Get mouse coordinates
172 |   R=A.getBoundingClientRect();
173 |   X=~~((e.pageX-R.left)/d.t);
174 |   Y=~~((e.pageY-R.top-document.body.scrollTop-document.documentElement.scrollTop)/d.t);
175 |   
176 |   // Remove the tile at these coordinates id left/right click is pressed
177 |   if(m){
178 |     if(d.z){
179 |       C.drawImage(a,0,0,d.t,d.t,X*d.t,Y*d.t,d.t,d.t);
180 |     }
181 |     else{
182 |       C.clearRect(X*d.t+1,Y*d.t+1,d.t-1,d.t-1);
183 |     }
184 |     for(i in d.m){
185 |       if(d.m[i][0]==X && d.m[i][1]==Y){
186 |         delete d.m[i];
187 |       }
188 |     }
189 |   }
190 |   
191 |   // Draw if left click is pressed (unless the eraser is checked)
192 |   if(m==1 && !E.checked && !(T==0 && d.z)){
193 |     C.drawImage(a,T*d.t,0,d.t,d.t,X*d.t,Y*d.t,d.t,d.t);
194 |     d.m.push([X,Y,T]);
195 |   }
196 |   
197 |   // Rewrite map if left/right click is pressed
198 |   if(m){
199 |     write_map();
200 |   }
201 | }
202 | 
203 | write_map=()=>{
204 |   o.value=String.fromCodePoint(d.t+32)+String.fromCodePoint(d.w+32)+String.fromCodePoint(d.h+32)+d.z;
205 |   for(i in d.m){
206 |     o.value+=String.fromCodePoint(d.m[i][0]+32)+String.fromCodePoint(d.m[i][1]+32)+String.fromCodePoint(d.m[i][2]+32);
207 |   }
208 |   l.href="#"+encodeURI(o.value).replace(/\(/g,"%28").replace(/\)/g,"%29");
209 |   k.href=u.value+"/#"+encodeURI(o.value).replace(/\(/g,"%28").replace(/\)/g,"%29");
210 |   d.M=[];
211 |   for(j=0;j<d.h;j++){
212 |     d.M[j]=[];
213 |     for(i=0;i<d.w;i++){
214 |       d.M[j][i]=" ";
215 |     }
216 |   }
217 | 
218 |   for(i in d.m){
219 |     if(d.M[d.m[i][1]]){
220 |       d.M[d.m[i][1]][d.m[i][0]]=String.fromCodePoint(d.m[i][2]+32);
221 |     }
222 |   }
223 |   map_array.innerHTML=d.M.map(u=>u.join("")).join("\n");
224 |   download.href="data:text;base64,"+btoa(d.M.map(u=>u.join("")).join("\n"));
225 | }
226 | </script>


--------------------------------------------------------------------------------
/editor.lite.html:
--------------------------------------------------------------------------------
1 | <p>Map <input id=w value=50 size=3 oninput=d.w=+value;init()>x<input id=h value=30 size=3 oninput=d.h=+value;init()> - <input id=o style=width:30vw> - <input type=checkbox id=E> Erase - <input type=checkbox id=z onchange=d.z=checked;init() checked> 1st tile - <a href=editor.lite.html>Reset</a> - <a href=# id=l>share</a> - <a href=# id=k>play</a><p><div style="border:1px solid;width:98vw;overflow:auto;position:relative"><canvas id=a width=2048 height=32></canvas><v style="border:3px solid red;position:absolute;top:0;left:0"id=p></div><p><div id=D style="border:1px solid;width:98vw;height:70vh;overflow:auto;position:relative"><canvas id=A oncontextmenu=return!1 onmouseup=m=0 onmousedown=m=event.which;A.onmousemove(event)></div><script src=l.js></script><script>c=a.getContext`2d`;C=A.getContext`2d`;onload=b=>init(1);init=b=>{o.value||(o.value=decodeURI(location.hash).slice(1));load_level(o.value);b&&o.value?w.value=d.w:d.w=+w.value;b&&o.value?h.value=d.h:d.h=+h.value;b&&o.value?z.checked=!!d.z:d.z=+z.checked;d.m=d.m||[];d.M=d.M||"";write_map();a.height=d.t;s=document.createElement("script");s.src="t.js";s.onload=s.onerror=b=>{I=new Image;I.src="t.png";I.onload=I.onerror=b=>{c.drawImage(I,0,0);p.style.width=p.style.height=d.t-5;A.width=d.t*d.w;A.height=d.t*d.h;if(d.z)for(i=0;i<d.w;i++)for(j=0;j<d.h;j++)C.drawImage(a,0,0,d.t,d.t,i*d.t,j*d.t,d.t,d.t);for(i in d.m)C.drawImage(a,d.m[i][2]*d.t,0,d.t,d.t,d.m[i][0]*d.t,d.m[i][1]*d.t,d.t,d.t);c.fillStyle=C.fillStyle="#888";for(i=0;5E5>i;i+=d.t)c.fillRect(i,0,1,5E5),C.fillRect(i,0,1,5E5);for(i=0;5E5>i;i+=d.t)c.fillRect(0,i,5E5,1),C.fillRect(0,i,5E5,1)}};document.body.appendChild(s)};a.onclick=b=>{T=~~((b.pageX-a.getBoundingClientRect().left)/d.t);p.style.left=T*d.t+"px"};A.onmousemove=b=>{R=A.getBoundingClientRect();X=~~((b.pageX-R.left)/d.t);Y=~~((b.pageY-R.top)/d.t);if(m)for(i in d.z?C.drawImage(a,0,0,d.t,d.t,X*d.t,Y*d.t,d.t,d.t):C.clearRect(X*d.t+1,Y*d.t+1,d.t-1,d.t-1),d.m)d.m[i][0]==X&&d.m[i][1]==Y&&delete d.m[i];1!=m||E.checked||0==T&&d.z||(C.drawImage(a,T*d.t,0,d.t,d.t,X*d.t,Y*d.t,d.t,d.t),d.m.push([X,Y,T]));m&&write_map()};write_map=b=>{o.value=String.fromCodePoint(d.t+32)+String.fromCodePoint(d.w+32)+String.fromCodePoint(d.h+32)+d.z;for(i in d.m)o.value+=String.fromCodePoint(d.m[i][0]+32)+String.fromCodePoint(d.m[i][1]+32)+String.fromCodePoint(d.m[i][2]+32);l.href="#"+encodeURI(o.value);k.href="index.html#"+encodeURI(o.value)};T=m=0;d={t:32}</script>


--------------------------------------------------------------------------------
/editor.lite.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xem/js13k-level-editor/4a907bf06cd3d8bf154af470fd9660dc3c1a4869/editor.lite.zip


--------------------------------------------------------------------------------
/editor.old.html:
--------------------------------------------------------------------------------
 1 | <p><input style=width:85vw id=o> <a href=# id=l>go</a> <a href=editor.html>reset</a>
 2 | <div style="width:146px;height:calc(99vh - 60px);overflow:auto;float:left;position:relative;border:1px solid"><canvas id=a width=128 height=1024></canvas><v style="border:2px solid red;position:absolute;top:0;left:0"id=p></div>
 3 | <div style="width:calc(99vw - 180px);height:calc(99vh - 60px);overflow:auto;float:left;position:relative;border:1px solid"><canvas id=A oncontextmenu=return!1 onmouseup=m=0 onmousedown=m=event.which;D(event)></div>
 4 | <script src=r.js></script>
 5 | <script>
 6 | c=a.getContext`2d`;C=A.getContext`2d`
 7 | load_level(o.value=(decodeURI(location.hash)).slice(1));if(!d.w)d={w:+prompt("tile size in px (8/16/32/64/128)", 32),W:+prompt("map width", 100),H:+prompt("map height", 100),T:[]}
 8 | A.width=d.W*d.w;A.height=d.w*d.w
 9 | p.style.width=d.w-2;p.style.height=d.w-2
10 | c.fillStyle=C.fillStyle="#ddd";for(i=0;i<1e6;i+=d.w)c.fillRect(i,0,1,1e6),C.fillRect(i,0,1,1e6);for(i=0;i<1e6;i+=d.w)c.fillRect(0,i,1e6,1),C.fillRect(0,i,1e6,1)
11 | m=t=x=y=0;a.onclick=e=>{r=a.getBoundingClientRect();x=(~~((e.pageX-r.left)/d.w))*d.w;y=(~~((e.pageY-r.top)/d.w))*d.w;p.style.left=x+"px";p.style.top=y+"px";t=x/d.w+(128/d.w)*(y/d.w)}
12 | D=A.onmousemove=e=>{
13 | R=A.getBoundingClientRect();X=(~~((e.pageX-R.left)/d.w))*d.w;Y=(~~((e.pageY-R.top)/d.w))*d.w;
14 | if(m){C.fillStyle="#fff";C.fillRect(X+1,Y+1,d.w-1,d.w-1);for(i in d.T)d.T[i][0]==X/d.w&&d.T[i][1]==Y/d.w&&delete d.T[i]}
15 | if(m==1){C.drawImage(a,x+1,y+1,d.w-1,d.w-1,X+1,Y+1,d.w-1,d.w-1);E=0;for(i in d.T)d.T[i][0]==X/d.w&&d.T[i][1]==Y/d.w&&(d.T[i][2]=t,E=1);E||d.T.push([X/d.w,Y/d.w,t])}
16 | if(m){o.value=String.fromCodePoint(d.w+32)+String.fromCodePoint(d.w+32)+String.fromCodePoint(d.W+32)+String.fromCodePoint(d.w+32);for(i in d.T)o.value+=String.fromCodePoint(d.T[i][0]+32)+String.fromCodePoint(d.T[i][1]+32)+String.fromCodePoint(d.T[i][2]+32);l.href="#"+encodeURI(o.value)}
17 | }
18 | onload=z=>{for(i in d.T)C.drawImage(a,(d.T[i][2]*d.w)%128+1,~~(d.T[i][2]/(128/d.w))*d.w+1,d.w-1,d.w-1,d.T[i][0]*d.w+1,d.T[i][1]*d.w+1,d.w-1,d.w-1)}
19 | </script>
20 | <script src=s.js></script>
21 | <img src=s.png hidden onload=c.drawImage(this,0,0)>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | 
2 | <script src=l.js></script>
3 | <script>
4 | onload=function(){
5 |   d=load_level(decodeURI(location.hash.slice(1)));
6 |   document.body.innerHTML="<tt>d="+JSON.stringify(d);
7 | }
8 | </script>


--------------------------------------------------------------------------------
/l.js:
--------------------------------------------------------------------------------
1 | load_level=b=>{d={};d.t=b.codePointAt(0)-32;d.w=b.codePointAt(1)-32;d.h=b.codePointAt(2)-32;d.z=+b[3];d.m=[];d.M=[];for(i=4;i<b.length;i+=3)d.m.push([b.codePointAt(i)-32,b.codePointAt(i+1)-32,b.codePointAt(i+2)-32]);return d}


--------------------------------------------------------------------------------
/t.js:
--------------------------------------------------------------------------------
1 | c.fillStyle="#5C94FC";
2 | c.fillRect(0,0,1024,32);
3 | c.fillStyle="#00A800";
4 | c.fillRect(256,0,32,32);
5 | c.fillStyle="#000";
6 | c.fillRect(944,0,64,32);


--------------------------------------------------------------------------------
/t.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xem/js13k-level-editor/4a907bf06cd3d8bf154af470fd9660dc3c1a4869/t.png


--------------------------------------------------------------------------------