所属分类：web前端开发
在当下，JavaScript已经成为前端开发中必不可少的一项技能，它不仅可以开发网页交互效果，还能实现简单的小游戏。本文将介绍如何用JavaScript来编写小游戏。
一、准备工作
在本地电脑上创建一个新的文件夹，取一个合适的名字。在文件夹中新建一个 HTML 文件，在文件头部添加以下代码：
微博登录
QQ登录<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Game</title>
</head>
<body>
</body>
<script src="main.js"></script>
</html>登录后复制这里的main.js就是将要编写的JavaScript脚本文件，这里引用的是已创建完成的文件。创建main.js文件，和HTML文件放在同一个文件夹下，此时我们就可以开始编写JavaScript代码了。
二、编写游戏
首先，在 HTML 文件中创建一个canvas元素，用来渲染游戏画面。
<body>
<canvas id="myCanvas"></canvas>
</body>登录后复制在 JavaScript 文件中，获取该元素的上下文（context），并将其保存在变量中。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");登录后复制现在，我们已经可以在canvas画布上绘制图形了。
接下来，我们需要绘制游戏的背景和其他物体。在这里，我们可以分别定义不同的函数来绘制不同的物体，比如背景、球和挡板等。在这里，我们先定义一个函数，来绘制游戏的背景。
function drawBackground() {
ctx.fillStyle = "#3c3c3c";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}登录后复制在这个函数里，我们首先定义了一个颜色值用来填充画布背景，然后使用fillRect()方法来填充整个画布。
现在，我们已经拥有了用来绘制画布上各种物体的函数，该开始让游戏开始“动起来”了。
在这里，我们可以使用函数的递归调用方式来实现不断刷新游戏画面。这里我们定义一个函数update()，然后用window.requestAnimationFrame()来调用它，开始刷新游戏。
function update() {
drawBackground();
requestAnimationFrame(update);
}
update(); // 调用 update() 函数以开始刷新游戏登录后复制在这个函数里，我们首先调用了drawBackground()函数来绘制游戏的背景。然后，我们使用requestAnimationFrame()函数调用了update()函数本身，来实现不断重复更新游戏画面的效果。
现在，我们已经可以在画布上绘制物体了，接下来我们需要加入控制球移动方向的操作。首先，我们定义一个小球保存用来记录它的位置信息，和方向信息。
var ball = {
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2,
radius: 10
};登录后复制在这个对象中，我们定义了球的起始位置（即画布的中心位置），dx和dy表示球的初始移动方向，radius为球的半径。
在update()函数中，我们可以添加对球移动、碰撞检测等操作的代码。
function update() {
drawBackground();
// 移动球
ball.x += ball.dx;
ball.y += ball.dy;
// 碰撞检测
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;
}
requestAnimationFrame(update);
}
update();登录后复制在这个函数中，我们首先计算了球的移动，然后通过碰撞检测来检测球是否触碰了画布边缘。若是，则将球的运动方向反转，然后继续移动。
现在我们已经控制好了球的方向和行动，接下来需要加入控制挡板移动的操作。
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
var rightPressed = false;
var leftPressed = false;
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
function update() {
drawBackground();
drawPaddle();
// 移动球
ball.x += ball.dx;
ball.y += ball.dy;
// 控制挡板移动
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
// 碰撞检测
if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
ball.dx = -ball.dx;
}
if(ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
else if(ball.y + ball.dy > canvas.height-ball.radius) {
if(ball.x > paddleX && ball.x < paddleX + paddleWidth) {
ball.dy = -ball.dy;
}
else {
alert("游戏结束");
document.location.reload();
clearInterval(interval);
}
}
requestAnimationFrame(update);
}
update();登录后复制在这里，我们首先定义了一个挡板的位置，和其长度、高度。然后我们通过drawPaddle()函数来绘制挡板，接下来监听keydown和keyup事件，检测用户是否按下相应的按键来移动挡板。
同时，在这个函数中，还需要添加对球与挡板的碰撞进行检测的代码。若球触碰到挡板，则将球的y方向直接反转，默认情况下球将一直运动而不能停止运动。当球完全打出画布下方，游戏结束。
三、小结
到此为止，我们已经完成了一个小型的JavaScript游戏的编写。这是一个简单的小游戏例子，我们只是了用HTML5画布、JavaScript脚本完成了一个基础的游戏。
当然，这些代码只是本文提供的一个例子，可以用来作为游戏编写的基础。如果我们要编写更为复杂玩法的大型游戏，需要我们更加深入地学习JavaScript基础知识和游戏开发技巧。
如果你还没有接触过这个领域，那么试着按照本文的介绍，写一个自己的小游戏吧！
以上就是如何用javascript写小游戏的详细内容，更多请关注zzsucai.com其它相关文章！
