huwhois
/
2048_of_chen_xiaofa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>2048游戏之陈小发</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script src="animation.js" type="text/javascript"></script>
    <script src="support.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>

<body>
    <div class="header">
        <div class="cell"> <a href="javascript:;" onclick="newGame();" id="newGame">重玩</a>
        </div>
        <div class="cell" style="width:40%;">
            <div id="topScore">最高分数</br><span id="top_score">0</span></div>
        </div>
        <div class="cell" style="width:40%;">
            <div id="currentScore">当前得分</br><span id="score">0</span></div>
        </div>
    </div>
    <div id="outer">
        <div id="grid-container">
            <div class="grid-cell" id="grid-cell-00"></div>
            <div class="grid-cell" id="grid-cell-01"></div>
            <div class="grid-cell" id="grid-cell-02"></div>
            <div class="grid-cell" id="grid-cell-03"></div>
            <div class="grid-cell" id="grid-cell-10"></div>
            <div class="grid-cell" id="grid-cell-11"></div>
            <div class="grid-cell" id="grid-cell-12"></div>
            <div class="grid-cell" id="grid-cell-13"></div>
            <div class="grid-cell" id="grid-cell-20"></div>
            <div class="grid-cell" id="grid-cell-21"></div>
            <div class="grid-cell" id="grid-cell-22"></div>
            <div class="grid-cell" id="grid-cell-23"></div>
            <div class="grid-cell" id="grid-cell-30"></div>
            <div class="grid-cell" id="grid-cell-31"></div>
            <div class="grid-cell" id="grid-cell-32"></div>
            <div class="grid-cell" id="grid-cell-33"></div>
        </div>
    </div>
    <script>
        var startX, //触摸时的坐标   
            startY,
            x, //滑动的距离   
            y,
            aboveY = 0; // 设一个全局变量记录上一次内部块滑动的位置   
        var documentHeight = $("#grid-container").height(); //内部滑动模块的高度   
        // var wapperHeight = $("#outer").height(); //外部框架的高度   
        // console.log(documentHeight);

        var inner = document.getElementById("grid-container");

        function touchStart(e) { //触摸开始
            e.preventDefault();
            var touch = e.touches[0];
            startX = touch.pageX; //刚触摸时的坐标
            startY = touch.pageY; //刚触摸时的坐标
        }

        function touchMove(e) { //滑动   
            e.preventDefault();
            var touch = e.touches[0];
            x = touch.pageX - startX; //滑动的距离      
            y = touch.pageY - startY; //滑动的距离      
        }

        function touchEnd(e) { //手指离开屏幕
            // console.log(x);
            // console.log(y);
            var xy = Math.abs(x)-Math.abs(y);
            var d = 0;
            if (xy > 0) {
                if (x >= 0) {
                    d = 3; 
                } else {
                    d = 1; 
                }
            } else {
                if (y >= 0) {
                    d = 4;
                } else {
                    d = 2;
                }
            }
            slideDirection(d);
        }

        document.getElementById("outer").addEventListener('touchstart', touchStart, false);
        document.getElementById("outer").addEventListener('touchmove', touchMove, false);
        document.getElementById("outer").addEventListener('touchend', touchEnd, false);
    </script>
</body>

</html>