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 ロケーション マッチングの実装を理解する
推薦する
InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明
レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...
Vueでlessを使用する問題を解決する
1. less依存関係をインストールします: npm install less less-loade...
Linux ファイルシステムの説明: ext4 以降
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します
テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...
Ubuntuにopencvをインストールする正しい方法の詳細な説明
この記事ではUbuntuでC++インターフェースを使用してopencvをインストールする方法について...
HTML ヘッドタグの詳細な紹介
HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...
CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル
目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...
CSS 配置レイアウト (位置、配置レイアウト スキル)
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
重複したMySQLテーブルをマージして削除する簡単な方法
シナリオ：クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...
JavaScript で支払いの 10 秒カウントダウンを実現
この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...
MySQLの自動増分主キーIDはこのように処理されません
MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...
vue-video-player でのブレークポイント再開の実装
最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...
vue.js でよく使われる v 命令の解析
目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...
MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要
クエリキャッシュ1. クエリキャッシュの動作原理クエリ ステートメントを実行する前に、MySQL は...
Linux での MySQL 5.1 および 5.7 のインストール チュートリアル
以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...