typescript 简版跳一跳

Posted 2020-11-21 xiaotiejiang

typescript 简版跳一跳

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

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

　　　　2.旗子的跳动

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

　　　　4.场景平移

　　　　5.游戏重置

　　　　6.销毁场景外方块

Ts代码：

  1 //1.创建底座：
  2 //2.创建跳棋：
  3 //3.点击移动
  4 //4.开始按压动画，
  5 //5.放开动画
  6 //6.跳动
  7 //7.是否跳对
  8 //8.移动场景
  9 //9.创建新底座
 10 module Jump {
 11     interface Pos {
 12         x: number;
 13         y: number;
 14     }
 15     enum Flag {
 16         on, in, out
 17     }
 18     enum Direction {
 19         left,
 20         right
 21     }
 22     let direction: Direction = Direction.right;
 23     let diamondsList: diamonds[] = [];
 24     let mask: JQuery<htmlElement> = $(".game-p");
 25     let chess: Chess;
 26     let score:number=0;
 27     class MathHelp {
 28         /**
 29          * 返回范围内随机数[min,max]
 30          * @param min 最小值
 31          * @param max 最大值
 32          */
 33         static RandRange(min: number, max: number): number {
 34             return Math.floor(Math.random() * (max - min + 1) + min);
 35         }
 36         /**
 37         * 根据角度求对边长度。Math.sin(randian)
 38         * @param r 斜边长
 39         * @param angle 角度
 40         */
 41         static righttriangle(r: number, angle: number): number {
 42             return Math.sin(Math.PI / 180 * angle) * r;
 43         }
 44         /**
 45           * 射线法判断点是否在多边形内部
 46           * @param p 待判断的点
 47           * @param poly 多边形顶点
 48           */
 49         static rayCasting(p: Pos, poly: Pos[]): Flag {
 50             var px = p.x,
 51                 py = p.y,
 52                 flag = false
 53 
 54             for (var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
 55                 var sx = poly[i].x,
 56                     sy = poly[i].y,
 57                     tx = poly[j].x,
 58                     ty = poly[j].y
 59 
 60                 // 点与多边形顶点重合
 61                 if ((sx === px && sy === py) || (tx === px && ty === py)) {
 62                     return Flag.on;
 63                 }
 64 
 65                 // 判断线段两端点是否在射线两侧
 66                 if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
 67                     // 线段上与射线 Y 坐标相同的点的 X 坐标
 68                     var x = sx + (py - sy) * (tx - sx) / (ty - sy)
 69 
 70                     // 点在多边形的边上
 71                     if (x === px) {
 72                         return Flag.on;
 73                     }
 74 
 75                     // 射线穿过多边形的边界
 76                     if (x > px) {
 77                         flag = !flag
 78                     }
 79                 }
 80             }
 81 
 82             // 射线穿过多边形边界的次数为奇数时点在多边形内
 83             return flag ? Flag.in : Flag.out;
 84         }
 85 
 86     }
 87     class diamonds {
 88 
 89         private width: number = 180;
 90         private height: number = 180;
 91          id: string = "p" + new Date().getTime();;
 92         node: JQuery<HTMLElement>;
 93         left: number = 0;
 94         top: number = 0;
 95         constructor(isauto: boolean = true, isRe = true, left: number = 0, top: number = 0) {
 96             this.left = left;
 97             this.top = top;
 98             if (isauto) {
 99 
100                 let dl = MathHelp.RandRange(200, 300);
101                 let x = MathHelp.righttriangle(dl, 57);
102                 let y = MathHelp.righttriangle(dl, 33);
103                 let lastbox = diamondsList[diamondsList.length - 1];
104                 if (isRe) {
105                     if (direction == Direction.left) {
106                         direction = Direction.right;
107                     } else if (direction == Direction.right) {
108                         direction = Direction.left;
109                     }
110                 }
111                 if (direction == Direction.right) {
112                     this.left = lastbox.left + x;
113                 } else {
114                     this.left = lastbox.left - x;
115                 }
116                 this.top = lastbox.top - y;
117             }
118             this.node = $(`<div id=‘${this.id}‘ class=‘gb‘ style="top:${this.top}px;left:${this.left}px">
119                             <div class=‘box‘ style="background:url(img/c${MathHelp.RandRange(1, 4)}.png)"></div> 
120                             <div class=‘shadw‘></div>
121                           </div>`);
122             mask.append(this.node);
123 
124         }
125         GetPointList(): Pos[] {
126             var result = [{
127                 x: this.left,
128                 y: this.top + 57
129             }, {
130                 x: this.left + (this.width / 2),
131                 y: this.top + 4
132             }, {
133                 x: this.left + this.width,
134                 y: this.top + 57
135             }, {
136                 x: this.left + (this.width / 2),
137                 y: this.top + (57 * 2 - 4)
138             }];
139             return result;
140         }
141         move(p: Pos) {
142             this.node.css({
143                 left: p.x + "px",
144                 top: p.y + "px",
145                 transition: "",
146                 transform: ""
147             });
148         }
149     }
150     class Chess {
151         private width: number = 180;
152         private height: number = 182;
153         left: number = 49;
154         top: number = 531;
155         node: JQuery<HTMLElement>;
156         constructor() {
157 
158             this.node =$(`<div class="chess gb"></div>`);
159             mask.append(this.node);
160         }
161         jump(pt: Pos, call: Function) {
162             let numb = 0;
163             let t1 = setInterval(() => {
164 
165                 if (numb == 0) {
166                     this.node.animate({
167                         left: pt.x + "px",
168                         top: pt.y + "px"
169                     }, 504);
170 
171                 }
172                 this.node.css({
173                     "background-position": "-" + this.width * numb + "px" + " 0px"
174                 });
175                 numb++;
176                 if (numb >= 11) {
177                     window.clearInterval(t1);
178                     call();
179                 }
180 
181             }, 42)
182 
183         }
184         GetCenter(): Pos {
185             return {
186                 x: this.left + this.width / 2,
187                 y: this.top + this.height
188             }
189         }
190         move(p: Pos) {
191             this.node.css({
192                 left: p.x + "px",
193                 top: p.y + "px",
194                 transition: "",
195                 transform: ""
196             });
197         }
198     }
199 
200     class Game {
201         static distince = 0;
202         static time: number;
203         /**
204          * 初始化游戏场景
205          */
206         static scence() {
207             let d1 = new diamonds(false, false, 50, 650);
208             diamondsList.push(d1);
209             let d = new diamonds(true, false);
210             diamondsList.push(d);
211             Game.loadlisten();
212             chess = new Chess();
213             $(".againBtn").on("click",()=>{
214                 //重置
215               Game.GameRest();
216 
217             });
218         }
219         /**
220          * 重置游戏
221          */
222         static GameRest(){
223             $(".gameEnd").css({
224                 "z-index":-1
225             });
226             diamondsList=[];
227             score=0;
228             $(".jfb").html(score.toString());
229             $(".gb").remove();
230             direction=Direction.right;
231             Game.scence();
232             
233         }
234         static CreateSP() {
235             let d = new diamonds();
236             diamondsList.push(d);
237             Game.loadlisten();
238         }
239         private static loadlisten() {
240             document.addEventListener(‘touchstart‘, Game.touch, false);
241             document.addEventListener(‘touchmove‘, Game.touch, false);
242             document.addEventListener(‘touchend‘, Game.touch, false);
243         }
244         private static removelisten() {
245             document.removeEventListener(‘touchstart‘, Game.touch, false);
246             document.removeEventListener(‘touchmove‘, Game.touch, false);
247             document.removeEventListener(‘touchend‘, Game.touch, false);
248         }
249         private static touch(e: Event) {
250             e.preventDefault();
251             let currentDiamonds = diamondsList[diamondsList.length - 2];
252             if (e.type == "touchstart") {
253                 //挤压形变动画
254                 let scaley = 1;
255                 let chessy = 0;
256                 Game.distince = 0;
257                 Game.time = setInterval(() => {
258                     if (scaley > 0.7) {
259                         scaley -= 0.01;
260                     }
261                     if (chessy < 30) {
262                         chessy++;
263                         chess.node.css({
264                             "transform": " scaleX(" + (1 + chessy * 0.006) + ") scaleY(" + (1 - (chessy * 0.007)) + ")"
265                         })
266                     }
267                     Game.distince++;
268                     currentDiamonds.node.css({
269                         "transform-origin": "bottom center",
270                         "transform": "scaleY(" + scaley + ")"
271                     });
272 
273                 }, 50);
274 
275             } else if (e.type == "touchend") {
276                 //1.底座还原动画
277                 //2.旗子动画轨迹
278                 //3.落脚点判断
279                 //4.场景平移，创建新底座，移除画外底座
280                 currentDiamonds.node.css({
281                     "transform": "scaleY(1)"
282                 });
283                 clearInterval(Game.time);
284                 Game.removelisten();
285                 Game.Jump(Game.distince);
286 
287             }
288         }
289         private static Jump(distince: number) {
290             let dl = distince * 17;
291             let x = MathHelp.righttriangle(dl, 57);
292             let y = MathHelp.righttriangle(dl, 33);
293             if (direction == Direction.left) {
294                 x = -x;
295             }
296             chess.left = chess.left + x;
297             chess.top = chess.top - y;
298             chess.jump({ x: chess.left, y: chess.top }, () => {
299                 let p = chess.GetCenter();
300                 let last = diamondsList[diamondsList.length - 1];
301                 let poly = last.GetPointList();
302                 //判断是否跳在基座上
303                 let result = MathHelp.rayCasting(p, poly);
304                 if (result == Flag.in) {
305                     direction = Math.random() > 0.5 ? 1 : 0;
306                     Game.moveblock();
307                     score++;
308                     $(".jfb").html(score.toString());
309                 } else {
310                     //game over
311                     $(".gameEnd").css({
312                         "z-index":999
313                     });
314                     $(".score").html(score.toString());
315                     console.log("game over!");
316                 }
317             })
318 
319         }
320         /**
321          * 移动场景
322          */
323         private static moveblock() {
324             let last = diamondsList[diamondsList.length - 1];
325             let p1: Pos;
326             let x: number = 0;
327             let y: number = 0;
328             //以左右标准基座为左边平移
329             if (direction == Direction.left) {
330                 p1 = { x: 50, y: 650 };
331             } else {
332                 p1 = { x: 400, y: 650 };
333             }
334             x = p1.x - last.left;
335             y = p1.y - last.top;
336 
337             $(".gb").css({
338                 "transform": "translate(" + x + "px," + y + "px)",
339                 "transition": "transform 0.9s"
340             });
341 
342 
343             setTimeout(() => {
344                 //更新class中left,top属性
345                 $.each(diamondsList, (a, b) => {
346                     b.left = b.left + x;
347                     b.top = b.top + y;
348                     b.move({ x: b.left, y: b.top });
349                 });
350                 chess.left = chess.left + x;
351                 chess.top = chess.top + y;
352                 chess.move({
353                     x: chess.left,
354                     y: chess.top
355                 });
356                 Game.Destroy();
357                 //创建新底座
358                 Game.CreateSP();
359             }, 1100)
360         }
361         //销毁画外的底座
362         private static Destroy(){
363             diamondsList.forEach((item,i,list)=>{
364 
365                 if(item.top>1008){
366                     diamondsList.splice(i,1);
367                     $("#"+item.id).remove();
368                 }
369             })
370         }
371     }
372     Game.scence();
373 
374 }

