讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在 p5.js 中让游戏分数达到指定值后停止运行

阿静酱_2382

阿静酱_2382

发布时间:2026-02-24 14:55:01

|

964人浏览过

|

来源于php中文网

原创

如何在 p5.js 中让游戏分数达到指定值后停止运行

本文讲解如何在 p5.js(尤其是使用 p5.play 扩展库)中正确实现“分数达到目标值(如 10 分)即暂停游戏”的逻辑,重点纠正 return 无效、状态控制缺失等常见误区,并提供可立即运行的修复方案。

本文讲解如何在 p5.js(尤其是使用 p5.play 扩展库)中正确实现“分数达到目标值(如 10 分)即暂停游戏”的逻辑,重点纠正 `return` 无效、状态控制缺失等常见误区,并提供可立即运行的修复方案。

在 p5.js 中,draw() 函数是一个持续循环执行的渲染主循环——它不会因 return 语句而终止。因此,像 if (score === 10) { return true; } 这样的写法虽然语法合法,但仅会提前退出当帧的 draw() 执行,下一帧仍会自动调用,游戏逻辑(如物体下落、碰撞检测)继续运行,分数也无法真正“冻结”。

要真正停止游戏运行,必须主动干预循环机制。最直接、标准且推荐的方式是调用 noLoop() ——它会永久暂停 draw() 的自动调用,使画面和逻辑静止在当前帧。配合 loop() 可实现暂停/恢复,但本例只需单次停止。

以下是针对你原始代码的关键修复(仅需修改 draw() 函数末尾部分):

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载
// ... 前面的 draw() 内容保持不变 ...

// Score keeper
fill(0);
textSize(17);
text("Score: " + score, width - 390, 35);

// ✅ 正确做法:分数达 10 时调用 noLoop() 停止游戏
if (score >= 10) {
  noLoop(); // ← 关键:彻底停止 draw 循环
  // 可选:显示胜利提示
  fill(255, 215, 0);
  textSize(24);
  textAlign(CENTER);
  text("YOU WIN!", width / 2, height / 2);
}

⚠️ 注意事项:

  • 勿用 return 控制流程:return 在 draw() 中仅退出当前帧,无法中断循环。
  • 避免 score =:应为 score
  • 建议使用 >= 而非 ===:防止因意外逻辑导致 score 超过 10(如多帧碰撞未及时重置),仍能可靠触发停止。
  • 增强用户体验:停止后添加视觉反馈(如胜利文字、背景变色)能让玩家明确游戏已结束。

此外,若需后续支持“重新开始”功能,可在 mousePressed() 或按钮事件中调用 loop() 并重置 score = 0 及所有游戏对象状态,实现完整闭环。

通过 noLoop() 主动控制系统生命周期,是 p5.js 游戏开发中控制游戏状态(开始/暂停/结束)的基础且可靠手段。掌握它,你就能精准掌控分数阈值、关卡切换与游戏流程节奏。

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4816

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1415

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1878

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10343

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1020

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

3024

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

1649

2023.09.14

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

5209

2023.09.21

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

20

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.3万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn