2024年怎么做网页游戏？（分享之前做的一个小游戏）

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

今天分享之前做的一个小游戏，是当时学习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个沙狐球，轮流发球，最后谁的球最靠前则得分最高，赢得比赛。

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

开球画面

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

微信扫码上方二维码，可领取2025年最新互联网创业项目！

项目收款截图