React Hooks + Typescript实现贪吃蛇小游戏

本文介绍了如何使用React Hooks和Typescript来实现一个贪吃蛇小游戏。首先,通过create react app创建了一个支持Hooks的项目。然后详细讨论了如何设计‘蛇’组件,包括组件的状态和受控属性。接着,讲述了如何处理状态变化,特别是时间状态和键盘控制,以实现蛇的移动。最后,提到了在处理键盘事件时,如何设置监听器以及处理keyCode的方法。

项目地址(Github)
游戏界面

初始化项目

react 16.8已经正式支持react hooks的使用,开发者可以通过官方推荐的create react app创建一个基于typescript + react16.8(hooks)的初始化项目模板(直接根据引导创建即可,无需额外的初始化配置)。

潜在的问题:使用npm进行安装可能带来一些bug,这些bug目前还没有被修复。如果npm i之后使用npm start无法启动项目。可以尝试删除node_modules之后使用yarn安装依赖。

rm -r node_modules
yarn install

设计“蛇”组件

一条蛇应当包含自己独立的状态,如长度,位置,前进方向等信息。也要包含一些受控信息,如速度等。这两类信息的区分界限比较模糊,开发时也可以根据个人爱好进行选择。

但一个合理的区分方式是,自身状态(state)应当与外界属性无关或不完全相关。
f : ( p r o p s , p r o p s s i d e ) → s t a t e f: (props, props_{side}) \to state f:(props,propsside)state
其中props为组件的可控参数, p r o p s s i d e props_{side} propsside为组件的副作用参数,如当前的游戏时长。基于此种理解既可以将游戏时长这种相对隐形的参数作为显性参数与其他参数等价都作为props设计也可以作为组件的内部状态,甚至还可以构建一个中间层,时间作为中间层组件的state,作为最下层组件的props。

使用react hooks,组件的定义可以写作如下的形式

const Snake: React.FC<SnakeProps> = (props: SnakeProps
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值