一、准备工作
在本地电脑上创建一个新的文件夹，取一个合适的名字。在文件夹中新建一个 html 文件，在文件头部添加以下代码：
<!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写小游戏的详细内容。