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="width: 148.5px; height: 148.5px;"></td>

     <td id="1" style="width: 148.5px; height: 148.5px;">2</td>

     <td id="2" style="width: 148.5px; height: 148.5px;">2</td>

     <td id="3" style="width: 148.5px; height: 148.5px;"></td>

    </tr>

    <tr>

     <td id="4" style="width: 148.5px; height: 148.5px;"></td>

     <td id="5" style="width: 148.5px; height: 148.5px;">4</td>

     <td id="6" style="width: 148.5px; height: 148.5px;"></td>

     <td id="7" style="width: 148.5px; height: 148.5px;"></td>

    </tr>

    <tr>

     <td id="8" style="width: 148.5px; height: 148.5px;"></td>

     <td id="9" style="width: 148.5px; height: 148.5px;"></td>

     <td id="10" style="width: 148.5px; height: 148.5px;"></td>

     <td id="11" style="width: 148.5px; height: 148.5px;"></td>

    </tr>

    <tr>

     <td id="12" style="width: 148.5px; height: 148.5px;"></td>

     <td id="13" style="width: 148.5px; height: 148.5px;"></td>

     <td id="14" style="width: 148.5px; height: 148.5px;"></td>

     <td id="15" style="width: 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
巴特西

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

最新文章

热门文章
