JavaScript – 第14页电视电影小迷妹 TVco.cn

VVVV.js –用于高端Javascript / WebGL应用程序开发的可视化编程框架

大卫·甘恩（David Gann）欢迎！如果您有兴趣学习和支持VVVV.js开发，请转到Patreon页面！您也可以使用VVVV.js示例直接尝试一下。 VVVV.js具有许多基本的JavaScript和WebGL编程方法，这些方法打包在300多个节点中。通过使用基于浏览器的节点图编辑器，可以创建复杂的Web和移动应用程序，而无需进行文本编程，非常适合初学者和教育目的。此外，该框架是高级程序员以可持续方式维护库和代码的有效方法，从而可以进行快速的应用程序编程。图1：带有PBR着色器，Atlas多重纹理，实例化和递减阴影以及SSAO的VVVV.js示例补丁许多与图形相关的节点可用于过程生成。特别是网格和变换可以以vvvv典型的方式在程序上生成。但是，没有基于节点的着色器编辑器。着色器必须手工编写，效果链必须反复通过帧缓冲区，这最终会减慢应用程序的速度。因此，最好使用尽可能少的着色器。最佳情况下，VVVV.js应用程序将使用一个或两个带有批处理和实例化的前向着色器以及一个用于后期效果的大延迟着色器编写。但是当然也可以根据需要添加任意数量的着色器。 VVVV.js中实现了许多与游戏引擎相关的基本节点集。主要涉及场景图管理，缓冲区处理和冲突检测。…

在Dart中建立反应式FPS计数器

作为如何在Dart中构建FRP（功能性反应程序）的一个示例，我决定尝试构建FPS计数器-即，一种用于确定正在运行的应用程序的帧速率的实用程序。我决定要制定一些目标：该库（此处为package：fps ）应与平台无关。也就是说，我不想要求使用浏览器（ requestAnimationFrame ）-它也应该在独立的命令行VM和Flutter中工作。我希望它可以扩展-在一段时间内获得平均FPS应该相对琐碎，这样在运行时该数字不会来回飙升。我希望能够指定目标 FPS（例如60 ），并能够在很明显应用程序无法执行的情况下动态更改该目标。这是我希望我的API看起来像的样子：一个简单的界面-让用户调用eachFrame以获得帧事件流。确定每秒帧数意味着我想在应用程序中偶尔检查一下自上次检查以来已经有多长时间了。假设以下内容：渲染通常以秒为单位，或者可以容纳多少帧…

TypeScript和WebPack中的中文检查器[更新]

嗨，我只是想创建本教程，以使用Typescript创建中文检查器，并使用webpack对其进行编译和最小化。最后生成的单个js文件的结果大小不超过2KB，而我们编写的代码将超过8KB 缩小75％！！该项目尚未完成，但已经上传。演示版源代码 PS：此游戏的灵感来自android的* Chain Reaction * 小步骤：让我们开始吧。您需要满足以下先决条件才能开始本教程。良好的代码编辑器，例如VS Code，括号，Atom等 TypeScript的基本知识（甚至JavaScript都可以！！）您计算机上安装的webpack ，…

宝珠守护者（第2部分：Tilemap）+康威的人生游戏

请注意：这不是教程或最佳实践文章！我只是在描述自己的经历。代表世界的图块在了解了该项目的发展方向之后，我不得不决定如何实现游戏世界。之前，我已经对此进行了一些阅读，并且我非常确定tilemap对于我的游戏已经足够了。什么是图块图？基本上，所有游戏世界（地图）都分为单元格（图块）。就像真实地图一样，通常会绘制一些经度和纬度，以便更轻松地查找某些对象。另一个很好的类比是棋盘。无论如何，tilemap是一个二维网格，就是这样。程序员的网格是什么？好吧，这很容易表示为数组。下棋时，您可以描述任何人物的位置：例如，在黑王上面的图像上的E8。如果我们将棋盘表示为二维数组，则可以使用chessboard[4][7]指向黑人国王-本质上是相同的。因此，我们可以有一个二维数组，其中每个元素为1或0并将其绘制在画布上-使1用红色单元格表示，0用绿色表示。或者，我们可以输入更多数字并添加更多颜色。或者，我们不仅可以绘制彩色矩形，还可以绘制国际象棋图形。还是世界物体：石头，树木，房屋……MDN的瓷砖地图介绍非常不错，如果您感兴趣，请检查一下。…

自定义您的实时聊天小部件

我认为它看起来不错！怎么做的要为Streamlabs聊天框编写自定义代码，您需要在聊天框设置页面上打开“启用自定义HTML / CSS”选项。然后，它将在同一页面上向您显示代码编辑器。 CSS最后只有几行-指定了主要的聊天消息颜色和聊天框的背景颜色。 JavaScript涉及更多一些-我需要在显示的每个聊天消息中动态更改昵称的颜色。此颜色必须在Dracula颜色主题之内，但仍暗示the头最初选择的颜色。整rick 我最终使用了一个很酷的库，称为Nearest Color，这是一个巨大的帮助。我使用MutationObserver API监视传入的新聊天消息。我将新消息的昵称颜色传递给Nearest Color方法，然后使用最接近的Dracula匹配项重新设置昵称的DOM元素的颜色样式。最终的完整JavaScript代码如下。随意复制和粘贴自己的聊天框小部件！新的聊天配色方案获得了观众的好评，甚至有人指出，与网站上的Twitch聊天色相比，它们的对比度更好。…

