关于游戏的灵感来源

今年元宵节的时候，我玩的小游戏里面有限时任务，可以解锁节日限定物品，于是那几天我玩的很欢乐很积极。端午节到来之前，我想玩一下身份转换，从玩家转换到游戏策划。一个有趣的想法在脑海中逐渐清晰。

假如我是游戏策划

假如我是游戏策划，首先会对自己灵魂三连问：活动内容什么？活动怎么玩？活动奖励是什么？

现有大体的想法，然后再拆分到各个细节中去。

因为游戏中的一些场景搭配、日常活动名称、称号等借鉴了我最近沉迷的游戏《美人传》，所以这次的游戏仅供学习练习，不做任何商业用途。

产品视角

站在产品的角度思考活动设计，我的产品视角是这样的：

一入夏，就盼着假期，过了五一很快就会到端午，一想到端午就不由自主的想到美味的粽子。所以端午的活动就来了，包粽子。众所周知，包粽子需要糯米、粽叶等必备材料，而粽子的内馅有很多种，本次活动中需要的是红枣。所以包粽子的材料就选定了糯米、粽叶、红枣三种。（活动内容是什么）

游戏中有日常收集任务，每个收集任务掉落的材料都是固定的。活动期间一般会增加活动材料限时掉落，所以在活动期间，日常收集时会掉落包粽子需要的材料，不同收集任务掉落不同材料。（活动怎么玩）

粽子积累到一定数量就可以兑换节日限定物品。一般游戏中的节日限定物品都是精心设计的，但是由于时间和精力有限，我这次活动设计的比较简单，不同数量的粽子可以兑换不同的称号，最高称号为“荣宠万千”。（活动奖励是什么）

(＾Ｕ＾)ノ~ＹＯ，一切准备就绪，开始干活。

交互设计

大致画了一下设计草图，帮助理清楚布局思路。（第一次画，还有待提高。）

首页

日常任务

端午活动

功能设计

首页

内容

主要包括用户信息、任务入口、活动入口等展示。

称号规则

称号和糯米粽子数量对应如下：

称号	糯米粽子数量
殿上佳人	<50
淑仪倾城	>=50 && < 100
花容初绽	>=100 && < 200
花成蜜就	>=200 && < 300
宠冠六宫	>=300 && < 400
凤仪千载	>=400

功能实现

首页页面

/** * @description 首页 */importReactfrom'react';
import { useHistory } from'react-router-dom';
importAvatarfrom'@/components/Avatar';
importFlowerClusterfrom'@/components/FlowerCluster';
import { Button } from'antd-mobile';
import'./index.less';
constHome= () => {
consthistory=useHistory();
// 页面跳转constgoTo=path=> {
history.push(path);
  };
// 入口展示constentranceContent= () => {
return (
<divclassName='home-entrance'><Buttonblockshape='rounded'className='entrance-btn'onClick={() =>goTo('/tasks')}>日常任务</Button><Buttonblockshape='rounded'className='entrance-btn'onClick={() =>goTo('/festival')}>端午活动</Button></div>    );
  };
return (
<divclassName='home'><divclassName='home-head'><Avatar/></div><divclassName='home-center'></div><divclassName='home-bg'>        {/* 门 */}
<divclassName='door'><divclassName='door-beam'><divclassName='tiaoliang'></div></div><divclassName='door-frame'><divclassName='door-top'></div><divclassName='door-line door-line-left'></div><divclassName='door-line door-line-right'></div><divclassName='door-line door-line-bottom'></div><divclassName='door-frame'><divclassName='stick-h stick-h1'></div><divclassName='stick-h stick-h2'></div><divclassName='stick-h stick-h3'></div><divclassName='stick-h stick-h4'></div><divclassName='stick-h stick-h5'></div><divclassName='stick-h stick-h6'></div><divclassName='stick-h stick-h7'></div><divclassName='stick-h stick-h8'></div><divclassName='stick-h stick-h9'></div><divclassName='stick-h stick-h10'></div><divclassName='stick-h stick-h11'></div><divclassName='stick-h stick-h12'></div><divclassName='stick-d stick-d1'></div><divclassName='stick-d stick-d2'></div><divclassName='stick-d stick-d3'></div><divclassName='stick-d stick-d4'></div><divclassName='stick-d stick-d5'></div><divclassName='stick-d stick-d6'></div></div><divclassName='door-opening'><divclassName='door-opening-center'>{entranceContent()}</div><divclassName='door-opening-decorate door-opening-decorate1'></div><divclassName='door-opening-decorate door-opening-decorate2'></div><divclassName='door-opening-decorate door-opening-decorate3'></div><divclassName='door-opening-flowers'><FlowerCluster/></div></div></div></div>        {/* 地板 */}
<divclassName='floor'><divclassName='floor-line floor-line1'></div><divclassName='floor-line floor-line2'></div><divclassName='floor-line floor-line3'></div><divclassName='floor-line floor-line4'></div><divclassName='floor-line floor-line5'></div><divclassName='floor-line floor-line6'></div><divclassName='floor-line floor-line7'></div><divclassName='floor-line floor-line8'></div><divclassName='floor-line floor-line9'></div><divclassName='floor-line floor-line10'></div><divclassName='home-cat'><divclassName='body'></div><divclassName='head'><divclassName='ear ear-left'></div><divclassName='ear ear-right'></div><divclassName='nose'></div><divclassName='whisker whisker-left'></div><divclassName='whisker whisker-right'></div></div><divclassName='tail'><divclassName='tail-line'></div><divclassName='tail-round'></div><divclassName='tail-end'></div></div></div><divclassName='home-table'></div></div></div></div>  );
};
exportdefaultHome;

