前端小demo：星星闪烁

小demo:

星星闪烁+自定义滚动条样式

当鼠标放上去就会有星星：

考虑了星星的重生判断和位移等。

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}/* 改变滚动条 */::-webkit-scrollbar{width: 5px;}/* 定义滚动条轨道 */::-webkit-scrollbar-track{border-radius: 10px;background-color: rgba(0, 0, 0, .1);}/* 定义滑块 */::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset  0 0 6px rgba(0,0,0,.3);background-color: #2ecc71;}</style>
</head>
<body><div><canvas id="canvas" width="800" height="600"></canvas></div><div><p>其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！</p><p>其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！</p><p>其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！</p><p>其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！</p></div><script>let can;var ctx;let w;let h;var girlPic = new Image();var starPic = new Image();var number = 60;var stars = [];var lastTime;var deltaTime;var switchy = false;var life = 0;function init(){can = document.querySelector('#canvas');ctx = can.getContext('2d');w = can.width;h = can.height;document.addEventListener('mousemove',mousemove,false);girlPic.src = 'src/girl.jpg';starPic.src = 'src/star.png';for(let i=0;i<number;i++){var obj = new starObj();stars.push(obj);stars[i].init();}lastTime = Date.now();gameloop();}document.body.onload = init;function gameloop(){window.requestAnimationFrame(gameloop)let now = Date.now();deltaTime = now -lastTime;lastTime = now;drawBackground();drawGirl();drawStarts();aliveUpdate();}function drawBackground(){ctx.fillStyle = "#393550";ctx.fillRect(0,0,w ,h);}function drawGirl(){ctx.drawImage(girlPic, 100,150,600,300);}function mousemove(e){if(e.offsetX || e.layerX){let px = e.offsetX == undefined ? e.layerX:e.offsetX;let py = e.offsetY == undefined ? e.layerY:e.offsetY;if(px > 100 && px < 700&& py > 150 && py<450){switchy = true;}else{switchy = false;}}}</script><script src="js/stars.js"></script>
</body>
</html>

stars.js:

var starObj = function(){this.x;this.y;this.picNo;this.timer;this.xSpd;this.ySpd;
}starObj.prototype.init = function(){this.x = Math.random()*600 + 100;this.y = Math.random()*300 + 150;this.picNo = Math.floor(Math.random() * 7);this.timer = 0;this.xSpd = Math.random() * 3 -6;this.ySpd = Math.random() * 3 -6;
}starObj.prototype.update = function(){this.x += this.xSpd * deltaTime *0.002;this.y += this.ySpd * deltaTime *0.002;if(this.x<100 || this.x > 700){this.init();return;}if(this.y<150|| this.y > 550){this.init();return;}this.timer += deltaTime;if(this.timer > 50){this.picNo += 1;this.picNo %= 7;this.timer = 0;}
}starObj.prototype.draw = function(){ctx.save();//  全局透明度ctx.globalAlpha = life;//drawImage(img,sx,sy,swidth,sheight,x,y,width,height)ctx.drawImage(starPic,this.picNo*7,0,7,7, this.x,this.y,7,7);ctx.restore();
}function drawStarts(){for(let i=0;i<number;i++){stars[i].draw();stars[i].update();}
}function aliveUpdate(){if(switchy){//show starslife += 0.03 *deltaTime * 0.05;if(life>1){life = 1;}}else{//hide starslife -= 0.03 *deltaTime * 0.05;if(life < 0){life = 0;  }}
}

前端小demo：星星闪烁相关推荐

前端小demo——全选和全不选
模拟购物车,实现全选或者全不选,或者其中任意一件单品单选的效果. 点击顶部复选框实现全选列表中任意一项未选中,顶部复选框就是未选中的状态 <!DOCTYPE html> <html ...
圣诞节祝福小Demo:JingleBells背景音乐+礼物闪烁下落+跑马灯效果
源码已经上传至我的github上:https://github.com/junmei520/MyChristmas 同时我在微博上也以视频的形式展示了Demo的运行效果:http://weibo.co ...
两个月入门深度学习，全靠动手实践！一位前端小哥的经验分享
两个月入门深度学习,全靠动手实践!一位前端小哥的经验分享在当前社会,技术日新月异,一个全栈工程师不及时学习新知识,掌握AI技能,再过两年就算不上"全栈"了. 产品发烧友.前端 ...
云服务器apache mysql php_服务器配置教程：阿里云服务器安装PHP环境(附PHP+MySQL+Apache后台小Demo)...
前言搭建Apache HTTP Server往往都会安装PHP环境,因为很多人都使用PHP做web.其实相对我而言,我是用PHP做后台.主要是因为我是移动端方向:做iOS和Android.往往需要通 ...
vue和java实现页面增删改_SpringBoot-Vue实现增删改查及分页小DEMO
前言主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈前端开 ...
基于JQuery做的一个简单的点击显示和隐藏的小Demo
最近新加入了一个公司,并接手到了一个新项目,是基于 Spring + Spring MVC + MyBatis 架构来搭建的,在公司领导的需求下修改功能,需要修改些修改些前端页面,原本很简单的就是一个 ...
登陆注册小Demo实现
登陆注册小Demo实现 1.基础部件数据库服务器程序 2.详细配置 2.1创建项目并搭建服务器,使它们可以运行 2.2 配置数据库字段要求:除了u_id 和 u_tel外,其他均是 Varch ...
新闻类-仿搜狐页面小demo
大概用了一天时间仿了一个搜狐静态页面的小demo,页面上的新闻是10月1号祖国生日这天的,这种静态页面就是传统意义上的新闻类页面,因为还没学框架什么的所以所有代码布局都是一个一个敲出来的,然后我得出的 ...
SpringBoot-Vue实现增删改查及分页小DEMO
SpringBoot-Vue实现增删改查及分页小DEMO 前言主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...

前端小demo：星星闪烁

小demo:

前端小demo：星星闪烁相关推荐

最新文章

热门文章