typescript 简版跳一跳

typescript 简版跳一跳

学习typescript,第一步应该是学习官方文档，理解最基础的语法。第二步开始用typescript实现一些js+css 或者canvas类型的游行。现在开始我们用ts写跳一跳

核心点：1.场景的随机创建

　　　　2.旗子的跳动

　　　　3.落脚点的判断,重点要提及的是射线判断法，参见博客

　　　　4.场景平移

　　　　5.游戏重置

　　　　6.销毁场景外方块

Ts代码：

//1.创建底座：
//2.创建跳棋：
//3.点击移动
//4.开始按压动画，
//5.放开动画
//6.跳动
//7.是否跳对
//8.移动场景
//9.创建新底座
module Jump {
    interface Pos {
        x: number;
        y: number;
    }
    enum Flag {
        on, in, out
    }
    enum Direction {
        left,
        right
    }
    let direction: Direction = Direction.right;
    let diamondsList: diamonds[] = [];
    let mask: JQuery<HTMLElement> = $(".game-p");
    let chess: Chess;
    let score:number=0;
    class MathHelp {
        /**
         * 返回范围内随机数[min,max]
         * @param min 最小值
         * @param max 最大值
         */
        static RandRange(min: number, max: number): number {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        /**
        * 根据角度求对边长度。Math.sin(randian)
        * @param r 斜边长
        * @param angle 角度
        */
        static righttriangle(r: number, angle: number): number {
            return Math.sin(Math.PI / 180 * angle) * r;
        }
        /**
          * 射线法判断点是否在多边形内部
          * @param p 待判断的点
          * @param poly 多边形顶点
          */
        static rayCasting(p: Pos, poly: Pos[]): Flag {
            var px = p.x,
                py = p.y,
                flag = false

            for (var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
                var sx = poly[i].x,
                    sy = poly[i].y,
                    tx = poly[j].x,
                    ty = poly[j].y

                // 点与多边形顶点重合
                if ((sx === px && sy === py) || (tx === px && ty === py)) {
                    return Flag.on;
                }

                // 判断线段两端点是否在射线两侧
                if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
                    // 线段上与射线 Y 坐标相同的点的 X 坐标
                    var x = sx + (py - sy) * (tx - sx) / (ty - sy)

                    // 点在多边形的边上
                    if (x === px) {
                        return Flag.on;
                    }

                    // 射线穿过多边形的边界
                    if (x > px) {
                        flag = !flag
                    }
                }
            }

            // 射线穿过多边形边界的次数为奇数时点在多边形内
            return flag ? Flag.in : Flag.out;
        }

    }
    class diamonds {

        private  number = 180;
        private height: number = 180;
         id: string = "p" + new Date().getTime();;
        node: JQuery<HTMLElement>;
        left: number = 0;
        top: number = 0;
        constructor(isauto: boolean = true, isRe = true, left: number = 0, top: number = 0) {
            this.left = left;
            this.top = top;
            if (isauto) {

                let dl = MathHelp.RandRange(200, 300);
                let x = MathHelp.righttriangle(dl, 57);
                let y = MathHelp.righttriangle(dl, 33);
                let lastbox = diamondsList[diamondsList.length - 1];
                if (isRe) {
                    if (direction == Direction.left) {
                        direction = Direction.right;
                    } else if (direction == Direction.right) {
                        direction = Direction.left;
                    }
                }
                if (direction == Direction.right) {
                    this.left = lastbox.left + x;
                } else {
                    this.left = lastbox.left - x;
                }
                this.top = lastbox.top - y;
            }
            this.node = $(`<div id='${this.id}' class='gb' style="top:${this.top}px;left:${this.left}px">
                            <div class='box' style="background:url(img/c${MathHelp.RandRange(1, 4)}.png)"></div> 
                            <div class='shadw'></div>
                          </div>`);
            mask.append(this.node);

        }
        GetPointList(): Pos[] {
            var result = [{
                x: this.left,
                y: this.top + 57
            }, {
                x: this.left + (this.width / 2),
                y: this.top + 4
            }, {
                x: this.left + this.width,
                y: this.top + 57
            }, {
                x: this.left + (this.width / 2),
                y: this.top + (57 * 2 - 4)
            }];
            return result;
        }
        move(p: Pos) {
            this.node.css({
                left: p.x + "px",
                top: p.y + "px",
                transition: "",
                transform: ""
            });
        }
    }
    class Chess {
        private  number = 180;
        private height: number = 182;
        left: number = 49;
        top: number = 531;
        node: JQuery<HTMLElement>;
        constructor() {

            this.node =$(`<div class="chess gb"></div>`);
            mask.append(this.node);
        }
        jump(pt: Pos, call: Function) {
            let numb = 0;
            let t1 = setInterval(() => {

                if (numb == 0) {
                    this.node.animate({
                        left: pt.x + "px",
                        top: pt.y + "px"
                    }, 504);

                }
                this.node.css({
                    "background-position": "-" + this.width * numb + "px" + " 0px"
                });
                numb++;
                if (numb >= 11) {
                    window.clearInterval(t1);
                    call();
                }

            }, 42)

        }
        GetCenter(): Pos {
            return {
                x: this.left + this.width / 2,
                y: this.top + this.height
            }
        }
        move(p: Pos) {
            this.node.css({
                left: p.x + "px",
                top: p.y + "px",
                transition: "",
                transform: ""
            });
        }
    }