样式

.home {
width: 100%;
height: 100vh;
position: relative;
background: #46272d;&-head {
width: 100%;
height: 60px;
background: #f3a29f;position: relative;
  }
&-center {
width: 200px;
height: 200px;
z-index: 99;
margin-top: 60px;
  }
&-bg {
width: 100%;
position: absolute;
top: 70px;
left: 0;
z-index: 10;
    .door {
&-beam {
width: 100%;
height: 90px;
border-top:3pxsolid#9b6d59;background: #825146;position: relative;
        .tiaoliang {
width: 100%;
height: 50px;
background: #4e2e29;background-image: repeating-linear-gradient(45deg, transparent, transparent13px, #9b6d59 13px, #9b6d59 15px), repeating-linear-gradient(-45deg, transparent, transparent 13px, #9b6d59 13px, #9b6d59 15px);border-top: 5pxsolid#f5a672;border-bottom: 5pxsolid#f5a672;position: absolute;
top: 20px;
left: 0;
        }
      }
&-frame {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
        .door-top {
width: 100%;
height: 30px;
border-top: 4pxsolid#f5a672;border-bottom: 4pxsolid#f5a672;background: #89544c;position: absolute;
top: 0;
left: 0;
z-index: 99;
        }
        .door-line {    
background: #673a35;position: absolute;
z-index: 89;
&-left{
width: 15px;
height: 100%;
top: 0;
left: 0;
border-right: 2pxsolid#815345;          }
&-right{
width: 15px;
height: 100%;
top: 0;
right: 0;
border-left: 2pxsolid#815345;          }
&-bottom{
width: 100%;
height: 15px;
bottom: 0;
left: 0;
z-index: 87;
border-top: 2pxsolid#815345;          }
        }
        .door-frame {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
          .stick-h {
width: 6px;
height: 100%;
background: #774747;position: absolute;
top: 50px;
          }
          .stick-h1 {
left: 30px;
          }
          .stick-h2 {
left: 70px;
          }
          .stick-h3 {
left: 85px;
          }
          .stick-h4 {
left: 100px;
          }
          .stick-h5 {
left: 115px;
          }
          .stick-h6 {
left: 130px;
          }
          .stick-h7 {
right: 130px;
          }
          .stick-h8 {
right: 115px;
          }
          .stick-h9 {
right: 100px;
          }
          .stick-h10 {
right: 85px;
          }
          .stick-h11 {
right: 70px;
          }
          .stick-h12 {
right: 30px;
          }
          .stick-d {
width: 30px;
height: 6px;
background: #774747;position: absolute;
          }
          .stick-d1 {
width: 100%;
top: 50px;
left: 0;
          }
          .stick-d2 {
top: 65px;
left: 86px;
          }
          .stick-d3 {
width: 20px;
top: 80px;
left: 70px;
          }
          .stick-d4 {
top: 65px;
right: 86px;
          }
          .stick-d5 {
width: 20px;
top: 80px;
right: 70px;
          }
          .stick-d6 {
width: 100%;
bottom: 30px;
left: 0;
          }
        }
        .door-opening {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 35px;
left: 50%;
margin-left: -150px;
background: #7c5655;overflow: hidden;
&-center{
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
top: 25px;
left: 25px;
background: #fff;          }
&-decorate {
width: 50px;
height: 80px;
border-radius: 50%;
background: #f3c068;position: absolute;
          }
&-decorate1 {
left: -30px;
top: 100px;
          }
&-decorate2 {
left: 50%;
top: -43px;
margin-left: -25px;
transform: rotate(90deg);
          }
&-decorate3 {
right: -30px;
top: 100px;
          }
&-flowers {
position: absolute;
bottom: 55px;
right: 43px;
            .flowercluster {
transform: scale(0.85);
            }
          }
        }
      }
    }
    .floor {
width: 100%;
height: 300px;
position: relative;
background: #946962;overflow: hidden;
&-line {
width: 1px;
height: 100%;
background: linear-gradient( tobottom, #b48e5e 20%, #eebe88 40%, #fce49c 60%, #9f725a 80%, #f7c887 100%);position: absolute;
top: 0;
      }
&-line1 {
left: 0;
transform: rotate(10deg);
      }
&-line2 {
left: 10%;
transform: rotate(10deg);
      }
&-line3 {
left: 23%;
transform: rotate(5deg);
      }
&-line4 {
left: 34%;
transform: rotate(2deg);
      }
&-line5 {
left: 45%;
      }
&-line6 {
right: 43%;
transform: rotate(-2deg);
      }
&-line7 {
right: 32%;
transform: rotate(-5deg);
      }
&-line8 {
right: 20%;
transform: rotate(-8deg);
      }
&-line9 {
right: 10%;
transform: rotate(-10deg);
      }
&-line10 {
right: 0;
transform: rotate(-10deg);
      }
    }
  }
&-cat {
width: 200px;
height: 60px;
position: absolute;
top: 95px;
right: 10px;
    .body {
width: 110px;
height: 50px;
background-color: #745341;position: absolute;
top: -4px;
border-top-left-radius: 90px;
border-top-right-radius: 90px;
animation: catbody10snoneinfinite;
    }
@keyframescatbody {
5% {
transform: scaleY(1);
      }
10% {
transform: scaleY(1.15);
      }
15% {
transform: scaleY(1);
      }
20% {
transform: scaleY(1.25);
      }
25% {
transform: scaleY(1);
      }
30% {
transform: scaleY(1.15);
      }
40% {
transform: scaleY(1);
      }
50% {
transform: scaleY(1.15);
      }
    }
    .head {
width: 70px;
height: 34px;
background-color: #745341;position: absolute;
top: 13px;
left: -45px;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
    }
    .ear {
width: 0;
height: 0;
position: absolute;
left: 5px;
top: -4px;
border-left: 12pxsolidtransparent;
border-right: 12pxsolidtransparent;
border-bottom: 20pxsolid#745341;transform: rotate(-30deg);
animation: catearleft10sbothinfinite;
    }
    .ear-right {
top: -11px;
left: 21px;
animation: catearright10sbothinfinite;
    }
@keyframescatearleft {
0% {
transform: rotate(-20deg);
      }
5% {
transform: rotate(-5deg);
      }
15% {
transform: rotate(-15deg);
      }
25% {
transform: rotate(-15deg);
      }
35% {
transform: rotate(-30deg);
      }
40% {
transform: rotate(-30deg);
      }
45% {
transform: rotate(0deg);
      }
50% {
transform: rotate(0deg);
      }
80% {
transform: rotate(-15deg);
      }
90% {
transform: rotate(-5deg);
      }
100% {
transform: rotateZ(-5deg);
      }
    }
@keyframescatearright {
0% {
transform: rotateZ(-15deg);
      }
15% {
transform: rotateZ(-20deg);
      }
25% {
transform: rotateZ(-20deg);
      }
30% {
transform: rotateZ(-30deg);
      }
34% {
transform: rotateZ(-20deg);
      }
38% {
transform: rotateZ(-30deg);
      }
40% {
transform: rotateZ(-20deg);
      }
42% {
transform: rotateZ(-20deg);
      }
44% {
transform: rotateZ(-30deg);
      }
45% {
transform: rotateZ(-20deg);
      }
50% {
transform: rotateZ(-10deg);
      }
55% {
transform: rotateZ(-10deg);
      }
60% {
transform: rotateZ(-20deg);
      }
61% {
transform: rotateZ(-30deg);
      }
62% {
transform: rotateZ(-20deg);
      }
63% {
transform: rotateZ(-20deg);
      }
64% {
transform: rotateZ(-30deg);
      }
65% {
transform: rotateZ(-20deg);
      }
80% {
transform: rotateZ(-20deg);
      }
90% {
transform: rotateZ(-15deg);
      }
100% {
transform: rotateZ(-15deg);
      }
    }
    .nose {
width: 5px;
height: 5px;
background-color: #dc9d90;position: absolute;
bottom: 10px;
left: 30px;
border-radius: 50%;
    }
    .whisker {
width: 16px;
height: 10px;
position: absolute;
bottom: 5px;
left: 7px;
transform-origin: right;
    }
    .whisker::before,
    .whisker::after {
content: '';
width: 100%;
position: absolute;
top: 0;
border: 1pxsolid#fff;transform-origin: 100%0;
transform: rotate(10deg);
    }
    .whisker::after {
transform: rotate(-20deg);
    }
    .whisker-left {
animation: catwhiskerleft10sbothinfinite;
    }
    .whisker-right {
left: 27px;
bottom: 12px;
transform: rotate(180deg);
animation: catwhiskerright10sbothinfinite;
    }
@keyframescatwhiskerleft {
5% {
transform: rotate(0);
      }
10% {
transform: rotate(0deg);
      }
15% {
transform: rotate(-5deg);
      }
20% {
transform: rotate(0deg);
      }
25% {
transform: rotate(0deg);
      }
30% {
transform: rotate(10deg);
      }
40% {
transform: rotate(-5deg);
      }
50% {
transform: rotate(10deg);
      }
    }
@keyframescatwhiskerright {
5% {
transform: rotate(180deg);
      }
10% {
transform: rotate(190deg);
      }
15% {
transform: rotate(180deg);
      }
20% {
transform: rotate(175deg);
      }
25% {
transform: rotate(190deg);
      }
30% {
transform: rotate(180deg);
      }
40% {
transform: rotate(185deg);
      }
50% {
transform: rotate(175deg);
      }
    }
    .tail {
width: 14px;
height: 100px;
position: absolute;
top: 42px;
right: 90px;
z-index: 99;
    }
    .tail-line {
width: 14px;
height: 60px;
background: #745341;position: absolute;
left: 0;
top: 0;
z-index: 99;
    }
    .tail-round {
width: 48px;
height: 48px;
background: #745341;position: absolute;
top: 36px;
left: -34px;
border-radius: 50%;
    }
    .tail-round::before {
content: '';
width: 20px;
height: 20px;
background: #946962;position: absolute;
top: 14px;
left: 14px;
border-radius: 50%;
    }
    .tail-round::after {
content: '';
width: 48px;
height: 22px;
background: #946962;position: absolute;
top: 0;
left: 0;
    }
    .tail-end {
width: 14px;
height: 10px;
background: #745341;border-radius: 14px14px00;
position: absolute;
bottom: 39px;
left: -34px;
z-index: 99;
    }
  }
&-table {
width: 200px;
height: 20px;
background-color: #e3895e;position: absolute;
top: 140px;
right: 80px;
border-radius: 20px;
z-index: 9;
  }
&-entrance {
position: absolute;
top: 60px;
left: 35px;
    .entrance-btn {
width: 180px;
line-height: 28px;
font-size: 16px;
font-weight: 600;
color: #fff;border: 0;
background-image: linear-gradient(toright, #ed6ea0, #ec8c69, #f7186a, #FBB03B);background-size: 300%100%;
box-shadow: 04px15px0#ed6ea0;margin-bottom: 20px;
animation: 5sease-in-outentranceinfinite;
    }
  }
}
@keyframesentrance {
0% {
background-image: linear-gradient(toright, #ed6ea0, #ec8c69, #f7186a, #FBB03B);background-size: 300%100%;
  }
100% {
background-image: linear-gradient(toright, #FBB03B, #ec8c69, #f7186a, #ed6ea0);background-position: 100%0;
  }
}

头像组件

头像组件主要包括头像图片、称号、花朵点缀三个部分。

/** * @description 头像组件 */importReactfrom'react';
import'./index.less';
importutilfrom'../../utils/util';
constAvatar= () => {
constuserInfo=util.getUserInfo() || {};
constgetDesignationByZongziNum= () => {
constfestival=userInfo.festival?userInfo.festival : {};
constzongzi=festival.zongzi?festival.zongzi : 0;
letname='殿上佳人';
if (zongzi<50) {
name='殿上佳人';
    } elseif (zongzi<=100) {
name='淑仪倾城';
    } elseif (zongzi<=200) {
name='花容初绽';
    } elseif (zongzi<=300) {
name='花成蜜就';
    } elseif (zongzi<=400) {
name='宠冠六宫';
    } elseif (zongzi>400) {
name='凤仪千载';
    }
returnname;
  };
return (
<divclassName='avatar'><imgclassName='avatar-img'src='https://p6-passport.byteacctimg.com/img/user-avatar/c6c1a335a3b48adc43e011dd21bfdc60~300x300.image'alt=''/><divclassName='avatar-nickname'>叶一一</div><divclassName='avatar-designation'><span>{getDesignationByZongziNum()}</span><divclassName='avatar-flower'><divclassName='avatar-flower-leaf avatar-flower-leaf1'></div><divclassName='avatar-flower-leaf avatar-flower-leaf2'></div><divclassName='avatar-flower-leaf avatar-flower-leaf3'></div><divclassName='avatar-flower-leaf avatar-flower-leaf4'></div><divclassName='avatar-flower-leaf avatar-flower-leaf5'></div><divclassName='avatar-flower-circle'></div></div></div></div>  );
};
exportdefaultAvatar;

花丛组件

这个是参考的网站是的，参考地址我放到了文章末尾。

/** * @description 花丛组件 */importReactfrom'react';
import'./index.less';
constFlowerCluster= () => {
return (
<divclassName='flowercluster'><divclassName='flower-leaves'></div><divclassName='bunch'><divclassName='flower'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='flower'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='flower'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div></div></div>  );
};
exportdefaultFlowerCluster;

最终UI

设计为古代的室内，参考的《美人传》小游戏中的UI设计，包括木质的墙壁、门和地板。除此之外还加了一些动画效果增加趣味性：

称号上面加了一个花朵做装饰；
任务和活动入口上加了光效闪动的效果；
地板上的猫咪耳朵和肚子随着呼吸而动；

日常任务

日常任务收集规则

每天0点开始进行资源生产，每个小时生产1万资源，不足1个小时的时候不产生，满足1个小时的时候产生；
可以进行资源收集，每次收集完成，对应的资源值进行叠加；
不同资源收集时，随机掉落不同的活动材料。对应如下：

任务名称	活动材料名称	活动材料数量
开源节流	粽叶	5~10
助宫易物	糯米	5~10
布施济民	红枣	2~5

功能实现

日常页面

/** * @description 日常任务 */importReact, { useState, useEffect } from'react';
importclassnamesfrom'classnames';
importmomentfrom'moment';
importBackfrom'@/components/Back';
importFlowerfrom'@/components/Flower';
importFlowerTreefrom'@/components/FlowerTree';
import { Modal } from'antd-mobile';
import { QuestionCircleFill, KoubeiFill, FireFill, HeartFill } from'antd-mobile-icons';
importutilfrom'../../utils/util';
import'./index.less';
constTasks= () => {
constuserInfo=util.getUserInfo() || {};
const [tasksObj, setTasksObj] =useState(
userInfo.tasks?userInfo.tasks      : {
zheng: 0,
cai: 0,
mei: 0,
creatAt: 0,
        },
  );
constlistInit= [
    {
key: 'zheng',
title: '政',
name: '开源节流',
num: 0,
harvestFalg: true,
taskKey: 'zongye',
icon: <KoubeiFillfontSize={16} color='#fcb887'/>,
    },
    {
key: 'cai',
title: '才',
name: '助宫易物',
num: 0,
harvestFalg: true,
taskKey: 'nuomi',
icon: <FireFillfontSize={16} color='#f6f6f6'/>,
    },
    {
key: 'mei',
title: '魅',
name: '布施济民',
num: 0,
harvestFalg: true,
taskKey: 'hongzao',
icon: <HeartFillfontSize={16} color='#59ca94'/>,
    },
  ];
const [list, setList] =useState(listInit);
// 获取当前内务展示数据constgetNewNum= () => {
// 梯龄换算成月constnewData=newDate();
letdiffData=tasksObj.creatAt;
if (!tasksObj.creatAt) {
// 如果收获时间默认活动开始时间diffData=moment('2022-06-01');
    }
lethour=moment(newData).diff(moment(diffData), 'hours');
console.log(hour, 'hour');
letnumCurr=hour*1000;
constlistInit= [...list];
listInit.map(item=> {
item.num+=numCurr;
    });
setList(listInit);
  };
useEffect(() => {
getNewNum();
  }, []);
// 获取随机数constgetRandomNumber=key=> {
constrandomObj= {
zheng: [5, 10],
cai: [5, 10],
mei: [2, 5],
    };
constrandomItem=randomObj[key];
constm=randomItem[1];
constn=randomItem[0];
letrandomNum=Math.random() * (m-n) +n;
randomNum=Math.round(randomNum);
console.log(randomNum, 'randomNum');
returnrandomNum;
  };
// 收获consthandleHarvest=index=> {
constnewData=newDate();
letuserInfoInit= { ...userInfo };
consthandleList= [].concat(list);
letitem=handleList[index];
lettasksObjInit= { ...tasksObj };
tasksObjInit.creatAt=newData;
constfestivalObjInit=userInfo.festival?userInfo.festival      : {
nuomi: 0,
zongye: 0,
hongzao: 0,
zongzi: 0,
        };
// 收获操作if (item.harvestFalg) {
tasksObjInit[item.key] +=item.num;
item.num=0;
festivalObjInit[item.taskKey] =getRandomNumber(item.key);
// 设置缓存userInfoInit.festival=festivalObjInit;
userInfoInit.tasks=tasksObjInit;
util.saveUserInfo(userInfoInit);
setList(list);
setTasksObj(tasksObjInit);
    }
item.harvestFalg=!item.harvestFalg;
setList(handleList);
  };
// 顶部提示constheadTip= () => {
returnModal.show({
title: '内务',
content: (
<divclassName='tasks-modal'><divclassName='tasks-modal-title'>内务打理</div><divclassName='tasks-modal-content mb10'><pclassName='mb10'>内务分为“开源节流”，“助宫易物”，“布施济民”三种类型，分别可以获得铜币、珍品和名望。</p><p>打理内务有一定几率获得包粽子的材料。</p></div><divclassName='tasks-modal-title'>内务奖励</div><divclassName='tasks-modal-content'><pclassName='mb10'>开源节流有一定几率获得粽叶。</p><pclassName='mb10'>助宫易物有一定几率获得糯米。</p><p>布施济民有一定几率获得红枣。</p></div></div>      ),
showCloseButton: true,
    });
  };
// 将数据除以10000进行展示constgetTaskNumContent=num=> {
num=num/10000;
returnnum;
  };
return (
<divclassName='tasks'><Back/><divclassName='tasks-info'>        {list.map(item=> {
return (
<divclassName='tasks-info-item'key={item.key}><divclassName='tasks-info-item-icon'>{item.icon}</div><span>                {getTaskNumContent(tasksObj[item.key])} {tasksObj[item.key] >0?'万' : ''}
</span></div>          );
        })}
</div><divclassName='tasks-head'><divclassName='tasks-head-tip'onClick={headTip}><QuestionCircleFillfontSize={28} color='#f69bad'/></div><divclassName='tasks-head-title'>内务打理</div></div><divclassName='tasks-list'>        {list.map((item, index) => {
return (
<divclassName='tasks-item'key={item.key}><divclassName='tasks-item-top'></div><divclassName='tasks-item-title'>{item.title}</div><divclassName='tasks-item-name'><span>{item.name}</span><divclassName='name-circular name-circular1'></div><divclassName='name-circular name-circular2'></div><divclassName='name-circular name-circular3'></div><divclassName='name-circular name-circular4'></div><divclassName='name-circular name-circular5'></div><divclassName='name-circular name-circular6'></div></div><divclassName='tasks-item-num'>{item.num}</div><divclassName={classnames('tasks-item-btn', { inactive: !item.harvestFalg })} onClick={() =>handleHarvest(index)}><divclassName='btn-flower1'><Flower/></div><divclassName='btn-flower2'><Flower/></div><span>{item.harvestFalg?'收获' : '恢复'}</span></div></div>          );
        })}
</div><divclassName='tasks-footer'></div><divclassName='tasks-tree'><FlowerTree/></div><divclassName='tasks-rule'><divclassName='tasks-rule-title'><span>宫规</span></div><divclassName='tasks-rule-text'>内务收获+5%</div></div></div>  );
};
exportdefaultTasks;

返回组件

每个二级、三级页面都会放返回按钮，所以我封装成了组件。

/** * @description 回退按钮组件 */importReactfrom'react';
importPropTypesfrom'prop-types';
import { useHistory } from'react-router-dom';
import'./index.less';
constBack= ({ ...props }) => {
consthistory=useHistory();
const { path } =props;
// 点击事件consthandleClick= () => {
history.push(path);
  };
return (
<divclassName='back'onClick={handleClick}><divclassName='back-left'></div><divclassName='back-right'></div></div>  );
};
Back.propTypes= {
path: PropTypes.string, // 跳转路径};
Back.defaultProps= {
path: '/home',
};
exportdefaultBack;

花朵组件

有些页面需要花朵装饰，所以我把花朵封装成了组件。

/** * @description 花朵组件 */importReactfrom'react';
import'./index.less';
constFlower= () => {
return (
<divclassName='flower'><divclassName='flower-leaf flower-leaf1'></div><divclassName='flower-leaf flower-leaf2'></div><divclassName='flower-leaf flower-leaf3'></div><divclassName='flower-leaf flower-leaf4'></div><divclassName='flower-leaf flower-leaf5'></div><divclassName='flower-circle'></div></div>  );
};
exportdefaultFlower;

开满花的树组件

这个是参考的网站是的，参考地址我放到了文章末尾。

/** * @description 开满花的树组件 */importReactfrom'react';
import'./index.less';
constFlowerTree= () => {
return (
<divclassName='flowertree'><divclassName='trunk'><divclassName='roots'><divclassName='root'></div><divclassName='root'></div><divclassName='root'></div><divclassName='root'></div><divclassName='root'></div></div></div><divclassName='leaves cherry-blossoms'><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div><divclassName='cherry-blossom'><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div><divclassName='petal'></div></div></div></div>  );
};
exportdefaultFlowerTree;

公共方法

有些基础的功能、或者出现频率较高的功能，可以提炼成公共方法。

/** * @description 公共方法 */// 获取用户信息constgetUserInfo= () => {
letuserInfo=localStorage.getItem('userInfo');
if (userInfo) {
returnJSON.parse(userInfo);
  }
returnnull;
};
// 保存用户信息constsaveUserInfo=userInfo=> {
if (userInfo) {
localStorage.setItem('userInfo', JSON.stringify(userInfo));
  }
};
/** * 两个是否可以整除 * @param {number} num1 除数 * @param {number} num2 被除数 * @return {boolean} 是否整除的布尔值 */constgetNumDivisibleFlag= (num1, num2) => {
letflag=false;
// 如果除数小于被除数 则表示不可以被整除if (num1>num2&&num1/num2>1) {
flag=true;
  }
returnflag;
};
exportdefault { getUserInfo, saveUserInfo, getNumDivisibleFlag };

最终UI

端午活动

活动规则

活动时间

1.2022-5-31 至 2022-6-5，提前预热3天。

2.页面上设置活动倒计时

活动结束前，展示距离活动结束还剩多长时间，时间格式为DD天 hh:mm:ss；
活动结束后，展示内容为"活动已结束";

兑换规则

食材兑换比例

粽子类型	需要材料
糯米粽子	10 * 糯米 + 2 * 粽叶 + 2 * 红枣

食材兑换规则

通过页面按钮进行兑换，当食材数量不足时，按钮不可点击，当食材数量充足时可以进行点击。
点击兑换按钮唤起兑换弹窗，可以通过加减号进行兑换数量的修改，当达到最大可兑换值时，加号不可点击。
确定兑换之后，粽子数量增加，食材数量对应减少。

功能实现

活动页面

/** * @description 端午活动 */importReact, { useEffect, useState } from'react';
importclassnamesfrom'classnames';
importmomentfrom'moment';
importBackfrom'@/components/Back';
import { Modal, Stepper } from'antd-mobile';
import { QuestionCircleFill } from'antd-mobile-icons';
importutilfrom'../../utils/util';
import'./index.less';
constFestival= () => {
constuserInfo=util.getUserInfo() || {};
const [festivalObj, setFestivalObj] =useState(
userInfo.festival?userInfo.festival      : {
nuomi: 20,
zongye: 10,
hongzao: 10,
zongzi: 150,
        },
  );
constlist= [
    {
key: 'nuomi',
name: '糯米',
    },
    {
key: 'zongye',
name: '粽叶',
    },
    {
key: 'hongzao',
name: '红枣',
    },
    {
key: 'zongzi',
name: '粽子',
    },
  ];
// 是否可以进行兑换操作的布尔值 true-能 false-不能const [activeFlag, setActiveFlag] =useState(false);
const [visible, setVisible] =useState(false);
const [count, setCount] =useState(0);
// 兑换的粽子数量const [convertNum, setConvertNum] =useState(1);
const [countdown, setCountdown] =useState('');
lettimer=null;
// 获取当前兑换按钮是否可以点击constgetInactiveFlag=festivalObj=> {
letactiveInit=false;
letnuomi=festivalObj.nuomi;
letzongye=festivalObj.zongye;
lethongzao=festivalObj.hongzao;
if (nuomi&&zongye&&hongzao) {
letnuomiFlag=util.getNumDivisibleFlag(nuomi, 10);
letzongyeFlag=util.getNumDivisibleFlag(zongye, 2);
lethongzaoFlag=util.getNumDivisibleFlag(hongzao, 2);
if (nuomiFlag&&zongyeFlag&&hongzaoFlag) {
activeInit=true;
      }
    }
setActiveFlag(activeInit);
  };
constgetCountdown= () => {
letnowDate=newDate();
// console.log(nowDate, 'nowDate');// 获取的2022-06-05的23:59:59的时间戳letendTime=moment('2022-06-05').endOf('day').format('x');
letcountdownInit='';
// 剩余时间 毫秒letsurplusTime=endTime-nowDate.getTime();
if (surplusTime<=0) {
clearTimeout(timer);
countdownInit='活动已结束';
setCountdown(countdownInit);
    } else {
// 剩余时间 秒letrunTime=surplusTime/1000;
constday=Math.floor(runTime/86400);
runTime=runTime%86400;
consthour=Math.floor(runTime/3600);
runTime=runTime%3600;
constminute=Math.floor(runTime/60);
runTime=runTime%60;
constsecond=Math.floor(runTime);
constdayText=day?`${day}天` : '';
countdownInit=`剩余时间：${dayText}${hour}:${minute}:${second}`;
setCountdown(countdownInit);
timer=setTimeout(getCountdown, 1000);
    }
  };
useEffect(() => {
getInactiveFlag(festivalObj);
getCountdown();
  }, []);
useEffect(() => {
// 清除定时return () => {
clearInterval(timer);
    };
  }, []);
// 顶部提示constheadTip= () => {
returnModal.show({
title: '"粽"得凤仪',
content: (
<divclassName='festival-modal'><divclassName='festival-modal-title'>合成粽子</div><divclassName='festival-modal-content mb10'><pclassName='mb10'>10*糯米+2*粽叶+2*红枣可以兑换1个糯米粽子。</p><p>当糯米、粽叶、红枣的比例不是5:1:1时，无法进行兑换。</p></div><divclassName='festival-modal-title'>称号奖励</div><divclassName='festival-modal-content'><pclassName='mb10'>当前粽子数量达到50个可获得称号“淑仪倾城”。</p><pclassName='mb10'>当前粽子数量达到100个可获得称号“花容初绽”。</p><pclassName='mb10'>当前粽子数量达到200个可获得称号“花成蜜就”。</p><pclassName='mb10'>当前粽子数量达到300个可获得称号“宠冠六宫”。</p><pclassName='mb10'>当前粽子数量达到400个可获得称号“凤仪千载”。</p><p>称号自动获取无需额外操作</p></div></div>      ),
showCloseButton: true,
    });
  };
// 粽子展示constzongziContent= () => {
return (
<divclassName='festival-zongzi'><divclassName='festival-zongzi-left'></div><divclassName='festival-zongzi-center'></div><divclassName='festival-zongzi-right'></div></div>    );
  };
// 兑换确定操作constconvertOnConfirm= () => {
setVisible(false);
letfestivalObjInit= { ...festivalObj };
console.log(convertNum, 'convertNum');
festivalObjInit.nuomi-=convertNum*10;
festivalObjInit.zongye-=convertNum*2;
festivalObjInit.hongzao-=convertNum*2;
festivalObjInit.zongzi+=convertNum;
console.log(festivalObjInit, 'festivalObjInit');
// 设置缓存letuserInfoInit= { ...userInfo };
userInfoInit.festival=festivalObjInit;
util.saveUserInfo(userInfoInit);
setFestivalObj(festivalObjInit);
getInactiveFlag(festivalObjInit);
  };
// 获取可以兑换的数量constgetConvertCount= () => {
letnuomi=festivalObj.nuomi;
letzongye=festivalObj.zongye;
lethongzao=festivalObj.hongzao;
letnuomiNum=Math.floor((nuomi*100) / (10*100));
letzongyeNum=Math.floor((zongye*100) / (2*100));
lethongzaoNum=Math.floor((hongzao*100) / (2*100));
returnMath.min(nuomiNum, zongyeNum, hongzaoNum);
  };
// 兑换操作consthandleConvert= () => {
if (!activeFlag) return;
constcount=getConvertCount();
setConvertNum(1);
setCount(count);
setVisible(true);
  };
return (
<divclassName='festival'><divclassName='festival-content'><Back/><divclassName='festival-head'><divclassName='festival-head-tip'onClick={headTip}><QuestionCircleFillfontSize={28} color='#f69bad'/></div><divclassName='festival-head-title'>"粽"得凤仪</div></div><divclassName='festival-time'>{countdown}</div><divclassName='festival-convert'><divclassName='festival-convert-zongzi'>{zongziContent()}</div><divclassName='festival-convert-zongzi2'>{zongziContent()}</div><divclassName='festival-convert-num'>            {list.map(item=> {
return (
<divclassName='festival-convert-num-item'key={item.key}>                  {item.name}: {festivalObj[item.key]}
</div>              );
            })}
</div><divclassName='festival-convert-rule'><divclassName='festival-convert-rule-nuomi'></div> x 10<div className='festival-convert-rule-add'></div><divclassName='festival-convert-rule-zongye'></div> x 2<div className='festival-convert-rule-add'></div><divclassName='festival-convert-rule-hongzao'></div> x 2</div><divclassName={classnames('festival-convert-btn', { inactive: !activeFlag })} onClick={handleConvert}>兑换</div></div></div><divclassName='festival-room'><divclassName='festival-room-wall'><divclassName='wall-poetry'><divclassName='wall-poetry-nail'></div><divclassName='wall-poetry-shaft wall-poetry-shaft-top'></div><divclassName='wall-poetry-inner'><divclassName='wall-poetry-title'>浣溪沙·端午</div><divclassName='wall-poetry-author'>宋·苏轼</div><divclassName='wall-poetry-content'>轻汗微微透碧纨，明朝端午浴芳兰。流香涨腻满晴川。彩线轻缠红玉臂，小符斜挂绿云鬟。佳人相见一千年。</div></div><divclassName='wall-poetry-shaft wall-poetry-shaft-bottom'></div></div></div><divclassName='festival-room-floor'><divclassName='floor-line floor-line1'></div><divclassName='floor-line floor-line2'></div><divclassName='floor-line floor-line3'></div><divclassName='floor-line floor-line4'></div><divclassName='floor-line floor-line5'></div><divclassName='floor-line floor-line6'></div><divclassName='floor-line floor-line7'></div><divclassName='floor-line floor-line8'></div><divclassName='floor-line floor-line9'></div><divclassName='floor-line floor-line10'></div></div></div><Modalvisible={visible}
content={
<divclassName='festival-modal'><divclassName='festival-modal-text'>最多可以兑换: {count}</div><divclassName='festival-modal-stepper'><Stepperstep={1}
value={convertNum}
min={1}
max={count}
onChange={value=> {
setConvertNum(value);
                }}
/></div><divclassName='festival-modal-confirm'onClick={() =>convertOnConfirm()}>兑换</div></div>        }
showCloseButton={true}
closeOnActiononClose={() => {
setVisible(false);
        }}
/></div>  );
};
exportdefaultFestival;

