Meta Description" name="description" />
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Çizim Yarışması | Amine 🎨</title>
<style>
body { font-family: 'Comic Sans MS', cursive; background: #f0f2f5; text-align: center; margin: 0; }
#game-container { background: white; width: 450px; margin: 20px auto; padding: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
canvas { border: 3px solid #e94560; border-radius: 10px; cursor: crosshair; background: #fff; }
.btn { background: #e94560; color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 16px; margin: 5px; }
#word-to-draw { font-size: 24px; color: #16213e; font-weight: bold; }
#score-display { font-size: 20px; color: #4CAF50; margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<div id="game-container">
<h2>🎨 Resim Yarışması</h2>
<p>Çizmen gereken: <span id="word-to-draw">Hamburger 🍔</span></p>
<canvas id="paintCanvas" width="400" height="300"></canvas>
<br>
<button class="btn" onclick="clearCanvas()">Temizle 🧹</button>
<button class="btn" onclick="rateDrawing()">Puanla! ⭐</button>
<div id="score-display"></div>
</div>
<script>
const canvas = document.getElementById('paintCanvas');
const ctx = canvas.getContext('2d');
let painting = false;
// Çizim Başlatma
canvas.addEventListener('mousedown', () => painting = true);
canvas.addEventListener('mouseup', () => { painting = false; ctx.beginPath(); });
canvas.addEventListener('mousemove', draw);
function draw(e) {
if (!painting) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#333';
const rect = canvas.getBoundingClientRect();
ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('score-display').innerText = "";
}
function rateDrawing() {
// AI simülasyonu puanlama (Rastgele ama eğlenceli)
const score = Math.floor(Math.random() * 4) + 7; // 7 ile 10 arası puan verir
const comments = ["Harika gidiyorsun!", "Vay be, ressam mısın Amine?", "Renkleri hayal edebiliyorum!", "Muazzam bir yetenek!"];
const randomComment = comments[Math.floor(Math.random() * comments.length)];
document.getElementById('score-display').innerText = `Puan: ${score}/10 ✨ \n ${randomComment}`;
}
</script>
</body>
</html>
1
1
3KB
3KB
65.0ms
128.0ms
66.0ms