javascript實現html網頁版的2048遊戲原始碼

yaerfeng發表於2016-10-16
原文網址 : https://blog.csdn.net/yaerfeng/article/details/52829289
JavaScriptHTML網頁遊戲原始碼

原文：javascript實現html網頁版的2048遊戲原始碼


在這裡看到了很多有意思的程式碼。本著分享的精神把自己寫的2048的程式碼也貼出來。當然本人是一個超級菜鳥，有些地方沒有完善。歡迎各位大神解決。（介面很醜，不要介意）

支援觸屏及電腦鍵盤操作(wasd四個按鍵)

index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

<title>2048</title>
<style type="text/css">
table { table-layout: fixed }
table tr td{
background-color: #D7CE80;
border:#666666;
font-size:48px;
}
</style>
</head>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="canvas.js"></script>

<body>
<div id="version"></div>  
<table cellspacing="5px" frame="border">
<tr>
<td id="0">
</td>
<td id="1">
</td>
<td id="2">
</td>
<td id="3">
</td>
</tr>
<tr>
<td id="4">
</td>
<td id="5">
</td>
<td  id="6">
</td>
<td id="7">
</td>
</tr>
<tr>
<td id="8">
</td>
<td id="9">
</td>
<td id="10">
</td>
<td id="11">
</td>
</tr>
<tr>
<td id="12">
</td>
<td id="13">
</td>
<td id="14">
</td>
<td id="15">
</td>
</tr>
</table>
<script type="text/javascript" src="setHeight.js"></script>
<script type="text/javascript">
var startX = 0, startY = 0,d=-1;  
  //touchstart事件  
            function touchSatrtFunc(evt) {  
                try  
                {  
                    evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等  
                    var touch = evt.touches[0]; //獲取第一個觸點  
                    var x = Number(touch.pageX); //頁面觸點X座標  
                    var y = Number(touch.pageY); //頁面觸點Y座標  
                    //記錄觸點初始位置  
                    startX = x;  
                    startY = y;  
                }  
                catch (e) {  
                    alert('touchSatrtFunc：' + e.message);  
                }  
            }  
  
            //touchmove事件，這個事件無法獲取座標  
            function touchMoveFunc(evt) {  
                try  
                {  
                    evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等  
                    var touch = evt.touches[0]; //獲取第一個觸點  
                    var x = Number(touch.pageX); //頁面觸點X座標  
                    var y = Number(touch.pageY); //頁面觸點Y座標   
  
                    //判斷滑動方向  
                 if((y-startY)>0&&Math.abs((y-startY)/(x-startX))>1)
				{
					d=0;
				}
				else if(y-startY<0&&Math.abs((y-startY)/(x-startX))>1)
				{
					d=1;
				}
				else if((x-startX)>0&&Math.abs((y-startY)/(x-startX))<1)
				{
					d=2;
				}
				else
				{
					d=3;
				}
 
                }  
                catch (e) 
				{  
                    alert('touchMoveFunc：' + e.message);  
                }  
            }  
  
            //touchend事件  
            function touchEndFunc(evt) {  
                try {  
                    evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等  
  					if(d==0)
					{
						down();//下
					}
					else if(d==1)
					{
						up();//上
					}
					else if(d==2)
					{
						right();//右
					}
					else if(d==3)
					{
						left();//左
					}
                }  
                catch (e) {  
                    alert('touchEndFunc：' + e.message);  
                }  
            }  
  
            //繫結事件  
            function bindEvent() {  
                document.addEventListener('touchstart', touchSatrtFunc, false);  
                document.addEventListener('touchmove', touchMoveFunc, false);  
                document.addEventListener('touchend', touchEndFunc, false);  
            }  
  
            //判斷是否支援觸控事件  
            function isTouchDevice() 
			{  
              //  document.getElementById("version").innerHTML = navigator.appVersion;  
                    document.createEvent("TouchEvent");  
                    bindEvent(); //繫結事件  
            }  
			
			document.onkeypress=function(evt)
			{
			var evt=window.event?window.event:evt;
			   if (evt.keyCode=='119' )
			   {
				up();//上
			   }
			   if(evt.keyCode=='115')
			   {
			   		down();//下
			   }
			    if(evt.keyCode=='100')
			   {
			   		right();
			   }
			    if(evt.keyCode=='97')
			   {
			   		left();
			   }
			}
            window.onload = isTouchDevice; 
</script>
</body>
</html>

setHeight.js

// JavaScript Document

$(document).ready( 			function(){
						   x=$(window).width();
						   y=$(window).height();
						   if(x<=y)
						   {
						   $("td").css("width",x/6)
						          .css("height",x/6);
						   }
						   else
						   {
							   $("td").css("width",y/6)
						          .css("height",y/6);
						   }
						   
				});
  num=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
					i=Math.floor(Math.random()*16);
					num[i]=2;
					i=Math.floor(Math.random()*16);
					num[i]=2;
					strArr=num.toString();
					ga(strArr);
					donum();

canvas.js

// JavaScript Document
getArr=new Array();
function ga(str)
{
	getArr = str.split(",");
}

function donum()
{
	for(i=0;i<16;i++)
	{
		if(getArr[i]!=0)
		{
			document.getElementById(i).innerText=getArr[i];
		}
		else
		{
			document.getElementById(i).innerText="";
		}
	}
	
}

