Skip to content

Instantly share code, notes, and snippets.

@dsiddy

dsiddy/mario.html

Created June 2, 2017 20:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dsiddy/d13e85c4b715dc7a44e815293031b1ed to your computer and use it in GitHub Desktop.
Save dsiddy/d13e85c4b715dc7a44e815293031b1ed to your computer and use it in GitHub Desktop.
Download ZIP
round #2 of Code in the Dark Spokane 2017
Raw
mario.html
<html>
<head>
<style>
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
.pixel {
display: inline-block;
width: 48px;
height: 48px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
let pixelMap = [
[4, 4, 4, 4, 4, 2, 2, 2, 2, 2, 4, 4, 6, 6, 6, 4],
[4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 4],
[4, 4, 4, 4, 1, 1, 1, 6, 6, 0, 6, 4, 2, 2, 2, 4],
[4, 4, 4, 1, 6, 1, 6, 6, 6, 0, 6, 6, 6, 2, 2, 4],
[4, 4, 4, 1, 6, 1, 1, 6, 6, 6, 0, 6, 6, 6, 2, 4],
[4, 4, 4, 1, 1, 6, 6, 6, 6, 0, 0, 0, 0, 2, 4, 4],
[4, 4, 4, 4, 4, 1, 1, 6, 6, 6, 6, 6, 2, 2, 4, 4],
[4, 4, 2, 2, 2, 2, 5, 2, 2, 2, 5, 2, 2, 4, 4, 1],
[6, 6, 2, 2, 2, 2, 2, 5, 2, 2, 2, 5, 4, 4, 1, 1],
[6, 6, 6, 2, 2, 2, 2, 5, 5, 5, 5, 3, 5, 5, 1, 1],
[4, 6, 4, 4, 5, 2, 5, 5, 3, 5, 5, 5, 5, 5, 1, 1],
[4, 4, 1, 1, 1, 5, 5, 5, 5, 5, 5, 5, 5, 5, 1, 1],
[4, 1, 1, 1, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4],
[4, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
];
let colorMap = {
0: 'black',
1: 'brown',
2: 'red',
3: 'yellow',
4: 'lightblue',
5: 'darkblue',
6: 'white'
};
let pixelImage = document.querySelector('.pixelImage');
for(var row of pixelMap) {
let nextRow = document.createElement('div');
nextRow.setAttribute('class', 'row');
pixelImage.appendChild(nextRow);
for(var pixel of row) {
let nextPixel = document.createElement('div');
nextPixel.setAttribute('class', 'pixel');
nextPixel.setAttribute('style', `background-color: ${colorMap[pixel]};`)
nextRow.appendChild(nextPixel);
}
}
});
</script>
</head>
<body>
<div class="container">
<div class="pixelImage"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment