网页游戏怎么制作？教你做一个简单的网页游戏，附完整源码

学习编程需要带着目的去学，这样才会达到事半功倍的效果，而且才会有更多成就感。

今天分享之前做的一个小游戏，是当时学习tween.js网页动画插件时做的，各位

可以点击 http://www.51hufen.cn/shahu/ 进行试玩。

这个游戏用到的知识包括HTML/CSS/JS/JQuery/Ajax, 后台使用asp语言，数据库就用MDB。

这个沙狐球游戏现实中很多人玩过，不过网络上这个游戏很少见，所以我空闲时做了这个。

既可以单人和电脑玩，也可以双人对战，这里简单介绍一下编写思路。

下面是首页，有开始游戏和游戏规则介绍按钮，自己网上找的图片，无任何美工水平，见谅。

游戏首页

点击开始游戏也有两个选项，一个是双人，一个是人机对战。

选择游戏模式

游戏使用了简单的绿色背景，主要精力花在画球桌和沙狐球上，当然也是网上搜的图片，包括球桌中心的木纹，四周的深色边框，以及红色和蓝色的沙狐球，这效果我已经很满意了，毕竟业余。

初始设计的屏幕（画布）的尺寸如下，比较符合主流手机屏幕的分辨率要求：

canvas.width = 720;canvas.height = 950;

但实际沙狐球桌是很长的，我做的中间台面的尺寸就达到241*2637像素，屏幕上无法显示的区域就放在屏幕之外，下面是预加载的所有图片，也是tween.js所推荐的，通过预加载能提高反应速度。

		manifest = [			{src: "start.png", id: "startPage"},			{src: "sa.png", id: "txtSahuqiu"},			{src: "startbtn.png", id: "startBtn"},			{src: "helpbtn.png", id: "helpBtn"},			{src: "board.png", id: "board"},			{src: "left.png", id: "left"},			{src: "right.png", id: "right"},			{src: "top.png", id: "top"},			{src: "bottom.png", id: "bottom"},			{src: "red.png", id: "red"},			{src: "blue.png", id: "blue"},			{src: "man1.png", id: "man"},			{src: "machine1.png", id: "machine"}		];	    preload = new createjs.LoadQueue(true);		preload.on("complete", handleComplete);		preload.loadManifest(manifest, true, "img/");		}

在玩家开始游戏之后，后台需要根据玩家的游戏类型进行处理，如果是双人游戏，需要判断是否有其他人也在申请游戏，有则两人对战，建立游戏ID，如果是人机对战，则直接建立游戏ID，开始游戏。

游戏设计每方4个沙狐球，轮流发球，最后谁的球最靠前则得分最高，赢得比赛。

为方便玩家开球，需要画一个辅助箭头指示运动方向，同时拉动鼠标时改变箭头长度，表示力度的大小。

开球画面

因为开球时球在屏幕下部，开球后球会玩上运动，运动到上部时球不能继续前进，否则就超出屏幕看不到了。此时改成球桌做相对运动，往下走，看起来好像球在往上动一样。

这里我给机器玩家一个大致的方向和大致的力度，模拟机器发球，水平和给的数据有很大的关系，当然更智能的话可以再模拟一些发球技巧等，这里没作更多的尝试了。

等所有球用完之后，游戏结束，根据球的位置判断哪方得分更高，显示比赛结果。

结束画面

最后说说数据库，只有user和game两个数据表，其中user保存游戏玩家的数据，包括用户名，游戏状态，游戏ID，赢球次数等信息。

User数据表

game数据表主要保存游戏数据，包括游戏的双方玩家名称，哪方开球，第几回合，球的状态，以及每回合的数据等。

game数据表

你觉得这个游戏怎么样？或者你想做别的游戏吗？欢迎探讨，谢谢支持。

有需要完整代码的请回复，希望大家能共同提高编程水平。