Advertisement
Guest User

Untitled

a guest
Feb 17th, 2017
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.93 KB | None | 0 0
  1. <html>
  2. <head>
  3.  
  4. </head>
  5. <body>
  6. <script>
  7. var RANDOM = {
  8.   nb: function(min,max) {
  9.     min = Math.ceil(min);
  10.     max = Math.floor(max);
  11.     return Math.floor(Math.random() * (max - min +1)) + min;
  12.   },
  13.   color: function(minR,maxR,minG,maxG,minB,maxB) {
  14.     return "rgb("+(this.nb(minR,maxR))+","+(this.nb(minG,maxG))+","+(this.nb(minB,maxB))+")";
  15.   }
  16. };
  17. var PIXEL_ART = {
  18.   nb: 0,
  19.   id: {},
  20.   canvas: {
  21.     create: function(x,y) {
  22.       c = document.createElement("div");
  23.       c.id = 'c_'+PIXEL_ART.nb;
  24.       c.style.display = 'block';
  25.       c.style.width = '10px';
  26.       c.style.height = '10px';
  27.       c.style.background = 'transparent';
  28.       document.body.appendChild(c);
  29.       PIXEL_ART.id['c_'+PIXEL_ART.nb]={x:x,y:y};
  30.       PIXEL_ART.nb++;
  31.       return 'c_'+(PIXEL_ART.nb-1);
  32.     }
  33.   },
  34.   random: {
  35.     bg: function(id_) {
  36.       var id = document.getElementById(id_);
  37.       var width = PIXEL_ART.id[id_].x;
  38.       var height = PIXEL_ART.id[id_].y;
  39.      
  40.       var bg = "";
  41.       for (var i=-height-10; i<height+10;i+=10) {
  42.         for (var j=-width-10; j<width+10;j+=10) {
  43.           bg+=j+"px "+i+"px "+RANDOM.color(0,255,0,255,0,255)+", ";
  44.         }
  45.       }
  46.       bg=bg.substring(0,bg.length-2);
  47.       id.style.boxShadow = bg;
  48.     }
  49.  },
  50.  place: function(id_,pixel) {
  51.    var id = document.getElementById(id_);
  52.    var place="";
  53.    for (var i=0; i<pixel.length; i++) {
  54.       place+=pixel[i]+", ";
  55.     }
  56.     place=place.substring(0,place.length-2);
  57.     id.style.boxShadow = place;
  58.  }
  59. };
  60.  
  61.  
  62.  
  63. PIXEL_ART.random.bg(PIXEL_ART.canvas.create(500,500));
  64.  
  65.  
  66.  
  67.  
  68. var mario = PIXEL_ART.canvas.create(50,50);
  69. document.getElementById(mario).style.position = "absolute";
  70. document.getElementById(mario).style.left = "650px";
  71.  
  72. PIXEL_ART.place(mario,[
  73. //LIGNE 1
  74. "-10px 0px #F00",
  75. "-20px 0px #F00",
  76. "-30px 0px #F00",
  77. "-40px 0px #F00",
  78. "-50px 0px #F00",
  79.  
  80. //LIGNE 2
  81. "20px 10px #F00",
  82. "10px 10px #F00",
  83. "0px 10px #F00",
  84. "-10px 10px #F00",
  85. "-20px 10px #F00",
  86. "-30px 10px #F00",
  87. "-40px 10px #F00",
  88. "-50px 10px #F00",
  89. "-60px 10px #F00",
  90.  
  91.  
  92. //LIGNE 3
  93. "0px 20px #F7EAC1",
  94. "-10px 20px #000",
  95. "-20px 20px #F7EAC1",
  96. "-30px 20px #F7EAC1",
  97. "-40px 20px #896C15",
  98. "-50px 20px #896C15",
  99. "-60px 20px #896C15",
  100.  
  101.  
  102. //LIGNE 4
  103. "20px 30px #F7EAC1",
  104. "10px 30px #F7EAC1",
  105. "0px 30px #F7EAC1",
  106. "-10px 30px #000",
  107. "-20px 30px #F7EAC1",
  108. "-30px 30px #F7EAC1",
  109. "-40px 30px #F7EAC1",
  110. "-50px 30px #896C15",
  111. "-60px 30px #F7EAC1",
  112. "-70px 30px #896C15",
  113.  
  114.  
  115. //LIGNE 5
  116. "30px 40px #F7EAC1",
  117. "20px 40px #F7EAC1",
  118. "10px 40px #F7EAC1",
  119. "0px 40px #000",
  120. "-10px 40px #F7EAC1",
  121. "-20px 40px #F7EAC1",
  122. "-30px 40px #F7EAC1",
  123. "-40px 40px #896C15",
  124. "-50px 40px #896C15",
  125. "-60px 40px #F7EAC1",
  126. "-70px 40px #896C15",
  127.  
  128.  
  129. //LIGNE 6
  130. "20px 50px #000",
  131. "10px 50px #000",
  132. "0px 50px #000",
  133. "-10px 50px #000",
  134. "-20px 50px #F7EAC1",
  135. "-30px 50px #F7EAC1",
  136. "-40px 50px #F7EAC1",
  137. "-50px 50px #F7EAC1",
  138. "-60px 50px #896C15",
  139.  
  140. //LIGNE 7
  141. "0px 60px #F7EAC1",
  142. "-10px 60px #F7EAC1",
  143. "-20px 60px #F7EAC1",
  144. "-30px 60px #F7EAC1",
  145. "-40px 60px #F7EAC1",
  146. "-50px 60px #F7EAC1",
  147.  
  148.  
  149. //LIGNE 8
  150. "10px 70px #f00",
  151. "0px 70px #f00",
  152. "-10px 70px #00f",
  153. "-20px 70px #f00",
  154. "-30px 70px #f00",
  155. "-40px 70px #00f",
  156. "-50px 70px #f00",
  157. "-60px 70px #f00",
  158.  
  159.  
  160. //LIGNE 9
  161. "20px 80px #f00",
  162. "10px 80px #f00",
  163. "0px 80px #f00",
  164. "-10px 80px #00f",
  165. "-20px 80px #f00",
  166. "-30px 80px #f00",
  167. "-40px 80px #00f",
  168. "-50px 80px #f00",
  169. "-60px 80px #f00",
  170. "-70px 80px #f00",
  171.  
  172.  
  173. //LIGNE 10
  174. "30px 90px #f00",
  175. "20px 90px #f00",
  176. "10px 90px #f00",
  177. "0px 90px #f00",
  178. "-10px 90px #00f",
  179. "-20px 90px #00f",
  180. "-30px 90px #00f",
  181. "-40px 90px #00f",
  182. "-50px 90px #f00",
  183. "-60px 90px #f00",
  184. "-70px 90px #f00",
  185. "-80px 90px #f00",
  186.  
  187.  
  188. //LIGNE 11
  189. "30px 100px #F7EAC1",
  190. "20px 100px #F7EAC1",
  191. "10px 100px #f00",
  192. "0px 100px #00f",
  193. "-10px 100px #ff0",
  194. "-20px 100px #00f",
  195. "-30px 100px #00f",
  196. "-40px 100px #ff0",
  197. "-50px 100px #00f",
  198. "-60px 100px #f00",
  199. "-70px 100px #F7EAC1",
  200. "-80px 100px #F7EAC1",
  201.  
  202.  
  203. //LIGNE 12
  204. "30px 110px #F7EAC1",
  205. "20px 110px #F7EAC1",
  206. "10px 110px #F7EAC1",
  207. "0px 110px #00f",
  208. "-10px 110px #00f",
  209. "-20px 110px #00f",
  210. "-30px 110px #00f",
  211. "-40px 110px #00f",
  212. "-50px 110px #00f",
  213. "-60px 110px #F7EAC1",
  214. "-70px 110px #F7EAC1",
  215. "-80px 110px #F7EAC1",
  216.  
  217.  
  218. //LIGNE 13
  219. "30px 120px #F7EAC1",
  220. "20px 120px #F7EAC1",
  221. "10px 120px #00f",
  222. "0px 120px #00f",
  223. "-10px 120px #00f",
  224. "-20px 120px #00f",
  225. "-30px 120px #00f",
  226. "-40px 120px #00f",
  227. "-50px 120px #00f",
  228. "-60px 120px #00f",
  229. "-70px 120px #F7EAC1",
  230. "-80px 120px #F7EAC1",
  231.  
  232.  
  233. //LIGNE 14
  234. "10px 130px #00f",
  235. "0px 130px #00f",
  236. "-10px 130px #00f",
  237. "-40px 130px #00f",
  238. "-50px 130px #00f",
  239. "-60px 130px #00f",
  240.  
  241.  
  242. //LIGNE 15
  243. "20px 140px #654E08",
  244. "10px 140px #654E08",
  245. "0px 140px #654E08",
  246. "-50px 140px #654E08",
  247. "-60px 140px #654E08",
  248. "-70px 140px #654E08",
  249.  
  250.  
  251. //LIGNE 16
  252. "30px 150px #654E08",
  253. "20px 150px #654E08",
  254. "10px 150px #654E08",
  255. "0px 150px #654E08",
  256. "-50px 150px #654E08",
  257. "-60px 150px #654E08",
  258. "-70px 150px #654E08",
  259. "-80px 150px #654E08"
  260. ]);
  261.  
  262. </script>
  263. </body>
  264. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement