Pixel Painter Current

Developer
Kevin
Size
4,014 Kb
Views
30,360
  1. Pixel Painter Current Previews
  2. Pixel Painter Current HTML Codes
  3. Pixel Painter Current CSS Codes
  4. Pixel Painter Current JS Codes

How do I make an pixel painter current?

What is a pixel painter current? How do you make a pixel painter current? This script and codes were developed by Kevin on 27 August 2022, Saturday.

Pixel Painter Current Previews
IQ Test

Pixel Painter Current - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixel Painter Current</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text-center test1">	<h1 class="pixel-font">PIXEL PAINTER</h1>
</div>
<div class="text-center">	<button id = "resetButton" class = "btn-primary">Reset</button>	<button id = "toggleGrid" class = "btn-primary">Toggle Grid</button>	<button id = "animateIt" class = "btn-primary">Cycle saves 1-3 (animate)</button>
</div>
<div class="color-selector text-center">	<div class='grid-boxes background-black'></div>	<div class='grid-boxes background-cyan'></div>	<div class='grid-boxes background-green'></div>
</div>
<div id = "fullGrid" class="full-grid">
</div>
<div class="text-center">	<button id = "save1" class = "btn-primary">Save 1</button>	<button id = "save2" class = "btn-primary">Save 2</button>	<button id = "save3" class = "btn-primary">Save 3</button>
</div>
<div class="text-center">	<button id = "load1" class = "btn-primary">Load 1</button>	<button id = "load2" class = "btn-primary">Load 2</button>	<button id = "load3" class = "btn-primary">Load 3</button>
</div>
<div class="text-center">	<button id = "speedDown" class="btn-primary">Speed -</button>	<button id = "speedUp" class="btn-primary">Speed +</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixel Painter Current - Script Codes CSS Codes

.pixel-font{ padding-bottom: 40px; padding-top: 40px; font-family: "Press Start 2P"; font-size: 80px; font-weight: bold;
}
.full-grid{ margin: 0 auto; padding: 0px; width: 446px; height: 446px;
}
.grid-boxes{ display: inline-block; border: 1px solid black; width: 40px; height: 40px; vertical-align: top;
}
.background-black{ background-color: black;
}
.background-green { background-color: green;
}
.background-cyan{ background-color: cyan;
}
.color-selector { padding-top: 20px; padding-bottom: 40px;
}

Pixel Painter Current - Script Codes JS Codes

