做网页游戏需要什么(怎么做网页换装游戏)

很多小伙伴留言想了解关于做网页游戏需要什么的一些详细内容,下面是()小编整理的与做网页游戏需要什么相关的信息分享给大家,希望对大家有所帮助呢。

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

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

可以点击 http://.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("plete", handleComplete);preload.loadManifest(manifest, true, "img/");}

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

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

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

开球画面

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

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

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

结束画面

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

User数据表

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

game数据表

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

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

原文链接:,转发请注明来源!