贪吃蛇小游戏 - 在线玩经典蛇形游戏 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<style>
		body {
			background-color: #E0FFFF;
		}
<p>h1 {
text-align: center;
font-size: 50px;
color: #8B0000;
margin-top: 50px;
}</p>
<pre><code>	#canvas {
		margin: 0 auto;
		display: block;
		border: 1px solid black;
	}
	
	#score {
		text-align: center;
		font-size: 25px;
		color: #8B0000;
		margin-top: 20px;
	}
	
	#button {
		text-align: center;
		margin-top: 20px;
	}
	
	button {
		background-color: #8B0000;
		color: white;
		font-size: 20px;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	
	button:hover {
		background-color: #FF4500;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>贪吃蛇</h1>
	<canvas id='canvas' width='400' height='400'></canvas>
	<div id='score'>得分: 0</div>
	<div id='button'>
		<button onclick='startGame()'>开始游戏</button>
	</div>
<pre><code>&lt;script&gt;
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var blockSize = 10;
	var width = canvas.width / blockSize;
	var height = canvas.height / blockSize;
	var snake = [];
	var food = {};
	var score = 0;
	var intervalId;
	
	function drawBlock(x, y) {
		ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
	}
	
	function drawSnake() {
		snake.forEach(function(block) {
			drawBlock(block.x, block.y);
		});
	}
	
	function moveSnake() {
		var headX = snake[0].x;
		var headY = snake[0].y;
		
		switch (direction) {
			case 'right':
				headX++;
				break;
			case 'left':
				headX--;
				break;
			case 'up':
				headY--;
				break;
			case 'down':
				headY++;
				break;
		}
		
		var tail = snake.pop();
		tail.x = headX;
		tail.y = headY;
		snake.unshift(tail);
	}
	
	function generateFood() {
		food.x = Math.floor(Math.random() * width);
		food.y = Math.floor(Math.random() * height);
	}
	
	function drawFood() {
		ctx.fillStyle = '#FF4500';
		drawBlock(food.x, food.y);
	}
	
	function checkCollision() {
		var headX = snake[0].x;
		var headY = snake[0].y;
		
		if (headX &lt; 0 || headX &gt;= width || headY &lt; 0 || headY &gt;= height) {
			return true;
		}
		
		for (var i = 1; i &lt; snake.length; i++) {
			if (headX === snake[i].x &amp;&amp; headY === snake[i].y) {
				return true;
			}
		}
		
		return false;
	}
	
	function updateScore() {
		score++;
		document.getElementById('score').innerHTML = '得分: ' + score;
	}
	
	function startGame() {
		snake = [
			{x: 10, y: 10},
			{x: 9, y: 10},
			{x: 8, y: 10},
			{x: 7, y: 10},
			{x: 6, y: 10}
		];
		
		direction = 'right';
		generateFood();
		score = 0;
		document.getElementById('score').innerHTML = '得分: ' + score;
		
		if (typeof intervalId !== 'undefined') {
			clearInterval(intervalId);
		}
		
		intervalId = setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			drawSnake();
			drawFood();
			
			moveSnake();
			
			if (checkCollision()) {
				clearInterval(intervalId);
				alert('游戏结束！');
			}
			
			if (snake[0].x === food.x &amp;&amp; snake[0].y === food.y) {
				updateScore();
				generateFood();
				snake.push({x: 0, y: 0});
			}
		}, 100);
	}
	
	document.addEventListener('keydown', function(event) {
		switch (event.keyCode) {
			case 37:
				if (direction !== 'right') {
					direction = 'left';
				}
				break;
			case 38:
				if (direction !== 'down') {
					direction = 'up';
				}
				break;
			case 39:
				if (direction !== 'left') {
					direction = 'right';
				}
				break;
			case 40:
				if (direction !== 'up') {
					direction = 'down';
				}
				break;
		}
	});
	
	var direction;
&lt;/script&gt;
</code></pre>
</body>
</html>