マウス追従ゲームを実現する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 版)
推薦する
Node.js パッケージ マネージャー npm の具体的な使用方法
目次目的npm init および package.json ファイルモジュールのインストールと管理モ...
Windows で Graphviz をインストールして開始する方法のチュートリアル
ダウンロードとインストール環境変数の設定インストール環境変数の設定確認基本的な描画の紹介グラフディグ...
React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します
目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...
JavaScript ES6 モジュールの詳細な説明
目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...
MySQL5.7.18winX64のWin10インストールでサーバーの起動に失敗し、エラーメッセージも表示されない
システム環境: Win10 64ビットMySQL バージョン: mysql-5.7.18-winX6...
JavaScript配列の一般的なメソッドの概要
目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...
Windows で MySQL 5.6 を 5.7 にアップグレードする方法
前面に書かれたMySQL をアップグレードする方法には、インプレース アップグレードと論理アップグレ...
CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード
効果： CSS スタイル: <スタイル タイプ="text/css">...
Dockerコンテナでyumを呼び出すときのエラーの解決方法
dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...
Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析
問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...
Docker クロスホストネットワーク (オーバーレイ) の実装
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
MySQL カーソルの定義と使用法
カーソルの作成まず、MySql でデータ テーブルを作成します。 存在しない場合はテーブルを作成 `...
MySQL の制限パフォーマンス分析と最適化
1. 結論構文: 制限オフセット、行結論: 同じ行条件では、オフセット値が大きいほど、limitステ...
ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法
目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...
Docker ベースの Redis クラスターの構築方法
Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...