最终UI

活动展示

兑换弹窗展示

总结

本次收获还是挺多的。

CSS用的别以前熟练了很多，这次的游戏里除了头像图片、一颗树、一簇花，其他的都是我用CSS写出来的，没有用图片素材，实现过程不断收获新的创意。说起来多亏这段时间码上掘金活动，我才能使用CSS实现功能做的如此之快，ღ( ´･ᴗ･` )；
游戏设计，体验了一把产品/策划的感觉，站在不同的角度去思考需要实现的功能，锻炼逻辑思维，很有收获；
核心功能的实现，包括内务收集的计算、食材的随机掉落计算、粽子兑换的计算等多个计算功能，虽然方法可能不是最优，但是在遇到类似的功能实现算是有经验了；

还差一个github的地址，等有时间我把所有代码上传后，补充一下github地址。

参考文章

花丛和开满花的树参考

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

「前端游戏开发体验」我用react实现网页游戏的全过程（包括规则设计）

关于游戏的灵感来源

假如我是游戏策划

产品视角

交互设计

首页

日常任务

端午活动

功能设计

首页

内容

称号规则

功能实现

首页页面

头像组件

花丛组件

最终UI

日常任务

日常任务收集规则

功能实现

日常页面

返回组件

花朵组件

开满花的树组件

公共方法

最终UI

端午活动

活动规则

活动时间

兑换规则

功能实现

活动页面

最终UI

活动展示

兑换弹窗展示

总结

参考文章

热门文章

最新文章

相关课程

相关电子书

相关实验场景