应用实战 | 别踩白块小游戏,邀请大家来PK挑战~

“踩白块会输”是一个简单的微信小程序游戏,灵感来自当年火热的别踩白块游戏,程序内分成三个模块:手残模式、经典模式和极速模式,分别对应由易到难的三种玩法,可以查看游戏排名。动画效果采用JS实现,小程序后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:

  • 云数据库:存储小程序数据表的信息。
  • 用户验证:小程序使用MemFire Cloud提供的用户认证的API接口,快速完成用户注册登录操作。
  • 即时API:创建数据表时会自动生成 API。

暂时无法在飞书文档外展示此内容

创建应用

目的:通过创建的一个MemFire Cloud应用来获得数据库、云存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。

登录MemFire Cloud, 在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

点击进入应用详情页面,在“数据表”页面可视化建表。

1.创建gamer表

在数据表页面,点击“新建数据表”,创建gamer表。gamer表主要记录游戏玩家信息和各个游戏模式的最高分信息,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
user_nametext用户名(唯一)
created_attimetamptz创建时间
get_started_highscoreint8手残模式最高分数(可空)
classic_highscoreint8经典模式最高分数(可空)
extreme_speed_highscoreint8极速模式最高分数(可空)

sql操作如下:

CREATE TABLE "public"."gamer" ( "id" SERIAL,"created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-09-16 15:23:36.89768+08'::timestamp with time zone ,"user_name" TEXT NOT NULL,"get_started_highscore" BIGINT NULL,"classic_highscore" BIGINT NULL,"extreme_speed_highscore" BIGINT NULL,CONSTRAINT "gamer_pkey" PRIMARY KEY ("id")
);

2.创建get_started表

在数据表页面,点击“新建数据表”,创建get_started表。get_started表主要记录手残模式的游戏记录数据,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
user_nametext用户名
created_attimeatamptz创建时间
scoreint8游戏分数

sql操作如下

CREATE TABLE "public"."get_started" ( "id" SERIAL,"created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-09-16 14:58:11.998301+08'::timestamp with time zone ,"user_name" TEXT NOT NULL,"score" BIGINT NOT NULL,CONSTRAINT "get_started_pkey" PRIMARY KEY ("id")
);

3.创建classic表

在数据表页面,点击“新建数据表”,创建classic表。classic表主要记录经典模式游戏的数据,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
user_nametext用户名
created_attimeatamptz创建时间
scoreint8游戏分数

sql操作如下

CREATE TABLE "public"."classic" ( "id" SERIAL,"created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-09-16 14:59:40.159136+08'::timestamp with time zone ,"user_name" TEXT NOT NULL,"score" BIGINT NOT NULL,CONSTRAINT "classic_pkey" PRIMARY KEY ("id")
);

4.创建extreme_speed表

在数据表页面,点击“新建数据表”,创建extreme_speed表,extreme_speed表主要记录极速模式游戏数据,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
user_nametext用户名
created_attimeatamptz创建时间
scoreint8游戏分数

sql操作如下

CREATE TABLE "public"."extreme_speed" ( "id" SERIAL,"created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-09-16 15:01:07.838302+08'::timestamp with time zone ,"user_name" TEXT NOT NULL,"score" BIGINT NOT NULL,CONSTRAINT "extreme_speed_pkey" PRIMARY KEY ("id")
);

注册小程序

以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。

如果您还未注册过小程序,请参考官方步骤注册小程序(只需要通过您的邮箱注册一个小程序获得一个appid,然后下载一个微信开发工具即可)

下载代码

模板代码:git@github.com:LucaRao/Don-t-step-on-the-white-demo.git

完整代码:https://github.com/LucaRao/Don-t-step-on-the-white.git

Node.js (>=14.x <=16.x) 。

开发环境配置

选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid。
在这里插入图片描述

构建npm

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

在这里插入图片描述

打开终端,在项目根目录下执行如下命令 。

npm init
npm install

在这里插入图片描述

接下来,下载小程序需要的MemFire Cloud的微信小程序SDK。

npm install supabase-wechat-stable

点击开发者工具中的菜单栏:工具 /构建 npm
在这里插入图片描述

这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。

