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;
		}

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

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

ここに画像の説明を挿入

<!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 をよろしくお願いいたします。

以下もご興味があるかもしれません: