应用实战 | 别踩白块小游戏,邀请大家来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

相关文章

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python循环缓冲区的应用详解

《Python循环缓冲区的应用详解》循环缓冲区是一个线性缓冲区,逻辑上被视为一个循环的结构,本文主要为大家介绍了Python中循环缓冲区的相关应用,有兴趣的小伙伴可以了解一下... 目录什么是循环缓冲区循环缓冲区的结构python中的循环缓冲区实现运行循环缓冲区循环缓冲区的优势应用案例Python中的实现库

SpringBoot整合MybatisPlus的基本应用指南

《SpringBoot整合MybatisPlus的基本应用指南》MyBatis-Plus,简称MP,是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,下面小编就来和大家介绍一下... 目录一、MyBATisPlus简介二、SpringBoot整合MybatisPlus1、创建数据库和

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

python中time模块的常用方法及应用详解

《python中time模块的常用方法及应用详解》在Python开发中,时间处理是绕不开的刚需场景,从性能计时到定时任务,从日志记录到数据同步,时间模块始终是开发者最得力的工具之一,本文将通过真实案例... 目录一、时间基石:time.time()典型场景:程序性能分析进阶技巧:结合上下文管理器实现自动计时