HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に電話して、家の近くの店に走って行きました。しわくちゃになった 50 セントを柔らかい手で店主に渡し、大きな期待を抱きながらチケットをスクラッチしました。100 元当たったら、辛いお菓子、カード、こま、Audi Double Diamond ヨーヨーをたくさん買おうと、すでに心の中で考えていました...

この記事をしっかり読めば、彼女の美しい写真を使ってあなただけのスクラッチカードを手に入れることができますよ! (もちろん、彼女がいないという方は長年集めてきた美女の写真を使うこともできます!)

⛳️HTML、CSS、JavaScriptを使用してスクラッチカード/スクラッチ宝くじを実装する

心配しないで、まずはデモを見てください

HTML、CSS、JavaScript を使用してスクラッチ宝くじを実装する

ステップ1: スクラッチカードの基本構造を作成する

ステップ 2: 画像をキャンバス上に配置します (スクラッチ カードの最下層として)。

ステップ3: スクラッチカードカバーの作り方

ステップ4:スクラッチフィルムに「削ってください」という文字を作成する方法

ステップ5: JavaScriptを使用してスクラッチカードをアクティブ化する

完了です。これで独自のスクラッチ カードを使用できるようになりました。

初心者向けチュートリアル:

♥️心配しないで、まずはデモを見てください

スクラッチ宝くじ

  • 🎯🎯上のビデオでわかるように、ここでは HTML、CSS、JavaScript を使用してスクラッチ カードを実装しました。 🎯🎯
  • 👑👑ご存知のとおり、スクラッチ カードは 2 つの層に分かれています。上層は直接削り取ることができるカバー フィルムです。カバー フィルムを削り取ると、スクラッチ カードの本当の顔が現れ、ジャックポットを獲得したかどうかを本当に知ることができます。 👑👑

💎HTML、CSS、JavaScriptを使用してスクラッチチケットを実装する

  • このデザインが気に入っていただければ幸いです。このデザインの作成方法については、以下の詳細なチュートリアルを共有しました。また、デザイン全体の完全なコードも付属しています。
  • コピーして貼り付けるだけです。しかし、魚を与えるよりも魚の釣り方を教える方がよいので、私のペースに従って、デザイン全体の各ステップを少しずつ学んでいただければと思います。最終的には、独自のスクラッチ カードを独自にデザインできるようになると信じています。

これを行うには、まず HTML ファイルを作成する必要があります。

🎉ステップ1: スクラッチカードの基本構造を作成する

このスクラッチ カードのデザインに関して、このブロガーはフロントエンドで非常に人気のあるテクノロジーであるキャンバスを使用しました。 ここではキャンバスを使用しているため、簡単に説明する必要があります。キャンバスは JavaScript を使用して Web ページに画像を描画します。描画キャンバス領域は長方形の領域であり、その中のすべてのピクセルを制御して、必要な描画効果を実現できます。これが、このブロガーがこれを使用している理由でもあります。キャンバスを深く学びたい方は、こちらの記事をお読みください - 「20分でキャンバスを学べるように、妹に遅くまで起きて、この記事と小さなプロジェクトに一生懸命取り組みました[❤️ おすすめコレクション ❤️]」

  • この HTML コードは、キャンバスを通じてスクラッチ カードの基本構造を描画します。このキャンバス領域を表示するために、いくつかの CSS コードを使用しました (この領域は、後でスクラッチ チケットが作成される領域でもあります)。
  • このキャンバスの幅と高さの属性 (つまり、幅と高さ) は、画像のサイズに応じて設定する必要があることに注意してください。そうしないと、後で画像の一部しか表示されないという問題が発生します。
<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>スクラッチ宝くじ</title>
		<スタイル タイプ="text/css">
			#c1{
				境界線: 1px 青
			}
		</スタイル>
	</head>
	<本文>
		
		<キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス>
		
	</本文>
</html>

デモンストレーション効果:

ここに画像の説明を挿入

🎅ステップ 2: 画像をキャンバスに置きます (スクラッチ カードのベースとして)

  • キャンバスは Web ページ上に画像を描画するために JavaScript を使用するため、スクラッチ カード領域 (つまりキャンバス領域) に対する操作はすべて JavaScript で実行されます (フロントエンドで最も難しいと言われる JavaScript ですが、以下のすべての JavaScript のコードに詳細なコメントを付けています。基本的な JavaScript がわかる方であれば、必ず理解できると思います)。
  • 注意: 現時点では、画像は HTML で使用されるため、この HTML ファイルと同じディレクトリに img フォルダを作成し、そこに画像を配置する必要があります。
<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>スクラッチ宝くじ</title>
		<スタイル タイプ="text/css">
			#c1{
				境界線: 1px 青
			}
		</スタイル>
	</head>
	<本文>
		
		<キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス>
		
	</本文>
	<script type="text/javascript">
		// ステップ 1: キャンバス オブジェクトを一致させる var c1 = document.getElementById("c1");
		//ステップ 2: キャンバスのコンテキストを取得します。var ctx1 = c1.getContext("2d"); //getContext("2d") オブジェクトは、パス、四角形、円、文字を描画したり、画像を追加したりするための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。
		
		//画像オブジェクトを作成します。var imgs = new Image();
		//画像パスを指定 imgs.src = 'img/girl.jpg'
		
		// 注意: 画像はキャンバスに直接配置できません。.onload イベントを介して読み込む必要があります。そうしないと、画像が完全に読み込まれないため、キャンバスに表示されない場合があります。imgs.onload = function(){
			// パラメータ: 画像、開始 x 座標、開始 y 座標、最後の 2 つのパラメータはサイズを指定します (サイズ比は元の画像比と一致することをお勧めします)
			// 最後の 2 つのパラメータが指定されていない場合は、デフォルトで元の画像が 1:1 で描画され、表示できないコンテンツは表示されなくなります。
			ctx1.drawImage(これ、0,0,960,1440)
			
			// 拡張使用法:
			//jb.drawImage(これ、200、200、300、300、0、0、1078、1881)
			// 200,200,300,300 は画像の左上から右下の領域の切り抜きを決定します。次の 4 つの座標は描画領域の左上と右下の座標を表します }
			
	</スクリプト>
</html>

デモンストレーション効果:

ここに画像の説明を挿入

🎃ステップ3: スクラッチカードのカバーフィルムの作り方

  • スクラッチ カードのカバー フィルムに関して、このブロガーは別のキャンバスを作成し、そのキャンバス レイヤーの上にタイル イメージを直接カバーすることで実現しています。これもスクラッチ カードの特性に一致していますね。
<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>スクラッチ宝くじ</title>
		<スタイル タイプ="text/css">
			#c1{
				境界線: 1px 青
				位置: 絶対;
			}
			
			#c2{
				境界線: 1px 実線の赤;
			}
			
			体{
				位置: 相対的;
			}
		</スタイル>
	</head>
	<本文>
		
		<キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス>
		
		<キャンバスid="c2" 幅="960" 高さ="1440"></キャンバス>
		
	</本文>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// 画像をキャンバスに描画する2
		var imgs = 新しい画像();
		画像ギャラリー
		imgs.onload = 関数(){
			ctx2.drawImage(これ、0,0)
		}
		
		// コーティングを最上層(つまりカバーフィルム)に描画します canvas1
		ctx1.fillStyle = "ライトグレー";
		ctx1.fillRect(0,0,960,1440);

	</スクリプト>
</html>

デモンストレーション効果:

ここに画像の説明を挿入

上記のコードは、タイル状のスクラッチ カードの基になる画像のキャンバスの絶対位置を設定し、その親の body タグの相対位置を設定していることに注意してください (これは、フロント エンドでよく言われるように、親は子に対して相対的です)。

相対的な位置決めと絶対的な位置決めについて、簡単に説明します(理解できるはずです)。

  • position:relative——相対的な配置; position:absolute——絶対的な配置;
  • 通常、相対は親 div に配置され、絶対は子 div に配置されます。
  • 絶対配置はフローティング レイヤーです。上の親 div の position:relative; を削除すると、子 div の position:absolute; が蛇のように動き回ります。
  • したがって、絶対配置を使用する場合は、絶対配置レイヤーが移動しないように、親 div に相対配置が必要です。 ! !

🎈ステップ4:スクラッチフィルムに「削ってください」という文字を書く方法

次の JavaScript コードを追加するだけです。

	//パラメータ: 通常フォント/斜体フォント サイズ Microsoft YaHei/FangSong 通常: 通常フォント/斜体: 斜体 ctx1.font = "通常 80px FangSong";   
	//フォントのアウトラインの色 ctx1.strokeStyle = "slateblue";	
	//テキストを描画します(白抜き) パラメータ:テキスト、左上隅のx座標、左上隅のy座標 ctx1.strokeText("Please scrap it!",320,750);

デモンストレーション効果:

ここに画像の説明を挿入

👻ステップ5: JavaScriptを使用してスクラッチチケットを有効化する

  • 上記でスクラッチ カード全体を設計しましたが、このスクラッチ カードにはまだ操作機能はありません。つまり、このスクラッチ カードはスクラッチできないということです。スクラッチすらできないのなら、スクラッチ カードと呼ぶ意味がどこにあるのでしょうか? ! ! 。これを行うには、JavaScript を使用してマウス イベントをリッスンし、スクラッチ カードをアクティブ化する必要があります。
  • 以下のJavaScriptを使用してください。コードには詳細にコメントを付けました。基本的な JavaScript を知っていれば、間違いなく理解できるでしょう。

ちなみに、このスクラッチ カードは、マウスをクリックした後にマウスが移動する 50 ピクセル x 50 ピクセルの領域のカバー フィルムを継続的にクリアするように設計されています。マウスのクリックを解除してもクリアされなくなりました。したがって、最初にキャンバスのマウス クリック イベントをリッスンし、マウス クリック イベントがキャプチャされたら、マウス移動イベントをリッスンします。マウス移動イベントには、クリア関数が含まれています。マウスを離すとクリア機能がオフになります!

// キャンバスの onmousedown イベント (つまりマウス クリック イベント) をリッスンします。
		c1.onmousedown = 関数(ev){
		c1.onmousemove = function(e){ //キャンバスのonmousemoveイベント(マウス移動イベント)をリッスンします
			コンソールログ(e);
			var w = 50; // クリア領域の幅 var h = 50; // クリア領域の高さ var x = e.pageX-c1.offsetLeft - w/2; // クリア領域の x 位置 var y = e.pageY-c1.offsetTop - h/2; // クリア領域の y 位置 ctx1.clearRect(x,y,w,h);
		}
		}
		// マウスの onmouseup イベント (つまり、マウスのリリース イベント) をリッスンします。
		c1.onmouseup = 関数(ev){
		//onmousemove イベントをキャンセル c1.onmousemove = null;
		}

💝完了——デザインしたスクラッチ カードが使用できるようになりました。 🏄完全な初心者向けチュートリアル:

  1. 環境準備:環境は必要ありません!この設計は純粋にフロントエンド実装であるため、環境はまったく必要ありません。必要なのはコンピューター上のブラウザーだけです (コンピューターにブラウザーが組み込まれていないということはあり得ないと思います)。
  2. プロジェクト フォルダーを作成し、「Scratch-off」という名前を付けます。
  3. プロジェクト フォルダーの下に「img」フォルダーを作成し、ガールフレンドの写真や長い間集めてきた美しい写真をそこに保存します。
  4. プロジェクト フォルダーに「Scratch.txt」というテキスト ファイルを作成し、次のコードをコピーします。
  5. 「Scratch-off.txt」ファイルの名前を「Scratch-off.html」に変更します。
  6. ダブルクリックして実行してください! ! !

