javascript精彩实例
分享
扫一扫
文章平均质量分 74
【订阅一份，此专栏全部文章都可以看、此专栏代码可以找博主免费获取】，包含 扫雷小游戏、植物大战僵尸、幸运大转盘、手风琴特效、贪吃蛇、俄罗斯方块、迷宫、网红太空人表盘、页面动态验证码等，应有尽有，并且持续更新中。。。
超级会员免费看
编程界小明哥
CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，欢迎您关注，期待与您一起学习、成长、起飞！
展开
-
JavaScript实现飞机大战
系列目录1. JavaScript 贪吃蛇游戏2. JavaScript 俄罗斯方块3. JavaScript 扫雷小游戏4. JavaScript 网红太空人表盘引言：之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。实现思路分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。创建我方飞机定时创建敌机开启主线程，用来刷新画布2.代码实现编写页面<!DOCTYPE html&原创 2021-08-04 08:58:25 · 32831 阅读 · 149 评论
-
用JavaScript实现网红太空人表盘（绝对详细、绝对原创），附源码下载
引言：网上最近太空人表盘很火，之前看到有个兄弟用svg写的，但是我也不会这个啊，我就琢磨着用canvas写了一个，效果感觉还不错，拿出来大家唠唠！效果图：思路 分两个画布来绘制，画布1用来放置不动的东西（背景、表盘、文字信息）； 画布2用来绘制太空人的转动和时间的更新（经常要重新绘制）； 太空人的转动的话就是用很多图片来切换，达到转动的效果。 绘制表盘圆形构造函数//构造函数 function Circle(o){ this.x=0,//圆心.原创 2021-03-25 19:05:58 · 21886 阅读 · 85 评论 -
用JavaScript写的贪吃蛇游戏（很简单，很详细）
效果编写外部框架<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>*{ margin: 0; padding: 0;}#box{ width:620px; height:450px; position:absolute; margin:0 auto原创 2021-02-05 11:17:20 · 29192 阅读 · 64 评论 -
基于javascript扫雷小游戏，以前上学经常玩
引言：扫雷是系统自带的经典小游戏，以前上学那会上机的时候就经常玩这个，趁着五一假期的最后一天，用canvas编写了这个小游戏，看着还行，不知道会不会有什么我没发现的bug，难度目前是设置成简易的，如果要改难度，代码稍做修改即可。效果图实现思路1.创建9行9列的二维数组。2.设置雷：随机行数 i 和列数 j，根据随机到 i、j 从二维数组中取出对应的元素，将取到的元素设置一个属性type等于1，表示当前元素已经是雷，并且递增雷计数器，然后递归调用；如果取到的元素已经是雷了，则跳过继续执原创 2021-05-05 20:30:39 · 7515 阅读 · 40 评论 -
JavaScript实现2048小游戏，我终于赢了一把
作者简介作者名：编程界明世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！系列目录1. JavaScript 贪吃蛇游戏2. JavaScript 俄罗斯方块3. JavaScript 扫雷小游戏4. JavaScript 网红太空人表盘效果图实现思路编写页面和画布代码。绘制背景。绘制好全部卡片。随机生成一个卡片（原创 2021-09-15 09:21:43 · 13209 阅读 · 65 评论 -
用JavaScript写抖音很火的罗盘时钟，附源码
原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。效果图：3个构造函数文本构造函数//文字的构造函数 function Text(o){ this.x=0,//x坐标 this.y=0,//y坐标 this.disX=0,//x坐标偏移量 this.disY=0,//y坐标偏移量 this.text='',//内容 this.font=null;//字体 this.textAlign=null;//对齐方式 this原创 2021-03-25 22:03:18 · 9644 阅读 · 27 评论 -
JavaScript实现页面动态验证码
引言：现在很多在用户登陆或注册的时候为了防止程序攻击，加入了动态验证的技术，一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的，就在前端验证，发出来给大家看看。效果图：实现思路：把数字和字母放到一个数组中，通过随机的方式取得数组下标，总共取4个组成验证码； 把验证码渲染出来（一个一个的渲染）； 绘制一定数量的干扰线，随机颜色； 输入验证码，输入4位以后去验证，正确显示钩，错误显示叉并且刷新验证码。编写构造函数文本构造函数//文字的构造函数 f.原创 2021-03-18 21:21:44 · 16446 阅读 · 88 评论 -
JavaScript实现拖动滑块拼图验证（html5、canvas）
引言：滑块拖动验证现在很多地方都用到，周末就琢磨着写了一个，放上来，看看有没有人用得上！效果：实现思路：用一张画布绘制源图，再绘制一个填充的方形，这样就可以达到缺失的效果（方形的坐标是随机的）； 再用一个画布绘制拖动块，同时用drawImage截取和上一步中方形区域一样坐标、大小的原图，就作为验证图了，把验证图放在最左边； 在拖动块处，按下鼠标然后拖动，拖动块和验证图会跟随鼠标移动，达到一定范围后放开鼠标，会进行验证； 验证通过则提示验证成功，验证不通过则拖动块和验证图会返回到最左边。原创 2021-03-15 11:30:33 · 6864 阅读 · 37 评论 -
javascript(html5 canvas)做的拼图游戏，简单易懂
趁着摸鱼的时间，写了个拼图小游戏，操作简单、提神醒脑效果图（最后的完成了好像被遮住了，哈哈）实现思路用到canvas的drawImage方法，使用8个参数的方式来将大图片切成一张张的小图，同时将每个小图片存储到对应的数组中。 在切图的同时用两个数组keys和orig_keys存取小图的下标，9张小图的话（keys就输数字0-8的数组）。 点击开始按钮的时候keys随机排序，然后从小图片数组中去获取对应的图片对象，更新其显示位置，这样就可以打乱图片了。 选择一个小图片（再次点击此图片会取原创 2021-03-12 16:03:56 · 3063 阅读 · 7 评论 -
用JavaScript写的俄罗斯方块小游戏（很简单，很详细）
效果编写外部框架<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>*{ margin: 0; padding: 0;}#box{ width:320px; height:450px; position:absolute; margin:0 auto原创 2021-02-25 21:20:15 · 9492 阅读 · 84 评论 -
仿echarts写自己的插件之线性图
看了echarts的实例，感觉蛮溜的，但是源码看得我伤神，干脆自己写一个，就花了点时间自己整了个线性图，发出来大家看看，我个人觉得代码比框架大佬的更容易理解，更容易看懂，哈哈，有点自恋，是框架大佬的太高深了吧，看的我头痛。首先来分析一下，这个图从图中，我们可以大概将这个线性图分解成多个元素xy坐标 text文本 线段line 圆Circle 提示框toast（图中没显示出来）这里我们就可以想到，如果我们写5个构造函数，分别对应这个5种元素，需要什么元素就new一个，然...原创 2021-02-03 16:23:30 · 1554 阅读 · 4 评论 -
仿抖音小球刷新进度条（两个小球转动），代码很简单
先看看效果另外一种效果实现思路1.绘制好两个小球2.让左边小球的圆心X增加，右边小球圆心X的减少，到了一定位置再回转（第1种效果） 让两个小球一个scale增加，一个scale减少，到一定范围后反转（第2种效果）创建小球的构造函数//构造函数 function Ball(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度 th...原创 2021-02-03 12:19:01 · 3885 阅读 · 14 评论 -
仿头条方形进度条
刷头条的时候看到头条的刷新进度条不错，就自己做了一个，看一下效果：看到这个就会想到怎么去实现呢？绘制方形（用4条线段的方式来绘制），不直接绘制方形。 控制右上角往下运动，同时右下角往上运动（改变Y左边即可）。 右边的运动完以后，停止右边，让左上角往下，左下角也往上运动。 左边运动完成后，停止左边，启动右边，重复此过程。先来写好绘制方形的函数 //构造函数 function DynamicRectangle(o){ this.x=0,//原点坐标X this.原创 2021-02-02 21:27:39 · 3006 阅读 · 12 评论 -
仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条，很丝滑！
先看一下最终效果 正弦曲线正弦曲线公式y = A sin(Bx + C) + D 振幅是 A，A 值越大，曲线更陡峭 B值越大 周期越短 C水平位移 垂直位移是 D，控制曲线上下移动实现思路首先来绘制曲线 1.定义构造函数和初始化方法//sin曲线构造函数 function drawSin(option){ this.init(option); } //初始化 drawSin.prototyp...原创 2021-01-27 12:56:03 · 3363 阅读 · 33 评论 -
原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！
利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分效果图：思路1.写一个div，div的内容就是刮开后的结果；2.画布设置好定位，将div盖住（此时是透明的）；3.在画布上画一个长方形，并使用颜色（这里使用默认的黑色），这就把卡盖住了；4.设置globalCompositeOperation属性为destination-out；4.为画布添加鼠标移动事件，在鼠标的位置画一个小圆，就原创 2021-01-26 15:39:03 · 3272 阅读 · 5 评论 -
老婆说程序员不懂浪漫，程序员默默拿起了键盘，这就亲手带你去看流星雨，女人真的会影响男人拔刀的速度！
效果图实现思路1.写一个流星对象//定义流星雨 function Fire(){ this.x=getRandom(0,canvas.width),//流星雨的x坐标 this.y=0,//流星雨的y坐标 this.radius=getRandom(0.5,2),//流星雨的半径 this.speed=getRandom(2,4),//运行的速度 this.angle=0.6*Math.PI,//发射的方向 //this.color='white';//颜色原创 2021-01-26 15:16:08 · 1831 阅读 · 14 评论 -
一个非常漂亮的圆形滑块Round Slider，可修改成圆形进度条！
滑块效果图改动百分比效果图思路首先绘制一个灰色边框的圆 ctx.translate(150,150);//坐标定位至150,150处 ctx.beginPath(); ctx.lineWidth='20'; ctx.strokeStyle='#EEEEEE'; ctx.arc(0,0,radius,0,2*Math.PI);//绘制一个完整的圆 ctx.stroke(); 再绘制一个半径一样、圆心一样蓝色的圆 ctx...原创 2021-01-21 16:19:21 · 4353 阅读 · 15 评论 -
女儿说要看烟花，但是政府规定不能放，程序员爸爸默默的拿起了键盘，程序员就是要为所欲为！
一不给政府填麻烦、二给自己省银子，三给女儿带来了开心、激动，一举三得，何乐而不为！效果图：完整代码(代码里面有详细注释就不另作说明了)：<!DOCTYPE html><html> <head lang="en"> <meta charset="GBK"> <title></title> <style>body{ margin: 0; padding: 0; back原创 2021-01-19 19:45:10 · 7635 阅读 · 44 评论 -
用JavaScript canvas做的走迷宫游戏，肝了一下午，请帮忙点个赞！
引言：上午女儿跟我去逛超市，在文具区看到一本书，总共有10幅图都是小迷宫游戏，图什么的都挺漂亮，就是有点贵应该是纸比较好，要30多块钱，我就觉得划不来（典型的铁公鸡），我就跟女儿说家里有，买了其他东西就回来了，然后网上查了一下，主要用到的是一个算法，于是吃完午饭就开始写了，这就学马老师来一波回首掏！有人可能会说你这人真抠门，这点钱都舍不得掏。我会说：这是钱的问题吗？这是专业，我们程序员的钱有那么好赚吗?我待会就跟我老婆要30块钱，说我买了个迷宫游戏书，我们程序员的钱不就是敲代码来的吗，变现有问题原创 2021-04-24 18:30:31 · 4794 阅读 · 48 评论 -
基于JavaScript Canvas的植物大战僵尸，周末爆肝之作，请点个赞再走！
引言：前两天看到小朋友在玩植物大战僵尸，想起来多年以前自己也经常玩这个游戏，它是比较经典的一款休闲游戏，然后就心血来潮就周末写了一个，花了不少时间去找素材和编码，感觉上基本的功能是做好了（要上班，没那么多时间搞），写出来大家看看，确实有点爆肝！效果图：实现思路用两张画布来实现，第一个画布绘制不用更新的东西，比如背景图、按钮、积分图，卡牌图等； 第二个画布，绘制经常更新的东西，比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等原创 2021-04-20 08:27:03 · 15721 阅读 · 131 评论 -
基于Canvas的九宫格抽奖，就是仿csdn的APP做的，能过审不？
引言：九宫格抽奖一直就挺火爆，手机端也经常用，这不来了兴趣写了一波，看着效果还不错，拿出来大家唠唠！效果：实现思路 绘制出背景大图，两张图片，一张稍微小，并且稍小的图片颜色更深一些； 绘制8张白色背景的小图片（绘制的顺序？待会说明），作为奖项卡的背景，一张立即抽奖的黄色背景图片放在中间； 在对应的背景图片上，绘制出奖项图片和文字，完成整个抽奖页面的布局； 给立即抽奖的背景图片添加点击事件，点击后旋转【开启定时任务】（旋转方式有3种，目前写了顺时针一种，另外原创 2021-04-12 21:15:29 · 4338 阅读 · 37 评论 -
基于canvas的手风琴特效
引言：手风琴特效是比较常见的，我之前没有见过用canvas写的，就自己上手写了一个，拿出来分享一下，这其中处理图片的切换花了我不少时间。效果如下实现思路1.排放好图片，最前面的那张图片显示全部，其他图片放到两侧只显示20像素的边，剩余部分依次摆放放到画布外。2.绘制几个相对应的方形，每个方形大小跟对应的图片显示在画布中的大小一样，这些方形用来控制鼠标的移入事件。3.鼠标移入以后，切换图片，执行手风琴特效。绘制图片分二次处理是为了让展示的图片处于数组的后面，不会被遮盖。/原创 2021-04-08 20:28:04 · 7091 阅读 · 46 评论 -
基于JavaScript的幸运大转盘
引言：幸运大转盘在很多网站上、APP都有出现，之前的话一直也没有去琢磨，自从把canvas学了一遍后，什么都想自己做一个，这不就写了个幸运大转盘玩玩！页面效果：实现思路绘制外围的大转盘，就是绘制圆然后填充好颜色； 绘制6个扇形，因一个圆360度分成6份，故每份60度，根据度数计算出开始、结束角度，即可绘制出6个连续放置的扇形，配置不同的颜色； 在每个扇形的位置分别绘制奖项卡，也是根据角度来计算，然后把对应的图片绘上去； 在大转盘中心绘制指针图片，同时绘制一个跟图片大小接近的圆（白色填充原创 2021-04-06 17:03:20 · 3734 阅读 · 22 评论 -
基于html5 canvas的一个日期时间控件、日期选择器
引言：日期选择器是日常开发常用的控件，今天突然想用canvas来写一个，与以前的实现方式有些不一样，拿出来大家看看，当做一个对比吧！效果图：选择中选择后实现步骤绘制表格方形构造函数Rect.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Rect.prototype.render=function(context){ this.ctx=context;.原创 2021-03-29 20:45:27 · 1859 阅读 · 0 评论