神経衰弱ゲーム|HTML5

神経衰弱

神経衰弱ゲーム(HTML5, JavaScript, CSS3) : デモ

神経衰弱ゲーム(HTML5, JavaScript, CSS3) : ZIPファイル(10kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=827, user-scalable=no maximum-scale=1">
        <title>神経衰弱 | Cards Concentration</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/base.js"></script>
        <script src="js/devicecheck-min.js"></script>
    </head>
    <body>
        <div id="contents">
        	<h1 id="h1">HTML5,神経衰弱,アート,ゲーム,無料,Art,Game,Free</h1>
            <div id="card1" width="75" height="105">&nbsp;</div>
            <div id="card2" width="75" height="105">&nbsp;</div>
            <div id="card3" width="75" height="105">&nbsp;</div>
            <div id="card4" width="75" height="105">&nbsp;</div>
            <div id="card5" width="75" height="105">&nbsp;</div>
            <div id="card6" width="75" height="105">&nbsp;</div>
            <div id="card7" width="75" height="105">&nbsp;</div>
            <div id="card8" width="75" height="105">&nbsp;</div>
            <div id="card9" width="75" height="105">&nbsp;</div>
            <div id="card10" width="75" height="105">&nbsp;</div>
            <div id="card11" width="75" height="105">&nbsp;</div>
            <div id="card12" width="75" height="105">&nbsp;</div>
            <div id="card13" width="75" height="105">&nbsp;</div>
            <div id="card14" width="75" height="105">&nbsp;</div>
            <div id="card15" width="75" height="105">&nbsp;</div>
            <div id="card16" width="75" height="105">&nbsp;</div>
            <div id="card17" width="75" height="105">&nbsp;</div>
            <div id="card18" width="75" height="105">&nbsp;</div>
            <div id="card19" width="75" height="105">&nbsp;</div>
            <div id="card20" width="75" height="105">&nbsp;</div>
            <div id="card21" width="75" height="105">&nbsp;</div>
            <div id="card22" width="75" height="105">&nbsp;</div>
            <div id="card23" width="75" height="105">&nbsp;</div>
            <div id="card24" width="75" height="105">&nbsp;</div>
            <div id="card25" width="75" height="105">&nbsp;</div>
            <div id="card26" width="75" height="105">&nbsp;</div>
            <div id="card27" width="75" height="105">&nbsp;</div>
            <div id="card28" width="75" height="105">&nbsp;</div>
            <div id="card29" width="75" height="105">&nbsp;</div>
            <div id="card30" width="75" height="105">&nbsp;</div>
            <div id="card31" width="75" height="105">&nbsp;</div>
            <div id="card32" width="75" height="105">&nbsp;</div>
            <div id="card33" width="75" height="105">&nbsp;</div>
            <div id="card34" width="75" height="105">&nbsp;</div>
            <div id="card35" width="75" height="105">&nbsp;</div>
            <div id="card36" width="75" height="105">&nbsp;</div>
            <div id="card37" width="75" height="105">&nbsp;</div>
            <div id="card38" width="75" height="105">&nbsp;</div>
            <div id="card39" width="75" height="105">&nbsp;</div>
            <div id="card40" width="75" height="105">&nbsp;</div>
            <div id="card41" width="75" height="105">&nbsp;</div>
            <div id="card42" width="75" height="105">&nbsp;</div>
            <div id="card43" width="75" height="105">&nbsp;</div>
            <div id="card44" width="75" height="105">&nbsp;</div>
            <div id="card45" width="75" height="105">&nbsp;</div>
            <div id="card46" width="75" height="105">&nbsp;</div>
            <div id="card47" width="75" height="105">&nbsp;</div>
            <div id="card48" width="75" height="105">&nbsp;</div>
            <div id="card49" width="75" height="105">&nbsp;</div>
            <div id="card50" width="75" height="105">&nbsp;</div>
            <div id="card51" width="75" height="105">&nbsp;</div>
            <div id="card52" width="75" height="105">&nbsp;</div>
            <div id="back">&nbsp;</div>
            <div id="challenge">Play</div>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
 
body
{
    margin:0;
    padding:0;
    background-color: #fff;
    font-family:Helvetica, HiraKakuProN-W3, sans-serif;
    font-size:15px;
    color:#fff;
}
 
#contents
{
    position: absolute;
    top: 90px;
    left: 0;
    width: 829px;
    height:529px;
    overflow:hidden;
}
 
#card1,#card2,#card3,#card4,#card5,
#card6,#card7,#card8,#card9,#card10,
#card11,#card12,#card13,#card14,#card15,#card16,
#card17,#card18,#card19,#card20,#card21,#card22,
#card23,#card24,#card25,#card26,#card27,#card28,
#card29,#card30,#card31,#card32,#card33,#card34,
#card35,#card36,#card37,#card38,#card39,#card40,
#card41,#card42,#card43,#card44,#card45,#card46,
#card47,#card48,#card49,#card50,#card51,#card52
{
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height:105px;
    background: #6e6e6e;
    font-size: 60px;
    text-align: center;
    line-height: 105px;
    border: solid 1px #000000;
}

#card1,#card3,
#card5,#card7,#card9,
#card11,#card13,#card15,
#card17,#card19,#card21,
#card23,#card25,#card27,
#card29,#card31,#card33,
#card35,#card37,#card39,
#card41,#card43,#card45,
#card47,#card49,#card51
{
    background: #bababa;
}

#challenge
{
	position: absolute;
    top: 0;
    left: 0;
    width: 750px;
    height:527px;
   	color:#fff;
    padding-top:220px;
    /*background: #000000;*/
    font-size: 60px;
    text-align: center;
    line-height: 80px;
    display: none;
}

#back
{
	position: absolute;
    top: 0;
    left: 0;
    width: 827px;
    height:527px;
	background: #000000;
	opacity:0.9;
	display: none;
}

#h1
{
	position: absolute;
    top: 0;
    left: 0;
	display: none;
}

3.JavaScript

devicecheck.js

function Sandbox()
{
}
	
Sandbox.prototype = 
{
	/*name : "My App",
	version : "1.0",
	getName : function()
	{
		return this.name;
	}*/
};

Sandbox.prototype.g_mobiledevice = false;
Sandbox.prototype.g_browsername = "unknown";
Sandbox.prototype.g_browserver = -1;

var g_mobiledevice = false;	//iPhone、iPad、Androidのときtrue
var g_browsername = 'unknown';
var g_browserver = -1;

if(checkUserAgent() == false)
{
	window.alert('このブラウザは対象外です');
}

function checkUserAgent()
{
	var ua = navigator.userAgent;

	//iPhoneか?	
	var mstr = ua.match(/iPhone OS \d+/);
	if(mstr != null){
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 3) 
		{
			Sandbox.prototype.g_mobiledevice = true;
			Sandbox.prototype.g_browsername = 'iPhone';
			//alert('major-version ' + vstr);
			return true;
		}
	}
	//iPadか?
	if(ua.indexOf('iPad') > -1)
	{
		mstr = ua.match(/CPU OS \d+/);
		if(mstr != null)
		{
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 3) {
				Sandbox.prototype.g_mobiledevice = true;
				Sandbox.prototype.g_browsername = 'iPad';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}	
	//Androidか?	
	var mstr = ua.match(/Android \d+\.\d+/);
	if(mstr != null)
	{
		Sandbox.prototype.g_browsername = 'Android';
		var vstr = mstr[0].match(/\d+\.\d+/);
		Sandbox.prototype.g_browserver = parseFloat(vstr[0]);
		Sandbox.prototype.g_mobiledevice = true;
		if(Sandbox.prototype.g_browserver > 2.1) 
		{
			//alert('version ' + vstr);
			return true;
		}
	}
	//Chromeか?
	mstr = ua.match(/Chrome\/\d+/);
	if(mstr != null)
	{
		Sandbox.prototype.g_browsername = 'Chrome';
		var vstr = mstr[0].match(/\d+/);
		Sandbox.prototype.g_browserver = parseInt(vstr[0]);
		if(Sandbox.prototype.g_browserver >= 9) 
		{
			//alert('major-version ' + vstr);
			
			return true;
		}		
	}
	//Safariか?
	if(ua.indexOf('Safari') > -1)
	{
		mstr = ua.match(/Version\/\d+/);
		if(mstr != null){
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 5) 
			{
				Sandbox.prototype.g_browsername = 'Safari';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}
	//Internet Explorerか?
	mstr = ua.match(/MSIE \d+/);
	if(mstr != null)
	{
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 9) 
		{
			Sandbox.prototype.g_browsername = 'MSIE';
			//alert('major-version ' + vstr);
			return true;
		}		
	}
	//Firefoxか?
	mstr = ua.match(/Firefox\/\d+/);
	if(mstr != null){
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 4) 
		{
			Sandbox.prototype.g_browsername = 'Firefox';
			//alert('major-version ' + vstr);
			return true;
		}		
	}
	//Operaか?
	if(ua.indexOf('Opera') > -1)
	{
		mstr = ua.match(/Version\/\d+/);
		if(mstr != null){
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 11) 
			{
				Sandbox.prototype.g_browsername = 'Opera';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}
	
	return false;
}

base.js

window.addEventListener("load", init, false);
 
function init()
{
	var cache=applicationCache;
	cache.addEventListener("updateready",function()
	{
		if(cache.state==cache.UPDATEREADY)
		{
			
			cache.swapCache();
		}
	},false)
	
	initScroll();
	function initScroll()
	{ 
		setTimeout(doScroll, 100);
		function doScroll() 
		{
	        if (window.pageYOffset == 0) 
	        {
	            window.scroll(0, 1);
	            window.scroll(0, -1);
	        }
    	}
	}
	
	var element = document.getElementById('card1');
	var width = (element.currentStyle || document.defaultView.getComputedStyle(element,'')).width;
	width = width.replace('px','');
	
	var height = (element.currentStyle || document.defaultView.getComputedStyle(element,'')).height;
	height = height.replace('px','');
	
	var c=0;
	var j=0;
	for(var i=0;i<=51;i++)
	{
		if(i%5==0&&i!=0)
		{
			c=0;
			j++;
		}
		document.getElementById('card'+String(i+1)).style.top=(c*105)+"px";
		document.getElementById('card'+String(i+1)).style.left=(j*75)+"px";
		//i++;
		c++;
	}
	
	var numbers = new Array();
    numbers.push("1","1","2","2","3","3","4","4","5","5","6","6","7","7","8","8","9","9","10","10","J","J","Q","Q","K","K");
   	numbers.push("1","1","2","2","3","3","4","4","5","5","6","6","7","7","8","8","9","9","10","10","J","J","Q","Q","K","K");
   	setArray();
	
   //ボタンタイプ
	if(g_mobiledevice==true)
	{
		buttonType = 'touchstart';
	}
	else
	{
		buttonType = 'click';
	}
	
	for(var i=1; i<=52; i++)
	{
		document.getElementById('card'+String(i)).name = 'card' + i;
		document.getElementById('card'+String(i)).number = numbers[i-1];
		document.getElementById('card'+String(i)).count = 0;
		document.getElementById('card'+String(i)).addEventListener(buttonType, btnHandler, false);
	}
	setRe();
	var card1 = null;
	var card2 = null;
	var name1 = null;
	var name2 = null;
	var desebledName = new Array();
	var count = 0;
	function btnHandler()
	{
		//window.alert(count);
		count++;
		switch(count)
		{
			case 1:
				card1 = event.currentTarget.number;
				name1 = event.currentTarget.name;
				break;
			case 2:
				card2 = event.currentTarget.number;
				name2 = event.currentTarget.name;
				break;
		}
		
		
		
		if(card1==card2 && card1 != null && card2 != null)
		{
			//window.alert(name1);
			desebledName.push(name1);
			desebledName.push(name2);
			name1 = null;
			name2 = null;
			card1 = null;
			card2 = null;
			count = 0;
		}
		event.preventDefault();
		//event.currentTarget.count+=1;
		event.currentTarget.innerHTML=event.currentTarget.number;
		if(count==1)
		{
			event.currentTarget.removeEventListener(buttonType, btnHandler, false);
		}
		
		
		//window.alert(event.currentTarget.count);
		
		if(count>2)
		{
			count = 0;
			name1 = null;
			name2 = null;
			card1 = null;
			card2 = null;
			setRe();
			for(var i=1; i<=52; i++)
			{
				document.getElementById('card'+String(i)).addEventListener(buttonType, btnHandler, false);
			}
			
		}
		
		if(desebledName.length>0)
		{
			for(i=0; i<desebledName.length;i++)
			{
				document.getElementById(desebledName[i]).removeEventListener(buttonType, btnHandler, false);
			    document.getElementById(desebledName[i]).innerHTML=document.getElementById(desebledName[i]).number;
			}
		}
		
		if(desebledName.length==52)
		{
			setTimeout(function()
			{
				document.getElementById('challenge').style.display='block';
				document.getElementById('back').style.display='block';
			},1000);
		}
	}
	
   document.getElementById('challenge').addEventListener(buttonType,challengeHandler,false);
   function challengeHandler()
   {
   		event.currentTarget.style.display='none';
   		document.getElementById('back').style.display='none';
   		setRe();
		card1 = null;
		card2 = null;
		name1 = null;
		name2 = null;
		desebledName = new Array();
		count = 0;
		setArray();
		for(var i=1; i<=52; i++)
		{
			document.getElementById('card'+String(i)).addEventListener(buttonType, btnHandler, false);
		}
   	}
    
   function setArray()
	{
		for(i=0;i<100;i++)
		{
			var ran=parseInt(Math.random()*52);
			var str1=numbers[0];
			var str2=numbers[ran];
			numbers[0]=str2;
			numbers[ran]=str1;
		}
	}
}

function setRe()
{
	for(var i=1; i<53;i++)
    {
    	 document.getElementById('card'+String(i)).innerHTML='';
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です