Project_OKI’s diary

エンジニアの勉強ブログ

簡単ゲーム作成5(複数文字列の作成)

HTML系

クリックしたときにカード内の文字を表示/非表示する

・目次

 

 1.目的

　・日・英神経衰弱の表示する文字列を複数用意して表示する。

　・クリックした時に、クリックしたカードに文字を表示/非表示する。

 

2.プログラム

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<style>

/* カード設定 CSS */
.card{
  /* boxのサイズを指定 */
  width: 8em;
  height: 10em; 
  
  /* boxの色をskyblueに指定 */
  background:skyblue;
  
  /* boxの上のカーソルを指マークに指定 */
  cursor: pointer;
  
  /* boxの外側の余白を指定 */
  margin: 1em 1em;
  
  /* 中央にテキストを表示 */
  text-align: center;
  
  /* 行の高さを設定 */
  line-height: 10;
}

 /*要素を横並びにする*/
.flexset{
    display: flex;
}
	</style>
  
  </head>
 
  <body>
  <div class = "flexset">
  	<div class = "card" id="card00"></div>
  	<div class = "card" id="card01"></div>
  	<div class = "card" id="card02"></div>
  	<div class = "card" id="card03"></div>
  </div>
  <div class = "flexset">
  	<div class = "card" id="card10"></div>
  	<div class = "card" id="card11"></div>
  	<div class = "card" id="card12"></div>
  	<div class = "card" id="card13"></div>
  </div>
  
       <script>
     	const CARD_HID = 0;
     	const CARD_DISP = 1;
      	const CARD_LINE = 2;		//カードの行数
      	const CARD_COLUMN = 4;		//カードの列数
      	
     	//オブジェクト作成
     	// オブジェクトを配列に格納する
	const words = [
  		{ jap: "日本語"	, eng: "japanese" },
  		{ jap: "問題"	, eng: "problem" },
  		{ jap: "送信された", eng: "transmitted"},
  		{ jap: "テスト"	,eng:	"test"},
	];
		
	//カードクリック時の表示/非表示関数
     	function CardClick(cardid,words){
     		//カード表示/非表示初期化
     		let cardsetf = CARD_HID;
     		
     		/// カードクリックした時
     		cardid.on("click",function(){
     			//表示だったら、非表示に変更
     			if(cardsetf == CARD_DISP){
     				///カードを非表示に変更
     				cardsetf = CARD_HID;
     				///カードの表示を消す
     				cardid.text("");
     			}
     			//非表示だったら、表示に変更
     			else{
     				///カードに日本語を表示
     				cardsetf = CARD_DISP;
     				///カードに日本語を表示
     				cardid.text(words);
     			}
     		})
     	}

     	//クリックされた時の表示/非表示処理関数の実行関数
     	function ClickSet(cardid,words){
     		//1行辺りのカード枚数を超えていたら終了
     		if(cardid >=CARD_COLUMN){		
     			console.log("ClickSet関数：無効な数値の代入");
     			return;	
     		}
     		CardClick(cardid,words);
     	}
     	
     	window.onload = function () {
     		let	cnt;			///<カウント用変数   		
     		//カードidの取得と配列への代入
     		for(cnt=0;cnt<CARD_COLUMN;cnt++){
     			//クリック処理の実行
	     		ClickSet($("#card0"+cnt),words[cnt].jap);　//1段目クリック処理
	     		ClickSet($("#card1"+cnt),words[cnt].eng);　//2段目クリック処理
     		}
       	}
     </script>
  </body>
</html>

 

実行結果

ーーーーー

 

 

 

関連記事