merhaba ben web pixel oyunu yapak istiyorum yani kısaca pixel planet gibi bana yardım ederseniz sevinirim

123s · 24 Temmuz 2024

pixelplanet

Official Repository of pixelplanet.fun

git.pixelplanet.fun

yardım edermisniz

seniLoR · 27 Ağustos 2024

123s' Alıntı:
pixelplanet

Official Repository of pixelplanet.fun

git.pixelplanet.fun

yardım edermisniz

Hocam size taslak bir kod yazıyorum onu başka birine rica ederek veya kodlama biliyorsan kendin geliştirirsin

seniLoR · 27 Ağustos 2024

Html:

<!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>

CSS:

/* 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;
}

JavaScript:

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();

Güvenli Ticaret

Sorunum Var

Doğru Türkçe ve Kurallar

merhaba ben web pixel oyunu yapak istiyorum yani kısaca pixel planet gibi bana yardım ederseniz sevinirim

123s

pixelplanet

seniLoR

pixelplanet

seniLoR

Konuyu görüntüleyen kullanıcılar: