用 React Hook + Parcel 构建真心话大冒险简单页面，让你的游戏更刺激更欢乐！

2024-02-17 17:40:20

使用 React Hook 和 Parcel 打造有趣且引人入胜的真心话大冒险页面

准备踏上挑战刺激与趣味并存的真心话大冒险之旅了吗？本文将引领你使用 React Hook 和 Parcel 构建一个令人难忘的真心话大冒险页面，让你在朋友和家人之间尽情畅玩。

项目搭建

首先，让我们为我们的项目搭建坚实的基础：

npx create-react-app 真心话大冒险

然后，使用以下命令安装必要的依赖：

cd 真心话大冒险
npm install react-router-dom parcel-bundler

页面设计

接下来，我们开始勾勒出我们真心话大冒险页面的蓝图。

App.js：应用根组件

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  const [currentPlayer, setCurrentPlayer] = useState(1);

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/truth" component={Truth} />
        <Route path="/dare" component={Dare} />
      </Switch>
    </Router>
  );
}

功能实现

现在，让我们为页面注入生命，使其具有互动性和吸引力。

Home.js：欢迎页面

function Home() {
  return (
    <div>
      <h1>欢迎来到真心话大冒险！</h1>
      <button onClick={() => { window.location.href = '/truth' }}>真心话</button>
      <button onClick={() => { window.location.href = '/dare' }}>大冒险</button>
    </div>
  );
}

Truth.js：真心话页面

function Truth() {
  const questions = ['你最喜欢的颜色是什么？', '你最喜欢的动物是什么？', '你最喜欢的食物是什么？'];
  const randomQuestion = questions[Math.floor(Math.random() * questions.length)];

  return (
    <div>
      <h1>真心话</h1>
      <p>{randomQuestion}</p>
      <input type="text" />
    </div>
  );
}

Dare.js：大冒险页面

function Dare() {
  const dares = ['做一个俯卧撑', '跳一个舞蹈', '唱一首歌'];
  const randomDare = dares[Math.floor(Math.random() * dares.length)];

  return (
    <div>
      <h1>大冒险</h1>
      <p>{randomDare}</p>
      <button onClick={() => { alert('任务完成！') }}>完成</button>
    </div>
  );
}