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

2024-04-28 20:36

本文主要是介绍应用实战 | 别踩白块小游戏,邀请大家来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。

编译小程序

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

这篇关于应用实战 | 别踩白块小游戏,邀请大家来PK挑战~的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/944202

相关文章

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

MySQL 分区与分库分表策略应用小结

《MySQL分区与分库分表策略应用小结》在大数据量、复杂查询和高并发的应用场景下,单一数据库往往难以满足性能和扩展性的要求,本文将详细介绍这两种策略的基本概念、实现方法及优缺点,并通过实际案例展示如... 目录mysql 分区与分库分表策略1. 数据库水平拆分的背景2. MySQL 分区策略2.1 分区概念

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S