Project_OKI’s diary

エンジニアの勉強ブログ

簡単ゲーム作成4(クリックして文字の表示/非表示)

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

・目次

 

 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 word = {
     		jap: "日本語",
     		eng: "English",
     	}
     		
     	window.onload = function () {
     		let	cnt;			///<カウント用変数
     		
     		//カードidの取得と配列への代入
     		for(cnt=0;cnt<CARD_COLUMN;cnt++){
	     		ClickSet($("#card0"+cnt));
	     		ClickSet($("#card1"+cnt));
     		}
     		
     		function CardClick(cardid){
     			//カード表示/非表示初期化
     			let cardsetf = CARD_HID;
     			
     			/// カードクリックした時
     			cardid.on("click",function(){
     				//表示だったら、非表示に変更
     				if(cardsetf == CARD_DISP){
     					///カードを非表示に変更
     					cardsetf = CARD_HID;
     					///カードの表示を消す
     					cardid.text("");
     				}
     				//非表示だったら、表示に変更
     				else{
     					///カードに日本語を表示
     					cardsetf = CARD_DISP;
     					///カードに日本語を表示
     					cardid.text(word.jap);
     				}
     			})
     		}

     		//クリックされた時の表示/非表示処理
     		function ClickSet(cardid){
     			if(cardid >=CARD_COLUMN){		
     				//1行辺りのカード枚数を超えていたら終了
     				console.log("ClickSet関数：無効な数値の代入");
     				return;	
     			}
     			CardClick(cardid);
     		}
       	}
     </script>
  </body>
</html>

 

実行結果

ーーーーー

 

関連記事