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>

 

実行結果

ーーーーー

 

関連記事

 

 

 

HTML,CSS,Javascript14(オブジェクトの作成と使用)

HTML系

​​​HTML,CSS,Javascript14(オブジェクトの作成と使用)

・目次

 

 1.目的

　・javascriptのオブジェクトについて、作成方法と使用方法について記載する。

 

 

2.オブジェクトとは

　・オブジェクトはプロパティ(特性)の集まりであり、プロパティは名前(又はキー)と値との関連付けから成り立つ。

　・プロパティの値を関数にすることも可能

 

　例：

　スプーンというオブジェクトがある場合、そのプロパティ(特性)としては、

　・色、重さ、形状、材質、名前、役割などがある。

　それぞれ数値や、名前(文字列)や、動作などを持っている。

　これをjavascriptでは、オブジェクトとして作成し使用する。

 

プロパティとは(参考)：プロパティとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

 

3.オブジェクトの作成

 (1) オブジェクトの生成

データ型 オブジェクト名　= {
　プロパティ名(キー):値,
　プロパティ名(キー):値,
 };

例

const obj = {
  propatyname :"Name",
  propatynum : 120,
};

参考：オブジェクトでの作業 - JavaScript | MDN

 

newを使ったオブジェクトのインスタンス生成

データ型　オブジェクト名 = new Object();

例2：

  //newを使ったオブジェクトの作成
  let obj2 = new Object();

 

 (2) 使用方法

オブジェクト名.プロパティ

例

obj.prpatyname

 

参考：

・new 演算子 - JavaScript | MDN

・[JavaScript] オブジェクトの基礎 #JavaScript - Qiita

 

3.プログラム作成(オブジェクト作成確認)

 オブジェクトの作成及び、作成したオブジェクトの中身をconsole.logで確認

<!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></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     	
     		const obj={
     			name	: "Name",
     			num		: 127,
     		}
     		console.log("--作成したオブジェクトの確認--");//出力の区切り
     		console.log(obj);
     		console.log(obj.name);
     		console.log(obj.num);
     		
     		//オブジェクトにプロパティを追加
     		obj.set = "objset";
     		//追加した内容の確認
     		console.log(obj.set);
     		
     		console.log("--newを使ったオブジェクト--");//出力の区切り
     		//newを使ったオブジェクトの作成
     		let obj2 = new Object();
     		console.log(obj2.set2);
     		obj2.set2 = "obj2set2";
     		console.log(obj2.set2);
       	}
     </script>
  </body>
</html>

実行結果

　※上記の通り、設定されていないプロパティを指定するとundefinedとなる。

 

 

4.オブジェクト内で関数の作成

オブジェクトには、中身に関数を作成できる。

また、オブジェクト内の値を、thisを使用することで、入力することが出来る。

作成方法

データ型 オブジェクト名　= {
    プロパティ名(キー):値,     
    関数名: function(){
       console.log (this.プロパティ名);
     },
};

例：

let obj = {
   	jap : "日本語",
     	eng : "English",		
     	DispJap:function(){
     		console.log(this.jap);
     	},
     	DispEng:function(){
     		console.log(this.eng);
     	},
}

5.プログラム作成(オブジェクト内で関数の作成)

<!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></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     	
     		let obj = {
     			jap : "日本語",
     			eng : "English",
     			
     			DispJap:function(){
     				console.log(this.jap);
     			},
     			DispEng:function(){
     				console.log(this.eng);
     			},
     		}
     		obj.DispJap();
     		
     		//[]を使っても使用できる。
     		console.log(obj["eng"]);
       	}
     </script>
  </body>
</html>

結果

 

参考：

・Object - JavaScript | MDN

・オブジェクトでの作業 - JavaScript | MDN

・[JavaScript] オブジェクトの基礎 #JavaScript - Qiita

 

 

オブジェクトのコピー

参考：

・Object.assign() - JavaScript | MDN

・Javascript オブジェクトの浅い/深いコピー #JavaScript - Qiita

 

関連記事

簡単ゲーム作成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

 

ーーーーーー

 

 

関連記事

HTML,CSS,Javascript13(idを配列として取得)

HTML系

​​​HTML,CSS,Javascript13(idを配列として取得)

・目次

 

 1.目的

　・javascriptとjQuaryの配列について記載する。

 

2.配列としてidの取得

idの数値を取得する。 

let 変数名;
変数 = document.getElementById("文字列"+数値+"文字列);

 

例

let arrayid = [];
arrayid[0] = document.getElementById("card["+0+"]");

 

3.プログラム作成(配列としてidを取得)

　idを配列として取得し、card[0]の文字列をカードに変更している。

<!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="card[0]">card1</div>
  	<div class = "card" id="card[1]">card2</div>
  	<div class = "card" id="card[2]">card3</div>
  	<div class = "card" id="card[3]">card4</div>
  </div>
  
  	<script>
     	window.onload = function () {
     		//配列の宣言
     		let arrayid = []
     		
     		for(let i =0;i<4;i++){
     			arrayid[i] = document.getElementById("card["+i+"]");
     		}
     			
     		arrayid[0].innerText = "カード";     		
       	}
     </script>
  </body>
</html>

実行結果

card1
card2
card3
card4

 

 

3.jQueryのセレクタでを使う際の注意点

jQueryのセレクタでは、id名などにを使用すると、そのまま取得することは出来ない。

は、属性セレクタで指定する場合などに使用する為、class名やid名としてを使用する場合は、下記のようにする必要がある。

$("id名\\[カッコ内のid名\\]");

例

html側
<div class = "card" id="card[0]">card1</div>

javascript側
$("#card\\[0\\]").text("カード");

 

下記だと出来ない。

html側
<div class = "card" id="card[1]">card2</div>

javascript側
$("#card[1]").text("カード");

 

4.jQueryのセレクタで数値を扱う

数値を使用する場合は、+を使用する。

$("id名"+数値);

例

html側
<div class = "card" id="card3">card4</div>

javascript側
let i = 3;
$("#card"+i).text("カード");

 

5.プログラム作成(セレクタで[]と数値を使用)

<!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="card[4]">card1</div>
  	<div class = "card" id="card[5]">card2</div>
  	<div class = "card" id="card[test]">card3</div>
  	<div class = "card" id="card7">card4</div>
  </div>
  
  	<script>
     	window.onload = function () {
     	        //$("id名\\[カッコ内のid名\\]")
     	        $("#card\\[4\\]").text("カード1"); //これなら出来る。
     		$("#card[5]").text("カード2");	//これだと出来ない。
     		$("#card\\[test\\]").text("カード3");	//これなら出来る。
     		let i = 7;
     		//$("id名"+数値);
     		$("#card"+i).text("カード4");//数値を入れる場合
       	}
     </script>
  </body>
</html>

結果

 

card1
card2
card3
card4

 

参考：

・【jQuery入門】配列の使い方(作成・追加・検索・取得)まとめ！ | 侍エンジニアブログ

・文法の基礎！jQueryの配列の使い方【初心者向け】 | TechAcademyマガジン

 

関連記事

HTML,CSS,Javascript12(javascriptの配列)

HTML系

​​​HTML,CSS,Javascript12(javascriptの配列)

・目次

 

 1.目的

　・javascriptとjQuaryの配列について記載する。

 

【jQuery入門】配列の使い方(作成・追加・検索・取得)まとめ！ | 侍エンジニアブログ

 

2.配列の宣言

配列の定義する方法は下記2つある。

// コンストラクタを使用
    型 配列名 = new Array(配列1,配列2,・・・);
//　配列リテラルを使用
    型　配列名 = [配列1,配列2,・・・]

 

例：

//配列の宣言：コンストラクタを使用する場合
var array = new Array("Cnum0","Cnum1","Cnum2");
     	
//配列の宣言：配列リテラル
var array2 = ["Rnum0","Rnum1","Rnum2"];

・リテラルとは

　文字列や数字などのデータ型の値を直接記述する方法

・コンストラクタとは

　新たなオブジェクトを生成する時のメゾット

 

3.プログラムの作成(配列の確認)

<!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></style>
  </head>
 
  <body>
     <script>
     window.onload = function () {
     	//配列の宣言：コンストラクタを使用する場合
     	var array = new Array("Cnum0","Cnum1","Cnum2");
     	//配列の宣言：配列リテラル
     	var array2 = ["Rnum0","Rnum1","Rnum2"];
     		
     	//配列の表示
     	console.log(array);
     	console.log(array2);    		
     }
     </script>
  </body>
</html>

実行結果(F12のコンソールで確認)

 

4.配列リテラルとコンストラクタの違い

・配列リテラルとコンストラクタの違い

　1つの数値を扱う際に、違いが出る。

 

　下記のような場合、

　・コンストラクタでは、要素が3つ定義され、中身は入っていない。

　・リテラルでは、要素が1つ定義される。

　基本は配列リテラルを使う方が分かりやすそう。

//配列の宣言：コンストラクタを使用する場合 ：empty×3を作成
var array = new Array(3);
     	
//配列の宣言：配列リテラル:要素に3が入った配列を用意
var array2 = [3];

5.プログラム作成(配列リテラルとコンストラクタの違い確認)

<!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></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     		//配列の宣言：コンストラクタを使用する場合
     		var array = new Array(3);
     	
     		//配列の宣言：配列リテラル
     		var array2 = [3];
     		
     		//配列の表示
     		console.log(array);
     		console.log(array2);    		
     		console.log("---");
     		//配列の宣言：コンストラクタを使用する場合
     		var array3 = new Array(3,1,2);
     	
     		//配列の宣言：配列リテラル
     		var array4 = [3,1,2];
     		//配列の表示
     		console.log(array3);
     		console.log(array4); 
       	}
     </script>
  </body>