ここに画像の説明を挿入

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>スクラッチ宝くじ</title>
		<スタイル タイプ="text/css">
			#c1{
				境界線: 1px 青
				位置: 絶対;
			}
			
			#c2{
				境界線: 1px 実線の赤;
			}
			
			体{
				位置: 相対的;
			}
		</スタイル>
	</head>
	<本文>
		
		<キャンバスid="c1" 幅="960" 高さ="1440"></キャンバス>
		
		<キャンバスid="c2" 幅="960" 高さ="1440"></キャンバス>
		
	</本文>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// 画像をキャンバスに描画する2
		var imgs = 新しい画像();
		画像ギャラリー
		imgs.onload = 関数(){
			ctx2.drawImage(これ、0,0)
		}
		
		// コーティングを最上層(つまりカバーフィルム)に描画します canvas1
		ctx1.fillStyle = "ライトグレー";
		ctx1.fillRect(0,0,960,1440);
		
		ctx1.font = "通常の80pxファングソング";   
		ctx1.strokeStyle = "スレートブルー";			
		ctx1.strokeText("掻いてください!",320,750);
		
		// キャンバスのonmousedownイベントをリッスンします c1.onmousedown = function(ev){
		c1.onmousemove = 関数(e){
			コンソールログ(e);
			var w = 50; // クリア領域の幅 var h = 50; // クリア領域の高さ var x = e.pageX-c1.offsetLeft - w/2; // クリア領域の x 位置 var y = e.pageY-c1.offsetTop - h/2; // クリア領域の y 位置 ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = 関数(ev){
		//onmousemove イベントをキャンセル c1.onmousemove = null;
		}

	</スクリプト>
</html>

この記事から何かを学んで、気に入っていただけたなら、光栄です。この記事を友人と共有したり、いいねやブックマークをしていただければ幸いです。また、読者の皆様はコメント欄でテクノロジーについて議論したり、率直な意見を述べたりしていただければ幸いです。

この記事はここまでです。初めまして、パソコン好きの少年【孤寒者】です! 🌹

これで、HTML+CSS+JavaScript でガールフレンドバージョンのスクラッチカードを作る方法についての記事は終了です (一目でわかるようになっています)。HTML+CSS+JavaScript のスクラッチカードに関するその他のコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • HTML と CSS スタイルを組み合わせて JS 食品プロジェクトのホームページのサンプル コードを作成する
  • JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明
  • 登録ページを実装するためのJS、CSS、HTML
  • SpringMVC @RequestBody 日付型 Json 変換メソッド
  • C# は HttpWebRequest を通じて JSON 本文を含む POST リクエストを送信します。
  • @RequestBody が json オブジェクトを受信して​​エラー 415 を報告する問題を解決する
  • @RequestBodyとJsonの関係についてお話しましょう
  • JSでHTML本文のスタイルを変更する

<<:  VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

>>:  MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

推薦する

ブラウザが登録できるイベントの概要

HTML イベント リスト一般イベント: onClick HTML: マウスクリックイベント。主にオ...

MySQL で B+ ツリー インデックスを使用する利点は何ですか?

この問題を理解する前に、まず MySQL テーブルのストレージ構造を確認し、次にバイナリ ツリー、マ...

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...

MySQLの重複排除方法

MySQLの重複排除方法【初級】繰り返しのセリフが少ないdistinctive を使用してそれらを見...

Nginx_geo モジュールを使用して CDN スケジュールを設定する方法

NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...

HTMLで特殊記号を表示する(特殊文字対応表付き)

問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...

jQuery でダイナミックなパーティクル効果を実現

この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...

DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析

Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...

Tomcat パイプライン モードのパイプラインとバルブの詳細な説明

序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...