【taro react】(游戏) ---- 类2048游戏，看看在秦朝，功勋爵位你能到哪一级

最新推荐文章于 2023-11-14 08:00:00 发布
最新推荐文章于 2023-11-14 08:00:00 发布
阅读量427 收藏
点赞数
分类专栏： 游戏 文章标签： react.js 游戏 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38082783/article/details/124865077
版权
这篇博客介绍了一个基于Taro和React的类2048游戏，将数字替换为秦朝功勋爵位等级。文章详细阐述了游戏的实现思路，包括二维数组的使用、随机数生成、移动逻辑和环境兼容性处理，提供了完整的代码实现，并给出了微信小程序的体验方式。
摘要由CSDN通过智能技术生成

说明

  1. 原理就是在2048游戏逻辑的基础上，将数字替换为对应的秦朝功勋爵位等级；
  2. 由于很少有人有耐心耍到最后的，所以本文将20级功勋爵位中提取了12级，不连续；
  3. 有想对功勋爵位制详细了解的秦朝二十级军功爵位制

1. 预览

在这里插入图片描述

2. 实现思路

  1. 通过二维数组，确定每个数字所在的位置；
  2. 通过对象为引用变量，直接改变对象中的属性；
  3. 将二维数组变成一维数组抽取随机位置；
  4. 使用Math.random()产生随机数2或者4；
  5. 做web和微信小程序的程序兼容！

3. 环境

Taro 3.2.12

