【微信小游戏学习心得】

这里是引用

微信小游戏学习心得

  • 简介
  • 了解微信小游戏
  • 理解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也是借助了系统的原生能力。

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

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

相关文章

【C++】【算法基础】第k个数(分治法)

第k个数 题目 在一个长度为 n n n的整数数列中找到第 k k k大的数。 题解 核心思想同快速排序&#xff08;实际就是快速排序加一个第 k k k大的数会在哪边的判定条件&#xff09;&#xff1a; #include<iostream> using namespace std;int quickSelect(int *a, int …

TVM计算图分割--LayerGroup

文章目录 介绍Layergroup调研TVM中的LayergroupTVM Layergroup进一步优化MergeCompilerRegions处理菱形结构TVM中基于Pattern得到的子图TPUMLIR地平线的Layergroup介绍 Layergroup目前没找到严格、明确的定义,因为不同厂家的框架考虑的因素不同,但是基本逻辑是差不多的。一般…

深究JS底层原理

一、JS中八种数据类型判断方法 在JavaScript中&#xff0c;数据类型分为两大类&#xff1a;基本&#xff08;原始&#xff09;数据类型和引用&#xff08;对象&#xff09;数据类型。 基本数据类型&#xff08;Primitive Data Types&#xff09; 基本数据类型是表示简单的数…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

Yocto 项目下通过网络更新内核、设备树及模块

Yocto 项目下通过网络更新内核、设备树及模块 前言 在 Yocto 项目的开发过程中&#xff0c;特别是在进行 BSP&#xff08;Board Support Package&#xff09;开发时&#xff0c;经常需要调整特定软件包的版本&#xff0c;修改内核、设备树以及内核模块。然而&#xff0c;每次…

k8s集群安装(kubeadm)

k8s集群安装&#xff08;kubeadm&#xff09; 1、环境准备&#xff08;master和node节点都执行&#xff09;1.1、替换yum源1.2、关闭selinux1.3、永久关闭防火墙1.4、永久关闭swap1.5、修改主机名添加host1.6、时间同步1.7、将桥接的IPv4流量传递到iptables的链1.8、docker安装…

Ubuntu 修改时区 同步时间

Ubuntu 修改时区 同步时间 1、设置系统时区为中国上海2、更新软件包列表3、安装 ntpdate 工具4、从阿里云 NTP 服务器同步时间5、将系统时间同步到硬件时钟6、读取硬件时钟时间 1、设置系统时区为中国上海 timedatectl set-timezone Asia/Shanghai2、更新软件包列表 apt upda…

什么是JVM实现

JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;实现是指将JVM规范转化为具体可执行代码的过程和结果。JVM规范定义了Java虚拟机应该具备的功能、行为以及与其他组件的交互方式&#xff0c;但它本身并不包含具体的实现代码。因此&#xff0c;不同的组织…

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…

您与此网站之间建立的连接不安全解决方法

如果你打开网站&#xff0c;地址栏有警告&#xff0c;点进去是这样的提示&#xff1a;您与此网站之间建立的连接不安全&#xff0c;了解详细信息。 请勿在此网站上输入任何敏感信息&#xff08;例如密码或信用卡信息&#xff09;&#xff0c;因为攻击者可能会盗取这些信息。 …

【与AI+】学习SAP开发有什么渠道可以推荐

前言&#xff1a;好的&#xff0c;我又将开辟一个新的专栏&#xff0c;这个专栏呢&#xff0c;就准备放一些我向AI提问的问题&#xff0c;以及AI的回答。因为感觉真的好方便哈哈哈~ 我不是很确定我的专栏文章内容是否涉及版权&#xff0c;以及也不确定这些整合过的文字是否涉嫌…

江苏博才众创科技产业园集团拟投资10亿元在泰兴打造汽车零部件产业园

2024年11月7日&#xff0c;泰兴市高新技术产业开发区与江苏博才众创科技产业园集团举行新能源汽车零部件智能制造产业园项目签约仪式。 泰兴市高新区党工委委员、管理办副主任王峰表示&#xff1a;高新区是全市项目建设的主阵地&#xff0c;近年来聚焦高端化、智能化、绿色化&a…

Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比

一、Flutter 的 Widget 概述 Flutter 是 Google 开发的一款开源 UI 框架&#xff0c;旨在帮助开发者快速构建高性能、高保真度的移动、Web 和桌面应用程序。在 Flutter 中&#xff0c;UI 的构建完全是通过 Widget 来实现的。Widget 是 Flutter 中所有用户界面元素的基础构建块…

【python】Flask

文章目录 1、Flask 介绍2、Flask 实现网页版美颜效果3、参考 1、Flask 介绍 Flask 是一个用 Python 编写的轻量级 Web 应用框架。它设计简单且易于扩展&#xff0c;非常适合小型项目到大型应用的开发。 以下是一些 Flask 库中常用的函数和组件&#xff1a; 一、Flask 应用对…

FastAPI —— 请求参数验证

1.hello world 给后端船数据 hello world 接口给后端传 COVID-19 感染数据_高性能 FastAPI 框架入门精讲-慕课网 #!/usr/bin/python3 # -*- coding:utf-8 -*- # __author__ __Jack__from typing import Optionalfrom fastapi import FastAPI from pydantic import BaseModel…

产品经理如何使用项目管理软件推进复杂项目按时上线

前言 相信很多产品同学或多或少都有过这样的经历&#xff1a;平时没有听到任何项目延期风险&#xff0c;但到了计划时间却迟迟无法提测……评审时没有任何argue&#xff0c;提测后发现开发的功能不是自己想要的……费劲九牛二虎之力终于让项目上线了&#xff0c;然而发现成果达…

新系统如何进行模型环境配置

在机器学习和深度学习中&#xff0c;一个良好的开发环境能够显著提高工作效率。本篇博客将详细介绍如何在新的Linux系统&#xff08;以Ubuntu为例&#xff09;上进行模型环境的配置&#xff0c;包括基础系统设置、Python虚拟环境搭建、常用库的安装以及GPU驱动和CUDA的安装等。…

机器视觉:轮廓匹配算法原理

轮廓匹配的模板变量主要包括模板图像&#xff08;Template&#xff09;和待检测图像&#xff08;Source Image&#xff09; 在轮廓匹配中&#xff0c;模板变量主要包括一下几个关键部分&#xff1a; ‌模板图像&#xff08;Template&#xff09;‌&#xff1a;这是进行匹配的…

OpenAI大事记;GPT到ChatGPT参数量进化

目录 OpenAI大事记 GPT到ChatGPT参数量进化 OpenAI大事记 GPT到ChatGPT参数量进化 ChatGPT是从初代 GPT逐渐演变而来的。在进化的过程中,GPT系列模型的参数数量呈指数级增长,从初代GPT的1.17亿个参数,到GPT-2的15 亿个参数,再到 GPT-3的1750 亿个参数。模型越来越大,训练…

STM32移植RT-Thread---时钟管理

一RTT时钟节拍概念 RT-Thread的时钟节拍&#xff08;Tick&#xff09;是操作系统用于管理时间和任务调度的一个基本单位。它在实时操作系统中尤为关键&#xff0c;用于实现任务的延时、超时管理等功能。以下是关于RT-Thread时钟节拍的简单说明&#xff1a; 1.Tick定义&#x…