HTML, CSS, மற்றும் JavaScript மூலம் Snake Game உருவாக்குவது: ஒரு வழிகாட்டி
இன்றைய உலகில் வலைத்தளங்களை மோனிடைஸ் செய்வது முக்கியமானது, குறிப்பாக Google AdSense மூலம். ஒவ்வொரு பயனருக்கும் பயனுள்ள உள்ளடக்கத்தை வழங்குவது முக்கியமாகிறது. இங்கு, HTML, CSS, மற்றும் JavaScript பயன்படுத்தி Snake Game உருவாக்குவதற்கான வழிகாட்டி மற்றும் AdSense அங்கீகாரம் பெறுவதற்கான சில சுட்டுமுறைகளைப் பார்க்கலாம்.
Snake Game எதற்கு?
Snake Game என்பது எளிமையான, ஆனால் பிரபலமான ஒரு விளையாட்டு.
வலைத்தளங்களில் இதைப் பொருத்தவரை:
- பயனருக்கு ஈர்ப்பை ஏற்படுத்தும்.
- இயல்பான எளிமையான பயனர் அனுபவத்தை வழங்கும்.
- AdSense விதிமுறைகளுக்கு உகந்த, அசல் மற்றும் பயனுள்ள உள்ளடக்கத்தை உருவாக்க உதவும்.
கட்டமைப்பு
1. HTML கோப்பு
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Snake Game</h1>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
விளக்கம்:
canvasஎனும் HTML எலிமெண்ட் மூலம் விளையாட்டைப் பார்வையிடலாம்.- CSS மற்றும் JavaScript கோப்புகளை இணைத்துள்ளோம்.
2. CSS கோப்பு
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
canvas {
border: 2px solid #000;
background-color: #fff;
display: block;
margin: 20px auto;
}
விளக்கம்:
- விளையாட்டின் தோற்றத்தை அழகாக்குகிறது.
canvasஇல் ஒரு பொருத்தமான விளையாட்டு தளத்தை உருவாக்குகிறது.
3. JavaScript கோப்பு
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
let snake = [ { x: 200, y: 200 } ];
let food = { x: 100, y: 100 };
let dx = 20, dy = 0;
function drawSnake() {
snake.forEach(part => {
ctx.fillStyle = "green";
ctx.fillRect(part.x, part.y, 20, 20);
});
}
function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, 20, 20);
}
function updateSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food.x = Math.floor(Math.random() * 20) * 20;
food.y = Math.floor(Math.random() * 20) * 20;
} else {
snake.pop();
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function gameLoop() {
clearCanvas();
drawFood();
drawSnake();
updateSnake();
}
document.addEventListener("keydown", event => {
if (event.key === "ArrowUp" && dy === 0) { dx = 0; dy = -20; }
else if (event.key === "ArrowDown" && dy === 0) { dx = 0; dy = 20; }
else if (event.key === "ArrowLeft" && dx === 0) { dx = -20; dy = 0; }
else if (event.key === "ArrowRight" && dx === 0) { dx = 20; dy = 0; }
});
setInterval(gameLoop, 100);
விளக்கம்:
- Canvas பயன்படுத்தி முளை (snake) மற்றும் உணவை வரைவது.
- Key Events மூலம் இயக்கக்கூடிய இயக்கங்கள்.
- Food Detection மற்றும் சிறிய ஆளுமை லாஜிக்.