JavaScript でピンボール ゲームの Web バージョンを実装する

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS はシンプルなブロック崩しピンボールゲームを実装します
  • jsはポイント付きの小さなピンボールゲームを実装します
  • ネイティブ JS を使用して複数のボールが衝突して跳ね返る効果を実現する例
  • JSはボールの弾性衝突効果を実現します
  • ピンボールゲームのサンプルコードの js バージョンの非 HTML5 実装
  • 跳ねるボールを実現するネイティブjs

<<:  Windows10でmysql8.0.17を置き換える詳細なチュートリアル

>>:  1 つの記事で Nginx ロケーション マッチングの実装を理解する

推薦する

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

要素の読み込み効果を実現するための純粋なHTML+CSS

これは Element UI の読み込みコンポーネントのエフェクトです。かっこいいですね。実装してみ...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

小さな画面のモバイルデバイス向けにWebページを設計する際に注意すべきこと

その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...

優れたグラフィックデザイナーが習得すべき7つのスキル

1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...

Linux の cut コマンドの説明

Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...

MySQL データベース ターミナル - 一般的な操作コマンド コード

目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...

VMware ワークステーション 12 に Ubuntu 14.04 (64 ビット) をインストール

1. インストール環境コンピュータモデル: Lenovo Y471a (i5) ノートパソコンシステ...

vue data が関数である理由をご存知ですか?

公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...

サーバー上で selenium+chromedriver を実行するための詳細なチュートリアル

1. はじめにSelenium を使用して Web サイトからデータをスクレイピングしたいのですが、...

mysql data_dirの変更によって発生するエラー問題を解決する

今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

vueの実践的な応用におけるvuexの永続性の詳細な説明

目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...

MySQL における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...