首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

手把手教你完成第一个JS项目:用简单到极致的贪吃蛇游戏熟悉JS语法

为了方便开发,我们先决定好所有会使用的颜色,我把蛇设为7绿色,蛋设为10橙色,背景设为0黑色,分数文字设为11黄色,当然你也可以设为自己喜欢的颜色。...玩过这个游戏的同学应该知道,当蛇在向右移动的过程中不能将方向改成向左的,我们只可以将蛇的移动方向改变成上或下的,而蛇向上移动的过程中也无法改成向下移动,只能变成左或右。...所以,当蛇在移动的过程中,不能将蛇的方向改变成它移动的相反方向,只能改变成除当前移动方向和当前移动的相反方向外的其它两个方向。...蛋的颜色用橙色10号表示。...首先,updateData函数就不应该再被调用了,因为游戏已经结束了,我们不应该再浪费计算资源来调用移动等方法了。第二,游戏应该跳转到游戏结束界面。所以说,应该有一个属性来表示蛇当前是否死亡。

99720

《Motion Design for iOS》(十)

橙色的线准确地表示了在某个特定的时间点属性值会变得怎样。如你所见,橙色的线是完全笔直的,这意味着值随着时间改变的比率是一个定值。...垂直轴的底部表示属性的开始值,也就是为0的Y坐标,垂直轴的顶部是属性的结束值,也就是为100的Y坐标。水平轴表示你的动画从开始到结束的时间,整个轴长表示动画的周期。...线准确地指示了在特定的时间点属性值会变成什么样。 曲线的动画时间看起来是什么样的?例如一个小球,以1秒的周期动画,但这次,我们要将其放在一个缓入缓出动画的球的旁边,看看有什么不同。...然后,最容易注意到的,它产生了一种不同的动画动作,即慢慢地开始动作(好像落后了一点)并且慢慢地结束(就好像接近最终比例的时候缓慢地变成最终值)。...线性动画曲线意味着你的属性值随着时间的流动以恒定的步伐改变,而各种迟缓的图形表示属性值会缓慢地开始改变,或者缓慢地结束改变,或者两者都有。

36210

总结伪类和伪元素(转)

比如说,我们可以通过:before来在一个元素增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。...某些伪类或伪元素仍然处于试验阶段,在使用建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。...CSS: 选择第二个元素,”Beta”会变成橙色: ? 选择位置序号是2的倍数的元素,”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色: ? 选择位置序号为偶数的元素: ?...选择从第6个开始,位置序号是2的倍数的元素,”Zeta”, “Theta”, “Kappa”会变成橙色: ?...如下例,第二个元素会变为橙色。 HTML: ? CSS: ?

1.4K20

100天搞定机器学习|Day22 机器为什么能学习?

1 Hoeffding不等式 假设有一个罐子装满了橙色和绿色的球,为了估计罐子中橙色和绿色的比例,我们随机抓一把球,称为样本: ?...但是,我们上面的理论只有在假设空间大小有限时才成立,如果假设空间无限大,右边的概率上界就会变成无限大。...现在我们开始推导这个上界函数的上界: 首先,B(N,k)产生的Dichotomy可以分为两种类型,一种是N-1个点成对的出现,一种是N-1个点只出现一次: ? 因此显然有: ?...然后,对于N-1个点在这里产生的所有情况: ? 显然这里的个数就是α+β,显然,这N-1个点产生的Dichotomy数仍然要受限于break point是k这个前提,因此: ?...然后,对于成对出现的Dichotomy的N-1个点: ? 我们可以说,这里的N-1个点将会受限于break point是k-1。

44620

滴滴大数据:400座城市的出行夜晚,北京21:00后回家比例最高

汽车射出两道灯光, 把黑暗的公路, 变成光明的走廊。 ——《夜行》 图1 车水马龙的三里屯夜晚,路边叫车的人们。 夜色渐浓,华灯初上。结束了白天生活的A面,人们开始了夜晚生活的B面。...图4 夜间出行(22:00-06:00)占比最高的十城市 从全国400城范围来看,根据滴滴出行大数据,夜间出行占比最高的十个城市中,南方城市占了8个,这大概与南方一年四季气候温暖、夜生活种类丰富,及居民生活习惯息息相关...图7 北京21:00-22:00目的地为住宅小区和消费场所的出行轨迹(蓝色代表住宅区,橙色代表休闲娱乐场所) 图8 广州21:00-22:00目的地为住宅小区和消费场所的出行轨迹(蓝色代表住宅区,橙色代表休闲娱乐场所...) 在图7和图8中,蓝色代表目的地为住宅区的打车订单,橙色代表休闲娱乐的打车订单,拿北京和广州对比,可以看出,北京21:00后回家比例最高,大量的人从国贸、西二旗、望京几个中心向外涌出,北京的2000万人在为生活忙碌着

