Pixelot

Developer
Darryl Huffman
Size
3,080 Kb
Views
8,096
  1. Pixelot Previews
  2. Pixelot HTML Codes
  3. Pixelot CSS Codes
  4. Pixelot JS Codes

How do I make an pixelot?

The brave coders of the round element journied on a quest to Pixelot. . What is a pixelot? How do you make a pixelot? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

Pixelot Previews
IQ Test

Pixelot - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixelot</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Check JS, "shapeProperty" for layout of the castle --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixelot - Script Codes CSS Codes

body { margin: 0; padding: 0; overflow:hidden; background-color: #3298DA;
}
canvas{ float: left; -webkit-animation-name: Floatingx; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: Floating; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; margin-left: 30px; margin-top: 100px;
}
@-webkit-keyframes Floatingx{ from {-webkit-transform:translate(0, 0px);} 65% {-webkit-transform:translate(0, 15px);} to {-webkit-transform: translate(0, -0px); }
}
@-moz-keyframes Floating{ from {-moz-transform:translate(0, 0px);} 65% {-moz-transform:translate(0, 15px);} to {-moz-transform: translate(0, -0px);}
}
/*
@media screen and (max-width:39.9rem) and (orientation: landscape){
body{background-color: #FCC;	transition: 1000ms;}
#container{width: 95%; padding: 2.5%; overflow: auto;}
}
@media screen and (min-width: 40rem) and (max-width:79.9rem) and (orientation: landscape){
body{background-color: #F99;	transition: 1000ms;}
#container{width: 95%; padding: 2.5%; overflow: auto;}
}
@media screen and (min-width: 80rem) and (orientation: landscape){
body{background-color: #F66;	transition: 1000ms;}
#container{max-width: 95%; padding: 2.5%; overflow: auto;}
}
@media screen and (max-width:39.9rem) and (orientation: portrait ){
body{background-color: #CCF;	transition: 1000ms;}
#container{width: 95%; padding: 2.5%; overflow: auto;}
}
@media screen and (min-width: 40rem) and (orientation: portrait ) {
body{background-color: #99F;	transition: 1000ms;}
#container{width: 95%; padding: 2.5%; overflow: auto;}
}
*/

Pixelot - Script Codes JS Codes

// Config Variables
var cw = window.innerWidth, ch = window.innerHeight, shapex, shapey, cs = ch / 35, // Cube Size entities = {}, entitiesIndex = 0, entitieAmount = 90, canvas = $('<canvas/>').attr({width: cw, height: ch, id: "myCanvas"}).appendTo('body'), context = canvas.get(0).getContext("2d");
// End Config Variables
// Color Variables
var c0 = "transparent", c1 = "transparent", c2 = "#50D46E", c3 = "#101010", c4 = "#EEEEEE", c5 = "#191919", c6 = "#9b9b9b", c7 = "#FFFFFF", c8 = "#382213", c9 = "#50301B";
// End Color Variables
// Entity Layout
var shapeProperty = [ [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c7,c1,c7,c1,c4,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c1,c4,c1,c7,c7,c7,c4,c4,c1,c1,c1,c1,c7,c4,c1,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c4,c4,c1,c7,c7,c7,c4,c4,c1,c7,c4,c1,c7,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c4,c4,c4,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c4,c4,c4,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c4,c4,c4,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c3,c3,c5,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c3,c3,c5,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c3,c3,c5,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c7,c7,c7,c7,c7,c7,c7,c4,c4,c4,c4,c3,c3,c5,c4,c4,c4,c1,c1,c1,c1,c1,c1,c1,c1], [c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2], [c1,c1,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c2,c1], [c1,c1,c1,c1,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c8,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c9,c1,c1,c1,c1,c1,c1], [c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1,c1]
];
var lgth = 0;
var longest;
for(var i=0; i < shapeProperty.length; i++){ if(shapeProperty[i].length > lgth){ var lgth = shapeProperty[i].length; longest = shapeProperty[i]; }
}
console.log(lgth);
// End Entity Layout
// Create Entity Object
function spawnEntity(shapex, shapey, shapevx, shapevy, lgth){ entitiesIndex++; this.id = entitiesIndex; this.width = cs; this.height = cs; entities[entitiesIndex] = this; this.color = shapex; this.y = ch + Math.floor((Math.random() * 1500) + 1); this.vy = -50; this.shapex = shapex; this.shapey = shapey; this.shapevx = shapevx; this.shapevy = shapevy;
}
//End Creating entity Object
// Entity Dawing Pramiters
spawnEntity.prototype.draw = function(){ this.y += this.vy; this.width = cs + 1; this.height = cs + 1; this.x = ((this.shapevx * cs) + (cw / 2)) - ((36 * cs) / 2); this.toy = this.shapevy * cs; context.fillStyle = this.color; if(this.y <= this.toy){ this.y = this.toy; this.vy = 0; } context.fillRect(this.x,this.y,this.width,this.height);// Position and size object
};
// End Entity Drawing Peramiters
// For loop to spawn objects
for(var y = 0; y < shapeProperty.length; y++) { // Loop through rows in the var shape = shapeProperty[y]; // Grab the current row for(var x = 0; x < shape.length; x++) { // Loop through columns in the row new spawnEntity(shape[x], shape[y], x, y); }
}
// End for loop to spawn objects
// Draw Entity
setInterval(function(){ context.clearRect(0,0,cw,ch); for(var i in entities){ entities[i].draw(); }
}, 30);
// End Drawing
Pixelot - Script Codes
Pixelot - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4
Size 3,080 Kb
Views 8,096
Do you need developer help for Pixelot?

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!

Darryl Huffman (darrylhuffman) Script Codes
Name
A Perfect Orbit
LightBulb
Math
End of the Rainbow
Red Oak
Spilled Paint
Orbit
Spilled Galaxy
A Different Clock
Blackhole
Create amazing art & images 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!