function randnum()
{
	var num;
	for(j=0;j<16;j++)
	{
		if(getArr[j]!=0)
		{
			num++;
		}
	}
	if(num!=16)
	{
		while(1)
		{
			i=Math.floor(Math.random()*16);
			if(getArr[i]==0)
			{
				var rn=Math.ceil(Math.random()*10);
				if(rn>0&&rn<=6)
				{
					getArr[i]=2;
				}
				else if(rn>6&&rn<=9)
				{
					getArr[i]=4;
				}
				else
				{
					getArr[i]=8;
				}
					
				break;
			}
		}
	}
		donum();
}
function down()
{
	for(var num=12;num<=15;num++)
	{
		if(getArr[num]==getArr[num-4])
		{
			getArr[num]=parseInt(getArr[num-4])+parseInt(getArr[num]);
			getArr[num-4]=0;
			if(getArr[num-8]==getArr[num-12])
			{
				getArr[num-8]=parseInt(getArr[num-8])+parseInt(getArr[num-12]);
				getArr[num-12]=0;
			}
		}
		else if(getArr[num-4]==getArr[num-8])
		{
			getArr[num-4]=parseInt(getArr[num-8])+parseInt(getArr[num-4]);
			getArr[num-8]=0;
		}
		else if(getArr[num-8]==getArr[num-12])
		{
			getArr[num-8]=parseInt(getArr[num-12])+parseInt(getArr[num-8]);
			getArr[num-12]=0;
		}
		
		
		for(var j=num;j>=num-8;j=j-4)
		{
			if(getArr[j]==0)
			{
				for(var i=j-4;i>=0;i=i-4)
				{
					if(getArr[i]!=0)
					{
						getArr[j]=getArr[i];
						getArr[i]=0;
						break;
					}
				}
			}
		}
		
	}
	donum();
	randnum();
}


function up()
{
	for(var num=3;num>=0;num--)
	{
		if(getArr[num]==getArr[num+4])
		{
			getArr[num]=parseInt(getArr[num+4])+parseInt(getArr[num]);
			getArr[num+4]=0;
			if(getArr[num+8]==getArr[num+12])
			{
				getArr[num+8]=parseInt(getArr[num+8])+parseInt(getArr[num+12]);
				getArr[num+12]=0;
			}
		}
		else if(getArr[num+4]==getArr[num+8])
		{
			getArr[num+4]=parseInt(getArr[num+8])+parseInt(getArr[num+4]);
			getArr[num+8]=0;
		}
		else if(getArr[num+8]==getArr[num+12])
		{
			getArr[num+8]=parseInt(getArr[num+12])+parseInt(getArr[num+8]);
			getArr[num+12]=0;
		}
		
		
		for(var j=num;j<=num+8;j=j+4)
		{
			if(getArr[j]==0)
			{
				for(var i=j+4;i<=15;i=i+4)
				{
					if(getArr[i]!=0)
					{
						getArr[j]=getArr[i];
						getArr[i]=0;
						break;
					}
				}
			}
		}
		
	}
	donum();
	randnum();
}


function right()
{
	for(var num=15;num>=3;num=num-4)
	{
		if(getArr[num]==getArr[num-1])
		{
			getArr[num]=parseInt(getArr[num-1])+parseInt(getArr[num]);
			getArr[num-1]=0;
			if(getArr[num-2]==getArr[num-3])
			{
				getArr[num-2]=parseInt(getArr[num-2])+parseInt(getArr[num-3]);
				getArr[num-3]=0;
			}
		}
		else if(getArr[num-1]==getArr[num-2])
		{
			getArr[num-1]=parseInt(getArr[num-2])+parseInt(getArr[num-1]);
			getArr[num-2]=0;
		}
		else if(getArr[num-2]==getArr[num-3])
		{
			getArr[num-2]=parseInt(getArr[num-3])+parseInt(getArr[num-2]);
			getArr[num-3]=0;
		}
		
		for(var j=num;j>=num-2;j=j-1)
		{
			if(getArr[j]==0)
			{
				for(var i=j-1;i>=num-3;i=i-1)
				{
					if(getArr[i]!=0)
					{
						getArr[j]=getArr[i];
						getArr[i]=0;
						break;
					}
				}
			}
		}
	}
	donum();
	randnum();
}
function left()
{
	for(var num=0;num<=12;num=num+4)
	{
		if(getArr[num]==getArr[num+1])
		{
			getArr[num]=parseInt(getArr[num+1])+parseInt(getArr[num]);
			getArr[num+1]=0;
			if(getArr[num+2]==getArr[num+3])
			{
				getArr[num+2]=parseInt(getArr[num+2])+parseInt(getArr[num+3]);
				getArr[num+3]=0;
			}
		}
		else if(getArr[num+1]==getArr[num+2])
		{
			getArr[num+1]=parseInt(getArr[num+2])+parseInt(getArr[num+1]);
			getArr[num+2]=0;
		}
		else if(getArr[num+2]==getArr[num+3])
		{
			getArr[num+2]=parseInt(getArr[num+3])+parseInt(getArr[num+2]);
			getArr[num+3]=0;
		}
		
		for(var j=num;j<=num+2;j=j+1)
		{
			if(getArr[j]==0)
			{
				for(var i=j+1;i<=num+3;i=i+1)
				{
					if(getArr[i]!=0)
					{
						getArr[j]=getArr[i];
						getArr[i]=0;
						break;
					}
				}
			}
		}
	}
	donum();
	randnum();
}

演示地址:http://myway5.com/html5/2048


由最程式碼官方編輯於2014-9-20 18:04:19

相關文章