NERDARMY
Code-O-Matic-3000

01-05 - DEMO - Simple HTML Page 01-10 - DEMO - Styled HTML/CSS Page 01-15 - PROJECT - Web Page About Me 01-18 - DEMO - CSS Box Model 01-20 - DEMO - Space Wars Colorform 01-25 - DEMO - Full Page Background 01-30 - DEMO - DIV Backgrounds 01-35 - DEMO - FlexBox Display 01-40 - DEMO - DIV Organized Content 01-45 - PROJECT - Cloud9 Homepage
02-10 - Variables, If's, and Switches 02-20 - Using Functions 02-30 - Controlling HTML & CSS with JavaScript 02-60 - The Keyboard and User Input 02-70 - PROJECT : Number Guess 02-80 - PROJECT : Rock - Paper - Scissors
03-10 - Array Basics - Part 1 03-20 - Array Basics - Part 2 03-50 - Hang Man 03-70 - The Magic 8 Ball
405 - Grid Art 410 - Grid Painter 420 - Grid Runner
07-05 - GET and POST Demo 07-10 - JSON Choose Your Own Adventure 07-20 - Blog-O-Matic 07-30 - mySQL and PHP Basics
1110 - Phaser Sprites and Basic Input 1115 - Phaser Sprite Body and Arcade Physics
12.a.01 - ASSETS - Space Shooter 12.d.01 - DEMO : Player Movement 12.d.02 - DEMO : Shooting Bullets 12.d.03 - DEMO : Timed Asteroids 12.d.04 - DEMO - Basic Game Play 12.d.05 - DEMO - Eye Candy 12.d.06 - DEMO - Game Pause 12.d.07 - DEMO - Music and SFX 12.d.08 - DEMO - State Manage 1 12.d.09 - DEMO : State Manage 2 12.d.10 - DEMO : State Manage 3 12.d.11 - DEMO : Power Ups 12.d.99 - A sort of complete version 12.p.01 - PROJECT - Space Shooter 12.v.01 - ver01 - SS Walkthrough 12.v.02 - ver02 - SS Walkthrough 12.v.03 - ver03 - SS Walkthrough 12.v.04 - ver04 - SS Walkthrough 12.v.05 - ver05 - SS Walkthrough 12.v.06 - ver06 - SS Walkthrough 12.v.07 - ver07 - SS Walkthrough 12.v.FN - verFinal - SS Walkthrough
14.a.01 - MagnetHead Assets 14.c.01 - MagnetHead Code
15-10 - Jump It
Project 405 : Grid Art
Project Information

In this demo, we will use a two-dimensional array to draw a pixel art picture of Mario. We will learn how to navigate through a two-dimensional array, create HTML elements using javascript, and change element styles through javascript.

Workspace Directory : 405-gridArt

Filename : gridArt.html

Modify It and Make It Your Own!

Directions
Using Google, find a pixel art picture on the web and create a two-dimensional array to draw image in your application.

Constraints
  • Your pixel image must be AT LEAST 10x10 (10 rows by 10 columns)
  • Adjust the 'cellSize' variable to get image to fill the screen without going over.