在这里插入图片描述

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端,小程序使用了Supabase 微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的概览里面去获取这两个参数然后配置到lib/supabase.ts里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable'
const url = ""
const key = ""export const supabase = createClient(url, key)

回到MemFire Cloud首页,在应用/概括页面,获取服务地址以及token信息,只需要从总览中获取URL接口地址和anon的密钥。
在这里插入图片描述

Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

注意:service_role密钥可以绕过任何安全策略完全访问您的数据。这些密钥必须保密,并且要在服务器环境中使用,绝不能在客户端或浏览器上使用。 在后续示例代码中,需要提供supabaseUrl和supabaseKey。

编译小程序

先进行小程序注册,注册完成后就可以畅玩游戏并保存游戏数据,查看比赛排名
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/4318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多线程事务怎么回滚

1、背景介绍 1&#xff0c;最近有一个大数据量插入的操作入库的业务场景&#xff0c;需要先做一些其他修改操作&#xff0c;然后在执行插入操作&#xff0c;由于插入数据可能会很多&#xff0c;用到多线程去拆分数据并行处理来提高响应时间&#xff0c;如果有一个线程执行失败…

Git重修系列 ------ Git的使用和常用命令总结

一、Git的安装和配置 git安装&#xff1a; Git - Downloads git首次配置用户信息&#xff1a; $ git config --global user.name "kequan" $ git config --global user.email kequanchanqq.com $ git config --global credential store 配置 Git 以使用本地存储机…

mysql主库delete一个没主键的表导致从库延迟很久问题处理

一 问题描述 发现线上环境一个从库出现延迟&#xff0c;延迟了2天了&#xff0c;还没追上主库。 查看当前运行的sql及事务&#xff0c;发现这个sql语句是在delete一个没主键的表。 二 问题模拟 这里在测试环境复现下这个问题。 2.1 在主库造数据 use baidd; CREATE TABL…

【数据库】Redis

文章目录 [toc]Redis终端操作进入Redis终端Redis服务测试切换仓库 String命令存储字符串普通存储设置存储过期时间批量存储 查询字符串查询单条批量查询 Key命令查询key查询所有根据key首字母查询判断key是否存在查询指定的key对应的value的类型 删除键值对 Hash命令存储hash查…

软件测试_v模型_w模型

v模型&#xff1a; w模型&#xff1a; 一、V模型的8个阶段及其对应关系如下&#xff1a; 1. 需求分析&#xff1a;明确项目的需求&#xff0c;为后续设计提供依据。 2. 总体设计&#xff1a;根据需求分析&#xff0c;设计系统的总体架构。 3. 详细设计&#xff1a;在总体设计的…

在no branch上commit后,再切换到其他分支,找不到no branch分支的修改怎么办?

解决办法 通过git reflog我们可以查看历史提交记录&#xff0c;这里的第二条提交&#xff08;fbd3ea8&#xff09;就是我在no branch上的提交。 再通过git checkout -b backup fbd3ea8&#xff0c;恢复到上次提交的状态&#xff0c;并且为其创建个分支backup&#xff0c;此时…

(七)Servlet教程——Idea编辑器集成Tomcat

1. 点击桌面上Idea快捷方式打开Idea编辑器&#xff0c;假如没有创建项目的话打开Idea编辑器后的界面展示如下图所示 2. 点击界面左侧菜单中的自定义 3. 然后点击界面中的“所有设置...”,然后点击“构建、执行、部署”&#xff0c;选择其中的“应用程序服务器” 4. 点击“”按钮…

C语言-动态内存分配

即使行动导致错误&#xff0c;却也带来了学习与成长;不行动则是停滞与萎缩。&#x1f493;&#x1f493;&#x1f493; •&#x1f319;知识回顾 亲爱的友友们大家好&#xff01;&#x1f496;&#x1f496;&#x1f496;&#xff0c;我们紧接着要进入一个新的内容&#xff0c;…

k8s RBAC 角色访问控制详解与生产中的实际应用案例

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、k8s简介 2、RBAC简介 二、RBAC关键…

【JavaParser笔记04】如何使用JavaParser依赖库生成Java类、接口、方法、属性、注释等内容