</html>

結果

 

6.配列に数値と文字列を入れる

下記形で、配列には数値及び文字列を入れる。

配列に数値を入れる場合
　var 配列名 = [数値,数値,数値,・・・]
配列に数値を入れる場合
　var 配列名 = ["文字列","文字列","文字列",・・・]
配列に数値と文字列を組み合わせて入れる場合
　var 配列名 = ["文字列"+数値,"文字列"+数値,"文字列"+数値,・・・]

7.プログラム確認(配列に数値と文字列を入れ、要素の1つのみ変更)

<!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></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     		//配列の宣言：コンストラクタを使用する場合
	     	var array = new Array("cons"+3,2,1);
     	
     		//配列の宣言：配列リテラル
     		var array2 = ["Rite"+1,2,3];
     		
     		//配列の表示
     		console.log(array);
     		console.log(array2);    
     		
     		//真ん中の値を変更
     		array[1] = "cons"+2;
     		array2[1] = "Rite"+2;
     		
     		//配列の真ん中だけ表示
     		console.log(array[1]);
     		console.log(array2[1]);  
       	}
     </script>
  </body>
</html>

結果

 

8.空の配列の用意

宣言時に要素数が決まっていなく、空の配列を用意したい場合がある。

その場合は、下記方法で空の配列を用意する。

//配列の宣言：コンストラクタを使用する場合
var array = new Array();
//配列の宣言：配列リテラル
var array2 = [];

 

8.プログラム作成(空の配列確認)

空の配列を用意した後、10個の数値を入れる。

<!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></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     		//空の配列を用意する。
		//配列の宣言：コンストラクタを使用する場合
     		var array = new Array();
     		//配列の宣言：配列リテラル
     		var array2 = [];
     		
     		console.log(array);
     		console.log(array2);
     		
     		for(var i=0;i<=5;i++){
     			array[i]=i;
     			array2[i]=i;
     		 }
     		console.log(array);
     		console.log(array2);     		  
       	}
       	
     </script>
  </body>
</html>

結果

 

関連記事

簡単ゲーム作成2(カードの用意)

HTML系

​​​カードっぽい何かを用意する

・目次

 

 1.目的

　・日・英神経衰弱に使用するカードとなる部分を作成する。

　・特に、カードのクオリティは求めないで、2×8個のカードを用意する。

 

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">card1</div>
  	<div class = "card">card2</div>
  	<div class = "card">card3</div>
  	<div class = "card">card4</div>
  </div>
  <div class = "flexset">
  	<div class = "card">card5</div>
  	<div class = "card">card6</div>
  	<div class = "card">card7</div>
  	<div class = "card">card8</div>
  </div>
  
  </body>
</html>

3.作成したカード

ーーーーーー

 

card1
card2
card3
card4
card5
card6
card7
card8

 

ーーーーーー

 

関連記事

簡単ゲーム作成1(日・英神経衰弱)

HTML系

​​​日・英神経衰弱ゲームを作ってみる

・目次

 

 1.目的

　・html,css,javascriptの学習の1つとして、自分で考えて簡単なゲームを作ってみる。

　・この記事では、そのゲームの内容について記載する。

　・作成する過程で勉強した内容を随時ブログにまとめていく。

　（完成まで作れるかは不明)

 

2.ゲームの内容

　(1) 日本語と英語の単語の意味が同じ組み合わせを当てる神経衰弱ゲーム

　(2) 2×4つ 組み合わせカードを用意し、カードをクリックすると、表(日本語又は英語の単語が表示される)になる。

　(3) 2回クリックし、その組み合わせが合っていれば正解。間違っていれば不正解とする。

　　→正解した場合：下にカードを移動する。

　　→不正解の場合：元の場所に戻す。

　(4) 単語の種類は、2(日本語、英語)×4用意。

　(5) リセットボタンを押すと、全てのカードを元に戻し、ランダムで再配置する。

　(6) ヒントボタンを押すと、4つの英、単語の組み合わせをフラッシュ形式で1秒程度表示していく。(秒数については、作成してみて要検討)

 

3.作成手順の検討

　(1) カードをCSSで用意する。(2×8)

　(2) カードに単語を表示する。(javascriptで設定して表示)

　(3) クリックで、カードの単語を表示できるようにする。

　(4) javascriptでカードを配列化、単語の組み合わせを作成

　(5) 2枚クリック時のOK/NG判定

　(6) OK判定時の移動/NG判定時の元に戻す動作

　(7) リセット押下時の、ランダム並べ替え動作

　(8) ヒント押下時動作

 

関連記事