世界弹射物语模拟抽卡

莫问嫌弃

已于 2022-06-21 15:14:07 修改

阅读量4.8k

点赞数 2

文章标签：游戏

于 2022-01-27 17:15:16 首次发布

本文链接：https://blog.csdn.net/chenahong0201/article/details/122717620

版权

本文介绍了作者如何利用HTML和JS模拟《世界弹射物语》的抽卡过程，包括角色对象定义、卡池数据准备、页面绘制、抽卡逻辑实现，特别是脑溢血动画的模拟。代码可供查看，文章最后提出了未来可能的改进方向。

摘要由CSDN通过智能技术生成

世界弹射物语模拟抽卡

前言
一框架介绍
- 角色对象
二准备数据
三绘制页面
四编写逻辑
五最终效果
六总结
- - 关注微信小程序

前言

由于最近玩到喜欢的游戏【世界弹射物语】（国服）。并且抽卡太非。所以萌生了自己写一个模拟抽卡的小玩意。（半吊子html和js）
在弹射的抽卡中，最有趣的就是抽卡脑溢血画面。也简单的在模拟中体现。
感谢弹射物语磁场提供的素材。
在这里插入图片描述

一框架介绍

由于只是一个简单的抽卡模拟，所以框架也相对简单很多。

世界弹射物语
│
├─js 存放 逻辑与数据
│  │ 
│  └─chou.js 主要的抽卡逻辑
│  │
│  └─ data.js 卡池数据
│
├─static 静态资源文件
│  │ 
│  └─avatar 头像文件夹
│  │
│  └─paint 立绘文件夹
│ 
└─main.html 页面入口

角色对象

在卡池中，需要添加角色。所以定义了角色对象。以下面角色为例：
在这里插入图片描述

beads = {
   
  showXing: 3,  // 显示星数（从几星开始歪，虽少3星，不能是5星）
  xing: 5,  // 星数
  name: "贝瑞塔",  // 名字
  attr: "光",  // 属性
  pool: [{
   type: "常驻", up: 1}, {
   type: "光"}],  // 所属卡池，可以归属多个，其中up为在 100%中的 百分比概率，1表示 1%
  avatar: "",  // 头像文件，头像保存的路径需要在static/avatar文件夹下，并且命名与 name 一致，后缀为：png
  paint: "",  // 立绘文件，分成觉醒前与觉醒后两种立绘
  model: "",  // 模型文件，像素小人模型
  naoYiXue: {
     // 脑溢血, 抽卡的精髓动画。将画面切割成4部分，两次弹跳。两次碰撞。
    fanTan1: 4,  // 第一个反弹区域(随机 [1,5] 次)
    peng1: 1,  // 第一个碰撞区域：1-碰到；2-近距离（慢动作）；3-远距离（快速过）
    fanTan2: 3,  // 第二个反弹区域(随机 [1,3] 次)
    peng2: 1,  // 第二个碰撞区域：1-碰到；2-近距离（慢动作）；3-远距离（快速过）
  }
}

二准备数据

既然角色对象已经有了，就可以准备卡池数据。以备抽卡使用。准备的数据不需要太多，只要没种两三条即可。
数据内容需要包括：常驻，UP，三星，四星，五星等场景。

var info = [
   // 五星卡池
  {
   name:"贝瑞塔", xing: 5, attr:"光", pool:[{
   type:"常"}]},
  {
   name:"玛丽安(圣诞)", xing: 5, attr:"火", pool:[{
   type:"圣", up: 1}]},
  {
   name:"罗尔夫", xing: 5, attr:"火", pool:[{
   type:"常", up: 1}]},
  
	// 四星卡池
  {
   name:"莉洁儿", xing: 4, attr:"水", pool:[{
   type:"常", up: 1}]},
  {
   name:"索薇", xing: 4, attr:"水", pool:[{
   type:"常"}]},
  {
   name:"蛟蛇", xing: 4, attr:"水", pool:[{
   type:"常"}]},
  
	// 三星卡池
  {
   name:"可兰", xing: 3, attr:"火", pool:[{
   type:"常", up: 1}]},
  {
   name:"哈里莎", xing: 3, attr:"火", pool:[{
   type:"常"}]},
  {
   name:"梅米", xing: 3, attr:"火", pool:[{
   type:"常"}]},
  {
   name:"莉莉露", xing: 3, attr:"火", pool:[{
   type:"常"}]},
  {
   name:"杰克", xing: 3, attr:"火", pool:[{
   type:"常"}]},
];
// -----------------------对 卡池角色 进行归类------------------
// 三星卡池
var sanInfo = info.filter(i => i.xing == 3);
// 根据卡池类型，获取三星up的卡池
var sanUpInfo = function(type) {
   
  return sanInfo.filter(s => s.pool.filter(p => p.type === type && p.up > 0).length > 0);
}
// 根据卡池类型，获取三星非up的卡池
var sanNoUpInfo = function(type) {
   
  return sanInfo.filter(s => s.pool.filter(p => p.type === type && (!p.up || p.up < 0)).length > 0);
}

// 四星卡池
var siInfo = info.filter(i => i.xing == 4);
// 根据卡池类型，获取四星up的卡池
var siUpInfo = function(type) {
   
  return siInfo.filter(s => s.pool.filter(p => p.type === type && p.up > 0).length > 0);
}
// 根据卡池类型，获取四星非up的卡池
var siNoUpInfo = function(type) {
   
  return siInfo.filter(s => s.pool.filter(p => p.type === type && (!p.up || p.up < 0)).length > 0);
}

// 五星卡池
var wuInfo = info.filter(i => i.xing == 5);
// 根据卡池类型，获取五星up的卡池
var wuUpInfo = function(type) {
   
  return wuInfo.filter(s => s.pool.filter(p => p.type === type && p.up > 0).length > 0);
}
// 根据卡池类型，获取五星非up的卡池
var wuNoUpInfo = function(type) {
   
  return wuInfo.filter(s => s.pool.filter(p => p.type === type && (!p.up || p.up < 0)).length > 0);
}

说明：上面的数据函盖了常驻卡池，圣诞卡池，角色概率UP的场景。足够使用。

三绘制页面

因为是抽卡游戏，所以大体上为两个按钮（单抽与十连），一个画面显示区域
如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>世界弹射物语 模拟抽卡

最低0.47元/天解锁文章

莫问嫌弃

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

世界弹射物语 模拟抽卡

世界弹射物语 模拟抽卡

前言

一 框架介绍

角色对象

二 准备数据

三 绘制页面

世界弹射物语模拟抽卡

世界弹射物语模拟抽卡

一框架介绍

二准备数据

三绘制页面