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 ロケーション マッチングの実装を理解する
推薦する
Mysql と Oracle でよく使用される複数テーブルの変更ステートメントの概要
今日、SQLトレーニングの質問バンクでこの質問を見ました。これは、非常に代表的なマルチテーブル変更の...
Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します
VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...
ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明
機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...
CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション
ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...
フィールドを結合するSQL関数
最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...
複数のフィールドをグループ化するMySQLグループ
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
ウェブページのFOUC問題によるウェブページの混乱の解決策
FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...
keepalived+nginx の高可用性を実装する方法の例
1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...
Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。
Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...
React で複数の setStates が何回呼び出されるのでしょうか?
目次1. 2 つの setState を何回呼び出すのですか? 2. 2 つの setState の...
Vue が配列の変更を監視できない問題の解決方法
目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...
vue keepAlive キャッシュクリア問題事例の詳細な説明
Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非...
5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)
目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...
CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています
新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...
Tomcat マルチインスタンスの展開と構成の原則
1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...