源码加油站

全部分类
全部分类
基于HTML和JS西瓜皮斯拉小游戏+说明

基于HTML和JS西瓜皮斯拉小游戏+说明

编号:youxi1005

价格
60.00
  • 库存200
  • 销量0
  • 热度592
可选规格
首页

基于HTML和JS实现的西瓜皮斯拉小游戏(附带说明文档)

一、作品设计

1.1 作品主题

《西瓜皮斯拉》是一款宣传保护海洋动物、保护环境的硬核小游戏。

  • 作品意义:希望能让玩家在游戏中学到保护海洋的重要性

  • 灵感来源:游戏角色来源于DOTA2英雄船长昆卡和潮汐猎人。 游戏背景借鉴于电影《哥斯拉》

1.2 作品设计思路

游戏背景讲述了在人类重度污染下产生变异的生物向人类发起复仇的故事,通过让玩家扮演英雄昆卡与之进行战斗,引发玩家对于现代人类为了发展而过度破坏自然环境的思考。

1.3 实现思路及表现手法

应用角色扮演的方式让玩家代入其中,通过高难度的过关流程让玩家在一次又一次的失败中深刻地感受到破坏环境所带来的严重后果,激发玩家的环境保护意识。

1.4 功能模块

1.4.1 主界面模块

游戏的整个界面由1个包含2个同样大小的canvas元素(以下用canvas1和canvas2分别代指左边和右边的canvas)的html界面构成,用于显示游戏的画面并进行用户的交互。

分为开始界面和结束界面两块。

1.4.2 角色模块

canvas中玩家可操控的人物本身采用键盘控制,实现角色在各自的canvas元素中自由移动。

玩家可操控的人物具有攻击、生命值、法力值、经验值、等级和移动速度等属性。游戏中canvas的会显示角色的属性。

1.4.3 游戏内容模块

单人模式

  • canvas1中每回合会以一定的频率在随机位置产生能力值在一定范围内随机的怪物,怪物会朝向人物移动,撞击后对其造成伤害。每一回合怪物出现的频率都会有所增加

  • 玩家通过射出子弹或施放技能击杀怪物可以获取与其能力值成比的分数,并显示在canvas的上部。击杀怪物还可以获得经验值,达到规定的经验值角色可以升级,其各项能力值得到提升,并且回复所有的生命值和魔法值

  • 在每一回合游戏结束之后,canvas中间会显示红蓝两个传送门,玩家在进入传送门区域后通过点击空格键确认,来增加生命值上限或者魔法值上限,并且开始下一回合的战斗

  • canvas2中为boss挑战场景,玩家在canvas1中进行与多人模式中基本相同的游戏模式,同时canvas2中的boss随着时间不断地变强

  • 玩家击杀怪物可以获得挑战boss的资格,会用进度条显示在canvas的上部,届时游戏中间会出现另一个boss传送门,玩家可以随时选择进入该传送门点击空格键确定,进入canvas2中进行boss战

  • 玩家生命值为0即为失败,boss生命值为0即玩家胜利

双人模式

  • canvas1和canvas2均采用单人模式中canvas1中的战斗模式,但取消了boss战以及相关功能,取消了射出子弹的功能,增加了每秒回蓝。玩家只能使用技能来击杀怪物

  • 每回合结束后双方玩家可以根据自己的喜好选择生命值上限或者魔法值上限的提升

  • 双方玩家以生存更长的时间为目的进行竞技,任何一方的生命值归零时游戏结束,另一方获得游戏的胜利

二、代码设计

2.1 模块设计(冒号后为子模块)

2.1.1 角色模块

  • 人物:人物移动、人物属性、人物攻击、人物技能、经验系统

  • 怪物:怪物移动、怪物属性、怪物攻击、怪物属性值随机、击杀给予经验和分数

  • Boss:boss移动、boss属性、boss攻击、boss技能、boss能力值随时间增长

2.1.2 主界面模块

游戏开始结束界面、开始按钮、剧情背景文字、结束信息、人物属性面板。

游戏内容模块,怪物随机生成位置、战斗的伤害判定。

2.2 流程设计

  • 移动部分:人物、怪物移动和boss的移动均采用设置上下左右四个布尔型变量,其中人物由键盘输入激活相应方向的变量使其坐标根据移动速度产生变化。而boss和怪物则通过获取人物的坐标来判定需要移动的方向,自动决定四个变量的值,并根据移动速度进行移动

  • 属性值部分:通过对象的属性实现,并在需要的时候进行修改

  • 攻击部分:通过键盘输入指令,按照一定频率生成子弹对象,并将其存入队列中,在其击中敌人或者飞离canvas可视范围之外后将其销毁

  • 伤害判定部分:主要包括矩形与矩形、矩形与圆形是否相交的判定,若有相交则攻击/技能生效,修改相应的属性值

  • 经验系统:击杀怪物后人物经验值属性会得到增加,达到经验值上限后可以升级,并且通过一定系数提升各项能力值,回复所有生命值和法力值,并且提高下一级升级所需要的经验值上限

  • 技能系统:人物通过从键盘读入指令决定施放技能的种类,再调用函数施放技能。Boss通过预先设定不同技能的几率,再随机生成0到100的数来随机决定施放的技能,并调用相应的函数

  • boss成长:设定一定的时间间隔,每隔一定的时间间隔,boss的各项属性包括大小都会有所提升

所需要素材文件:

  • 图片:游戏开始界面图,游戏结束界面图

  • 音乐:游戏背景音乐

2.3 流程图

                                                   图片.png

角色模块,包括人物主角,怪物和BOSS都通过定义对象,子模块在对象中实现。在游戏主场景调用对象。

主界面模块作为游戏的整个流程线,设置各个界面模块的次序。

游戏内容模块在主界面模块中调用实现效果。

整个文件夹包括 代码文件夹、音乐文件夹和图片文件夹。

在代码文件夹中,创建不同模块文件夹。

调用逻辑

  • 先调用游戏开始界面模块,进入游戏开始界面

  • 通过鼠标点击选择模式,调用游戏界面模块,进入游戏相对应模式中

  • 在相应模式中调用 角色模块 和 怪物模块 生成角色和怪物,产生战斗。其中包含游戏内容模块,怪物随机生成位置、战斗的伤害判定

  • 当目标达成进入Boss界面,调用Boss界面模块和Boss模块,使角色和Boss进行战斗

  • 当人物死亡或Boss死亡,调用结束界面模块

Xia文件包

  • Cover.js:游戏开始界面 过场动画 开始按钮

  • mainGame.js:游戏主界面 人物属性面板 提示文字

  • over.js:游戏结束界面 过场动画 结束按钮

  • Public_function.js:通用函数

  • Statement.js:变量声明

  • requestNextAnimationFrame.js:动画函数

Pan文件包

  • object.js:游戏人物移动、属性、攻击、技能 小怪群 怪物站点

  • buckets.min.js:框架:提供一些数据结构,用到了List

  • victor.min.js框架: 提供向量以及向量的各种操作

Fang文件包

bossobject  boss移动、boss属性、boss攻击、boss技能、boss能力值随时间增长

三、游戏展示

初始界面

图片.png

游戏教程

图片.png

游戏画面

图片.png

游戏结束

图片.png




用户中心
我的足迹
我的收藏

您的购物车还是空的,您可以

  • 微信公众号

    微信公众号
在线留言
返回顶部
×

打开微信,点击底部的“发现”

使用“扫一扫”即可将网页分享至朋友圈

×
复制