Loading Assets in Phaser 3

“If you’re going to build it in the browser, you better have a good reason for doing it.”…

游戏开始

Phaser 3的初学者“初学者指南” 我敢肯定，我们大多数人（开发人员）都已经考虑过在生活中的某个时刻首次创建游戏。好糟糕-— ！我一直在和Phaser 3纠缠不清在过去的几天中。顺便说一句，如果您想知道的话，Phaser 3是用于构建HTML5游戏的框架。任何人，让我们开始吧… 安装 !!!→ 单击此处 ←!!! 有关移相器的安装指南。确保遵循步骤2到5。注意：除非您要进行npm安装，否则请确保已将最新的CDN脚本添加到HTML文件中。…

使霸王龙更智能

Google Chrome浏览器是我非常喜欢使用的出色的网络浏览器。几天前，当我的互联网连接中断并且正在浏览器上显示此屏幕时，我正在一个Web项目上工作。您可能已经知道此屏幕上存在一个隐藏的游戏，可以通过按键盘上的空格键，向上键或向下键来激活该游戏。游戏真的很简单，但是玩起来很有趣。基本上，它是一种霸王龙恐龙，它不断地奔跑，应该避免跳跃或躲避撞到障碍物。我已经有一段时间没有玩这个游戏了，所以我没有尝试固定互联网连接，而是决定尝试一下，并尝试打破我的最佳记录，即大约5500。当我因打铃而分心时，我得到了将近4800分电话，然后我撞到一棵大仙人掌树，迷路了。我感到沮丧，但后来我决定重试并打破自己的记录……不是通过再次玩，而是通过编写用于玩游戏的JavaScript代码。在本文中，我将解释我是如何做到的。计划基本上，我们需要弄清楚如何： 1.模拟键盘事件，特别是向上和向下按键事件。 2.检测前方的障碍物。 3.恐龙即将撞到障碍物时跳/鸭。 4.让恐龙得分超过6000分。模拟键盘事件这部分很简单，游戏会监听文档对象上的键盘事件，因此我们需要分派一个事件，该事件模拟向上箭头的按键来使恐龙跳跃，而事件则模拟一个向下箭头键的事件来使恐龙鸭。…

从头开始学习制作游戏

几天前，我有机会成为团队的一员，在孟买黑客马拉松比赛中有所作为。在所有更世俗的项目中，我们决定开发一款游戏。我对游戏的构建一无所知，而显而易见的是，您必须比平时的条件多得多。甚至有很多简单的游戏都可以加入。对于我来说，开始很令人生畏。一个基于Web的小游戏，除了JS外别无其他；我们将看到我们能想到的。幸运的是，我们的队友已经进行了一些实验，并且我们能够掌握基本知识。有了canvas元素，一切都将与操纵图形有关。受RPG的启发，我们选择了一款基于2D地图的游戏，并从opengameart.com上获取了一些精灵，然后开始努力将它们分开：淘汰通用的Sprite加载程序以将它们实际与canvas元素一起使用是我们可以做的第一件事。将有一个SpriteLoader对象，该对象将执行底层工作，即加载所有图像文件并在canvas元素上绘制它们（或其中的一部分）。对于您可以想到的每个游戏元素，子画面都是详尽无遗的。可以以多种方式在空间和时间上渲染这些地图。充分利用它们的潜力是遥不可及的，但就目前而言，我们可以坚持我们所需要的。这个想法是这样的，除了实用程序对象之外，每个游戏元素也将是一个单独的对象，具有其自身的状态，该状态具有其精灵，当前位置和动作。主游戏循环将根据所有对象的当前状态反复绘制一个框架。例如，具有固定位置和动作的“战士”对象就产生了这样的结果。现在最令人兴奋的部分是：互动。…

‘救助’devlog（3）

因此，今天我正在尝试解决在圆形区域“束缚”用户的问题，而不会显得沮丧或笨拙。我相信我有一些可行的方法。我现有的模型有些消极，并且是从我从未玩过的PUBG中窃取的。基本上有一个安全的“区域”，它外面的所有东西。随着时间的流逝，您会在“红色”区域受到损害。希望这旨在鼓励玩家留在游戏区域而不会增加硬障碍。另外，“太空”中的硬障碍会是什么样？基本上，我想避免“牢固”的碰撞行为。这有点丑陋，与游戏流程不符-您在飞行并突然停下来，可能会尴尬地撞到这个障碍。好玩因此，我有一个新的解决方案，部分是我认为是从Luftrausers那里偷来的-一旦玩家走了一定距离，它就会变成一种灵活的“反弹”或“重定向”机制。我在这里有一个示例，尽管控件比游戏进行中的版本更简单：单击“结果”，然后单击以开始向一个方向移动它的核心是新的“ BoundDistance”行为，该行为检查对象（在这种情况下为播放器）是否距某个点一定距离。如果是，它将使对象朝向该点旋转（朝向角度和速度）。 var theta…