$(document).ready(function() {	var selectedColor = "rgb(0,0,0)"; //<--- Set the default paint color to black	var speed = 300; //<--- Set the default animation speed to 300 miliseconds per frame.	$('div').on('dragstart', function(event) {	event.preventDefault();	}); // <--- prevenets dragging of the box elements.	var gridCreator = function() { // <--- Creates the grid itself	$("#fullGrid").html(""); //<--- In order to have the reset button work, and not just add more grid-boxes to the existing ones, this replaces fullGrid div with nothing.	for (x = 0; x < 121; x++) { // <--- runs 121 times, creating an 11*11 grid.	$('#fullGrid').append("<div class='grid-boxes' id='grid-box" + x + "'></div>");	}	}	gridCreator();	var paint = false; // mouseDown value	$(document).mousedown(function() {	paint = true; // when the mouse is pressed down, set paint to true	})	.mouseup(function() {	paint = false; // When mouse is no longer held down, set paint to false	});	$(".full-grid").on("mousedown", "div", function() { // <--- set the background-color of an individual square on the grid to selectedColor.	if ($(this).css("background-color") !== selectedColor) { // <--- If the selected color is different from the background color of box being clicked on	$(this).css("background-color", selectedColor); // <--- change the color of the box to the selected color	} else { // <--- Otherwise, the selected color is the same as the box being clicked on.	$(this).css("background-color", 'white'); // <--- turn the box white.	}	});	$(".full-grid").on("mouseover", "div", function() { // <--- set the background-color of an individual square on the grid to selectedColor.	if (paint) {	if ($(this).css("background-color") !== selectedColor) { // <--- If the selected color is different from the background color of box being clicked on	$(this).css("background-color", selectedColor); // <--- change the color of the box to the selected color	}	};	});	$("#resetButton").on("click", function() { // <--- Resets the grid by replacing the HTML inside fullGrid with running gridCreator again.	$("#fullGrid").html(gridCreator());	});	var save1 = []; // <--- These are the arrays the hold the background-color values for each grid box individually;	var save2 = [];	var save3 = [];	var load1 = function() { // <--- These functions assign the background-properties of each grid item in order, using the individual id, #grid-boxX. Also should be combined into one function.	for (x = 0; x < 121; x++) {	$("#grid-box" + x).css("background-color", save1[x]);	}	}	var load2 = function() {	for (x = 0; x < 121; x++) {	$("#grid-box" + x).css("background-color", save2[x]);	}	}	var load3 = function() {	for (x = 0; x < 121; x++) {	$("#grid-box" + x).css("background-color", save3[x]);	}	}	$("#save1").on("click", function() { // <--- Clicking the save1 button triggers this. The original save is intiailly emptied. A forloop counts for the number of squares, 121, and pushes the background-color value into save1. I need to re-write this in order to have this as one function that can handle all the #save buttons, rather than 1 for each function.	save1 = [];	for (x = 0; x < 121; x++) {	save1.push($("#grid-box" + x).css("background-color"))	}	});	$("#save2").on("click", function() {	save2 = [];	for (x = 0; x < 121; x++) {	save2.push($("#grid-box" + x).css("background-color"))	}	});	$("#save3").on("click", function() {	save3 = [];	for (x = 0; x < 121; x++) {	save3.push($("#grid-box" + x).css("background-color"))	}	});	$("#load1").on("click", load1);	$("#load2").on("click", load2);	$("#load3").on("click", load3);	var animation = function() { // <--- This is the animation function. It works by being toggled on / off with function that assigns set interval, and using setTimeouts inbetween each load. It does not use a setTimeout on the first load, as that delay is created from setIntervals loop.	load1();	setTimeout(function() {	load2();	}, speed);	setTimeout(function() {	load3();	}, speed*2);	}	var animationSpeed;	var intervalID = "off";	$("#animateIt").on("click", function() { // <--- When clicking #animateIt, turn the animation on and off. This uses setInterval, which runs continuously with a delay.	if (intervalID === "off") {	intervalID = "on";	animationSpeed = setInterval(animation, speed*3);	} else {	intervalID = "off";	clearInterval(animationSpeed);	}	});	$('#speedUp').on('click', function() { // <--- This speeds up the animation, by taking the speed variable and dividing it by 1.5. The animationSpeed interval has to be cleared and reset, otherwise it still uses the initial value taken when turning the animation on and off.	speed /= 1.5;	clearInterval(animationSpeed);	animationSpeed = setInterval(animation, speed*3);	});	$('#speedDown').on('click', function() {	speed *= 1.5;	clearInterval(animationSpeed);	animationSpeed = setInterval(animation, speed*3);	});	$("#toggleGrid").on("click", function() {	if ($(".grid-boxes").css("border") !== "0px none rgb(51, 51, 51)") { // <--- When I am setting .grid-boxes border to 0px on the line below... it is actually being set to 0px none rgb(51, 51, 51). I need to come back to this to find out if there is a way to hard set the border property to 0px only	$(".grid-boxes").css("border", "0px");	} else {	$(".grid-boxes").css("border", "1px solid black");	}	});	$(".color-selector").on("click", "div", function() { // <--- When clicking on one of the boxes in the color-selector div, this function assigns the background color of the div that was clicked to selectedColor	selectedColor = $(this).css('background-color');	});
});
Pixel Painter Current - Script Codes
Pixel Painter Current - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 4,014 Kb
Views 30,360
Do you need developer help for Pixel Painter Current?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (KevinBruland) Script Codes
Name
CSS Zen Garden Template
Pomodoro Clock
Canvas Mouse Position Radial Gradient
Canvas Snow
Experimenting1
Memory
A Pen by Kevin
Calculator
Simon
Canvas Optical Illusion
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!