js to realize the mouse following game
|
This article shares the specific code of js to implement the mouse following game for your reference. The specific content is as follows When creating a project, remember to import the jquery.min.js library. You can also import other versions of the jquery library. Code in Script:
<script type="text/javascript">
$(document).ready(function() {
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var c = $("#c");
var x,y,w,h,cx,cy,l;
var y = [];
var b = {
n:100,
c:false, // If the color is false, it will be a random gradient color bc:'#000', // Background color r:0.9,
o:0.05,
a:1,
s:20,
}
var bx = 0,by = 0,vx = 0,vy = 0;
var td = 0;
var p = 0;
var hs = 0;
re();
var color,color2;
if(bc){
color2 = bc;
}else{
color = Math.random()*360;
}
$(window).resize(function(){
re();
});
var tp1 = true, tp2 = false, tp3 = false, tp4 = false, tp5 = false, tp6 = false, tp7 = false, tp8 = false, tp9 = false, tp0 = false;
function begin(){
if(tp1){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
y[i].r+=br;
y[i].o-=bo;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp2){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].r=10;
ctx.shadowBlur=20;
ctx.shadowColor=color2;
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
y[i].o-=bo;
y[i].v+=ba;
y[i].y+=y[i].v;
if(y[i].y>=h+y[i].r || y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp3){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
td+=5;
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
y[i].r=(1-(y[i].y/h))*20;
ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
y[i].o=y[i].y/h;
y[i].v+=ba;
y[i].y-=bs;
y[i].x+=(Math.cos((y[i].y+td)/100)*10);
if(y[i].y<=0-y[i].r || y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp4){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
y[i].vx2 += (cx - y[i].wx)/1000;
y[i].vy2 += (cy - y[i].wy)/1000;
y[i].wx+=y[i].vx2;
y[i].wy+=y[i].vy2;
y[i].o-=bo/2;
y[i].r=10;
ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp5){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = .18;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
p+=5;
ctx.globalAlpha = 1;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur=20;
ctx.shadowColor=color2;
ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;
}else if(tp6){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.strokeStyle = color2;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(y[i].x,y[i].y);
ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);
ctx.lineTo(y[i].wx,y[i].wy);
ctx.closePath();
ctx.stroke();
y[i].o-=bo;
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp7){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
if(y.length<bn*2){
hs = Math.random()*2*Math.PI;
y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});
}
for(var i=0;i<y.length;i++){
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].x+=(cx-y[i].x)/10;
y[i].y+=(cy-y[i].y)/10;
ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);
ctx.closePath();
ctx.fill();
y[i].o-=bo;
if(y[i].o<=0){
y[i].h = Math.random()*2*Math.PI;
y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h));
y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h));
y[i].o = 1;
};
}
}else if(tp8){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
ctx.fillStyle = color2;
if(cx%4 == 0){
cx+=1;
}else if(cx%4 == 2){
cx-=1
}
else if(cx%4 == 3){
cx-=2
}
if(cy%4 == 0){
cy+=1;
}else if(cy%4 == 2){
cy-=1
}
else if(cy%4 == 3){
cy-=2
}
for(var i=cx-60;i<cx+60;i+=4){
for(var j=cy-60;j<cy+60;j+=4){
if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){
ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);
if(Math.random()<.2){
ctx.fillRect(i,j,3,3);
}
}
}
}
}else if(tp9){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
ctx.fillStyle = color2;
if(cx%4 == 0){
cx+=1;
}else if(cx%4 == 2){
cx-=1
}
else if(cx%4 == 3){
cx-=2
}
if(cy%4 == 0){
cy+=1;
}else if(cy%4 == 2){
cy-=1
}
else if(cy%4 == 3){
cy-=2
}
if(y.length<bn){
y.push({x:cx,y:cy,xv:0,yv:0,o:1});
}
for(var i=0;i<y.length;i++){
if(y[i].xv==0 && y[i].yv==0){
if(Math.random()<.5){
if(Math.random()<.5){
y[i].xv = 3;
}else{
y[i].xv = -3;
}
}else{
if(Math.random()<.5){
y[i].yv = 3;
}else{
y[i].yv = -3;
}
}
}else{
if(y[i].xv == 0){
if (Math.random()<.66) {
y[i].yv = 0;
if(Math.random()<.5){
y[i].xv = 3;
}else{
y[i].xv = -3;
}
}
}else if(y[i].yv == 0){
if (Math.random()<.66) {
y[i].xv = 0;
if(Math.random()<.5){
y[i].yv = 3;
}else{
y[i].yv = -3;
}
}
}
}
y[i].o-=bo/2;
ctx.globalAlpha = y[i].o;
y[i].x+=y[i].xv;
y[i].y+=y[i].yv;
ctx.fillRect(y[i].x,y[i].y,3,3);
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}else if(tp0){
if(!bc){
color+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,w,h);
ctx.fillStyle = color2;
y.push({x:cx,y:cy,xv:2,yv:1,o:1});
for(var i=0;i<y.length;i++){
y[i].o-=bo/10;
ctx.globalAlpha = y[i].o;
y[i].x+=(Math.random()-.5)*4;
y[i].y-=1;
ctx.fillRect(y[i].x,y[i].y,2,2);
if(y[i].o<=0){
y.splice(i,1);
i--;
};
}
}
window.requestAnimationFrame(begin);
}
function re(){
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
cx = w/2;
cy = h/2;
};
c.mousemove(function(e){
cx = e.pageX-c.offset().left;
cy = e.pageY-c.offset().top;
if(tp4){
if(Math.random()<=.5){
if(Math.random()<=.5){
bx = -10;
}else{
bx = w+10;
}
by = Math.random()*h;
}else{
if(Math.random()<=.5){
by = -10;
}else{
by = h+10;
}
bx = Math.random()*w;
}
vx = (Math.random()-.5)*8;
vy = (Math.random()-.5)*8;
}
if(tp1 || tp2 || tp3){
y.push({x:cx,y:cy,r:br,o:1,v:0});
}else if(tp4){
y.push({x:cx,y:cy,r:br,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
}else if(tp6){
y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
}
});
/*c.mousedown(function(){
c.on('mousemove',function(e){
cx = e.pageX-c.offset().left;
cy = e.pageY-c.offset().top;
y.push({x:cx,y:cy,r:br,o:1});
});
c.on('mouseup',function(){
c.off('mouseup');
c.off('mousemove');
c.off('moseleave');
});
c.on('mouseleave',function(){
c.off('mouseup');
c.off('mousemove');
c.off('moseleave');
});
});*/
$("#btn1").click(function(){
tp1 = true;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn2").click(function(){
tp1 = false;
tp2 = true;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn3").click(function(){
tp1 = false;
tp2 = false;
tp3 = true;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn4").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = true;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn5").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = true;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn6").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = true;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn7").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = true;
tp8 = false;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn8").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = true;
tp9 = false;
tp0 = false;
y=[];
});
$("#btn9").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = true;
tp0 = false;
y=[];
});
$("#btn0").click(function(){
tp1 = false;
tp2 = false;
tp3 = false;
tp4 = false;
tp5 = false;
tp6 = false;
tp7 = false;
tp8 = false;
tp9 = false;
tp0 = true;
y=[];
});
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
window[vendors[xx] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
begin();
});
</script>Code in HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="mouse follow l">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0; }
body { position:relative; width:100%; height:100%; overflow:hidden; }
button { color:#222; font-size:20px; padding:5px 20px; width:120px; }
#btn1 { position:absolute; top:10px; left:10px; }
#btn2 { position:absolute; top:60px; left:10px; }
#btn3 { position:absolute; top:110px; left:10px; }
#btn4 { position:absolute; top:160px; left:10px; }
#btn5 { position:absolute; top:210px; left:10px; }
#btn6 { position:absolute; top:260px; left:10px; }
#btn7 { position:absolute; top:310px; left:10px; }
#btn8 { position:absolute; top:360px; left:10px; }
#btn9 { position:absolute; top:410px; left:10px; }
#btn0 { position:absolute; top:460px; left:10px; }
</style>
<script src="js/jquery.min.js"></script>
<title>Cursor</title>
</head>
<body>
<canvas id="c"></canvas>
<div class="btn_left;">
<button id="btn1">Effect 1</button>
<button id="btn2">Effect 2</button>
<button id="btn3">Effect 3</button>
<button id="btn4">Effect 4</button>
<button id="btn5">Effect 5</button>
<button id="btn6">Effect 6</button>
<button id="btn7">Effect 7</button>
<button id="btn8">Effect 8</button>
<button id="btn9">Effect 9</button>
<button id="btn0">Effect 10</button>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of Linux text processing tools
Recommend
Several ways to easily traverse object properties in JS
Table of contents 1. Self-enumerable properties 2...
How to ensure that every page of WeChat Mini Program is logged in
Table of contents status quo Solution Further sol...
Solution to MySQL replication failure caused by disk fullness
Table of contents Case scenario Solving the probl...
In-depth understanding of Mysql transaction isolation level and locking mechanism issues
Overview Databases generally execute multiple tra...
How to add default time to a field in MySQL
Date type differences and uses MySQL has five dat...
JavaScript prototype and prototype chain details
Table of contents 1. prototype (explicit prototyp...
How to understand Vue's simple state management store mode
Table of contents Overview 1. Define store.js 2. ...
Specific use of ES6 array copy and fill methods copyWithin() and fill()
Table of contents Batch copy copyWithin() Fill ar...
Content-type description, that is, the type of HTTP request header
To learn content-type, you must first know what i...
Detailed explanation of how to pass password to ssh/scp command in bash script
Install SSHPASS For most recent operating systems...
CentOS uses expect to remotely execute scripts and commands in batches
Sometimes we may need to operate servers in batch...
Simply understand the differences in the principles of common SQL delete statements
This article mainly introduces the differences be...
Briefly describe the difference between MySQL and Oracle
1. Oracle is a large database while MySQL is a sm...
MySQL encoding utf8 and utf8mb4 utf8mb4_unicode_ci and utf8mb4_general_ci
Reference: MySQL character set summary utf8mb4 ha...
Implementing WeChat tap animation effect based on CSS3 animation attribute
Seeing the recent popular WeChat tap function, I ...