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

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

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

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

开球界面

因为开球时球在屏幕下部。开球后球会玩上健身。健身到上部时球不可以继续前进。不然就超出屏幕就这样看不到了。此时此刻改成球桌做相对健身。往下走。就这样看起来貌似球在往上动一样。

这里我给机器用户一个大致的方向和大致的力度。模拟机器发球。水平和给的资料有蛮大的关系。当然更AI智能的话可以再模拟有的发球技术等。这里没作再多的尝试了。

等任何球用完之后。游戏结束。根据球的地点判断哪方分数更高。展现比赛结果。

结束界面

末尾发表资料库。只有user和game两个资料表。之中user保存游戏用户的资料。包括玩家名。游戏情况。游戏ID。赢球次数等消息。

User资料表

game资料表主要保存游戏资料。包括游戏的双方用户名称。哪方开球。第几回合。球的情况。以及每回合的资料等。

game资料表

你认为这种游戏怎么样？或者你想做其他游戏吗？欢迎探讨。谢谢接受。

有需要完全代码的请回复。渴望各位能齐心全力提升编程水平。

您还感兴趣的文章推荐

• 十大帅哥明星排行榜 全球颜值排名前十男2021
• 好用的睫毛膏十大排行榜10强 大家用过最好用的睫毛膏
• 最帅的人是谁 第一名 2020全球最帅100人完整排行榜
• 全球最帅的男人排行榜 盘点历届全球最性感男人今昔对比照
• 搞笑韩剧排行榜前十名 浪漫搞笑爱情喜剧韩剧

以上就是由互联网推广工程师 桔子生活网 整理编辑的，如果觉得有帮助欢迎收藏转发~