轻松上手！分享几个JS小游戏源码，让你的编程技能
随着互联网技术的飞速发展，JavaScript（简称JS）已经成为前端开发中不可或缺的一部分。而JS小游戏源码更是让编程爱好者们爱不释手，它们不仅可以帮助我们学习编程知识，还能让我们在轻松愉快的氛围中提升自己的技能。今天，就为大家分享几个JS小游戏源码，让我们一起来看看吧！
一、经典贪吃蛇游戏
贪吃蛇游戏是许多编程初学者的入门之作，下面是一个简单的贪吃蛇游戏源码：
`html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var snake = [{ x: 100, y: 100 }];
var food = { x: 300, y: 300 };
var dx = 10;
var dy = 0;
var score = 0;
function drawSnake() {
ctx.fillStyle = 'green';
for (var i = 0; i < snake.length; i++) {
ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
ctx.strokeStyle = 'white';
ctx.strokeRect(snake[i].x, snake[i].y, 10, 10);
}
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
var head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
food = {
x: Math.floor(Math.random() * (canvas.width / 10)) * 10,
y: Math.floor(Math.random() * (canvas.height / 10)) * 10
};
} else {
snake.pop();
}
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
alert('Game Over!');
location.reload();
}
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37:
dx = -10;
dy = 0;
break;
case 38:
dx = 0;
dy = -10;
break;
case 39:
dx = 10;
dy = 0;
break;
case 40:
dx = 0;
dy = 10;
break;
}
});
setTimeout(gameLoop, 100);
}
gameLoop();
</script></body>
</html>
`
二、猜数字游戏
猜数字游戏是一个简单的逻辑游戏，下面是一个简单的猜数字游戏源码：
`html
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请输入一个1到100之间的数字：</p>
<input type="number" id="guessInput" />
<button onclick="guess()">猜</button>
<p id="result"></p>
<script>
var secretNumber = Math.floor(Math.random() * 100) + 1;
var guessCount = 0;
function guess() {
var userGuess = document.getElementById('guessInput').value;
guessCount++;
if (userGuess == secretNumber) {
document.getElementById('result').innerHTML = '恭喜你！你猜对了！';
} else if (userGuess < secretNumber) {
document.getElementById('result').innerHTML = '太小了，请再试一次。';
} else {
document.getElementById('result').innerHTML = '太大了，请再试一次。';
}
}
</script></body>
</html>
`
三、俄罗斯方块游戏
俄罗斯方块游戏是一个经典的益智游戏，下面是一个简单的俄罗斯方块游戏源码：
`html
<!DOCTYPE html>
<html>
<head>
<title>俄罗斯方块游戏</title>
<style>
.grid {
width: 200px;
height: 400px;
position: relative;
}
.block {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div class="grid" id="grid"></div>
<script>
var grid = document.getElementById('grid');
var blocks = [];
var currentBlock = null;
function createBlock() {
var block = document.createElement('div');
block.className = 'block';
block.style.left = Math.floor(Math.random() * 10) * 20 + 'px';
block.style.top = Math.floor(Math.random() * 20) * 20 + 'px';
grid.appendChild(block);
blocks.push(block);
currentBlock = block;
}
function moveBlock() {
var style = window.getComputedStyle(currentBlock);
var left = parseInt(style.left, 10);
var top = parseInt(style.top, 10);
if (left + 20 < grid.offsetWidth && top + 20 < grid.offsetHeight) {
currentBlock.style.left = (left + 20) + 'px';
currentBlock.style.top = top + 'px';
} else {
grid.removeChild(currentBlock);
blocks.shift();
createBlock();
}
}
createBlock();
setInterval(moveBlock, 1000);
</script></body>
</html>
`
通过以上三个简单的JS小游戏源码，相信你已经对JavaScript编程有了更深入的了解。在学习过程中，你可以根据自己的需求对这些源码进行修改和优化，让自己的编程技能更上一层楼。祝大家学习愉快！