    class Game {
        static distince = 0;
        static time: number;
        /**
         * 初始化游戏场景
         */
        static scence() {
            let d1 = new diamonds(false, false, 50, 650);
            diamondsList.push(d1);
            let d = new diamonds(true, false);
            diamondsList.push(d);
            Game.loadlisten();
            chess = new Chess();
            $(".againBtn").on("click",()=>{
                //重置
              Game.GameRest();

            });
        }
        /**
         * 重置游戏
         */
        static GameRest(){
            $(".gameEnd").css({
                "z-index":-1
            });
            diamondsList=[];
            score=0;
            $(".jfb").html(score.toString());
            $(".gb").remove();
            direction=Direction.right;
            Game.scence();
            
        }
        static CreateSP() {
            let d = new diamonds();
            diamondsList.push(d);
            Game.loadlisten();
        }
        private static loadlisten() {
            document.addEventListener('touchstart', Game.touch, false);
            document.addEventListener('touchmove', Game.touch, false);
            document.addEventListener('touchend', Game.touch, false);
        }
        private static removelisten() {
            document.removeEventListener('touchstart', Game.touch, false);
            document.removeEventListener('touchmove', Game.touch, false);
            document.removeEventListener('touchend', Game.touch, false);
        }
        private static touch(e: Event) {
            e.preventDefault();
            let currentDiamonds = diamondsList[diamondsList.length - 2];
            if (e.type == "touchstart") {
                //挤压形变动画
                let scaley = 1;
                let chessy = 0;
                Game.distince = 0;
                Game.time = setInterval(() => {
                    if (scaley > 0.7) {
                        scaley -= 0.01;
                    }
                    if (chessy < 30) {
                        chessy++;
                        chess.node.css({
                            "transform": " scaleX(" + (1 + chessy * 0.006) + ") scaleY(" + (1 - (chessy * 0.007)) + ")"
                        })
                    }
                    Game.distince++;
                    currentDiamonds.node.css({
                        "transform-origin": "bottom center",
                        "transform": "scaleY(" + scaley + ")"
                    });

                }, 50);

            } else if (e.type == "touchend") {
                //1.底座还原动画
                //2.旗子动画轨迹
                //3.落脚点判断
                //4.场景平移，创建新底座，移除画外底座
                currentDiamonds.node.css({
                    "transform": "scaleY(1)"
                });
                clearInterval(Game.time);
                Game.removelisten();
                Game.Jump(Game.distince);

            }
        }
        private static Jump(distince: number) {
            let dl = distince * 17;
            let x = MathHelp.righttriangle(dl, 57);
            let y = MathHelp.righttriangle(dl, 33);
            if (direction == Direction.left) {
                x = -x;
            }
            chess.left = chess.left + x;
            chess.top = chess.top - y;
            chess.jump({ x: chess.left, y: chess.top }, () => {
                let p = chess.GetCenter();
                let last = diamondsList[diamondsList.length - 1];
                let poly = last.GetPointList();
                //判断是否跳在基座上
                let result = MathHelp.rayCasting(p, poly);
                if (result == Flag.in) {
                    direction = Math.random() > 0.5 ? 1 : 0;
                    Game.moveblock();
                    score++;
                    $(".jfb").html(score.toString());
                } else {
                    //game over
                    $(".gameEnd").css({
                        "z-index":999
                    });
                    $(".score").html(score.toString());
                    console.log("game over!");
                }
            })

        }
        /**
         * 移动场景
         */
        private static moveblock() {
            let last = diamondsList[diamondsList.length - 1];
            let p1: Pos;
            let x: number = 0;
            let y: number = 0;
            //以左右标准基座为左边平移
            if (direction == Direction.left) {
                p1 = { x: 50, y: 650 };
            } else {
                p1 = { x: 400, y: 650 };
            }
            x = p1.x - last.left;
            y = p1.y - last.top;

            $(".gb").css({
                "transform": "translate(" + x + "px," + y + "px)",
                "transition": "transform 0.9s"
            });


            setTimeout(() => {
                //更新class中left,top属性
                $.each(diamondsList, (a, b) => {
                    b.left = b.left + x;
                    b.top = b.top + y;
                    b.move({ x: b.left, y: b.top });
                });
                chess.left = chess.left + x;
                chess.top = chess.top + y;
                chess.move({
                    x: chess.left,
                    y: chess.top
                });
                Game.Destroy();
                //创建新底座
                Game.CreateSP();
            }, 1100)
        }
        //销毁画外的底座
        private static Destroy(){
            diamondsList.forEach((item,i,list)=>{

                if(item.top>1008){
                    diamondsList.splice(i,1);
                    $("#"+item.id).remove();
                }
            })
        }
    }
    Game.scence();

}

