轻松上手！JS小游戏源码分享，让你的编程之路更加
随着互联网的飞速发展，前端开发成为了热门职业之一。JavaScript（简称JS）作为前端开发的核心技术之一，已经深入到我们生活的方方面面。在这个充满创意的时代，许多开发者都希望通过自己的努力，制作出有趣的小游戏来丰富网络世界。今天，就让我为大家分享一些JS小游戏源码，帮助你轻松上手，开启你的编程之旅。
一、HTML5 Canvas基础游戏——猜数字
这是一个非常简单的小游戏，主要使用了HTML5 Canvas和JavaScript来实现。游戏中，计算机随机生成一个1到100之间的数字，玩家需要在一定次数内猜出这个数字。
`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 randomNumber = Math.floor(Math.random() * 100) + 1;
var guessNumber = 0;
var attempts = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '24px Arial';
ctx.fillText('猜数字游戏：', 50, 50);
ctx.fillText('剩余次数：' + (10 - attempts), 50, 80);
ctx.fillText('请输入一个1到100之间的数字：', 50, 110);
ctx.fillText(guessNumber, 50, 140);
}
function checkNumber() {
guessNumber = parseInt(prompt('请输入一个数字：'));
attempts++;
if (guessNumber === randomNumber) {
alert('恭喜你，猜对了！');
location.reload();
} else if (guessNumber < randomNumber) {
alert('太小了！');
} else {
alert('太大了！');
}
draw();
}
draw();
document.addEventListener('keydown', function(e) {
if (e.keyCode === 32) {
checkNumber();
}
});
</script></body>
</html>
`
二、贪吃蛇游戏
贪吃蛇游戏是一款经典的小游戏，相信大家都不陌生。下面是使用JavaScript和HTML5 Canvas实现的一个贪吃蛇游戏源码。
`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: 150, y: 150}];
var food = {x: Math.floor(Math.random() 20) 20, y: Math.floor(Math.random() 20) 20};
var dx = 20;
var dy = 0;
var score = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(food.x, food.y, 20, 20);
for (var i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? 'green' : 'white';
ctx.fillRect(snake[i].x, snake[i].y, 20, 20);
}
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('得分：' + score, 5, 20);
}
function update() {
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() * 20) * 20, y: Math.floor(Math.random() * 20) * 20};
} else {
snake.pop();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(food.x, food.y, 20, 20);
for (var i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? 'green' : 'white';
ctx.fillRect(snake[i].x, snake[i].y, 20, 20);
}
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('得分：' + score, 5, 20);
}
function collision() {
for (var i = 0; i < snake.length; i++) {
if (snake[i].x === 400 || snake[i].x === -20 || snake[i].y === 400 || snake[i].y === -20) {
alert('游戏结束！');
location.reload();
}
for (var j = i + 1; j < snake.length; j++) {
if (snake[i].x === snake[j].x && snake[i].y === snake[j].y) {
alert('游戏结束！');
location.reload();
}
}
}
}
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37 && dx === 0) {
dx = -20;
dy = 0;
} else if (e.keyCode === 38 && dy === 0) {
dx = 0;
dy = -20;
} else if (e.keyCode === 39 && dx === 0) {
dx = 20;
dy = 0;
} else if (e.keyCode === 40 && dy === 0) {
dx = 0;
dy = 20;
}
});
setInterval(function() {
update();
draw();
collision();
}, 100);
</script></body>
</html>
`
三、弹球游戏
弹球游戏是一款简单有趣的小游戏，使用HTML5 Canvas和JavaScript实现。在这个游戏中，玩家需要控制一个弹球，使其碰撞到墙壁和障碍物，从而获得分数。
`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 ball = {x: 200, y: 200, dx: 5, dy: 5, radius: 10};
var paddle = {x: 200, y: 350, width: 100, height: 10};
var bricks = [];
var score = 0;
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (var i = 0; i < bricks.length; i++) {
ctx.beginPath();
ctx.rect(bricks[i].x, bricks[i].y, bricks[i].width, bricks[i].height);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
}
}
function collision() {
if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
ball.dx = -ball.dx;
}
if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
if (ball.x + ball.dx > paddle.x && ball.x + ball.dx < paddle.x + paddle.width && ball.y + ball.dy > paddle.y) {
ball.dy = -ball.dy;
}
for (var i = 0; i < bricks.length; i++) {
if (ball.x + ball.dx > bricks[i].x && ball.x + ball.dx < bricks[i].x + bricks[i].width && ball.y + ball.dy > bricks[i].y && ball.y + ball.dy < bricks[i].y + bricks[i].height) {
ball.dy = -ball.dy;
bricks.splice(i, 1);
score++;
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
drawBricks();
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('得分：' + score, 5, 20);
}
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
paddle.x -= 20;
} else if (e.keyCode === 39) {
paddle.x += 20;
}
});
setInterval(function() {
ball.x += ball.dx;
ball.y += ball.dy;
collision();
draw();
}, 10);
</script></body>
</html>
`
总结：
通过以上三个简单的JS小游戏源码，相信你已经对使用JavaScript制作小游戏有了初步的了解。在实际开发过程中，你可以根据自己的需求，对源码进行修改和优化。希望这些源码能够帮助你开启编程之旅，让你的JS技能更加出色！