这篇文章,主要介绍如何使用JavaParser依赖库生成Java类、接口、方法、属性、注释等内容。 目录 一、JavaParser代码生成 1.1、引入依赖 1.2、生成Java类 1.3、生成属性和setter、

centos学习-网络配置命令-实用技巧

CentOS网络配置命令详解&#xff1a;轻松掌握网络配置技巧 在CentOS服务器的搭建和管理过程中&#xff0c;网络配置是至关重要的一环。良好的网络配置不仅可以确保服务器的稳定运行&#xff0c;还能够保障网络安全和数据传输效率。本文将详细介绍CentOS网络配置命令&#xff0…

【Pytorch报错】RuntimeError: cuDNN error: CUDNN_STATUS_INTERNAL_ERROR

报错信息&#xff1a; File "/root/miniconda3/lib/python3.8/site-packages/torch/nn/modules/conv.py", line 297, in _conv_forwardreturn F.conv1d(input, weight, bias, self.stride, RuntimeError: CUDA error: CUBLAS_STATUS_ALLOC_FAILED when calling cubl…

【AMBA Bus ACE 总线 6 -- ACE cache maintenance 详细介绍】

文章目录 ACE cache maintenance什么叫 cache maintenance operations呢?ACE cache line statesACE cache maintenance 什么叫 cache maintenance operations呢? 比如ARM CPU 对自己的Icache 和 Dcache会有大量的transaction操作,也即maintenance操作,如果cache 是dirty 话…

Python的历史演变与作用

目录 1.概述 2.起源 3.发展阶段 4.Python 3的诞生 5.现状与未来 6.Python的作用 6.1.Web开发 6.2.数据科学与人工智能 ​​​​​​​6.3.自动化与脚本编程 ​​​​​​​6.4.教育与学习 ​​​​​​​6.5.其他领域 7.结语 1.概述 Python&#xff0c;一门富有表…

26.统一网关Gateway

网关的功能 1.身份认证&#xff0c;权限的校验。 2.服务的路由&#xff0c;负载均衡。用户请求被分配到哪一个微服务。一个微服务可以有多个实例&#xff0c;所以使用负载均衡。 3.请求限流。 springcloud网关实现有两种&#xff1a;gateway, zuul zuul是基于servlet实现的…

如何在vue中写 键盘控制方法

仅使用一个方法块来监听键盘事件并在按下 L 键时输出 "L"&#xff0c;您可以直接在组件的 mounted 钩子函数中定义匿名函数来处理键盘事件。这样做可以避免在组件中定义额外的方法&#xff0c;使代码更加简洁。以下是一个简化的示例代码&#xff1a; export default …

JavaEE——介绍 HTTPServlet 三部分使用与 cookie 和 session 的阐述

文章目录 一、HTTPServlet介绍其中的关键 三个方法 二、HTTPServletRequest(处理请求)1.分块介绍方法作用get 为前缀的方法字段中 含有 getParameter 字段 的方法(前后端交互)&#xff1a;字段中 含有 getHeader 字段 的方法&#xff1a; 2.解释前后端的交互过程3.使用 json 格…

面试经验|Arm机器学习和图形算法工程师——技术经理面

文章目录 题记英国面试框架HR简单沟通技术经理面技术面谈Offer 面试记录自我介绍环节项目机器学习/图像处理/图形学算法如何做超分辨率任务&#xff0c;通常使用什么loss函数输入10个连续的低质量视频帧&#xff0c;如何对画面进行去噪请简述计算光流的过程请简述alpha blendin…

Bun 入门到精通(二)——初始化

bun init 使用 bun init 可以搭建一个新项目&#xff0c;类似于 npm init&#xff0c;同样&#xff0c;bun init 也可以接收 -y/--yes 的参数&#xff0c;同样类似于 npm init -y。 bun init工作原理 先创建一些默认文件 包文件&#xff1a;带 name 属性的 package.json语言…

币圈是什么意思?币圈开发

币圈是一个涵盖了区块链、加密货币及其应用的独特领域&#xff0c;它的兴起与发展已经彻底改变了我们对金融、科技和未来的认知。 一、什么是币圈&#xff1f; 币圈可以被理解为围绕虚拟货币展开的一系列活动和产业的总称。它包括区块链技术的研发、数字货币的创造、交易、投资…