10 2020 档案
摘要:原文地址:Draw images and sprite animations 在画布上绘制自己的图像,并学习如何拉伸,缩放和旋转它们。对精灵图剪裁来创建精灵动画。在本教程结束时,您可以在画布上绘制自己的图像和动画,并在游戏中使用它们。 在本教程中,您将继续构建HTML5游戏,但首先要对如何在画布上绘
阅读全文
摘要:原文地址:Collision detection and physics 使用JavaScript执行碰撞检测并产生物理反应。检查图形之间是否重叠,应用Hitbox并计算新速度。通过物体的质量,重力和恢复力使其更自然。 在本教程结束时,您将在游戏中运行基本的物理模拟。 创建一些移动的对象 如果您已经
阅读全文
摘要:原文地址:Create a smooth canvas animation 在HTML5画布上创建动画,无论帧频如何均可流畅运行。了解如何调用时间和缓动函数。在本教程结束时,您可以使用JavaScript创建基本的动画。 创建web动画 您在本教程中学习创建动画的基础知识是创建游戏的关键组成部分,但
阅读全文
摘要:原文地址:Create a proper game loop 在JavaScript中创建适当的游戏循环,并了解帧频。测量并显示fps,以查看循环效果。请求动画帧,并在本HTML5游戏教程结束之前运行自己的循环。 为什么你需要一个游戏循环 在上一教程中,您已经创建了一个在HTML5画布上绘制矩形的应
阅读全文
摘要:原文地址:Draw shapes, paths and text 在HTML5画布上使用形状和路径绘制图形。 使用SVG路径创建矩形,圆形,直线,三角形和更复杂的形状。 在本教程结束时,您可以在画布上绘制自己的图形和文本。 绘制一个矩形 在上一教程中,您学习了如何使用上下文和画布创建HTML文件以及
阅读全文
摘要:原文地址:Set-up an HTML5 canvas 用canvas创建HTML5文件。 了解如何缩放画布和执行绘图操作。 在本教程结束时,您可以将第一个图形绘制到屏幕上。 什么是HTML5画布? 当您想使用HTML5制作自己的图像,动画或游戏时,将需要一块画布。 <canvas>标签首先随HTM
阅读全文
摘要:原文地址:Develop an HTML5 game 使用HTML5和JavaScript创建自己的游戏。 了解游戏循环,动画和精灵图、碰撞检测、物理和用户输入。 跟着本教程系列学习,结束之后你将拥有属于自己的基本HTML5游戏。 什么是HTML5游戏? 本教程系列都是关于构建HTML5游戏的。 但
阅读全文
摘要:今天晚上面试被问到用canvas实现一个扇形,现在就来总结一下前端实现一个扇形的几种方式 源文件地址:实现一个扇形 代码实现 方法1. border-radius HTML <div class="sector1"></div> CSS width: 50px; height: 50px; bord
阅读全文
摘要:原文地址:React Hooks: everything you need to know! 🚀 从React 16.8.0开始,有新的方法可以优雅地调用异步代码,从而更轻松地在组件之间重用逻辑。 作为reactjs开发人员,您有责任了解最新的react框架功能。不是为了取悦您的老板,而是要在该领
阅读全文
摘要:原文地址: What Is Webpack and How Does It Work WebPack基本上是模块或模块捆绑器的包装器,但是由于其组件之一即插件,可以用作任务执行器,即我们可以执行各种任务,例如移动目录,清理等。 要了解什么是Webpack,让我们分析一下此图。 Webpack概念 为
阅读全文
摘要:原文地址:What Does Webpack Do, and How Do I Use It for My Website? Webpack是一个实用插件,它可以将Javascript文件打包在一起。这样可以使你的应用程序更具有组织性和生产力,这也允许你使用预处理语言,像SASS和TypeScrip
阅读全文
摘要:原文地址:Getting Started with NestJS 介绍 如果您使用的是Node.js应用程序,则可能已经注意到,随着时间的推移,它变得越来越难以维护。 您向应用程序添加新功能的次数越多,代码库就越大。 Nest.js是用于构建高效,可靠和可扩展的应用程序的服务端Node.js框架。
阅读全文
摘要:原文地址:How Reactivity works in Vue.js 在前端开发人员的世界中,“响应式”是每个人都使用的东西,但很少有人能理解。 确实,这不是谁的错,因为每个人在编程中对响应式的定义不同。 因此,在开始之前,我只给您一个有关前端框架的定义。 “ JavaScript框架之间的响应式
阅读全文
摘要:最近面试有被问到如何实现一个三角形,借此机会总结一下,将常用的几种方法梳理一遍。 源文件地址:创建一个三角形 绘制三角形的几种方法汇总 方法1. transform rotateZ(45deg) + 父子divoverflow:hidden HTML <div class='triangle1-wr
阅读全文
摘要:浏览器自定义事件通信示例 window.addEventListener('hello',(e)=>{ console.log(e.detail) }); window.dispatchEvent(new CustomEvent('hello', {detail:{name:'张三'}})) Nod
阅读全文
摘要:通过location.search可以获取到url拼接的参数(前面带有?号) function getUrlParams(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); let param = window.l
阅读全文
摘要://法一 const isArray1=function(value){ return Object.prototype.toString.apply(value) '[object Array]' } //法二 const isArray2=function(value){ return Arra
阅读全文
摘要:原文地址:Understanding the Event Loop, Callbacks, Promises, and Async Await in JavaScript 作者选择了COVID-19救济基金来接受捐赠,这是Write for DOnations计划的一部分。 介绍 在互联网的早期,网
阅读全文
摘要:github仓库地址:JS 判断当前终端是Android还是IOS // IOS const isIOS = () => { if (typeof window.navigator.userAgent !== 'string') return false; const u = window.navi
阅读全文
摘要:原文地址:Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies 介绍 智能的内容缓存是改善网站访问体验的最有效方法之一。 缓存或临时存储来自先前请求的内容,是HTTP协议中实现的核心内容交付策略的一部分。 整个传递
阅读全文
摘要:原文地址:What Is a CDN and How Does It Work? CDN –您会不断看到这个缩写单词。 也许在URL中,也许在登录页面中,但从未被关注过-什么是内容交付网络,它们的作用是什么? 我们将在这篇概述文章中进行说明,并在后续帖子中演示两个受欢迎的文章。 CDN基础 CDN是
阅读全文
摘要:原文地址:What is React Fiber ? 在过去的几个月中,社区对最新版本的React的兴趣迅速增长,尤其是在2017年的Conf中, ConfLin Clark所做的出色工作解释了React Fiber如何与cartoons一起使用之后 。 那么,简而言之,React Fiber是什么
阅读全文
摘要:Promise基本使用 new Promise((resolve,reject)=>{ resolve() }).then(res=>{ }).catch(err=>{ }).finally(()=>{ }) then和catch方法 Promise 的状态一经改变就不能再修改。 .then 和 .
阅读全文
摘要:原文地址:How the useEffect Hook Works (with Examples) 想象一下:你有一个足够好的函数组件,并且有一天,你需要加一个生命周期函数到里头。 啊。 “也许我可以用某种方式解决它?” 最终变成“糟糕,我要将它转化成一个类组件”。 类组件继承自React.Comp
阅读全文