当前位置: 首页 > news >正文

【微信小游戏学习心得】

这里是引用

微信小游戏学习心得

  • 简介
  • 了解微信小游戏
  • 理解2d游戏原理
  • 数据驱动视图
  • 总结

简介

本人通过学习了解微信小游戏,学习微信小游戏,加深了对前端框架,vue和react基于数据驱动视图的理解,及浏览器文档模型和javaScript之间的关系。帮助本人更好的工作和学习前端领域的编程。

了解微信小游戏

微信小游戏是小程序其中的一个类目,是一种基于微信平台开发,不需要下载安装即可使用的全新游戏应用,体现了“用完即走”的理念,充分节省用户的手机空间。 小游戏无论是开发以及使用都相当轻便快捷,同时基于微信的社交属性,让小游戏具备较强的社交传播力,用户可以和朋友一起享受游戏的乐趣。
以上是官方的介绍。
根据官方的指引需要安装开发者工具
https://developers.weixin.qq.com/minigame/introduction/

选择小游戏类目创建小游戏
在这里插入图片描述
官方提供了一套基础版本飞机大战的代码,本文得学习就是在这个基础上进行的。
在这里插入图片描述

理解2d游戏原理

小游戏的2d版本是基于canvas的绘图能力,官方给提供的游戏界面其整个就是一个游戏画布。我们制作游戏就是在整个画布上绘制完成的。在开始前需要了解画图的基本能力。
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

数据驱动视图

其入口目录是main.js。这个目录中定义了侦动画的连续绘制和各个组件的引用。
在这里插入图片描述
找到loop方法,这个方法调用了requestAnimationFrame Api实现了贞动画的连续绘制。

  // 实现游戏帧循环loop() {this.update(); // 更新游戏逻辑this.render(); // 渲染游戏画面// 请求下一帧动画this.aniId = requestAnimationFrame(this.loop.bind(this));}

其中update和render方法是重点,分别表示更新逻辑和绘制画面。
更新逻辑是是对游戏中绘制行为,图片,音频资源的调度。绘制模型的判断。
更新画面是最把运行结果绘制到画面上。让画面是动态的,从而实现交互。
在实操了这两个方法之后我又看了vue的代码的组件结构,react的代码目录结构

<template><div>{{helloWorld}}</div>
</template><script setup>const helloWorld = '你好,世界'
</script>
const HelloWorld = ()  => {const [helloWorld, setHelloWorld] = useState('')useEffect(() => {setHelloWorld('你好,世界')return () => {}}, [])return (<div>{helloWorld}</div>)
}

vue中template标签中定义了视图的渲染相当于render,script标签中定义渲染行为相当于update。
react中函数入口在执行过程中相当于是update, 函数出口相当于是render。
在类组件版本中这两个框架都有一个render函数执行渲染。其余的是开发者义处理逻辑。
来到小游戏的基础类中,有关于render方法实现

  /*** 将精灵图绘制在canvas上*/render(ctx) {if (!this.visible) return;ctx.drawImage(this.img, this.x, this.y, this.width, this.height);}update () {this.y += 1this.x += 0.1this.width += 1this.height += 1}

作用是绘制一张图片到指定位置。其中绘制的图片,坐标,大小都是变量可以在update中更改。
前面提到的requestAnimationFrame Api根据刷新频率不一样一般是每秒60帧或者120帧,我们可以通过技术手段将其锁定到60帧。一帧代表一次,而一帧所做的事就是要执行一次update和render。当我理解了这一点的时候就是明白了,界面并不是一静止不动的而是一直在更新,只不过内容看上去并无变化,给人感觉是静止的。页面的形态就是由绘制的数据决定的。从而这个过程就是数据驱动视图。
vue和react本质上所做的事并无区别,就是实现方式不同。

总结

因为2d小游戏提供了一个画布,并没有浏览器文档模型和层叠样式表。所以整个绘制过程需要自己实现。其复杂度是大于常规网页开发的。借助一些游戏类引擎可以帮我们简化开发。而数据驱动视图应该是电脑系统的工作模式。我们开发的app也是借助了系统的原生能力。

相关文章:

【微信小游戏学习心得】

这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介 本人通过学习了解微信小游戏&#xff0c;学习微信小游戏&#xff0c;加深了对前端框架&#xff0c;vue和react基于数据驱动视图的理解&#xff0c;及浏览器文档模型和javaScript之间的关…...

Python | Leetcode Python题解之第539题最小时间差

题目&#xff1a; 题解&#xff1a; def getMinutes(t: str) -> int:return ((ord(t[0]) - ord(0)) * 10 ord(t[1]) - ord(0)) * 60 (ord(t[3]) - ord(0)) * 10 ord(t[4]) - ord(0)class Solution:def findMinDifference(self, timePoints: List[str]) -> int:n len…...

Zookeeper运维秘籍:四字命令基础、详解及业务应用全解析

文章目录 一、四字命令基础二、四字命令详解三、四字命令的开启与配置四、结合业务解读四字命令confconsenvi命令Stat命令MNTR命令ruok命令dump命令wchswchp ZooKeeper&#xff0c;作为一款分布式协调服务&#xff0c;提供了丰富的四字命令&#xff08;也称为四字短语&#xff…...

Error: `slot-scope` are deprecated报错解决

本人新手菜鸡&#xff0c;文章为自己遇到问题的记录&#xff0c;如有错误或不足还请大佬批评指正 问题描述 在Vue3环境下使用slot插槽&#xff0c;出现‘slot-scope’ are deprecated报错问题&#xff0c;经过查找发现&#xff0c;是因为在slot插槽使用中&#xff0c;vue2和vu…...