View Code

 

html：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>Typescript跳一跳</title>
 7         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 8         <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 9         <link rel="stylesheet" type="text/css" href="css/ts.css" />
10         <script type="text/javascript">
11             var isios = false;
12             ! function(userAgent) {
13                 var screen_w = parseInt(window.screen.width),
14                     scale = screen_w / 640;
15                 if(/android (d+.d+)/.test(userAgent)) {
16                     var version = parseFloat(RegExp.$1);
17                     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">‘);
18                 } else {
19                     isios = true;
20                     document.write(‘<meta name="viewport" content="width=640, initial-scale = ‘ + scale + ‘ ,minimum-scale = ‘ + scale + ‘, maximum-scale = ‘ + scale + ‘, user-scalable=no, target-densitydpi=device-dpi">‘);
21                 }
22             }(navigator.userAgent);
23         </script>
24     </head>
25 
26     <body>
27 
28         <!--游戏页面-->
29         <div class="game">
30 
31             <div class="game-p">
32                 <!--<div class="chess gb"></div>
33                 <div id="one" class="gb">
34                     <div class="box"></div>
35                     <div class="shadw"></div>
36                 </div>-->
37             </div>
38             <img class="logo" src="img/logo.png" />
39             <div class="jfb">0</div>
40             <div class="toolp">距离开启宝箱还有5步</div>
41         </div>
42 
43         <div class="gameEnd">
44 
45             <div class="getScore">
46 
47                 <p class="score">10</p>
48                 <button class="againBtn">再来一局</button>
49                 
50             </div>
51 
52         </div>
53 
54         <script src="js/myjump.js" type="text/javascript" charset="utf-8"></script>
55     </body>
56 
57 </html>

