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 ロケーション マッチングの実装を理解する
推薦する
WindowsにJDK8をインストールする方法
1. ダウンロード: http://www.oracle.com/technetwork/java/...
Tomcatを自動的に開始するサービスとして設定するにはどうすればいいでしょうか？最も簡単な方法
Tomcat が自動的にサービスを開始するように設定します。最近、問題が発生しました。サーバー上のプ...
MySQLのconcat関連関数の詳細な説明
1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...
シンプルなカルーセル効果を実現するネイティブ js
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
タイプファイルの入力ボタン機能の研究
<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...
Linux スクリプトの基礎を詳しく紹介
目次1. スクリプトvim環境2. シェルスクリプトで環境を定義する方法3. シェルスクリプト内の翻...
JSはスネークゲームを実装する
目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...
VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法
1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...
Dockerコンテナ内のホストのホスト名が取得できない問題の解決方法
Node.js環境でテストが通っています。他の言語でも同様です。環境変数を取得する方法を使うだけです...
HTML およびプラグイン アプリケーションにおけるデータ カスタム属性の使用の概要
HTML にはデータ属性が含まれていることがよくあります。これらは HTML5 のカスタム属性です。...
MySQLトランザクションの基本的な学習と経験の共有
トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...
ウェブサイトのフロントエンドをエレガントでユーザーにとって魅力的なものにする方法
ウェブフロントエンドのウェブサイトの気質は感情であり、言葉なしでユーザーを魅了できる感情です。では、...
Linux システムが VMware にインストールされているかどうかを確認する方法
現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...
エンコードが utf-8 に設定されている場合に Web ページが文字化けする問題の解決策
最近、PHP で Web ページを書いているときに、エンコードを UTF-8 に設定しました。しかし...
Docker がデータベースのデプロイに適さない 7 つの理由のまとめ
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...