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 width: 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 width: 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:;
     padding:;
     height: 100%;
     min-height: 1008px;
 }

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

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

 .jfb {
     position: absolute;
     top: 30px;
     right: 60px;
     font-size: 100px;
     font-weight:;
     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:;
     top:;
     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:;
     position: absolute;
 }
 .shadw{
     position: absolute;
     left: 120px;
     top:;
     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:;

 }
 .gameEnd{
     position: absolute;
     top:;
     left:;
     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:;
     right:;
     left:;
     bottom:;
     margin: auto;
 }
 .score{
     color: #dcc226;
     font-size: 130px;
     text-align: center;
     margin-top: 120px;
     font-weight:;

 }
 .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:;
     position: absolute;
     left: 50%;
     margin-left: -154.5px;
 }

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