マウス追従ゲームを実現するjs
|
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 プロジェクトを作成するときは、jquery.min.js ライブラリをインポートすることを忘れないでください。jquery ライブラリの他のバージョンをインポートすることもできます。 スクリプト内のコード:
<script type="text/javascript">
$(ドキュメント).ready(関数() {
var キャンバス = document.getElementById("c");
var ctx = canvas.getContext("2d");
var c = $("#c");
var x、y、w、h、cx、cy、l;
var y = [];
var b = {
100,
c:false, // 色が false の場合、ランダムなグラデーション色になります bc:'#000', // 背景色 r:0.9,
0.05,
a:1、
s:20,
}
var bx = 0、by = 0、vx = 0、vy = 0;
var td = 0;
var p = 0;
var hs = 0;
再();
var color,color2;
もし(bc){
カラー2 = bc;
}それ以外{
色 = Math.random()*360;
}
$(ウィンドウ).resize(関数(){
再();
});
var tp1 = true、tp2 = false、tp3 = false、tp4 = false、tp5 = false、tp6 = false、tp7 = false、tp8 = false、tp9 = false、tp0 = false;
関数begin(){
if(tp1){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
(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;
y[i].o<=0の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp2){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
(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;
y[i].y>=h+y[i].r || y[i].o<=0 の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp3){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
td+=5;
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
(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);
y[i].y<=0-y[i].r || y[i].o<=0)の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp4){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 1;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
(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;
y[i].o<=0の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp5){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = .18;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
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;
}そうでない場合(tp6){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
(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;
y[i].o<=0の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp7){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
yの長さがbn*2の場合
ランダムな2乗を掛けた値。
y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});
}
(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;
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;
};
}
}そうでない場合(tp8){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
ctx.fillStyle = color2;
cx%4 == 0の場合{
1 を 0 にする
}そうでない場合(cx%4 == 2){
cx-=1
}
それ以外の場合(cx%4 == 3){
cx-=2
}
if(cy%4 == 0){
cy+=1;
}そうでない場合(cy%4 == 2){
cy-=1
}
そうでない場合(cy%4 == 3){
cy-=2
}
(var i=cx-60;i<cx+60;i+=4){
(var j=cy-60;j<cy+60;j+=4){
もし(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);
もしも(Math.random()<.2){
ctx.fillRect(i,j,3,3);
}
}
}
}
}そうでない場合(tp9){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
ctx.fillStyle = color2;
cx%4 == 0の場合{
1 を 0 にする
}そうでない場合(cx%4 == 2){
cx-=1
}
それ以外の場合(cx%4 == 3){
cx-=2
}
if(cy%4 == 0){
cy+=1;
}そうでない場合(cy%4 == 2){
cy-=1
}
そうでない場合(cy%4 == 3){
cy-=2
}
yの長さがbnの場合
y.push({x:cx,y:cy,xv:0,yv:0,o:1});
}
(var i=0;i<y.length;i++){
y[i].xv==0 && y[i].yv==0 の場合{
もしも(Math.random()<.5){
もしも(Math.random()<.5){
y[i].xv = 3;
}それ以外{
y[i].xv = -3;
}
}それ以外{
もしも(Math.random()<.5){
y[i].yv = 3;
}それ以外{
y[i].yv = -3;
}
}
}それ以外{
y[i].xv == 0の場合{
もし（Math.random()<.66）{
y[i].yv = 0;
もしも(Math.random()<.5){
y[i].xv = 3;
}それ以外{
y[i].xv = -3;
}
}
}そうでない場合(y[i].yv == 0){
もし（Math.random()<.66）{
y[i].xv = 0;
もしも(Math.random()<.5){
y[i].yv = 3;
}それ以外{
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);
y[i].o<=0の場合{
y.splice(i,1);
私 - ;
};
}
}そうでない場合(tp0){
もし(!bc){
色+=.1;
color2 = 'hsl('+color+',100%,80%)';
}
ctx.globalAlpha = 0.2;
ctx.fillStyle = b.bc;
ctx.fillRect(0,0,幅,高さ);
ctx.fillStyle = color2;
y.push({x:cx,y:cy,xv:2,yv:1,o:1});
(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);
y[i].o<=0の場合{
y.splice(i,1);
私 - ;
};
}
}
window.requestAnimationFrame(開始);
}
関数 re(){
ウィンドウの内側の幅を指定します。
h = ウィンドウの内側の高さ;
キャンバスの幅 = w;
キャンバスの高さ = h;
cx = w/2;
cy = h/2;
};
c.mousemove(関数(e){
cx = e.pageX-c.offset().left;
cy = e.pageY-c.offset().top;
if(tp4){
もしも(Math.random()<=.5){
もしも(Math.random()<=.5){
bx = -10;
}それ以外{
bx = w + 10;
}
によって = Math.random()*h;
}それ以外{
もしも(Math.random()<=.5){
= -10;によって
}それ以外{
= h+10 により;
}
bx = Math.random()*w;
}
vx = (Math.random()-.5)*8;
vy = (Math.random()-.5)*8;
}
tp1 の場合、tp2 の場合、tp3 の場合、
y.push({x:cx,y:cy,r:br,o:1,v:0});
}そうでない場合(tp4){
y をプッシュします({x:cx,y:cy,r:br,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
}そうでない場合(tp6){
y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
}
});
/*c.mousedown(関数(){
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('マウスアップ',function(){
c.off('マウスアップ');
c.off('マウス移動');
c.off('moseleave');
});
c.on('マウスの履歴',function(){
c.off('マウスアップ');
c.off('マウス移動');
c.off('moseleave');
});
});*/
$("#btn1").click(function(){
tp1 = 真;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn2").click(function(){
tp1 = 偽;
tp2 = 真;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn3").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 真;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn4").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 真;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn5").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 真;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn6").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 真;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn7").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 真;
tp8 = 偽;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn8").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 真;
tp9 = 偽;
tp0 = 偽;
y = [];
});
$("#btn9").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 真;
tp0 = 偽;
y = [];
});
$("#btn0").click(function(){
tp1 = 偽;
tp2 = 偽;
tp3 = 偽;
tp4 = 偽;
tp5 = 偽;
tp6 = 偽;
tp7 = 偽;
tp8 = 偽;
tp9 = 偽;
tp0 = 真;
y = [];
});
（関数（） {
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[ベンダー[xx] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(コールバック、要素) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
コールバック(currTime + timeToCall);
}, 呼び出し時間);
最終時刻 = currTime + 呼び出し時刻;
ID を返します。
};
}
アニメーションフレームをキャンセルする場合
window.cancelAnimationFrame = 関数(id) {
タイムアウトをクリアします(id);
};
}
}());
始める（）;
});
</スクリプト>HTML のコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="マウスフォローl">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<スタイル タイプ="text/css">
* { マージン:0; パディング:0; }
本文 { 位置:相対; 幅:100%; 高さ:100%; オーバーフロー:非表示; }
ボタン { color:#222; フォントサイズ:20px; パディング:5px 20px; 幅:120px; }
#btn1 { 位置:絶対; 上:10px; 左:10px; }
#btn2 { 位置:絶対; 上:60px; 左:10px; }
#btn3 { 位置:絶対; 上:110px; 左:10px; }
#btn4 { 位置:絶対; 上:160px; 左:10px; }
#btn5 { 位置:絶対; 上:210px; 左:10px; }
#btn6 { 位置:絶対; 上:260px; 左:10px; }
#btn7 { 位置:絶対; 上:310px; 左:10px; }
#btn8 { 位置:絶対; 上:360px; 左:10px; }
#btn9 { 位置:絶対; 上:410px; 左:10px; }
#btn0 { 位置:絶対; 上:460px; 左:10px; }
</スタイル>
<script src="js/jquery.min.js"></script>
<title>カーソル</title>
</head>
<本文>
<キャンバスid="c"></キャンバス>
<div class="btn_left;">
<button id="btn1">効果 1</button>
<button id="btn2">エフェクト 2</button>
<button id="btn3">エフェクト 3</button>
<button id="btn4">エフェクト 4</button>
<button id="btn5">効果 5</button>
<button id="btn6">効果 6</button>
<button id="btn7">効果 7</button>
<button id="btn8">効果8</button>
<button id="btn9">効果9</button>
<button id="btn0">効果10</button>
</div>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)
推薦する
初心者のためのWebサイト構築入門 ③ エイリアス（CNAME）レコードとURL転送
①. エイリアス（CNAME）レコードの使用方法：前回の投稿のドメイン名解決では、A レコードの解...
MySQL デッドロック シナリオ例の分析
序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...
mysql データ型変換の実装
1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...
Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する
1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...
iframe の多層ネスト、無制限のネスト、高度に適応したソリューション
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...
純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
Linux で実行中のバックグラウンド プログラムを表示および終了する方法
Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...
デザイン視点技術はデザイン能力の重要な資本である
ある設計士はこう尋ねた。「実際のプロジェクト制作には参加せずに、純粋に設計だけをすることはできますか...
Vue の proto ファイルの関数呼び出しのグラフィカルな説明
1. protoをコンパイルするすべての .proto ファイルを保存するために、src フォルダー...
JavaScript プログラムのループ構造の詳細な説明
目次構造を選択ループ構造その間…しながらforループ…のために…で…の…のためにまとめループの終了壊...
Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。
バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...
Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
Docker: /etc/default/docker の DOCKER_OPTS パラメータを変更しても反映されない
デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...
Vueは透かし効果を簡単に実現します
序文： Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...
Nginx ロードバランシングの設定方法
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング（デフォルト）重さip_ハッシュ公正（...