Excel(图例)中使用上标下标

单元格中 1、在Excel单元格中刷黑要设置成上标的字符&#xff0c;如m2中的2&#xff1b; 2、单击右键&#xff0c;在弹出的对话框中选择“设置单元格格式”&#xff1b; 3、在弹出的“设置单元格格式”对话框中选择上标&#xff08;或下标&#xff09;&#xff1b; 4、最后…...

熔断和降级

目录 隔离和降级 FeignClient整合Sentinel 通过Feign设置服务降级 1.创建类实现FallbackFactory接口&#xff0c;并让这个类和使用FeignClient的接口类绑定 2.让order-service服务的feign开启sentinel 3.测试&#xff0c;只开启order-service服务&#xff0c;而不开启user-…...

【学习笔记】Linux系统基础知识 6 —— su命令详解

提示&#xff1a;学习Linux系统基础命令 su 命令详解&#xff0c;包含通过 su 命令切换用户实例 一、前期准备 1.已经正确安装并成功进入Linux系统 说明&#xff1a;本实验采用的 Redhat 系统&#xff08;因系统不一致&#xff0c;可能部分显示存在差异&#xff09; 二、学…...

docker-compose命令介绍

docker-compose命令介绍 docker-compose1. docker-compose是什么2. Compose file format3. 命令3.1 服务相关命令upruncreatestartrestartdownstopkillrmpauseunpause 3.2 镜像相关命令3.3 查看相关命令 docker-compose 学了docker&#xff0c;然后就直接去学k8s了。恍恍惚惚几…...

Spring学习笔记_29——@Transactional

Transactional 1. 介绍 Transactional 是 Spring 框架提供的一个注解&#xff0c;用于声明方法或类级别的事务属性。 Spring事务&#xff1a;Spring学习笔记_28——事务-CSDN博客 当你在一个方法或类上使用 Transactional 注解时&#xff0c;Spring 会为该方法或类创建一个…...

github使用基础

要通过终端绑定GitHub账号并进行文件传输&#xff0c;你需要使用Git和SSH密钥来实现安全连接和操作。以下是一个基本流程&#xff1a; 设置GitHub和SSH 检查Git安装 通过终端输入以下命令查看是否安装Git&#xff1a; bash 复制代码 git --version配置Git用户名和邮箱 bash …...

Flink-Kafka-Connector

Apache Flink 是一个用于处理无界和有界数据的开源流处理框架。它支持高吞吐量、低延迟以及精确一次的状态一致性等特性。Flink 社区提供了丰富的连接器&#xff08;Connectors&#xff09;以方便与不同的数据源进行交互&#xff0c;其中就包括了 Apache Kafka 连接器。 Apach…...

远程终端vim里使用系统剪切板

1、本地通过终端远程linux server&#xff0c;由于不是桌面环境/GUI&#xff0c;终端vim里似乎没办法直接使用系统剪切板&#xff0c;即便已经是clipboard。 $ vim --version | grep clipboard clipboard keymap printer vertsplit eval …...

底层视角看C语言

文章目录 main函数很普通main函数之前调用了什么main函数和自定义函数的对比 变量名只为人而存在goto是循环的本质指针变量指针是一个特殊的数字汇编层面看指针 数组和指针数组越界问题低端地址越界高端地址越界 引用就是指针 main函数很普通 main函数是第一个被调用的函数吗&…...

【点云学习笔记】——分割任务学习

3D点云实例分割 vs 3D点云语义分割 1. 功能对比 代码1&#xff08;实例分割&#xff09;&#xff1a;用于3D点云中的实例分割任务&#xff0c;其目标是将点云中的物体分割成独立的实例。每个实例可能属于相同类别但需要被分开&#xff0c;比如在自动驾驶中的多个行人、汽车&am…...

Qt——窗口

一.窗口概述 Qt 窗口是通过 QMainWindow 类来实现的。 QMainWindow是一个为用户提供主窗口程序的类&#xff0c;继承QWidget类&#xff0c;并且提供一个预定义的布局。包含一个菜单栏&#xff08;menu bar&#xff09;&#xff0c;多个工具栏&#xff08;tool bars&#xff0…...

InfluxDB性能优化指南

1. 引言 1.1 InfluxDB的简介与发展背景 InfluxDB是一个开源的时间序列数据库&#xff08;TSDB&#xff09;&#xff0c;由InfluxData公司开发&#xff0c;专门用于处理高频率的数据写入和查询。其设计初衷是为物联网、应用程序监控、DevOps和实时分析等场景提供一个高效的存储…...

负载均衡式在线oj项目开发文档2(个人项目)

judge模块的框架 完成了网页渲染的功能之后&#xff0c;就需要判断用户提交的代码是否是正确的&#xff0c;当用户点击提交之后&#xff0c;就会交给路由模块的/judge模块&#xff0c;然后这个路由模块就需要去调用jude模块了&#xff0c;也就是需要一个新的jude模块&#xff…...

ssm081高校实验室管理系统的设计与实现+vue(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;高校实验室管理系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很…...

GitLab基于Drone搭建持续集成(CI/CD)

本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…...

用GPB外链打造长期稳定的SEO优势!

很多人在谈外链时&#xff0c;总喜欢纠结是追求数量还是追求质量。其实&#xff0c;最理想的策略是两者兼顾。而在这其中&#xff0c;GPB外链可以说是长期SEO提升的“法宝”。为什么这么说&#xff1f;因为GPB外链不仅保证了高质量&#xff0c;还附带了与网站主题高度相关的原创…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...