Git Product home page Git Product logo

zeno2019 / tiny-minesweeper Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 0.0 320 KB

Tiny Minesweeper is a simple Minesweeper game implemented with React, designed to offer a challenging gaming experience. Try it out at: https://tiny-minesweeper.zeabur.app/ or https://tiny-minesweeper.netlify.app/

Home Page: https://tiny-minesweeper.zeabur.app/

HTML 1.33% JavaScript 7.70% TypeScript 86.36% CSS 4.61%
minesweeper minesweeper-game react react-game web-game

tiny-minesweeper's Introduction

Tiny Minesweeper

项目简介 / Project Introduction

Tiny Minesweeper 是扫雷游戏基于 React 的简单实现,旨在提供具有一定挑战性的游戏体验。你可以通过以下链接试玩这个游戏:

  • 主链接 / Main Link: 👉 Play
  • 副链接 / Secondary Link: 👉 Play

玩法介绍 / How to Play

中文

  1. 游戏开始时,游戏板上会有一些隐藏的地雷。
  2. 点击任意方块以揭开它。如果你点击到地雷,游戏结束。
  3. 如果你揭开的方块没有地雷,它会显示一个数字,表示周围八个方块中有多少个地雷。
  4. 根据这些数字,推理出哪些方块可能有地雷,并标记它们。
  5. 右键点击方块可以标记为地雷,再次右键点击可以取消标记。
  6. 当你成功揭开所有没有地雷的方块时,你赢得游戏。

补充说明 / Additional Notes

  1. 目前移动端的响应式视图只适配了 easy 难度。
  2. 移动端标记雷需要长按。

English

  1. At the start of the game, there are some hidden mines on the game board.
  2. Click any tile to reveal it. If you click on a mine, the game is over.
  3. If the revealed tile does not contain a mine, it will display a number indicating how many mines are in the surrounding eight tiles.
  4. Use these numbers to deduce which tiles might contain mines and mark them.
  5. Right-click a tile to mark it as a mine, and right-click again to unmark it.
  6. You win the game when you successfully reveal all tiles that do not contain mines.

Additional Notes

  1. Currently, the responsive view on mobile devices only supports the easy difficulty.
  2. To mark a mine on mobile devices, you need to long press.

代码结构 / Code Structure

  • src/: 源代码目录,包括主要的 React 组件和布局文件。
    • App.tsx: 应用的主入口文件,包含主要的游戏组件1
    • components/: 组件目录,包含游戏的各个 UI 组件。
    • logic/: 游戏逻辑目录,包含游戏的核心逻辑实现。
    • utils/: 工具目录,包含辅助函数和工具类。

本地启动 / Local Setup

安装依赖 / Install Dependencies

pnpm install

启动开发服务器 / Start Development Server

pnpm dev

致谢 / Acknowledgements

感谢 Simon-He95/minesweeper 项目对本项目的启发和帮助。

tiny-minesweeper's People

Contributors

zeno2019 avatar

Stargazers

Jared.Liu avatar 纵倾童鞋 avatar  avatar Lsnsh Xin avatar 辛宝Otto avatar  avatar  avatar Kai avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.