4. 页面HTML

    了解本专栏 订阅专栏 解锁全文 超级会员免费看
    Rattenking
    关注
    专栏目录
    订阅专栏
    taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
    05-02
    taro-iconfont-cli 在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3...
    React-2048-game：一款具有react，redux最佳实践的精美2048游戏
    02-05
    React-2048游戏| 精美的2048游戏版本，具有和最佳实践。 使用许多真棒开源工具来提高代码风格，包括 ， ，，和， 所保证的自动代码质量和部署应用的持续集成服务。 显示 :red_heart: 通过 :glowing_star: 。 :backhand_index_pointing_right: 快速开始 要求nodejs版本> 6.10，因为配置脚本是在es6 +中编写的，还建议使用来管理项目依赖项而不是npm。 在分叉项目之后，请按照以下命令开始使用。 npm i -g yarn # Install yarn git clone git@github.com: < your> /React-2048-game.git cd React-2048-ga
    用 React 编写2048游戏
    weixin_30306905的博客
    12-25 190
    1.代码 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>万能的React</title> 6 <style> 7 ...
    Python之opencv画图
    qq_38661599的博客
    07-22 793
    1.安装opencv pip install opencv-python 2.简单举例 (1)具体代码如下 import cv2 import numpy as np # (400, 300, 3):高度,宽度,维数 img_array = np.zeros((400, 300, 3)) # 蓝绿红 img_array[100][200] = (255, 0, 0) cv2.ims...
    Python OpenCV 绘图
    秋山丶雪绪的博客
    07-09 1349
    使用 Python OpenCV 绘图相关 API 学习笔记，补充一些官网教程中没有的细节，画个篮球场作为实例训练。
    python利用opencv画图
    caobin0825的博客
    05-17 771
    import cv2import matplotlib.pyplot as pltimport numpy# img = cv2.imread("bb.png")##########opencv打开图片img = numpy.zeros((500,500,3),dtype="uint8")###构建全零矩阵###画线，其中（0,0）为起始点坐标，(500,300)为终止点坐标，# （255,0,0...
    taro-inject-component-loader:为 Taro React 小程序注入全局组件
    05-21
    众所周知，小程序中不能定义全局组件，如果我们想自定义一个 modal 弹窗，来替代 wx.showModal 的话，则需要在每个页面手动的引入组件。随着项目越来越大，手动引入组件无疑是繁琐和低效的，因而抽空开发了这个 ...
    react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
    02-05
    react-native-amap3d react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑...
    react-native-editable-table:在React Native中具有垂直滚动的可编辑表组件
    05-15
    在React Native中具有垂直滚动的可编辑表组件 安装 npm install react-native-editable-list --save 用法 import EditableTable from 'react-native-editable-table' ; class editabletable extends Component { ...
    用 React 制作的 简单数独游戏_JavaScript_代码_下载
    06-24
    React-Sudoku 是由反应驱动的数独实现。数独是一款基于逻辑的数字放置益智游戏。游戏的重点是用数字填充 9x9 网格，以便每一列、每一行和九个 3x3 子网格中的每一个都包含从 1 到 9 的所有数字。 React-Sudoku 根据玩家浏览器中的三个难度（简单、中等和困难）生成随机数独板。 效果展示： https://github.com/egfanboy/react-sudoku/blob/master/assets/UI.png 更多详情、使用方法，请下载后阅读README.md文件
    react-使用ReactJS实现的简单TicTacToe游戏
    08-14
    使用React JS实现的简单Tic Tac Toe游戏
    Python - OpenCV 的绘图
    BLOG OF PETERMAOSX.
    12-31 265
    1、画线 cv2.line(img,(0,0),(511,511),(255,0,0),5) #这是一条从左上方到右下方的蓝色线段 2、画矩形 cv2.rectangle(img,(384,0),(510,128),(0,255,0),3) #指定左上角和右下角就可以确定一个矩形了 3、画圆 cv2.circle(img,(447,63),63,(0,0,255),-1) #指定圆心和半径 ...
    【Python Opencv】Opencv画图形
    最新发布
    m0_62599305的博客
    11-14 1683
    在计算机视觉和图像处理中，OpenCV不仅可以处理图像和视频，还提供了一组功能强大的工具，用于在图像上绘制各种形状和图形。这些功能使得我们能够在图像上标注、分析和突出显示感兴趣的区域。本文将介绍如何使用Python和OpenCV绘制各种图形，包括线条、矩形、圆形等，以及如何添加文本。这对于图像处理和计算机视觉任务中的可视化和分析非常有用。目标学习使用 OpenCV 绘制不同的几何形状。
    python opencv 学习————绘图
    角落男孩的博客
    04-03 339
    # -*- coding: utf-8 -*- import numpy as np import cv2 ''' • img: 你想 绘制图形的 幅图像。 • color: 形状的颜色。以RGB为例 需要传入一个元组BGR 例如 255,0,0 代表蓝色，第一个是蓝色通道，第二个是绿色通道，第三个是红色通道。对于灰度图只需要传入灰度值。 • thickness 线条的粗细。如果给一...
    Python OpenCV-基本图形绘制
    数据科学知识库
    04-21 667
    1.导入模块 import cv2 as cv import numpy as np 2.OpenCV绘图大致步骤 OpenCV 图形绘制步骤 （1）先定义基础画布canvas = np.zeros((400,600,3),dtype=np.uint8)+255 （2）画布分界,(300,0)分别是宽、高cv.line(canvas,(300,0),(300,399),(0,0,0,),2) （3）在画布上绘制图形，如画圆cv.circle(canvas, (150, 300), 88, (0, 0,
    Python opencv库画图（绘图）功能
    我的博客
    01-18 4100
    前言 这里总结一下使用opencv的一些基本画图的操作。 # 导入相关库 import cv2 as cv, numpy as np # from matplotlib import pyplot as plt import matplotlib.pyplot as plt # 上下两种引入方式都可以 # 画图实现代码 """ 1.画线,要绘制一条线，您需要传递线的开始和结束坐标。 我们将创建一个黑色图像，并从左上角到右下角在其上绘制一条蓝线。""" # 创建黑色图像,这个3...
    python opencv画图可视化
    weixin_30243533的博客
    01-09 589
    画直线 import numpy as np import cv2 # Create a black image img = np.zeros((512,512,3), np.uint8) # Draw a diagonal blue line with thickness of 5 px cv2.line(img,(0,0),(511,511),(255,0,0),5) c...
    OpenCV-Python学习＜六＞ 绘图
    New_Tank的博客
    04-23 4173
    OpenCV提供了方便的绘图功能，可以绘制直线，矩阵，圆，椭圆等多种几何图形，还能再指定位置添加文字说明。 1. 绘制直线： img = v2.line(img, pt1, pt2, color [, thickness [, lineType]]) 返回值， img: 绘制出的图像。 参数： img: 在其上绘制直线的载体图像（绘图的容器载体，也成为画布，画板） pt1,pt2: 线段的起点和终点。类型为tuple. color:绘制直线的颜色。通常使用BGR模型表示。 例如：（0, 0
    taro配置react-vant
    06-08
    要在 Taro 中使用 React-Vant，需要进行以下步骤： 1. 安装 React-Vant 和相关依赖： ``` npm install react-vant vant -S npm install babel-plugin-import style-loader css-loader postcss-loader postcss-...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包

    打赏作者

    Rattenking

    你的鼓励将是我创作的最大动力

    ¥1 ¥2 ¥4 ¥6 ¥10 ¥20
    扫码支付：¥1
    获取中
    扫码支付

    您的余额不足，请更换扫码支付或充值

    打赏作者

    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

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

    余额充值