sigonasr2
/
pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Create your own pixel art maker
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 Commits
4 Branches
0 Tags
233 KiB
 
 
 
Tag: Branch: Tree: fa08b19498
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fa08b19498'
${ noResults }
pixel-art-maker/README.md

2.6 KiB
Raw Blame History

Pixel Art Maker

In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then draw pixel art. The interface is completely up to you, but it could look something like this.

Example of Pixel Art Maker

More specifically, your pixel art maker should allow a user to do the following.

  1. Start with a blank canvas of pixels.
  2. Select a color from a palette.
  3. Paint the pixels on the canvas using the selected color.
  4. Repeat step 2.

Here's a development workflow that we recommend you use.

  1. Fork and clone this repository.
  2. Create a small, 2x2 grid canvas made up of white, square div tags with a border.
  3. Add an event listener to each div so when clicked the background turns red.
  4. Create a small palette of two colors (e.g. red and blue) below the canvas using more div tags.
  5. Add an event listener to these div tags so when clicked the current "brush" color is remembered.
  6. Expand the dimensions of the pixel canvas.
  7. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
  8. Expand the palette with a current color indicator so the user knows which color was last selected.
  9. Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior!

TIP: Check out this handy tool to see a list of all the named colors in CSS.

Bonus 1

Add a color picker which allows the user to select any color using the <input type="color"> tag and the change event.

Bonus 2

Add tools that augment the type of user interaction

  • Pencil tool: Click and drag across the canvas to paint pixels.
  • Rectangle tool: Click and drag across the canvas to paint all pixels that fall inside a rectangular selection.

TIP: Check out the mouseover event.

Deployment

Review the following articles on the Surge platform and then deploy your website to production.

A good domain name for this project is USERNAME-pixel-art-maker.surge.sh where USERNAME is your GitHub username in all lowercase letters. Once deployed and everything works as you expect, copy the URL to your site and paste it below.

PASTE YOUR PRODUCTION URL HERE