首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用canvas制作彩虹球喷枪(js面向对象小案例)

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: canvas.gif 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵。...,在《js常用方法和一些封装(2) -- 随机数生成》中曾经提到过。...,彩虹球出现的位置也是随机的,通过范围随机数来实现: /* * 获取范围随机数 (闭区间) */ function randomRange(start,end){ return Math.floor...(Math.random()*(end-start+1))+start; }; 接下来是彩虹球的类,用面向对象来做。...//y轴 ColorBall.prototype.r = 10; //半径 在本案例中,鼠标相当于是彩虹球喷枪,我们也用面向对象的思想来设计它: //RainbowBrush 彩虹球喷枪 RainbowBrush

1.7K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。...但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发...(你还可以设置更多节点) 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围; 3.还有就是css3的单位rem: rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...height:10.6rem; border:1px solid #000; box-sizing: border-box; } js

    6.2K10

    用可爱的球球砸烂敌人的狗头!《VR Furballs - Demolition》已经登陆Steam

    Steam每天都会推出许多VR游戏的抢先体验版,但小编精力有限,因此只能挑选一些吸引人的游戏推荐给大家。而今天带来的,就是一款卡通风格偏休闲的VR游戏,并且玩法类似《愤怒的小鸟》。...这款游戏名为《VR Furballs - Demolition》,就像游戏名一样,这是一款关于各种可爱的毛绒球的游戏。游戏中,你的目标是摧毁一些邪恶的红色尖刺毛球搭建的建筑,来完成你选择的关卡。...此外,游戏没有解释这些毛球为什么要参战,但是你真的需要一个理由吗?这个问题可能有点难以回答。反正你只需要尽可能多地得分,尽可能消灭邪恶的毛球。...目前,该游戏在Steam的抢先体验版,拥有32个可玩关卡(最终版本将有54个关卡),有9种毛球可供选择,它们各有特殊能力。同时游戏还会提供6种不同的武器,如弹弓、网球拍和棒球棒等。...还有可以帮助你完成挑战的道具,包括雷达和子弹时间。 最后,如果你通过了所有关卡而感到无聊的话,游戏还有一个关卡编辑器,玩家可以发挥自己的奇思妙想,创建属于自己的关卡。

    82150

    聊聊字节跳动 Node.js RPC 的设计实现

    背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注的方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言的性能分析平台 维护 Node.js 应用的容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 的同学来说,早点了解与使用 RPC 是非常有必要的。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源的 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果用

    1.7K30

    聊聊字节跳动 Node.js RPC 的设计实现

    背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注的方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言的性能分析平台 维护 Node.js 应用的容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 的同学来说,早点了解与使用 RPC 是非常有必要的。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源的 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果用

    91530

    我不知道还可以用 JS 做的 6 件事

    作者:Daniel 译者:前端小智 来源:js-craft JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。...我们已经知道,用变量的作用域和作用域链(即一个按顺序检索的对象列表)来进行变量名解析,而 with 语句就是用于暂修改作用域链的,其语法为: with(object) 该语句可以有效地将object添加到作用域链的头部...const book = { author: '前端小智', title: '我不知道还可以用 JS 做的 6 件事' } with(book) { console.log(author...); // 前端小智 console.log(title); // 我不知道还可以用 JS 做的 6 件事 } 使用 with语句的 JavaScript 代码很难优化,因此它的运算速度比不使用...因此,要返回实际的未定义值,请使用void运算符。它不是一个非常流行的运算符,并且很少使用。 原文:http://www.js-craft.io/blog/6...

    1.1K10

    聊聊字节跳动 Node.js RPC 的设计实现

    背景 大家好,我们是字节跳动 Web Infra 团队,目前团队主要专注的方向包括现代 Web 开发解决方案、低代码搭建、Serverless、跨端解决方案、终端基础体验、ToB 等等。...插件 支持 Node.js、Golang 等后端语言的性能分析平台 维护 Node.js 应用的容器镜像 在 2021 年上半年,由于现有的 Node.js RPC 实现逐渐跟不上字节跳动业务发展节奏...因此,对于想做全栈或者后端 Node.js 的同学来说,早点了解与使用 RPC 是非常有必要的。 既然 RPC 这么重要,那么到底该怎么去理解它呢?...现状 & 需求 在字节跳动内,由于各种原因,存在有多种序列化协议、网络协议,这导致我们没有办法直接使用开源的 Apache Thrift、gRPC,只能选择自建 RPC 实现。...write(buf: Buffer): Promise; } 序列化协议 ( Serialization Protocol ),就词组上来看,重点是在 Serialization 上,但如果用

    1.9K30

    用python计算杯子、球、方体的容积或体积

    print('杯子的容积为:%.2f'%volume) return '谢谢您的使用,欢迎下次光临!'...('球的体积为:%.2f'%volume) return '谢谢您的使用,欢迎下次光临!'...def menu(): print('''-------欢迎使用简便容/体积计算------- 计算杯子容积 【请输入1】 计算球的体积 【请输入2】 计算正/长方体的体积...“好像换一个组”工作室') 3 结语 小组成员针对如何用计算杯子、球体或者方体的容积或者体积的问题,提出使用python定义函数和python if判断语句的方法。...通过实验,证明该方法是有效的。通过对定义函数和if判断语句的运用,巩固了课堂上学习的知识,提升了将所学知识运用到实际生活中的能力。

    12310

    OpenCV—Node.js教程系列:用Tensorflow和Caffe“做游戏”

    在本教程中,我们将学习如何在OpenCV的DNN模块中加载来自Tensorflow和Caffe的预先训练的模型,我们将利用Node.js和OpenCV深入研究两个对象识别的例子。...示例代码链接地址: https://github.com/justadudewhohacks/opencv4nodejs/blob/master/examples/dnnTensorflowInception.js...这就是我们调整图像大小的原因,确保它最大的尺寸是224,我们用白色像素填充图像的剩余维度,比如宽度=高度(padToSquare)。...我们可以再次通过置信度来过滤结果,并将矩形绘制成每个识别对象的图像。 行动过程 为了简单起见,我将跳过绘制矩形和其他所有用于可视化的内容的代码。如果你想知道怎么做,你可以看看样本代码。...结语 这就是使用OpenCV和Node.js来神经网络识别图像中物体的过程。

    1.7K100

    用SparkStreaming做奇怪的事

    作者:尹会生 无需授权即可转载,甚至无需保留以上版权声明 Spark Steaming 是非常著名的流式计算工具,这次用它来搞一个奇葩的需求:开发给定一个日志同步服务器,日志达到10MB会同步过来一个新的文件...这个奇葩需求要注意两个点,一个是文件会不断的增加,所以要定时删除文件;另一个是"error"会在不定长的时间出现。...首先我们来搞定Spark Steaming 启动的问题,Spark Steaming 支持“文本文件 流”函数, 即textFileStream(),要是用这个调用你需要先导入一个streaming库...import org.apache.spark.streaming._ , 然后声明Streaming的入口 StreamingContext(sparkConf, Seconds(1)) 这里的...Seconds(1)是每隔多久来做一次统计,最后想要开始的时候执行 sparkstreamingcontext.start()。

    668100

    【教程】OpenCV—Node.js教程系列:用Tensorflow和Caffe“做游戏”

    在本教程中,我们将学习如何在OpenCV的DNN模块中加载来自Tensorflow和Caffe的预先训练的模型,我们将利用Node.js和OpenCV深入研究两个对象识别的例子。...示例代码链接地址: https://github.com/justadudewhohacks/opencv4nodejs/blob/master/examples/dnnTensorflowInception.js...这就是我们调整图像大小的原因,确保它最大的尺寸是224,我们用白色像素填充图像的剩余维度,比如宽度=高度(padToSquare)。...我们可以再次通过置信度来过滤结果,并将矩形绘制成每个识别对象的图像。 行动过程 为了简单起见,我将跳过绘制矩形和其他所有用于可视化的内容的代码。如果你想知道怎么做,你可以看看样本代码。...让我们把汽车的图像输入网络,然后用分类名称 car 来过滤结果: 好了!现在做一些有难度的。让我们尝试…早餐桌上的物品? 结语 这就是使用OpenCV和Node.js来神经网络识别图像中物体的过程。

    2.4K80

    【大厂技术内幕】字节跳动原来是这么做数据迁移的!

    数据迁移 目标 能够描述项目数据迁移的方案 了解hbase的特点 能够熟悉数据迁移中的数据包装和转换 能够完成文章数据的全量和增量迁移 能够完成热点文章数据的迁移 1 为什么需要自动同步 因为MySQL...保存着我们爬取的以及自建的数据,对于爬取的数据,数据量比较大,使用mysql 存储会影响mysql的性能,并且我们需要对数据进行流式计算,对数据进行各种统计,mysq满足不了我们的需求,我们就将mysql...因为热点数据会失效,定期清除mysql和mongodb中的过期数据 2.3 数据同步注意的问题 HBASE数据主要靠rowKey进行查询的,rowKey设计就用mysql中的主键ID作为rowKey...,查询的时候直接根据Rowkey获取数据 因为需要同步到HBASE的数据是多个数据表的数据,一条数据由多个对象组成,存储的时候使用列族区分不同的对象,里面存储不同的字段。...StorageEntry 公共存储对象的一个key-value的字段 4.1.3 Hbase操作相关工具类 (1)HBaseConstants 类 配置类Hbase存储的的表名称 public class

    72220

    用 Python 做文本挖掘的流程

    预处理(对这里的高质量讨论结果的修改,下面的顺序仅限英文) 去掉抓来的数据中不需要的部分,比如 HTML TAG,只保留文本。结合 beautifulsoup 和正则表达式就可以了。...去掉长度过小的单词。len的是通常选择。 去掉 non-alpha 词。同样,可以用正则表达式完成 \W 就可以。 转换成小写。 去掉停用词。Matthew L....nltk 里面提供了好多种方式,推荐用 wordnet 的方式,这样不会出现把词过分精简,导致词丢掉原型的结果,如果实在不行,也用 snowball 吧,别用 porter,porter 的结果我个人太难接受了...重新去掉长度过小的词。是的,再来一遍。 重新去停词。上面这两部完全是为了更干净。 到这里拿到的基本上是非常干净的文本了。如果还有进一步需求,还可以根据 POS 的结果继续选择某一种或者几种词性的词。...jieba 是纯 Python 写的,Stanford 的可以通过 nltk 调用,复旦 NLP 也可以用 Python 调用。 END.

    1.7K80

    Python —— 用模块做更多的事

    在前面的学习内容中,我们唯独没有将的就是我们导入的模块,我们导入的到底是什么呢?...其实,我们导入的模块是保存在单独文件中的一段Python 代码,当你想要使用文件中的函数和数据时,在你的代码最前面 “导入”(import 即可)。...但是我们有时只是为了用模块中的某个函数,又要该怎么做呢?  ...,sys 是system 的简称,我们直接导入我们需要的函数,在后面的程序中就不用再加入sys.这个前缀了,导入sys的库的作用可以使你的代码使用操作系统,下面我们就用Python 来打印下我们正在使用的操作系统...#用点分隔版本号 #version_info 是包含如下信息的一个元组:主版本号、次版本号、小版本(修订)号 #我的是 3.7.0 依次对应:3.7.0 if sys.version_info

    39210
    领券