TypeScript和jQuery做的一个简单的点灯小游戏分享

分类：Javascript| 发布：佚名| 查看：1823 | 发表时间：2014/7/17

最近屌丝被迫学习TypeScript（不学就会被开除，5555），所以得先学JavaScript，这下可好，所有网页相关的东西都得要有所了解，否则没法忽悠BOSS。

今天学了一小会JavaScript，这里先做了一个简单的点灯游戏，算是练手吧。其中用到了JQuery，否则事件绑定就会蛋疼了。

做为JavaScript的Hello World，这个玩意就是下面这个东东。这里简单说一下实现方法。

效果图：

首先定义一个样式表，别忘了自定义的元素前都要加圆点，否则无效（菜鸟被这个玩意害了好多次啊）：
app.css

代码如下:

01body
02 {
03     font-family: 'Segoe UI', sans-serif;
04 }
05span {
06     font-style: italic
07 }
08.darkButton {
09     width:70px;
10     height:70px;
11     background-color:green;
12 }
13.lightButton {
14     width:70px;
15     height:70px;
16     background-color:lightblue;
17 }
18 .return {
19     font-size:small;
20  }

接下来实现整体布局吧，就是body标签中的东西，这个很简单，不多说了：

代码如下:

01<body>
02     <h1>Turn all the light bulbs if you can!</h1>
03     Hello
04     <div id="option">
05         <label for="X">横向：</label>
06         <input type="number" id="X" value="5" />
07         <label for="Y">纵向：</label>
08         <input type="number" id="Y" value="4"/>
09         <button id="startButton">开始游戏</button>
10     </div>
11     <div id="content">
12    </div>
13     <div id="stepCounter">
14         您已经移动了 <label id="step">0</label> 步。
15     </div>
16 </body>

然后，先实现一个很简单的验证，在点击开始按钮后，判断用户输入是否是数字，并且是否在4-9的范围内。

代码如下:

01$(document).ready(function () {
02     $(startButton).click(function () {
03         if (step > 0) {
04             if (confirm('乃确定要重新开始游戏么？') === false)
05                 return;
06         }
07        if (isNaN($(X).val()) || isNaN($(Y).val())) {
08             alert('横纵的单元格中之能输入数字。');
09             return;
10         }
11         else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val() >= 10) {
12             alert('横纵的数量不能小于 4，且不能大于 9。');
13             return;
14         }
15         startGame();
16     });      
17 });

