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

[JavaScript] 我该怎么去写一个canvas游戏

首先你得知道canvas的基础语法,此处不过多赘述.

一、如何更新视图

canvas里面有个clearRect方法,可以遮住画布中一个矩形部分.
但是你想这样做就难免会遮住一些本不该遮住的东西,因为它是一个矩形,并且你还要计算它的位置和尺寸,实时的哦,这蛮费劲的,我以前写过一个降雪效果就用的这种思路,最后做出来了,但是计算压力也很大,效果上经常遮住过多的部分.
后面我想到一个思路,他其实来自于threejs,这个库写的东西每帧都更新屏幕里的所有视图,根据你的数据,全部重画一次.我就想,我能不能只去维护数据,更新视图就只用一个方法,根据当前数据全部重画?canvas的性能挺好的,不用担心画多了卡顿,因为里面进行的毕竟不是DOM操作,而JavaScript又很擅长处理数据.我就直接写了一个用于更新的方法,一个巨大的clearRect,结合setInterval和requestAnimationFrame直接在每次屏幕刷新时覆盖所有,然后根据新的数据重新画一遍.
那种"结合"参考:用setInterval与requestAnimationFrame做节流
效果很好,不用考虑遮挡的问题,维护数据就好了,绘制可以写一些函数,每帧把最新的数据给函数去画.

二、如何控制样式与填充

然后可能还会有一些样式和填充上的问题,可以有两种方法去解决.
第一种,填充和样式都只针对一段路径,写的规整一点,每次beginPath之后closePath,再规定填充,然后你就发现这个填充只影响上面这段路径,样式是不是这样我还没试过.

因为我的代码只用到几个颜色,而初期我又没发现上面这个特性,所以我用了别的方法来控制颜色,也就是第二种方法.

第二种,引入图层的概念(这样也可以做出遮挡效果),就是多个canvas元素,多个上下文,我在不同上下文里使用不同的颜色,至于上下文之间的交互就是数据上的事情了,我们用的那种全部重绘的方法,每次都重绘全部的上下文,在更新前把数据准备好.

相关文章:

[JavaScript] 我该怎么去写一个canvas游戏

首先你得知道canvas的基础语法,此处不过多赘述. 一、如何更新视图 canvas里面有个clearRect方法,可以遮住画布中一个矩形部分. 但是你想这样做就难免会遮住一些本不该遮住的东西,因为它是一个矩形,并且你还要计算它的位置和尺寸…...

【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题

目录 为什么要结合项目与算法? 1. 蓝桥杯与《苍穹外卖》项目的结合 实例:基于蓝桥杯算法思想的订单配送路径规划 问题描述: 代码实现:使用动态规划解决旅行商问题 代码解析: 为什么这个题目与蓝桥杯相关&#x…...

python报错系列(16)--pyinstaller ????????

系列文章目录 文章目录 系列文章目录前言一、pyinstaller ????????1.报错如下2.安装pyinstaller3.报错如下:4.封装py文件为exe成功5.国内源 总结 前言 一、pyinstaller ??? 1.报错如下 PS D:\Users\gxcaoty\Desktop\性能覆盖率> pyinstaller37.exe…...

Pytorch | 从零构建ResNet对CIFAR10进行分类

Pytorch | 从零构建ResNet对CIFAR10进行分类 CIFAR10数据集ResNet核心思想网络结构创新点优点应用 ResNet结构代码详解结构代码代码详解BasicBlock 类ResNet 类ResNet18、ResNet34、ResNet50、ResNet101、ResNet152函数 训练过程和测试结果代码汇总resnet.pytrain.pytest.py 前…...

Spring Boot 配置Kafka

1 Kafka Kafka 是由 Linkedin 公司开发的,它是一个分布式的,支持多分区、多副本,基于 Zookeeper 的分布式消息流平台,它同时也是一款开源的基于发布订阅模式的消息引擎系统。 2 Maven依赖 <dependency><groupId>org.springframework.kafka</groupId><…...

基于单片机的火灾报警器 (论文+源码)

1.系统设计 本系统由火灾检测模块、A/D转换模块、信号处理模块、声光报警模块和灭火装置模块组成。火灾检测模块由温度检测和烟雾检测构成&#xff0c;其温度传感器选用DS18B20&#xff0c;烟雾传感器选用MQ-2烟雾传感器。A/D转换模块选用常用的模数转换芯片ADC0832。声光报警…...

分析excel硕士序列数据提示词——包含对特征的筛选,非0值的过滤

文章目录 1 分析出发点2 围绕出发点的文件分析3 功能模块计算重心相关性计算教学倾向百分比多列相关性计算结果封装证伪——过滤0后的交叉相关系数封装和总控——批量处理特征筛选——筛选提问倾向最大和最小的前五代码总的清洗1 分析出发点 写一个python代码,遍历"D:\Ba…...

MongoDB 更新文档

