简单的网页游戏附完整源码-web游戏源码分享

2022-03-29 369 天才饕餮

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

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

可以点一下 / 进行试玩。

这种游戏用到的知识包括html/css/JS/jQuery/Ajax, 后台使用asp语言，资料库就用MDB。

这种沙狐球游戏线下中无数人玩过，不过互联网上这种游戏很少见，所以我闲时做了这种。

既可以单人和计算机玩，也完全可以2人对战，这里简单讲解一下编编辑思路。

下面是首页，有开始游戏和游戏规则讲解按钮，自己互联网找的图片，无所有美工水平，见谅。

游戏首页

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

选择游戏模式

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

初始设计的屏幕（画布）的尺寸如下，比较符合大众手机的屏幕的分辨率门槛：

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/"); }在用户开始游戏之后，后台需要根据用户的游戏类别进行处理，如果是2人游戏，需要判断是否有很多人也在申请游戏，有则两人对战，建立游戏ID，如果是人机对战，则直接建立游戏ID，开始游戏。

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

为方便用户开球，需要画一个辅助箭头指示健身方向，同一时间拉动鼠标时变化箭头长度，表示力度的大小。