效果描述:
当鼠标移动到图片上方时,图片上放会出现星星,并且星星随即运动;当鼠标移开图像时,星星渐渐消失。
效果图如下:
主要实现代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/stars.js"></script>
</body>
</html>
main.js
var can;
var ctx;
var w;
var h;
// 女孩的图片
var girlPic = new Image();
// 星星图片
var starPic = new Image();
// 上次刷新时间
var lastTime;
//刷新时间间隔
var deltaTime;
var life = 1;
var num = 60;
var stars = [];
var switchy;
function init(){
can = document.getElementById("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 (var i = 0; i < num; i++) {
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function drawBackground(){
ctx.fillstyle = "#393550";
ctx.fillRect(0,0,w,h);
}
function gameloop(){
// 循环调用函数,时间不确定
window.requestAnimFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
// console.log(deltaTime);
drawBackground();
drawGirl();
drawStars();
aliveUpdate();
}
function drawGirl(){
ctx.drawImage(girlPic,100,150,600,400);
}
function mousemove(e){
if (e.offsetX || e.layerX) {
var px = e.offsetX == undefined ? e.layerX :e.offsetX;
var py = e.offsetY == undefined ? e.layerY :e.offsetY;
// console.log(px);
if (px >100 && px <700 && py >150 && py < 450) {
switchy = true;
}else{
switchy = false;
}
// console.log(switchy);
}
}
stars.js
// 星星类
var starObj = function(){
this.x ;
this.y ;
this.picNo;
this.timer;
this.xSpeed;
this.ySpeed;
}
// 初始化方法
starObj.prototype.init = function(){
this.x=100 + Math.random()*600;
this.y=150 + Math.random()*300;
this.xSpeed = Math.random()*3-1.5;
this.ySpeed = Math.random()*3-1.5;
this.picNo = Math.floor(Math.random()*7);
this.timer=0;
}
starObj.prototype.update = function(){
this.timer += deltaTime;
this.x += this.xSpeed * 0.06 * deltaTime;
this.y += this.ySpeed * 0.06 * deltaTime;
if (this.x <100 || this.x >700) {
this.init();
return;
}
if (this.y <150 || this.y >450) {
this.init();
return;
}
if (this.timer > 50) {
this.picNo += 1;
this.picNo %= 7;
this.timer = 0;
}
}
starObj.prototype.draw = function(){
ctx.save();
ctx.globalAlpha = life;
ctx.drawImage(starPic,7*this.picNo,0,7,7,this.x,this.y,7,7);
ctx.restore();
}
function drawStars(){
for (var i = 0; i < num; i++) {
stars[i].draw();
stars[i].update();
}
}
function aliveUpdate(){
if (switchy) {
life += 0.03*deltaTime*0.05;
if (life>1) {
life = 1;
}
}else{
life -= 0.03*deltaTime*0.05;
if (life<0) {
life = 0;
}
}
}
commonFunctions.js
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
这是小编在通过慕课学习视频时根据老师讲解敲的代码,供大家参考学习!