关于MongoDB更新文档的操作&#xff0c;可以通过多种方法实现。以下是一些常用的方法&#xff1a; updateOne() 方法&#xff1a;用于更新匹配过滤器的单个文档。其语法为 db.collection.updateOne(filter, update, options)。其中&#xff0c;filter 用于查找文档的查询条件&a…...

分布式协同 - 分布式事务_TCC解决方案

文章目录 导图Pre流程图2PC VS 3PC VS TCC2PC&#xff08;Two-Phase Commit&#xff0c;二阶段提交&#xff09;3PC&#xff08;Three-Phase Commit&#xff0c;三阶段提交&#xff09;TCC&#xff08;Try-Confirm-Cancel&#xff09;2PC、3PC与TCC的区别2PC、3PC与TCC的联系 导…...

MFC/C++学习系列之简单记录13

MFC/C学习系列之简单记录13 前言memsetList Control代码注意 总结 前言 今天记录一下memset和List control 的使用吧&#xff01; memset memset通常在初始化变量或清空内存区域的时候使用&#xff0c;可以对变量设定特定的值。 使用&#xff1a; 头文件&#xff1a; C&#…...

PostgreSQL表达式的类型

PostgreSQL表达式是数据库查询中非常重要的组成部分&#xff0c;它们由一个或多个值、运算符和PostgreSQL函数组合而成&#xff0c;用于计算出一个单一的结果。这些表达式类似于公式&#xff0c;可以用查询语言编写&#xff0c;并用于查询数据库中的特定数据集。 PostgreSQL表…...

速通Python 第四节——函数

一、函数 编程中的函数和数学中的函数有一定的相似之处. 数学上的函数, 比如 y sin x , x 取不同的值, y 就会得到不同的结果. 编程中的函数, 是一段 可以被重复使用的代码片段 代码示例 : 求一段范围的数的和 , 不使用函数 # 1. 求 1 - 100 的和 sum 0 for i in range(1, …...

如何在Windows系统上安装和配置Maven

Maven是一个强大的构建和项目管理工具&#xff0c;广泛应用于Java项目的自动化构建、依赖管理、项目构建生命周期控制等方面。在Windows系统上安装Maven并配置环境变量&#xff0c;是开发者开始使用Maven的第一步。本文将详细介绍如何在Windows系统上安装和配置Maven&#xff0…...

STM32之GPIO输出与输出

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 一.GPIO输入1.1GPIP简介1.2GPIO基本结构1.3GPIO位结构1.4GPIO的八种模式1.4.1浮空/上拉/下拉输入1.4.2 模拟输入1.4.3 推挽输出\开漏输出 二.GPIO输入2.1.按键介绍2.2传感器模块介绍2.3按键电路 一.G…...

linux定时器操作

目录 1 简单示例2 timer_create方式2.1 SIGEV_SIGNAL信号方式通知2.2 SIGEV_THREAD启动线程方式通知2.3 参数 1 简单示例 #include <stdio.h> #include <stdlib.h> #include <sys/time.h> #include <signal.h> #include <unistd.h>void setup_t…...

重拾设计模式--观察者模式

文章目录 观察者模式&#xff08;Observer Pattern&#xff09;概述观察者模式UML图作用&#xff1a;实现对象间的解耦支持一对多的依赖关系易于维护和扩展 观察者模式的结构抽象主题&#xff08;Subject&#xff09;&#xff1a;具体主题&#xff08;Concrete Subject&#xf…...

Vue.js前端框架教程7:Vue计算属性和moment.js

文章目录 计算属性(Computed Properties)基本用法缓存机制计算属性 vs 方法使用场景计算属性的 setter 和 getter结论Moment.js 进行时间处理1. 安装 Moment.js2. 在 Vue 组件中引入 Moment.js3. 在全局使用 Moment.js4. 使用 Vue 插件的方式引入 Moment.js5. 常用日期格式化…...

【游戏设计原理】22 - 石头剪刀布

一、游戏基础&#xff1a;拳头、掌心、分指 首先&#xff0c;石头剪刀布&#xff08;又名“Roshambo”&#xff09;看似简单&#xff0c;实际上可是个“深藏玄机”的零和博弈&#xff08;听起来很高深&#xff0c;其实就是输赢相抵消的意思&#xff09;。游戏中有三种手势&…...

3-Gin 渲染 --[Gin 框架入门精讲与实战案例]

在 Gin 框架中&#xff0c;渲染指的是将数据传递给模板&#xff0c;并生成 HTML 或其他格式的响应内容。Gin 支持多种类型的渲染&#xff0c;包括 String HTML、JSON、XML 等。 String 渲染 在 Gin 框架中&#xff0c;String 渲染方法允许你直接返回一个字符串作为 HTTP 响应…...

python小课堂(一)

基础语法 1 常量和表达式2 变量和类型2.1 变量是什么2.2 变量语法 3 变量的类型3.1 动态类型特性 4 注释4.1注释是什么 5 输入输出5.1 print的介绍5.2 input 6 运算符6.1 算术运算符在这里插入图片描述6.2 关系运算符6.3 逻辑运算符6.4赋值运算符 1 常量和表达式 在print()中可…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...