类别:实用小技巧 / 日期:2021-02-08 / 浏览:8 / 评论:0

自己怎样制作网页游戏(网页游戏制作方法)

这个游戏用到的知识包括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=newcreatejs.LoadQueue(true); preload.on("plete",handleComplete); preload.loadManifest(manifest,true,"img/"); }

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

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

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

开球画面

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

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

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

结束画面

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

User数据表

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

game数据表

你觉得这个游戏怎么样?或者你想做别的游戏吗

评论区

ad2

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。