sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Hold to draw

Browse Source
This commit is contained in:
rachel.koldenhoven 2018-06-10 13:54:45 +05:30 committed by Brent Gardner
parent 307079543c
commit 5cbbbc70b7
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.js
View File

@ -3,6 +3,9 @@ const HEIGHT = 24;
// State // State
let brushColor = ''; let brushColor = '';
let mouseDown = false;
document.body.addEventListener('mouseup', () => mouseDown = false);
document.body.addEventListener('mouseenter', () => mouseDown = false);
// Container // Container
const container = document.createElement('div'); const container = document.createElement('div');
@ -12,13 +15,16 @@ container.style.width = `${WIDTH * 16}px`;
// Canvas // Canvas
const canvas = document.createElement('div'); const canvas = document.createElement('div');
canvas.className = 'canvas'; canvas.className = 'canvas';
canvas.addEventListener('mousedown', () => mouseDown = true);
for(let y = 0; y < HEIGHT; y++) { for(let y = 0; y < HEIGHT; y++) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'row'; row.className = 'row';
for(let x = 0; x < WIDTH; x++) { for(let x = 0; x < WIDTH; x++) {
const pixel = document.createElement('div'); const pixel = document.createElement('div');
pixel.className = 'pixel'; pixel.className = 'pixel';
pixel.addEventListener('click', () => { pixel.addEventListener('click', () => pixel.style.backgroundColor = brushColor);
pixel.addEventListener('mouseover', () => {
if(!mouseDown) return;
pixel.style.backgroundColor = brushColor; pixel.style.backgroundColor = brushColor;
}); });
row.appendChild(pixel); row.appendChild(pixel);