JavaScript でピンボール ゲームの Web バージョンを実装する
|
参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを紹介します。具体的な内容は次のとおりです。 <!DOCTYPE html>
<html>
<ヘッド>
<tilie>Huhuhahei の Web ピンボール</title>
</head>
<本文>
<キャンバスid="キャンバス"幅="400"高さ="400"></キャンバス>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<スクリプト>
var canv = document.getElementById("キャンバス");
var ctx = canv.getContext("2d");
//ボールオブジェクトを作成する var ball={
x: 100,
y: 100,
xスピード: -5,
yスピード: -5
};
//ボールを描画するメソッドを定義する ball.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,10,0,Math.PI*2,false);
ctx.fill();
};
//ボールの移動方法を定義する ball.move=function(){
this.x =this.x+this.x速度;
this.y =this.y+this.y速度;
};
//境界判定 ball.checkCanvas=function(panelStart,panelEnd)
{
(this.x<0||this.x>400) の場合
this.xSpeed=-this.xSpeed;
y<0の場合
this.ySpeed=-this.ySpeed;
y>390の場合
if(this.x>パネル開始 && this.x<パネル終了)
this.ySpeed=-this.ySpeed;
それ以外{
alert("ゲームオーバー!!!");
50 を返します。
y = 100;
}
}
};
//タイミング関数はボールを動かす setInterval(function()
{
ctx.clearRect(0,0,400,400);
ボールを描画します。
パネルを描画します。
ボールを移動します。
ball.checkCanvas(panel.x、panel.x+panel.xサイズ);
ctx.strokeRect(0,0,400,400);
},30); // タイミング関数。中括弧内のコードを 30 ミリ秒ごとに実行します。
//バッフル オブジェクトを作成します。
var パネル = {
x:200,
y:390,
xサイズ: 50,
サイズ: 5
};
//バッフル移動方法 panel.draw=function(){
ctx.fillRect(this.x、this.y、this.xSize、this.ySize);
};
//jQuery を使用してキー操作を実装します。
$("body").keydown(関数(イベント)
{
console.log(イベント.キーコード);
イベントキーコード==37の場合
パネル.x = パネル.x-5;
パネルx<0の場合{
パネル.x=0;
}
}
if(イベント.keyCode==39){
パネルx = パネルx + 5;
パネルx>400-50の場合{
パネル.x=350;
}
}
}
);
</スクリプト>
</本文>
</html>
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows10でmysql8.0.17を置き換える詳細なチュートリアル
>>: 1 つの記事で Nginx ロケーション マッチングの実装を理解する
推薦する
Vue3 setup() の高度な使用例の詳細な説明
目次1. オプションAPIと組み合わせAPIの違い2. セットアップを具体的にどのように使用するので...
MySQL アップグレードのベストプラクティス
MySQL 5.7 には、オンライン DDL、マルチソース レプリケーション、拡張された半同期、テー...
Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
CSS3 で背景ぼかしを実現する 3 つの方法 (要約)
1. 通常の背景ぼかしコード： <スタイル> html, 体 { 幅: 100%; 高...
Vue diffアルゴリズムの完全な分析
目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...
Vueフォームで画像を処理する方法
質問： Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット...
CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明
最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...
弾幕効果を実現するためのjQuery
この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...
高性能ウェブサイトの最適化ガイド
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ～ 20% が HTML ドキュメ...
一般的な JavaScript 文字列メソッド 28 個と使用方法のヒントのまとめ
目次序文1. 文字列の長さを取得する2. 文字列の指定された位置の値を取得する(1) charAt(...
HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します
素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...
WeChatアプレット+EChartsで動的更新プロセス記録を実現
序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...
React antdはフォームの動的な増減を実現します
以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...
JavaScriptエンジンV8の実行プロセスの詳細な説明
目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...
Vue プロジェクトでブラウザ キャッシュ設定を無効にする例
プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...