this is my first blog and I do coding and I host Minecraft servers ecstra
look this is some of my code and what I made with it. this is what the code made
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Building Sandbox</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
flex-direction: column;
color: white;
font-family: sans-serif;
}
#controls {
margin-bottom: 15px;
display: flex;
gap: 15px;
align-items: center;
}
#color-picker {
width: 50px;
height: 40px;
border: none;
cursor: pointer;
padding: 0;
}
button {
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
#game-board {
display: grid;
grid-template-columns: repeat(20, 20px);
grid-template-rows: repeat(20, 20px);
border: 2px solid #fff;
cursor: pointer;
}
.cell {
width: 20px;
height: 20px;
background-color: #eee; /* Empty space color */
border: 1px solid #ccc;
box-sizing: border-box;
transition: transform 0.1s, background-color 0.2s;
}
.cell:hover {
transform: scale(1.1); /* Slight hover effect */
z-index: 10;
}
</style>
</head>
<body>
<div id="controls">
<label for="color-picker">Select Color:</label>
<input type="color" id="color-picker" value="#4CAF50">
<button onclick="clearBoard()">Clear Board</button>
</div>
<div id="game-board"></div>
<script>
const board = document.getElementById('game-board');
const colorPicker = document.getElementById('color-picker');
const GRID_SIZE = 20;
function createBoard() {
for (let i = 0; i < GRID_SIZE * GRID_SIZE; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
// Add click listener
cell.addEventListener('click', function() {
placeOrRemoveBlock(cell);
});
board.appendChild(cell);
}
}
function placeOrRemoveBlock(cell) {
// Check if the cell already has a custom background color set inline
if (cell.style.backgroundColor && cell.style.backgroundColor !== 'rgb(238, 238, 238)') {
// If it has a color other than the empty default, remove it
cell.style.backgroundColor = '#eee';
} else {
// Otherwise, set the background color to the currently selected color
cell.style.backgroundColor = colorPicker.value;
}
}
function clearBoard() {
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
// Reset the inline style to empty space color
cell.style.backgroundColor = '#eee';
});
}
createBoard();
</script>
</body>
</html>
Comments
Post a Comment