1.5K80

会用 Performance 工具,就能深入理解 Event Loop

鼠标划到想看的部分,向下拖动,就可以放大那个区域: 左右拖动可以调整看的位置: 展示的信息中很多种颜色,这些颜色代表着不同的含义: 灰色就代表宏任务 task: 蓝色的是 html 的 parse,橙色的是浏览器内部的...JS: 紫色是样式的 reflow、repaint,绿色的部分就是渲染: 其余的颜色都是用户 JS 的执行了,那些可以不用区分。...所以说 requestAnimationFrame 的回调是在渲染执行的,rAF 和渲染构成了一个宏任务。...总结 Performance 工具能够看到网页的 Event Loop 是怎么运行的,不同的颜色代表不同的含义: 灰色:task 橙色:浏览器内部的 JS 蓝色:html parse 紫色:reflow...、repaint 绿色:渲染 其余的颜色都是用户自己的 JS

52020

从编程小白到全栈开发:操控浏览器

我们可以通过一些例子来学习和理解JS API的用法,由于起初的这些代码会比较简单,我们也没必要去专门创建js文件,只要借助浏览器自带的开发者工具,就可以很方便的随手运行我们的js代码片段。...我们可以来看一下它们的用法: // 1)jQuery的选择器API $('input'); // 查找所有标签名为input的元素 $('#cat001'); // 查找id为cat001的元素,id加...仍然拿我们最前面的HTML页面入手,我们要给三个橙色的div,加上一个白色的边框。...,那个内容为"Section B"的橙色div已经从DOM树中消失了。...删除第二个橙色div后 通过上面这一系列小小的例子,你是不是已经对怎么来操作DOM有了一个大概的了解了?

65230

前端-如何只用 CSS 完成漂亮的加载

CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考 1、学会使用 CSS 中的 :after 和 :before 2、keyframe 动画直通车 开始入门 在开始一起构建它,...--  for CSS, JS, and font files  -->            /*       ...-- Tags for CSS and JS files -->    构建 logo 本身 一开始我们先实现 logo 本身, 而不是最终版本的效果 父级元素 logo...before 绝对位于 div.logo 的左上角,代表方块的上边框和右边框 , 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框 现在, less 代码变成了这样...我们最终想要的动画中每个小方框都有一定的顺序, 为此, 我们作如下改变 1、0 to 25%:上边框和右边框显现 2、25 to 50%:下边框和左边框显现 3、50 to 65%:红色小方块显现 4、65 to 80%:橙色小方块显现

88720

免费 CDN 加速服务:CloudFlare

什么是 CloudFlare CloudFlare 是一家功能非常强大的免费 CDN 免费加速服务,它是通过反向代理(reverse proxy)提供网站加速服务,为站长解决了 jpg/JS/CSS 这些静态文件到...CloudFlare 除了基本的把网页的静态文件(JPG/JS/CSS)推送到它的服务器上之外,还提供了详细的网站流量报表,网站攻击的基本防御,JS 和 CSS 文件的自动 minify,以及其他许多方便的功能...另外你可以随时决定是否使用 CloudFlare 来缓存,只需要在 CloudFlare 的 DNS Manager,点击你不想通过 CloudFlare 服务的子域名右侧的那个云即可(橙色为激活)。...CloudFlare WordPress 插件 因为 CloudFlare 是通过反向代理来来实现加速的,那么我们服务器上获取的 IP 都变成了 CloudFlare 反向代理机器的 IP,当然你可以安装

15.5K30

深度学习、图像识别入门,从VGG16卷积神经网络开始

答案是有的:我们发现橙色的固定框为3*3,绿色是5*5,出来是三乘三; 所以规律可以得到:粉红色最后的卷积结果矩阵维度=绿色矩阵维数-橙色矩阵维数+1 (我们又应该思考:如果我不想最后减少维度,我只希望卷积...我们可以发现其实跟之前没什么不一样:还是以三个矩阵之间的运算,但是我们很容易发现,它并不是一行一行扫过去的,橙色矩阵维度是黄色矩阵的整数倍,所以池化的最终的结论是要把原来的维度减少到1/n.这是池化最根本的原理...这个不算知识点,仅仅是一个常识词语,比如一张图片,有RGB三种颜色,对应三个灰度级别,也就是三个通道了: 更加抽象的图可以参照下面的结构: 二、等待已久的VGG16: VGG16分为16层,我们主要讲前面的几层...我们主要讲述第一个,也就是第一层(Conv1_1),它怎么把一个300*300*3的矩阵变成一个300*300*64的矩阵?...我们假设蓝色框是一个RGB图像,橙色是一个3*3*3的卷积核,我们对一个三维的27个数求和,然后扫过去,按照第一部分算的得出来的是一维的298*298的矩阵(因为卷积核也是三维所以结果是一维); 然后回想一下什么是

1.7K40

记录微信小程序显示当前年月日及其详细时间的代码

首先要知道微信小程序已经集成了时间代码,打开项目里面默认生成的 utils/util.js 文件,这里可以看到,代码已经写好了,我们只需要引用就行了,如图官方的时间代码: 代码输出格式为:2022/01.../05 15:15:15 (假如此时是这个时间),但是我们要输出的是年,其他的不知道,修改方式如下,找到utils目录,在util.js文件下添加如下代码: const formatYear = date...= {     formatTime:formatTime,     formatDate:formatDate,     formatYear:formatYear } 然后如上代码,进行替换,修改记得备份...设置完成后,找到要显示的模板文件(根据实际情况而定),因为我的小程序是橙色阳光大佬开发的,所以需要在用户界面添加时间,所以我的目录是“/pages/user/index.js”,找到之后添加如下代码:...this.setData({           time: time         });     }, 不需要修改什么,直接复制粘贴即可,代码位置如图(大概3行和9行): 代码要放在Page之内,还是那句话,修改记得备份

1.7K10

正则表达式的回溯

但NFA支持更多的特性,因而绝大多数编程场景下(包括java,js),我们面对的是NFA。...匹配过程如下图所示(橙色为匹配,黄色为不匹配), ? 1~2步应该都好理解,但是为什么在第3步开始,虽然已经文本中已经有一个b匹配了b{1,3},后面还会拉着字母c跟b{1,3}做比较呢?...c 则匹配过程变成了下面这样(橙色为匹配,黄色为不匹配), ? 由此可见,在非贪婪模式下,第2步正则中的b{1,3}?与文本b匹配之后,接着去用c与文本中的c进行匹配,而未发生回溯。...不过在独占模式下,正则表达式尽可能长地去匹配字符串,一旦匹配不成功就会结束匹配而不会回溯。...我们以下面的表达式为例, ab{1,3}+bc 如果我们用文本"abbc"去匹配上面的表达式,匹配的过程如下图所示(橙色为匹配,黄色为不匹配), ?

96710

当 SSR 遇上 Serverless,轻松实现页面瞬开

而与之对应的是 CSR ,客户端渲染,也就是目前 Web 应用中主流的渲染模式,一般由 Server 端返回的初始 HTML 页面,然后再由 JS 去异步加载数据,然后完成页面的渲染。...(橙色部分为页面背景色,对应了常规意义上的白屏时间) 可以看到,在内容达到时间上,SSR 工作原理,决定了它的优势,这种差异在弱网环境下会体现的更加明显。...交付产物从原来的 JS Bundle 变成了 Node 应用,随之而来的是,需要选型一个 Node 框架,搭建一个 Node 应用,并且应对性能开销、保障应用稳定性等等。...一方面,借助于函数即服务(FaaS)的能力,不需要再去搭建传统的 Node 应用,一个函数就可以变成一个服务,开发者可以更纯粹的关注于业务逻辑。...//rax-demo.now.sh/ssr/home CSR Demo 地址:https://rax-demo.now.sh/csr/home 让我们一起开启 SSR 之旅吧 https://rax.js.org

1.5K20

10分钟,用TensorFlow.js库,训练一个没有感情的“剪刀石头布”识别器

在浏览器上基于TensorFlow.js可以很快完成这项需求。 摄像头将通过快照功能将拍摄图像转换为64x64图像并显示辨别结果。...幸好我们可以使用经典技巧将一组图像传输到浏览器,那就是使用精灵表单(spritesheet):将一组图像粘合成一个图像,此时,图像中每个像素都变成1像素高清图像,我们将它们堆叠创建一个保存所有图像的10MB...数据虽然是RGB格式,但是通过使用constants.js模块,可以将通道数减少到1并且选择黑白显示。...精度图中的橙色线表示验证数据的准确度,即用训练模型去预测剩余的420个未训练图像时的准确度。...我发现代表验证数据的橙色线与训练数据精度几乎重合,这说明建立的模型可以广泛推广(只要新图像的复杂性和风格与已知图像相似)。

1.6K30
领券