基于html的火柴人羽毛球游戏

一、游戏简介

火柴人羽毛球灵感来自于flash小游戏

游戏中，玩家可操作画面中的火柴人来进行羽毛球比赛

通过键盘上的左右键控制火柴人的左右移动，按上键跳跃，按下键挥拍击球

当某一方分数达到7分即判定取胜

玩家可以选择与其他玩家对战、与不同难度AI对战，以及观看AI对战

二、游戏实现

2.1 绘图部分

该游戏为实时性游戏，为保证流畅，采用了游戏常用的60fps的帧率。每一帧绘制的内容包括背景图片、当前比分、火柴人以及羽毛球。

下面分别介绍绘图部分的各个细节：

半透明图片

常见的GDI库只能绘制BMP图片，其附带的透明选项也只是选取图片左上角像素作为透明颜色，并不能实现真正的半透明绘图，画出的图片常会带有丑陋的白边。

为了解决这一问题，我们使用了GDI+库，它支持各种各样的图片格式，当然也就包括含有透明通道的PNG格式。有了GDI+，我们也就实现了更为精美的游戏画面。

双缓冲绘图

绘制出图片并完成一些简单的动画后，我们发现在刷新一帧时，画面会出现闪烁。想到以前使用MFC编程时曾接触过双缓冲绘图方法。画面出现闪烁的原因是绘图时多次把像素转移到屏幕上，而双缓冲可以先在内存中建立起一块画布，等到在内存中全部绘完，再调用BitBlt函数将像素逐个复制到屏幕上。这样便避免了画面的闪烁。

局部刷新

GDI+固然比GDI功能强大，但它绘图效率低是不容忽视的问题。与Direct2D使用显卡绘图不同，GDI+使用的是CPU，再加上我们的游戏需要绘制很多元素，对绘图优化就显得很有必要。我们注意到，切换一帧时，并不是全部元素都需要重新绘制，因此也就可以使用局部刷新技术，只重绘更新了的区域。

人物动画

在FLASH中，开发者可添加一种名为影片剪辑的元素，它可以做与主时间轴异步的动画，影片剪辑可以极大地方便动画的制作。然而，汇编语言并没有强大的动画制作工具，实现精细的动画也就需要很复杂的处理。

例如，绘制人物时，手臂挥拍、脚步移动、跳起时阴影保留在地面上，这些是各自独立的。我们将小人的图像拆解开来，分别画四个部分，这就实现了游戏中小人复杂的运动。

点击此处下载源码