$()就是使用的JQuery库。基本上，这里用到的选择器主要有：$(“#xxx”) 第一个id为xxx的元素；$(“.xxx”) 样式为xxx的所有元素。

step是我定义的变量，用户记录用户按了多少次。

在每次用户按了开始按钮后，先把原来画的按钮清掉（如果有的话）。用JQuery很容易实现，用样式去匹配就可以了：

代码如下:

1$(".darkButton").remove();
2$(".lightButton").remove();
3$(".return").remove();

然后就是生成一堆按钮了。这个很常规，不需要做什么解释：

代码如下:

01var grid = document.getElementById('content');
02 for (var i = 1; i <= x; i++) {
03     for (var j = 1; j <= y; j++) {
04         var button = createButton('bt' + i + j);
05        grid.appendChild(button);
06     }
07     var ret = document.createElement('br');
08     ret.className = "return";
09     grid.appendChild(ret);
10 }

createButton是一个方法，用于生成和设置html的元素。我这里button的id命名采用bt+行号+列号，这样方便知道以后按的是哪个按钮。为了方便期间，我规定行号和列号必须小于10（好偷懒啊），这也样直接取倒数第一个或第二个字符就知道坐标值了。

程序最重要的逻辑：按某个按钮改变自己和相邻按钮的状态。我们只需要把坐标取出来，再改变上下左右的按钮状态就行了（注意越界情况的判断），这里写一个判断吧：

代码如下:

1$(".darkButton").click(function () {
2     changeButton(this.id);
3    var x = this.id.charAt(2);
4     var y = this.id.charAt(3);
5    if (x - 1 > 0) {
6         changeButton('bt' + (x - 1) + y);
7     }

注意this是在JQuery中定义的。如果不用JQuery想拿到这个this那可不容易。要提醒一点的就是下面这一段代码：

代码如下:

1var newX = 1 + parseInt(x);
2if (x + 1 <= maxX) {
3    changeButton('bt' + newX + y);
4}

如果不parseInt，JavaScript会把1当作字符串和后面的x拼起来，这样id就不对了，所以把x转成int后相加即可（上面那个相减的情况不需要这样做）。这就是无类型语言的弊端之一吧，所以才会出现TypeScript（屌丝最近正在学的）。

重要部分都说完了，下面贴上htm文件所有的代码。

代码如下:

001<!DOCTYPE html>
002<html lang="en">
003 <head>
004     <meta charset="utf-8" />
005     <title>Turn the light</title>
006     <link rel="stylesheet" href="app.css" rel="external nofollow" type="text/css" />
007     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
008     <script>
009         $(document).ready(function () {
010             $(startButton).click(function () {
011                 if (step > 0) {
012                     if (confirm('乃确定要重新开始游戏么？') === false)
013                         return;
014                 }                if (isNaN($(X).val()) || isNaN($(Y).val())) {
015                     alert('横纵的单元格中之能输入数字。');
016                     return;
017                 }
018                 else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val() >= 10) {
019                     alert('横纵的数量不能小于 4，且不能大于 9。');
020                     return;
021                 }
022                startGame();
023             });      
024         });
025     </script>
026    <script>
027         var maxX, maxY;
028        var step = 0;
029        function startGame() {
030             maxX = $(X).val();
031             maxY = $(Y).val();
032             makeGrid(maxX, maxY);
033             step = 0;
034             document.getElementById("step").innerHTML = step;
035         }
036        function makeGrid(x, y) {
037             $(".darkButton").remove();
038             $(".lightButton").remove();
039             $(".return").remove();
040            var grid = document.getElementById('content');
041            for (var i = 1; i <= x; i++) {
042                 for (var j = 1; j <= y; j++) {
043                     var button = createButton('bt' + i + j);
044                     grid.appendChild(button);
045                 }
046                 var ret = document.createElement('br');
047                 ret.className = "return";
048                grid.appendChild(ret);
049             }
050             $(".darkButton").click(function () {
051                 changeButton(this.id);
052                var x = this.id.charAt(2);
053                 var y = this.id.charAt(3);
054                 if (x - 1 > 0) {
055                     changeButton('bt' + (x - 1) + y);
056                 }
057                 if (y - 1 > 0) {
058                     changeButton('bt' + x + (y - 1));
059                 }
060                 var newX = 1 + parseInt(x);
061                 if (x + 1 <= maxX) {
062                     changeButton('bt' + newX + y);
063                 }
064                 var newY = 1 + parseInt(y);
065                 if (y + 1 <= maxY) {
066                     changeButton('bt' + x + newY);
067                 }
068                 step++;
069                 document.getElementById("step").innerHTML = step;
070             });
071         }
072        function changeButton(id) {
073             var button = document.getElementById(id);
074             if (button.className === "darkButton") {
075                 button.className = "lightButton";
076             }
077             else {
078                 button.className = "darkButton";
079             }
080         }
081         function createButton(id) {
082             var button = document.createElement('button');
083             button.id = id;
084             button.className = "darkButton";
085             return button;
086         }
087     </script>
088 </head>
089 <body>
090     <h1>Turn all the light bulbs if you can!</h1>
091     Hello
092     <div id="option">
093         <label for="X">横向：</label>
094         <input type="number" id="X" value="5" />
095         <label for="Y">纵向：</label>
096         <input type="number" id="Y" value="4"/>
097         <button id="startButton">开始游戏</button>
098     </div>
099     <div id="content">
100     </div>
101     <div id="stepCounter">
102         您已经移动了 <label id="step">0</label> 步。
103     </div>
104 </body>
105 </html>

如果想运行代码，只需要把最开始的样式表保存成app.css，然后把这一段完整的代码保存成default.htm，然后放在同一个文件夹下，用浏览器打开htm文件就行了（IE要启用ActiveX）。

需要注意的是，这玩意和浏览器的兼容性有很大的关系，所以不保证在所有浏览器（和任意版本）上都能正常运行。。。

对了，最后多说一点。你可以用Visual Studio 2012来编辑html和JavaScript，会有Intellisense，还可以直接加断点调试，非常方便。

365据说看到好文章不转的人，服务器容易宕机！

标签：js小游戏 jQuery TypeScript

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/1481.html

TypeScript和jQuery做的一个简单的点灯小游戏分享

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

TypeScript和jQuery做的一个简单的点灯小游戏分享

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