View Code

css:

  1 html,
  2 body {
  3     margin: 0;
  4     padding: 0;
  5     height: 100%;
  6     min-height: 1008px;
  7 }
  8 
  9 .game {
 10     height: 100%;
 11     width: 100%;
 12     position: relative;
 13     left: 0;
 14     top: 0;
 15 }
 16 
 17 
 18 .logo {
 19     position: absolute;
 20     left: 30px;
 21     top: 26px;
 22 }
 23 
 24 .jfb {
 25     position: absolute;
 26     top: 30px;
 27     right: 60px;
 28     font-size: 100px;
 29     font-weight: 900;
 30     color: #4f4e3f;
 31     text-align: center;
 32     line-height: 100px;
 33 }
 34 
 35 .toolp {
 36     position: absolute;
 37     bottom: 5%;
 38     left: 30%;
 39     width: 40%;
 40     height: 50px;
 41     border-radius: 50px;
 42     color: #FFFFFF;
 43     text-align: center;
 44     font-size: 20px;
 45     line-height: 50px;
 46     background-color: #4a764e;
 47 }
 48 .game-p {
 49     height: 100%;
 50     width: 100%;
 51     position: absolute;
 52     left: 0;
 53     top: 0;
 54     background-color: #8aad8e;
 55 }
 56 .gb{
 57     position: absolute;
 58     left: 50px;
 59     top: 650px;
 60     
 61 }
 62 .box{
 63     height: 180px;
 64     width: 180px;
 65     background-image:url(../img/c1.png);
 66     background-size: 100% 100%;
 67     z-index: 2;
 68     position: absolute;
 69 }
 70 .shadw{
 71     position: absolute;
 72     left: 120px;
 73     top: 0;
 74     height: 133px;
 75     width: 234px;
 76     background-image: url(../img/s2.png);
 77     background-size: 100% 100%;
 78     opacity: 0.3;
 79     transform: translateY(35px) translateX(-180px);
 80     transform-origin: bottom center;
 81 }
 82 .chess{
 83     width: 182px;
 84     height: 227px;
 85     background-image: url(../img/e3.png);
 86     background-position:0 0;
 87     position: absolute;
 88     top: 531px;
 89     left: 49px;
 90     z-index: 3;
 91     
 92 }
 93 .gameEnd{
 94     position: absolute;
 95     top: 0;
 96     left: 0;
 97     width: 100%;
 98     height: 100%;
 99     overflow: hidden;
100     background-color: rgba(0,0,0,.8);
101     z-index: -1;
102 }
103 .getScore{
104     width: 492px;
105     height: 760px;
106     background: url(../img/getScore.png) no-repeat;
107     background-size: 100% auto;
108     position: absolute;
109     top: 0;
110     right: 0;
111     left: 0;
112     bottom: 0;
113     margin: auto;
114 }
115 .score{
116     color: #dcc226;
117     font-size: 130px;
118     text-align: center;
119     margin-top: 120px;
120     font-weight: 900;
121     
122 }
123 .againBtn{
124         width: 309px;
125     height: 87px;
126     background: url(../img/bg.png) no-repeat;
127     background-size: 100% 100%;
128     font-size: 40px;
129     color: #dcc226;
130     text-align: center;
131     border: none;
132     font-weight: 900;
133     position: absolute;
134     left: 50%;
135     margin-left: -154.5px;
136 }

View Code

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