This is something new for digital artists.
CryptoArt: Art registered on the blockchain. I.e. Media is associated with an NFT. https://www.artnome.com/news/2018/1/14/what-is-cryptoart
I am reading this guide to eco-friendly NFTs: https://github.com/DahliaBloomstone/eco-nft
The CryptoArt NFT Market (i.e. selling digital art on the blockchain) is worth at least $150M - and this excludes some of the largest marketplaces like opensea.io, (and this figure is quite heavily skewed of course, with the top artists earning the most [1]).
Selling work on a blockchain can be a technically challenging task. For this reason, many platforms and websites have emerged, aiming to make this process as seamless and easy as possible for artists. Unfortunately, currently many of these websites are based on the Ethereum blockchain, which is very inefficient and ecologically costly by design. E.g. selling just a single-edition artwork on Ethereum has a carbon footprint starting at around 100 KgCO2, which is equivalent to a 1 hour flight (and depending on the platform, can reach a long-haul flight) [2]. Selling an edition of 100 works has a carbon footprint of over 10 tonnes CO2, which is more than the per capita annual footprint of someone in the EU - including all emissions from industry and trade [3].
I am very interested in learning more about blockchain, NFTs, how this will hurt the environment, and how this will change the art world.
Anyway, I just wanted to mention that, and build a javascript game with some cool design.
Using: • querySelector() • addEventListener() • Array.from() • getElementsByClassName() • Math.floor() • Math.random() • forEach() • classList.contains() • classList.add() • classList.remove() • setInterval() • clearInterval() • some() • style.backgroundImage • splice() • concat() • appendChild() • Arrow functions
document.addEventListener('DOMContentLoaded', () => {
const GRID_WIDTH = 10
const GRID_HEIGHT = 20
const GRID_SIZE = GRID_WIDTH * GRID_HEIGHT
const grid = createGrid();
let squares = Array.from(grid.querySelectorAll('div'))
const startBtn = document.querySelector('.button')
const hamburgerBtn = document.querySelector('.toggler')
const menu = document.querySelector('.menu')
const span = document.getElementsByClassName('close')[0]
const scoreDisplay = document.querySelector('.score-display')
const linesDisplay = document.querySelector('.lines-score')
let currentIndex = 0
let currentRotation = 0
const width = 10
let score = 0
let lines = 0
let timerId
let nextRandom = 0
const colors = [
'url(images/blue_block.png)',
'url(images/pink_block.png)',
'url(images/purple_block.png)',
'url(images/peach_block.png)',
'url(images/yellow_block.png)'
]
function createGrid() {
let grid = document.querySelector(".grid")
for (let i = 0; i < GRID_SIZE; i++) {
let gridElement = document.createElement("div")
grid.appendChild(gridElement)
}
for (let i = 0; i < GRID_WIDTH; i++) {
let gridElement = document.createElement("div")
gridElement.setAttribute("class", "block3")
grid.appendChild(gridElement)
}
let previousGrid = document.querySelector(".previous-grid")
for (let i = 0; i < 16; i++) {
let gridElement = document.createElement("div")
previousGrid.appendChild(gridElement);
}
return grid;
}
function control(e) {
if (e.keyCode === 39)
moveright()
else if (e.keyCode === 38)
rotate()
else if (e.keyCode === 37)
moveleft()
else if (e.keyCode === 40)
moveDown()
}
document.addEventListener('keydown', control)
const lTetromino = [
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, 2],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 2],
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2],
[GRID_WIDTH, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2 + 2]
]
const zTetromino = [
[0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
[GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1],
[0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
[GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1]
]
const tTetromino = [
[1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2],
[1, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
[1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1]
]
const oTetromino = [
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1]
]
const iTetromino = [
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3],
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3]
]
const theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]
let random = Math.floor(Math.random() * theTetrominoes.length)
let current = theTetrominoes[random][currentRotation]
let currentPosition = 4
function draw() {
current.forEach(index => {
squares[currentPosition + index].classList.add('block')
squares[currentPosition + index].style.backgroundImage = colors[random]
})
}
function undraw() {
current.forEach(index => {
squares[currentPosition + index].classList.remove('block')
squares[currentPosition + index].style.backgroundImage = 'none'
})
}
function moveDown() {
undraw()
currentPosition = currentPosition += width
draw()
freeze()
}
startBtn.addEventListener('click', () => {
if (timerId) {
clearInterval(timerId)
timerId = null
} else {
draw()
timerId = setInterval(moveDown, 1000)
nextRandom = Math.floor(Math.random() * theTetrominoes.length)
displayShape()
}
})
function moveright() {
undraw()
const isAtRightEdge = current.some(index => (currentPosition + index) % width === width - 1)
if (!isAtRightEdge) currentPosition += 1
if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) {
currentPosition -= 1
}
draw()
}
function moveleft() {
undraw()
const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0)
if (!isAtLeftEdge) currentPosition -= 1
if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) {
currentPosition += 1
}
draw()
}
function freeze() {
if (current.some(index => squares[currentPosition + index + width].classList.contains('block3') || squares[currentPosition + index + width].classList.contains('block2'))) {
current.forEach(index => squares[index + currentPosition].classList.add('block2'))
random = nextRandom
nextRandom = Math.floor(Math.random() * theTetrominoes.length)
current = theTetrominoes[random][currentRotation]
currentPosition = 4
draw()
displayShape()
addScore()
gameOver()
}
}
freeze()
//Rotate the Tetromino
function rotate() {
undraw()
currentRotation++
if (currentRotation === current.length) {
currentRotation = 0
}
current = theTetrominoes[random][currentRotation]
draw()
}
function gameOver() {
if (current.some(index => squares[currentPosition + index].classList.contains('block2'))) {
scoreDisplay.innerHTML = 'end'
clearInterval(timerId)
}
}
const displayWidth = 4
const displaySquares = document.querySelectorAll('.previous-grid div')
let displayIndex = 0
const smallTetrominoes = [
[1, displayWidth + 1, displayWidth * 2 + 1, 2], /* lTetromino */
[0, displayWidth, displayWidth + 1, displayWidth * 2 + 1], /* zTetromino */
[1, displayWidth, displayWidth + 1, displayWidth + 2], /* tTetromino */
[0, 1, displayWidth, displayWidth + 1], /* oTetromino */
[1, displayWidth + 1, displayWidth * 2 + 1, displayWidth * 3 + 1] /* iTetromino */
]
function displayShape() {
displaySquares.forEach(square => {
square.classList.remove('block')
square.style.backgroundImage = 'none'
})
smallTetrominoes[nextRandom].forEach(index => {
displaySquares[displayIndex + index].classList.add('block')
displaySquares[displayIndex + index].style.backgroundImage = colors[nextRandom]
})
}
//Add score
function addScore() {
for (currentIndex = 0; currentIndex < GRID_SIZE; currentIndex += GRID_WIDTH) {
const row = [currentIndex, currentIndex + 1, currentIndex + 2, currentIndex + 3, currentIndex + 4, currentIndex + 5, currentIndex + 6, currentIndex + 7, currentIndex + 8, currentIndex + 9]
if (row.every(index => squares[index].classList.contains('block2'))) {
score += 10
lines += 1
scoreDisplay.innerHTML = score
linesDisplay.innerHTML = lines
row.forEach(index => {
squares[index].style.backgroundImage = 'none'
squares[index].classList.remove('block2') || squares[index].classList.remove('block')
})
const squaresRemoved = squares.splice(currentIndex, width)
squares = squaresRemoved.concat(squares)
squares.forEach(cell => grid.appendChild(cell))
}
}
}
hamburgerBtn.addEventListener('click', () => {
menu.style.display = 'flex'
})
span.addEventListener('click', () => {
menu.style.display = 'none'
})
})
After practicing the code, it has been fun to create gifs of my digital artwork and put them into whatever I just practiced for styling. It completes the challenge!
