LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Pixel Art Maker!
    
    


    

Pixel Art Maker

Choose Grid Size

Grid Height: Grid Width:

Pick A Color

Design Canvas

CSS
body {
    text-align: center;
	  background-image: url("http://i482.photobucket.com/albums/rr188/evanescenta/2.jpg");
	/*color: #ffffff;*/
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

	background-image: url("http://i482.photobucket.com/albums/rr188/evanescenta/Black-And-Gray-Surface-Texture-Pixels-Points-Wave-WallpapersByte-com-1366x768.jpg");
JS
// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()

function makeGrid() {
  // Your code goes here!

  // Read number of rows and columns from user input
  var row = $("#input_height").val();
  var column = $("#input_width").val();

  // Get table element for pixel art
  var table = $("#pixel_canvas");

  // Mouse button down?
  var isDown = false;

  // Delete existing table from webpage
  table.children().remove();

  // Draw new table
  for (var i = 0; i < row; i++) {
    table.append("");                    // add new line to table
    for (var j = 0; j < column; j++) {
      table
        .children()
        .last()
        .append("")
        .attr("bgcolor", "#ffffff");              // add new cell on line i, override CSS background colour
    }
  }

  // Listen for mouse button pressed
  table.on("mousedown", function() {
    var color = $("input[type=color]").val();     // read selected colour
    $(this).attr("bgcolor", color);               // apply colour to cell that was clicked
    isDown = true;
  });

  // Listen for mouse button released
  table.on("mouseup", function() {
    isDown = false;
  });

  // Draw coloured pixels - listen for click or hover with mouse button pressed
  table.on("mouseover", "td", function() {
    if (isDown) {
      var color = $("input[type=color]").val();   // read selected colour
      $(this).attr("bgcolor", color);             // apply colour to cell that was clicked
    }
  });
}

// Listen for click on Submit button
$("input[type=submit]").click(function(evt) {
  evt.preventDefault();                           // prevent page reload on Submit
  makeGrid();                                     // call makeGrid function
});
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv