JS——2048(支持触屏及键盘操作)

<html>
 <head> 
  <title>2048</title> 
  <style type="text/css">
table { table-layout: fixed }
table tr td{
background-color: #D7CE80;
border:#666666;
font-size:48px;
}
</style> 
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="canvas.js"></script>
  <style id="style-1-cropbar-clipper">
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -100px !important;
    width: 200px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
</style>
 </head> 
 <body youdao="bind"> 
  <div id="version"></div> 
  <table cellspacing="5px" frame="border"> 
   <tbody>
    <tr> 
     <td id="0" style=" 148.5px; height: 148.5px;"></td> 
     <td id="1" style=" 148.5px; height: 148.5px;">2</td> 
     <td id="2" style=" 148.5px; height: 148.5px;">2</td> 
     <td id="3" style=" 148.5px; height: 148.5px;"></td> 
    </tr> 
    <tr> 
     <td id="4" style=" 148.5px; height: 148.5px;"></td> 
     <td id="5" style=" 148.5px; height: 148.5px;">4</td> 
     <td id="6" style=" 148.5px; height: 148.5px;"></td> 
     <td id="7" style=" 148.5px; height: 148.5px;"></td> 
    </tr> 
    <tr> 
     <td id="8" style=" 148.5px; height: 148.5px;"></td> 
     <td id="9" style=" 148.5px; height: 148.5px;"></td> 
     <td id="10" style=" 148.5px; height: 148.5px;"></td> 
     <td id="11" style=" 148.5px; height: 148.5px;"></td> 
    </tr> 
    <tr> 
     <td id="12" style=" 148.5px; height: 148.5px;"></td> 
     <td id="13" style=" 148.5px; height: 148.5px;"></td> 
     <td id="14" style=" 148.5px; height: 148.5px;"></td> 
     <td id="15" style=" 148.5px; height: 148.5px;"></td> 
    </tr> 
   </tbody>
  </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>
—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~
—–乐于分享，共同进步！
—–更多文章请看：http://blog.csdn.net/duruiqi_fx