html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Typescript跳一跳</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/ts.css" />
        <script type="text/javascript">
            var isios = false;
            ! function(userAgent) {
                var screen_w = parseInt(window.screen.width),
                    scale = screen_w / 640;
                if(/Android (d+.d+)/.test(userAgent)) {
                    var version = parseFloat(RegExp.$1);
                    document.write(version > 2.3 ? '<meta name="viewport" content="width=640, initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">' : '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
                } else {
                    isios = true;
                    document.write('<meta name="viewport" content="width=640, initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi">');
                }
            }(navigator.userAgent);
        </script>
    </head>

    <body>

        <!--游戏页面-->
        <div class="game">

            <div class="game-p">
                <!--<div class="chess gb"></div>
                <div id="one" class="gb">
                    <div class="box"></div>
                    <div class="shadw"></div>
                </div>-->
            </div>
            <img class="logo" src="img/logo.png" />
            <div class="jfb">0</div>
            <div class="toolp">距离开启宝箱还有5步</div>
        </div>

        <div class="gameEnd">

            <div class="getScore">

                <p class="score">10</p>
                <button class="againBtn">再来一局</button>
                
            </div>

        </div>

        <script src="js/myjump.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

css:

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 1008px;
}

.game {
    height: 100%;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}


.logo {
    position: absolute;
    left: 30px;
    top: 26px;
}

.jfb {
    position: absolute;
    top: 30px;
    right: 60px;
    font-size: 100px;
    font-weight: 900;
    color: #4f4e3f;
    text-align: center;
    line-height: 100px;
}

.toolp {
    position: absolute;
    bottom: 5%;
    left: 30%;
    width: 40%;
    height: 50px;
    border-radius: 50px;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    background-color: #4a764e;
}
.game-p {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #8aad8e;
}
.gb{
    position: absolute;
    left: 50px;
    top: 650px;
    
}
.box{
    height: 180px;
    width: 180px;
    background-image:url(../img/c1.png);
    background-size: 100% 100%;
    z-index: 2;
    position: absolute;
}
.shadw{
    position: absolute;
    left: 120px;
    top: 0;
    height: 133px;
    width: 234px;
    background-image: url(../img/s2.png);
    background-size: 100% 100%;
    opacity: 0.3;
    transform: translateY(35px) translateX(-180px);
    transform-origin: bottom center;
}
.chess{
    width: 182px;
    height: 227px;
    background-image: url(../img/e3.png);
    background-position:0 0;
    position: absolute;
    top: 531px;
    left: 49px;
    z-index: 3;
    
}
.gameEnd{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,.8);
    z-index: -1;
}
.getScore{
    width: 492px;
    height: 760px;
    background: url(../img/getScore.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
.score{
    color: #dcc226;
    font-size: 130px;
    text-align: center;
    margin-top: 120px;
    font-weight: 900;
    
}
.againBtn{
        width: 309px;
    height: 87px;
    background: url(../img/bg.png) no-repeat;
    background-size: 100% 100%;
    font-size: 40px;
    color: #dcc226;
    text-align: center;
    border: none;
    font-weight: 900;
    position: absolute;
    left: 50%;
    margin-left: -154.5px;
}

源码：留下邮箱，看到就发。