学习项目 | 一个基于react开发的消除类小游戏

这是一个基于react开发的消除类小游戏。

项目代码比较简单，适合学习~

代码示例

代码语言：javascript复制

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

代码语言：javascript复制

import React, { useEffect, useState } from "react";
import get from "lodash/get";
import AV from "leancloud-storage";
import { getScoreList, getAroundScoreList } from "../utils/av";
import "./index.css";

function renderUser(user) {
  if (user.name) return user.name;
  // const list = ['不愿透露姓名的用户','神秘大侠', '佚名',""]
  return "神秘用户："   user.id;
}

export default () => {
  const [data, setData] = useState([]);
  const [data2, setData2] = useState([]);

  const user = AV.User.current();

  useEffect(async () => {
    const [res, res2] = await Promise.all([
      getScoreList(),
      getAroundScoreList(),
    ]);
    setData(res);
    setData2(res2 || []);
  }, []);

  return (
    <div className="container">
      <h3 className="title">排行榜：</h3>
      <ul className="ul">
        {data.map((i) => {
          return (
            <li key={get(i, "user.id")} className="li">
              <span className="rank">
                第{i.rank   1}名
                {get(user, "id") === get(i, "user.id") ? "(你)" : ""}
              </span>
              <span className="name">{get(i, "user.attributes.nickname")}</span>
              <span className="value">{i.value}</span>
            </li>
          );
        })}

        <li className="li">
          <span className="rank">...</span>
          <span className="name"></span>
          <span className="value"></span>
        </li>
        {data2
          .filter((i) => {
            const uid = get(i, "user.id");
            const idx = data.findIndex((j) => get(j, "user.id") === uid);
            return idx === -1;
          })
          .map((i) => {
            return (
              <li key={get(i, "user.id")} className="li">
                <span className="rank">
                  第{i.rank   1}名
                  {get(user, "id") === get(i, "user.id") ? "(你)" : ""}
                </span>
                <span className="name">
                  {get(i, "user.attributes.nickname")}
                </span>
                <span className="value">{i.value}</span>
              </li>
            );
          })}
      </ul>
    </div>
  );
};

安装依赖

代码语言：javascript复制

yarn

运行测试环境

代码语言：javascript复制

yarn start

注：如果本地调试图片不显示，需要去掉package.json中的homepage字段。

Github地址：https://github.com/liumin1128/eliminate

End

react import 开发 调试 小游戏

0 人点赞