Project_OKI’s diary

エンジニアの勉強ブログ

簡単ゲーム作成3(クリックして文字列の変更)

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">card1</div>
  	<div class = "card" id="card01">card2</div>
  	<div class = "card" id="card02">card3</div>
  	<div class = "card" id="card03">card4</div>
  </div>
  <div class = "flexset">
  	<div class = "card" id="card10">card5</div>
  	<div class = "card" id="card11">card6</div>
  	<div class = "card" id="card12">card7</div>
  	<div class = "card" id="card13">card8</div>
  </div>
  
       <script>
       const CARDONELINENUM = 4;	//1行辺りのカード枚数
       
     	window.onload = function () {
     		let	cnt;		///<カウント用変数
     		let card0 = [];		///<カード格納用配列
     		let card1 = [];		///<カード格納用配列
     		
     		//カードidの取得と配列への代入
     		for(cnt=0;cnt<CARDONELINENUM;cnt++){
     			card0[cnt] = $("#card0"+cnt);
     			card1[cnt] = $("#card1"+cnt);     			
     		}
     		
     		//カードクリック処理の実行
     		ClickSet(0);
     		ClickSet(1);
     		ClickSet(2);
     		ClickSet(3);
     		
/**	************************************************************** */
/**
 *	カードクリック時処理
 *	@param			: cardnum (クリックされた列:0～1行辺りの最大枚数)
 *	@return			: none
 */
/**	************************************************************** */
     		function ClickSet(cardnum)
     		{
     			if(cardnum >=CARDONELINENUM){		
     				//1行辺りのカード枚数を超えていたら終了
     				console.log("ClickSet関数：無効な数値の代入");
     				return;	
     			}
     			
     			///カード1行目のクリック時処理
     			card0[cardnum].on("click",function(){
     				///card clickに文字列変更
     				card0[cardnum].text("card click");
     			})
     			///カード2行目のクリック時処理
     			card1[cardnum].on("click",function(){
     				///card clickに文字列変更
     				card1[cardnum].text("card click");
     			})
     		}
       	}
     </script>
  </body>
</html>

3.作成したカード

ーーーーーー

 

card1
card2
card3
card4
card5
card6
card7
card8

 

ーーーーーー

 

 

関連記事