javascript实现html网页版的2048游戏源代码

Myth丶恋晨 2022-07-16 10:52 315阅读 0赞

原文：[javascript实现html网页版的2048游戏源代码][javascript_html_2048]

源代码下载地址： [http://www.zuidaima.com/share/1841833892269056.htm][javascript_html_2048]

在这里看到了很多有意思的代码。本着分享的精神把自己写的2048的代码也贴出来。当然本人是一个超级菜鸟，有些地方没有完善。欢迎各位大神解决。（界面很丑，不要介意）

支持触屏及电脑键盘操作(wasd四个按键)

![20140528133543582.jpg][]

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.οnkeypress=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][http_myway5.com_html5_2048]

由最代码官方编辑于2014-9-20 18:04:19

[javascript_html_2048]: http://www.zuidaima.com/share/1841833892269056.htm
[20140528133543582.jpg]: http://static.zuidaima.com/images/1/201405/20140528133543582.jpg
[http_myway5.com_html5_2048]: http://myway5.com/html5/2048