实现《羊了个羊》小游戏(低配版)
前面有总结过一篇《简易动物版的羊了个羊》的实现,今天参考了鱼皮大佬的鱼了个鱼,我好奇研究了一下他的源码实现,并结合自己的理解,也用react + antd实现了一版,在实现的过程中,我只是简单修改了一下核心逻辑和游戏配置,然后借助于reactivue这个库将vue的composition API用到了这里。
游戏的核心逻辑我也大致理了一遍,只是做了一些小改动就拿过来用了,里面也有源码实现的注释,所以不用多讲,主要在于核心UI的构建,这里可以大致讲一下。
在这里我也用到了之前文章手写一个mini版本的React状态管理工具来用作游戏参数的状态管理,因此关于这里的实现也没有必要多做细讲。接下来,我们就来看它在这里的使用。如下所示:
import { createModel } from './createModel';
import { useState } from "react"
import { defaultGameConfig } from '../core/gameConfig';
export interface ConfigType {
gameConfig: GameConfigType
customGameConfig: GameConfigType
}
const useConfig = () => {
const [config,setConfig] = useState<ConfigType>({
gameConfig:{
...defaultGameConfig
},
customGameConfig:{
...defaultGameConfig
}
})
const updateConfig = (config:ConfigType) => {
setConfig(config)
}
// 重置为初始值
const reset = () => setConfig({ gameConfig:{ ...defaultGameConfig },customGameConfig:{ ...defaultGameConfig } })
return {
config,
updateConfig,
reset
}
}
const GameConfigStore = createModel(useConfig);
export default GameConfigStore;
首先导入createModel方法还有react的useState方法以及游戏参数的默认配置,接着定义一个hooks用作createModel的参数,返回游戏的配置以及更新配置函数以及还原最初初始配置的方法,即updateConfig和reset方法,这里其实也没有多大的难度,主要可能在于类型的定义。
我们来看接口的定义,也在全局type.d.ts文件下,如下所示:
/**
* 块类型
*/
interface BlockType {
id: number;
x: number;
y: number;
level: number;
type: string;
// 0 - 正常, 1 - 已点击, 2 - 已消除
status: 0 | 1 | 2;
// 压住的其他块
higherThanBlocks: BlockType[];
// 被哪些块压住(为空表示可点击)
lowerThanBlocks: BlockType[];
}
/**
* 每个格子单元类型
*/
interface BlockUnitType {
// 放到当前格子里的块(层级越高下标越大)
blocks: BlockType[];
}
/**
* 游戏配置类型
*/
interface GameConfigType {
// 槽容量
slotNum: number;
// 需要多少个一样块的才能合成
composeNum: number;
// 素材类别数
materialTypeNum: number;
// 每层块数(大致)
levelBlockNum: number;
// 边界收缩步长
borderStep: number;
// 总层数(最小为 2)
levelNum: number;
// 随机区块数(数组长度代表随机区数量,值表示每个随机区生产多少块)
randomBlocks: number[];
// 素材列表
materialList: Record<string,string> [];
// 最上层块数(已废弃)
// topBlockNum: 40,
// 最下层块数最小值(已废弃)
// minBottomBlockNum: 20,
}
/**
* 技能类型
*/
interface SkillType {
name: string;
desc: string;
icon: string;
action: function;
}
接口的定义大同小异,也只是在原版的基础上稍微做了一点修改。
定义好状态之后,我们在App.tsx中导入使用,App.tsx中代码如下:
import styled from '@emotion/styled';
import { BASE_IMAGE_URL } from './core/gameConfig';
import Router from './router/router';
import GameConfigStore from './store/store';
const StyleApp = styled.div({
background:`url(${BASE_IMAGE_URL}1.jpg)no-repeat center/cover`,
padding:'16px 16px 50px',
minHeight:'100vh',
backgroundSize:"100% 100%",
width:"100%"
});
const StyleContent = styled.div`
max-width:480px;
margin: 0 auto;
`
const App = () => {
const { Provider } = GameConfigStore;
return (
<StyleApp>
<Provider>
<StyleContent>
<Router />
</StyleContent>
</Provider>
</StyleApp>
)
}
export default App
可以看到,我们通过对象结构的方式在App组件中取得Provider组件,将Provider组件包裹中间的路由组件,事实上Provider组件还可以传入一个默认参数的值,在这里我们并没有传入。
这个组件其实主要考察了2个知识点,第一个就是styled-component,这里用到的是@emotion/styled这个库,有关语法的使用可以详细看官方文档。
第二个知识点就是路由的使用,我们来看Router.tsx的代码,如下:
import React from 'react';
import { useRoutes } from 'react-router-dom';
import type { RouteObject } from 'react-router-dom';
import Load from '../components/Loader';
const lazy = (component: <T>() => Promise<{ default: React.ComponentType<T> }>) => {
const LazyComponent = React.lazy(component);
return (
<React.Suspense fallback={<Load></Load>} >
<LazyComponent></LazyComponent>
</React.Suspense>
)
}
const routes:RouteObject [] = [
{
path:"/",
element:lazy(() => import('../views/IndexPage'))
},
{
path:"/config",
element:lazy(() => import('../views/ConfigPage'))
},
{
path:"/game",
element:lazy(() => import('../views/GamePage'))
}
]
export default () => useRoutes(routes)
路由里面,其实也就是用到了懒加载lazy函数,以及Suspense组件,然后通过useRoutes方法导出一个路由组件使用,这样就可以像Vue那样通过配置路由的方式来使用路由。
这里有一个load组件的实现,我们来看它的源码,如下所示:
import styled from '@emotion/styled';
import { Spin } from 'antd';
const StyleLoad = styled.div({
display:'flex',
minHeight:'100vh',
justifyContent:'center',
alignItems:"center"
});
export interface LoadProps {
message?: string
}
const Load = (props: Partial<LoadProps>) => {
const { message = 'loading....' } = props;
return (
<StyleLoad>
<Spin tip={message}></Spin>
</StyleLoad>
)
}
export default Load;
其实也很简单,就是添加了一个message的props配置,然后使用antd的Spin组件。
接下来就是核心的三个页面,分别是首页,选择游戏模式,以及自定义游戏配置和游戏页面,这个我们后面再看,这里我们来看一下有一个hooks函数,也就是强制更新的hooks函数useForceUpdate,如下:
import { useReducer } from 'react';
function useForceUpdate() {
const [, dispatch] = useReducer(() => Object.create(null), {});
return dispatch;
}
export default useForceUpdate;
其实也就是利用useReducer函数强制更新组件,这里为什么要用这个hook函数呢?答案其实就在game.ts里面,我们来看game.ts里面:
import _ from "lodash";
import { createSetup } from 'reactivue'
import GameConfigStore from "../store/store";
const useGame = () => {
const { config: { gameConfig } } = GameConfigStore.useModel();
const setup = createSetup(() => {
// 核心游戏逻辑,参考源码注释
});
return setup();
};
export default useGame;
可以看到这里,我们通过导出一个useGame函数,就可以在游戏页面里使用这些核心的游戏逻辑接口,但是我们游戏里面的核心逻辑是使用的Vue的响应式数据对象,尽管vue帮我们更新了数据,可是react并不知道数据是否更新,所以这里就采用useForceUpdate函数来更新数据,虽然这并不是一种好的更新数据的方式。
如果有更好的更新视图和数据的方式,还望大佬指点迷津。
至于游戏配置文件也没什么好解释的,可以自己看一下源码。
接下来,我们来看组件的实现,这里有几个公共组件About.tsx,Footer.tsx,Win.tsx以及Title.tsx的实现,其中可能也就Win.tsx中的爱心组件和Title.tsx组件的实现可以说一下,我们先来看Title.tsx的实现。如下:
import { ElementType, ReactNode } from "react";
export interface TitleProps extends Record<string,any>{
children: ReactNode
level: number | string
}
const levelList = [1,2,3,4,5,6];
const Title = (props: Partial<TitleProps>) => {
const { level,children,...rest } = props;
const Component = (level && levelList.includes(+level) ? `h${level}` : 'h1') as ElementType;
return (
<Component {...rest}>{ children }</Component>
)
}
export default Title;
这里值得说一下的就是将Component断言成ElementType元素,从逻辑上似乎有些说不通,因为本身Component就是一个字符串,可是字符串在react当中也可以算作是一个元素组件,所以也就断言成ElementType也就理所当然没问题啦。
然后就是Heart组件的实现,实际上也就是利用css画一个爱心,如下所示:
const StyleHeart = styled.div({
width: 25,
height: 25,
background:"#e63f0c",
position: 'relative',
margin: '1em auto',
transform:'rotate(45deg)',
animation:'scale 2s linear infinite',
'@keyframes scale':{
'0%':{
transform:'scale(1) rotate(45deg)'
},
'100%':{
transform:"scale(1.2) rotate(45deg)"
}
},
'&::before,&::after':{
content:'""',
width:'100%',
height:'100%',
borderRadius:'50%',
position:'absolute',
background:"#e63f0c",
},
'&::before':{
left:'-15px',
top: 0
},
'&::after':{
top:'-15px',
left: 0
}
});
这是emotion的语法。
接下来就是对三个页面的详解,首先我们来看首页,代码如下:
import styled from '@emotion/styled';
import Title from '../components/Title';
import { Button } from 'antd';
import About from '../components/About';
import Footer from '../components/Footer';
import { useNavigate } from 'react-router-dom';
import { easyGameConfig, hardGameConfig, lunaticGameConfig, middleGameConfig, skyGameConfig, yangGameConfig } from '../core/gameConfig';
import GameConfigStore from '../store/store';
const StyleIndexPage = styled.div({
textAlign:'center'
});
const StyleTitle = styled(Title)({
});
const StyleDescription = styled.div`
margin-bottom: 16px;
color: rgba(0,0,0,.8);
`;
const StyleButton = styled(Button)({
marginBottom: 16
})
const ButtonList = [
{
text:"简单模式",
config:easyGameConfig
},
{
text:"中等模式",
config:middleGameConfig
},
{
text:"困难模式",
config:hardGameConfig
},
{
text:"地狱模式",
config:lunaticGameConfig
},
{
text:"天狱模式",
config:skyGameConfig
},
{
text:"羊了个羊模式",
config:yangGameConfig
},
{
text:"自定义",
config:null
}
]
const IndexPage = () => {
const navigate = useNavigate();
const { config:{ customGameConfig },updateConfig } = GameConfigStore.useModel();
const toGame = (config:GameConfigType | null) => {
if(config){
updateConfig({ gameConfig: config,customGameConfig });
navigate('/game');
}else{
navigate('/config');
}
}
return (
<StyleIndexPage>
<StyleTitle level={2}>羊了个羊(美女版)</StyleTitle>
<StyleDescription>低配版羊了个羊小游戏,仅供消遣</StyleDescription>
{
ButtonList.map((item,index: number) => (
<StyleButton block onClick={() => toGame(item.config)} key={`${item.text}-${index}`}>{ item.text }</StyleButton>
))
}
<About />
<Footer />
</StyleIndexPage>
)
}
export default IndexPage;
其实也比较好理解,就是渲染一个按钮列表,然后给按钮列表添加导航跳转,将游戏的配置传过去,而核心当然是用到我们定义的状态来传递。
useNavigate方法也就是react-router-dom提供的API,也没什么好说的,我们继续来看ConfigPage.tsx,本质上这个页面就是一个表单页面,所以也没什么好说的。代码如下:
import styled from '@emotion/styled'
import Title from '../components/Title'
import { Button, Form, InputNumber, Select, Image, Tooltip } from 'antd'
import { useNavigate } from 'react-router-dom'
import { materialList } from '../core/gameConfig'
import { useEffect, useState } from 'react'
import GameConfigStore from '../store/store'
const StyleConfigPage = styled.div`
padding: 5px;
`
const { Item } = Form
const { Option } = Select
const StyleTitle = styled(Title)({
'&::before,&::after': {
clear: 'both',
display: 'block',
content: '""'
}
})
const StyleButton = styled(Button)({
float: 'right'
})
const StyleInputNumber = styled(InputNumber)({
'width': "100%"
})
const StyleFooterButton = styled(Button)({
marginBottom: 16
})
const ConfigPage = () => {
const navigate = useNavigate()
const [form] = Form.useForm()
const { config: { customGameConfig },reset,updateConfig } = GameConfigStore.useModel()
const setFormConfig = (config: GameConfigType) => {
const { materialList: configMaterialList, ...rest } = config
return {
...rest,
materialNum: configMaterialList.map(item => item.value),
randomAreaNum: 2,
randomBlockNum: 8,
}
}
const [customFormConfig,setCustomFormConfig] = useState(setFormConfig(customGameConfig))
useEffect(() => {
setCustomFormConfig(setFormConfig(customGameConfig))
},[customGameConfig])
const goBack = () => {
navigate(-1);
}
const onFinishHandler = () => {
const config = form.getFieldsValue(true);
config.materialList = config.materialNum.map((key: string) => materialList.find(item => item.value === key));
delete config.materialNum;
updateConfig({
gameConfig: config,
customGameConfig: config
});
navigate('/game');
}
return (
<StyleConfigPage>
<StyleTitle level={2}>
自定义难度
<StyleButton onClick={goBack}>返回</StyleButton>
</StyleTitle>
<Form
autoComplete="off"
label-align="left"
labelCol={{ span: 4 }}
onFinish={onFinishHandler}
form={form}
initialValues={customFormConfig}
>
<Item label="槽容量" name="slotNum">
<StyleInputNumber />
</Item>
<Item label="合成数" name="composeNum">
<StyleInputNumber />
</Item>
<Item label="素材类别数" name="materialTypeNum">
<StyleInputNumber />
</Item>
<Item label="素材列表" name="materialNum">
<Select mode='multiple'>
{
materialList.map((item, index) => (
<Option key={`${item.value}-${index}`} value={item.value}>
<Tooltip title={item.label} placement="leftTop">
<Image src={item.value} width={40} height={40}></Image>
</Tooltip>
</Option>
))
}
</Select>
</Item>
<Item label="总层数" name="levelNum">
<StyleInputNumber />
</Item>
<Item label="每层块数" name="levelBlockNum">
<StyleInputNumber />
</Item>
<Item label="边界收缩" name="borderStep">
<StyleInputNumber />
</Item>
<Item label="随机区数" name="randomAreaNum">
<StyleInputNumber />
</Item>
<Item label="随机区块数" name="randomBlockNum">
<StyleInputNumber />
</Item>
<Item>
<StyleFooterButton htmlType='submit' block>开始</StyleFooterButton>
<StyleFooterButton block onClick={() => form.resetFields()}>重置</StyleFooterButton>
<Button danger block onClick={reset}>还原初始配置</Button>
</Item>
</Form>
</StyleConfigPage>
)
}
export default ConfigPage
antd提供了useForm方法可以将表单数据很好的管理在一个状态中,我们也就不用为每个表单元素绑定value和change事件了。
接下来就是游戏核心页面,如下:
import styled from "@emotion/styled";
import { Row, Button, Space } from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import Win from "../components/Win";
import useGame from "../core/game";
import { AUDIO_URL } from "../core/gameConfig";
import useForceUpdate from "../hooks/useForceUpdate";
const StyleGamePage = styled.div({
padding: 5,
});
const StyleBackButton = styled(Button)({
marginBottom: 8,
});
const StyleLevelBoard = styled.div<{ show: boolean }>`
display: ${({ show }) => (show ? "block" : "none")};
position: relative;
`;
const StyleBlock = styled.div({
width: 42,
height: 42,
border: "1px solid #eee",
display: "inline-block",
verticalAlign: "top",
background: "#fff",
cursor: "pointer",
"& .image ": {
width: "100%",
height: "100%",
border: "none",
objectFit: "cover",
},
"&.disabled": {
background: "rgba(0,0,0,.85)",
cursor: "not-allowed",
"& .image": {
display: "none",
},
},
});
const StyleLevelBlock = styled(StyleBlock)`
position: absolute;
`;
const StyleRandomBoard = styled(Row)({
marginTop: 8,
});
const StyleRandomArea = styled.div({
marginTop: 8,
});
const StyleSlotBoard = styled(Row)({
border: "10px solid #2396ef",
margin: "16px auto",
width: "fit-content",
});
const StyleSkillBoard = styled.div({
textAlign: "center",
});
const skillList = [
{
method: "doRevert",
text: "撤回",
},
{
method: "doRemove",
text: "移出",
},
{
method: "doShuffle",
text: "洗牌",
},
{
method: "doBroke",
text: "破坏",
},
{
method: "doHolyLight",
text: "圣光",
},
{
method: "doSeeRandom",
text: "透视",
},
];
const GamePage = () => {
const navigate = useNavigate();
const forceUpdate = useForceUpdate();
const onBack = () => navigate(-1);
const [isPlayed, setIsPlayed] = useState(false);
const [audio, setAudio] = useState<HTMLAudioElement>();
const {
clearBlockNum,
totalBlockNum,
gameStatus,
levelBlocksVal,
doClickBlock,
isHolyLight,
widthUnit,
heightUnit,
randomBlocksVal,
canSeeRandom,
slotAreaVal,
...rest
} = useGame();
useEffect(() => {
if (!audio) {
const audio = new Audio();
audio.src = AUDIO_URL;
setAudio(audio);
}
if (isPlayed) {
audio?.play();
} else {
audio?.pause();
}
}, [isPlayed]);
return (
<StyleGamePage>
<Row justify="space-between">
<StyleBackButton onClick={onBack}>返回</StyleBackButton>
<Button onClick={() => setIsPlayed(!isPlayed)}>
{isPlayed ? "暂停" : "播放"}
</Button>
<Button>
块数: {clearBlockNum} / {totalBlockNum}
</Button>
</Row>
<Win isWin={gameStatus === 3}></Win>
<Row justify="center">
<StyleLevelBoard className="level-board" show={gameStatus > 0}>
{levelBlocksVal?.map((block, index) => (
<div key={`${block.id}-${index}`}>
{block.status === 0 ? (
<StyleLevelBlock
className={`${
!isHolyLight && block.lowerThanBlocks.length > 0
? "disabled"
: ""
}`}
data-id={block.id}
style={{
zIndex: 100 + block.level,
left: block.x * widthUnit + "px",
top: block.y * heightUnit + "px",
}}
onClick={() => {
doClickBlock(block);
forceUpdate();
}}
>
<img className="image" src={block.type} alt={block.type} />
</StyleLevelBlock>
) : null}
</div>
))}
</StyleLevelBoard>
</Row>
<StyleRandomBoard justify="space-between">
{randomBlocksVal?.map((item, index) => (
<StyleRandomArea key={`${item}-${index}`}>
{item.length > 0 ? (
<StyleBlock
data-id={item[0].id}
onClick={() => {
doClickBlock(item[0], index);
forceUpdate();
}}
>
<img className="image" src={item[0].type} alt={item[0].type} />
</StyleBlock>
) : null}
{item?.slice(1).map((randomBlock, index) => (
<StyleBlock
className="disabled"
key={`${randomBlock.id}-${index}`}
>
<img
className="image"
src={randomBlock.type}
alt={randomBlock.type}
style={{
display: canSeeRandom ? "inline-block" : "none",
}}
/>
</StyleBlock>
))}
</StyleRandomArea>
))}
</StyleRandomBoard>
{
<StyleSlotBoard>
{slotAreaVal?.map((item, index) => (
<StyleBlock key={`${item?.id}-${index}`}>
<img src={item?.type} alt={item?.type} className="image" />
</StyleBlock>
))}
</StyleSlotBoard>
}
<StyleSkillBoard>
<Space>
{skillList.map((item, index) => (
<Button
size="small"
key={item.method + "-" + index}
onClick={() => {
const methods = { ...rest };
const handler = methods[item.method as keyof typeof methods];
if (typeof handler === "function") {
handler();
forceUpdate();
}
}}
>
{item.text}
</Button>
))}
</Space>
</StyleSkillBoard>
</StyleGamePage>
);
};
export default GamePage;
可以看到这个页面,我们恰好就用了forceUpdate方法,一个是在点击块的时候使用了,还要一个就是点击对应的圣光,撤销等按钮的时候也调用了这个方法强行更新视图。
这里也添加了一个音乐的播放配置,代码也很简单,就是监听一个播放状态,然后创建audio元素。可能比较不好理解的是这段代码:
const methods = { ...rest };
const handler = methods[item.method as keyof typeof methods];
if (typeof handler === "function") {
handler();
forceUpdate();
}
其实就是对应的字符串方法名从我们导出的useGame核心逻辑拿方法并调用而已。
到此为止,我们这个游戏就算是完成了,感谢鱼皮大佬的贡献,让我对这个游戏的原理实现有了更深刻的认识。
以下是源码和示例,
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。