第八讲：HTML5中canvas实现小球击打小方块游戏

原创

于 2014-06-09 13:45:42 发布 · 3.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用HTML5的canvas元素开发一款小球击打小方块的游戏。详细讲解了游戏开发流程，包括创建画布、生成小球和小方块、监听键盘事件实现小方块移动、处理小球的碰撞反弹以及判断游戏成功或失败的方法。同时还提供了源代码链接供读者参考和下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建画布：

将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样一来使其看上去像手机，利于观看。

<div id="main">
  <!--将画布嵌在div块里面,使其可以居中-->
  <canvas id="liuming_canvas" width="300px" height="500px">
  </canvas>
</div>

2、创建移动的小木块：

定义一个可以用于移动的小方块，该移动小方块包含如下的属性，坐标位置，小方块的长和宽和小方块每次移动的距离。

var diamond = {
  x : 100,   
  y : 485,
  width : 100,
  height : 15,
  move : 10
}

3、创建用于击打的小球：

定义一个用于移动和击打小方块的小球，该小球包含如下的属性，小球的做坐标位置，半径，在x轴和y轴的速度。其中x轴和y轴的速度是为小球计算移动的方向和移动之后的坐标值。

var  ball_impact = {
  x : 150,
  y : 465,
  r : 10,
  vx : 2

200万优质内容无限畅学