Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- </head>
- <body>
- <script>
- var RANDOM = {
- nb: function(min,max) {
- min = Math.ceil(min);
- max = Math.floor(max);
- return Math.floor(Math.random() * (max - min +1)) + min;
- },
- color: function(minR,maxR,minG,maxG,minB,maxB) {
- return "rgb("+(this.nb(minR,maxR))+","+(this.nb(minG,maxG))+","+(this.nb(minB,maxB))+")";
- }
- };
- var PIXEL_ART = {
- nb: 0,
- id: {},
- canvas: {
- create: function(x,y) {
- c = document.createElement("div");
- c.id = 'c_'+PIXEL_ART.nb;
- c.style.display = 'block';
- c.style.width = '10px';
- c.style.height = '10px';
- c.style.background = 'transparent';
- document.body.appendChild(c);
- PIXEL_ART.id['c_'+PIXEL_ART.nb]={x:x,y:y};
- PIXEL_ART.nb++;
- return 'c_'+(PIXEL_ART.nb-1);
- }
- },
- random: {
- bg: function(id_) {
- var id = document.getElementById(id_);
- var width = PIXEL_ART.id[id_].x;
- var height = PIXEL_ART.id[id_].y;
- var bg = "";
- for (var i=-height-10; i<height+10;i+=10) {
- for (var j=-width-10; j<width+10;j+=10) {
- bg+=j+"px "+i+"px "+RANDOM.color(0,255,0,255,0,255)+", ";
- }
- }
- bg=bg.substring(0,bg.length-2);
- id.style.boxShadow = bg;
- }
- },
- place: function(id_,pixel) {
- var id = document.getElementById(id_);
- var place="";
- for (var i=0; i<pixel.length; i++) {
- place+=pixel[i]+", ";
- }
- place=place.substring(0,place.length-2);
- id.style.boxShadow = place;
- }
- };
- PIXEL_ART.random.bg(PIXEL_ART.canvas.create(500,500));
- var mario = PIXEL_ART.canvas.create(50,50);
- document.getElementById(mario).style.position = "absolute";
- document.getElementById(mario).style.left = "650px";
- PIXEL_ART.place(mario,[
- //LIGNE 1
- "-10px 0px #F00",
- "-20px 0px #F00",
- "-30px 0px #F00",
- "-40px 0px #F00",
- "-50px 0px #F00",
- //LIGNE 2
- "20px 10px #F00",
- "10px 10px #F00",
- "0px 10px #F00",
- "-10px 10px #F00",
- "-20px 10px #F00",
- "-30px 10px #F00",
- "-40px 10px #F00",
- "-50px 10px #F00",
- "-60px 10px #F00",
- //LIGNE 3
- "0px 20px #F7EAC1",
- "-10px 20px #000",
- "-20px 20px #F7EAC1",
- "-30px 20px #F7EAC1",
- "-40px 20px #896C15",
- "-50px 20px #896C15",
- "-60px 20px #896C15",
- //LIGNE 4
- "20px 30px #F7EAC1",
- "10px 30px #F7EAC1",
- "0px 30px #F7EAC1",
- "-10px 30px #000",
- "-20px 30px #F7EAC1",
- "-30px 30px #F7EAC1",
- "-40px 30px #F7EAC1",
- "-50px 30px #896C15",
- "-60px 30px #F7EAC1",
- "-70px 30px #896C15",
- //LIGNE 5
- "30px 40px #F7EAC1",
- "20px 40px #F7EAC1",
- "10px 40px #F7EAC1",
- "0px 40px #000",
- "-10px 40px #F7EAC1",
- "-20px 40px #F7EAC1",
- "-30px 40px #F7EAC1",
- "-40px 40px #896C15",
- "-50px 40px #896C15",
- "-60px 40px #F7EAC1",
- "-70px 40px #896C15",
- //LIGNE 6
- "20px 50px #000",
- "10px 50px #000",
- "0px 50px #000",
- "-10px 50px #000",
- "-20px 50px #F7EAC1",
- "-30px 50px #F7EAC1",
- "-40px 50px #F7EAC1",
- "-50px 50px #F7EAC1",
- "-60px 50px #896C15",
- //LIGNE 7
- "0px 60px #F7EAC1",
- "-10px 60px #F7EAC1",
- "-20px 60px #F7EAC1",
- "-30px 60px #F7EAC1",
- "-40px 60px #F7EAC1",
- "-50px 60px #F7EAC1",
- //LIGNE 8
- "10px 70px #f00",
- "0px 70px #f00",
- "-10px 70px #00f",
- "-20px 70px #f00",
- "-30px 70px #f00",
- "-40px 70px #00f",
- "-50px 70px #f00",
- "-60px 70px #f00",
- //LIGNE 9
- "20px 80px #f00",
- "10px 80px #f00",
- "0px 80px #f00",
- "-10px 80px #00f",
- "-20px 80px #f00",
- "-30px 80px #f00",
- "-40px 80px #00f",
- "-50px 80px #f00",
- "-60px 80px #f00",
- "-70px 80px #f00",
- //LIGNE 10
- "30px 90px #f00",
- "20px 90px #f00",
- "10px 90px #f00",
- "0px 90px #f00",
- "-10px 90px #00f",
- "-20px 90px #00f",
- "-30px 90px #00f",
- "-40px 90px #00f",
- "-50px 90px #f00",
- "-60px 90px #f00",
- "-70px 90px #f00",
- "-80px 90px #f00",
- //LIGNE 11
- "30px 100px #F7EAC1",
- "20px 100px #F7EAC1",
- "10px 100px #f00",
- "0px 100px #00f",
- "-10px 100px #ff0",
- "-20px 100px #00f",
- "-30px 100px #00f",
- "-40px 100px #ff0",
- "-50px 100px #00f",
- "-60px 100px #f00",
- "-70px 100px #F7EAC1",
- "-80px 100px #F7EAC1",
- //LIGNE 12
- "30px 110px #F7EAC1",
- "20px 110px #F7EAC1",
- "10px 110px #F7EAC1",
- "0px 110px #00f",
- "-10px 110px #00f",
- "-20px 110px #00f",
- "-30px 110px #00f",
- "-40px 110px #00f",
- "-50px 110px #00f",
- "-60px 110px #F7EAC1",
- "-70px 110px #F7EAC1",
- "-80px 110px #F7EAC1",
- //LIGNE 13
- "30px 120px #F7EAC1",
- "20px 120px #F7EAC1",
- "10px 120px #00f",
- "0px 120px #00f",
- "-10px 120px #00f",
- "-20px 120px #00f",
- "-30px 120px #00f",
- "-40px 120px #00f",
- "-50px 120px #00f",
- "-60px 120px #00f",
- "-70px 120px #F7EAC1",
- "-80px 120px #F7EAC1",
- //LIGNE 14
- "10px 130px #00f",
- "0px 130px #00f",
- "-10px 130px #00f",
- "-40px 130px #00f",
- "-50px 130px #00f",
- "-60px 130px #00f",
- //LIGNE 15
- "20px 140px #654E08",
- "10px 140px #654E08",
- "0px 140px #654E08",
- "-50px 140px #654E08",
- "-60px 140px #654E08",
- "-70px 140px #654E08",
- //LIGNE 16
- "30px 150px #654E08",
- "20px 150px #654E08",
- "10px 150px #654E08",
- "0px 150px #654E08",
- "-50px 150px #654E08",
- "-60px 150px #654E08",
- "-70px 150px #654E08",
- "-80px 150px #654E08"
- ]);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement