123s
Kayıtlı Üye
Hocam size taslak bir kod yazıyorum onu başka birine rica ederek veya kodlama biliyorsan kendin geliştirirsin
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Oyun</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="controls">
<input type="color" id="colorPicker" value="#FF0000">
<div id="palette"></div>
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>/* style.css */
/* Genel stil ayarları */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
}
/* Kontrol paneli stil ayarları */
#controls {
margin: 20px;
display: flex;
align-items: center;
}
#colorPicker {
margin-right: 10px;
}
/* Palet stili */
#palette {
display: flex;
flex-wrap: wrap;
width: 120px; /* Paletin genişliği */
border: 1px solid #ddd;
padding: 5px;
}
.palette-color {
width: 30px;
height: 30px;
margin: 2px;
border: 1px solid #ccc;
cursor: pointer;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
/* Canvas stili */
#gameCanvas {
border: 1px solid #000;
background-color: #fff;
}const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const paletteDiv = document.getElementById('palette');
const tileSize = 20;
const rows = canvas.height / tileSize;
const cols = canvas.width / tileSize;
let currentColor = colorPicker.value;
// Renk paleti
const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
// Oyun alanını başlat
function initGame() {
drawGrid();
createPalette();
}
// Izgarayı çiz
function drawGrid() {
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
ctx.strokeStyle = '#444';
ctx.strokeRect(x * tileSize, y * tileSize, tileSize, tileSize);
}
}
}
// Renk paleti oluştur
function createPalette() {
colors.forEach(color => {
const div = document.createElement('div');
div.className = 'palette-color';
div.style.backgroundColor = color;
div.addEventListener('click', () => {
currentColor = color;
colorPicker.value = color;
});
paletteDiv.appendChild(div);
});
}
// Pixel üzerine tıklama
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left) / tileSize);
const y = Math.floor((e.clientY - rect.top) / tileSize);
ctx.fillStyle = currentColor;
ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
});
// Renk seçici değiştirildiğinde renk güncelle
colorPicker.addEventListener('input', (e) => {
currentColor = e.target.value;
});
// Oyun başlat
initGame();