juery实现贪吃蛇的游戏

今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感。另外关于代码内容如有雷同不胜荣幸。

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  7     <style type="text/css">
  8        #all_show{
  9            text-align: center;
 10            margin:0 auto;
 11            width: 1200px;
 12            height: 100%;
 13        }
 14         #top{
 15             width:100%
 16         }
 17         .c_red{
 18             background-color: red;
 19         }
 20         .c_black{
 21             background-color: #000000;
 22         }
 23         #content td{
 24             width:5px;
 25             height: 5px;
 26         }
 27         #content{
 28             margin-top: 50px;;
 29             borderr-color:green;
 30             width:100%;
 31         }
 32     </style>
 33     <script type="text/javascript">
 34         var r_tr=$("<tr>");
 35         var r_td = $("<td>");
 36         var all_ele = new Array();
 37         var start_ele;
 38         var last_key_val=3;
 39         var key_val=3;
 40         var cols = 0;
 41         var tcs_time=1000;
 42         var tcs_mov_con;
 43         //正常前进事件 nele 为新的元素
 44         function normal_t(nele ,flag){
 45             if(!flag){
 46                 $(all_ele[all_ele.length-1]).removeClass();
 47                 all_ele.pop();
 48             }
 49             nele.removeClass()
 50             all_ele.reverse()
 51             all_ele.push(nele)
 52             nele.addClass("c_red")
 53             //为开始的元素赋值
 54             start_ele =nele
 55             all_ele.reverse();
 56             if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){
 57                 build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
 58             }
 59 
 60         }
 61         //放入一个juery对象随机返回一个juery对象
 62         function build_tag(source){
 63             return $(source).eq(parseInt(Math.random()*($(source).size())));
 64         }
 65         //动起来根据key_val 选择下一个元素
 66         function tcs_next_ele(next_val){
 67             if(next_val == 1){
 68                 return $(start_ele).prev();
 69             }else if(next_val == 2){
 70                 return $("#"+(parseInt($(start_ele).prop("id"))-cols))
 71             }else if(next_val == 3){
 72                 return $(start_ele).next();
 73             }else if(next_val == 4){
 74                 return $("#"+(parseInt($(start_ele).prop("id"))+cols))
 75             }
 76         }
 77         //对取到的值验证
 78         function tcs_check_ele(keyvalue){
 79             var next_ele = tcs_next_ele(keyvalue)
 80             if($(next_ele).prop("id") == undefined ){
 81                 return false
 82             }else{
 83                 if($(next_ele).hasClass("c_black")){
 84                     normal_t($(next_ele),true)
 85                 }else if($(next_ele).hasClass("c_red")){
 86                     //当回头时  让他继续往前
 87                     if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){
 88                         key_val=last_key_val;
 89                         if(keyvalue == last_key_val){
 90                             return false;
 91                         }else {
 92                             return tcs_check_ele(last_key_val)
 93                         }
 94                     }else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){
 95                           return false
 96                      }
 97                     normal_t($(next_ele),false)
 98                 }else{
 99                     normal_t($(next_ele),false)
100                 }
101             }
102             return true;
103         }
104         //执行 游戏入口
105         function tcs_move(){
106             if(!tcs_check_ele(key_val)){
107                 alert("游戏结束")
108                 return ;
109             }
110             tcs_mov_con =setTimeout("tcs_move()",tcs_time)
111         }
112         $(function(){
113             //初始化
114             function tcs_init(){
115                 all_ele.length=0;
116                 start_ele = undefined;
117                 //初始化表格
118                 if($("#top #time").val() != "")
119                 tcs_time =  $("#top #time").val();
120                 $("#tcs>tbody td").removeClass()
121             }
122             //开始前准备
123             function tcs_start_init(){
124                 var start_id = parseInt((b_c*b_r+1)/2);
125                 start_ele = $("#"+start_id.toString())
126                 start_ele.addClass("c_red")
127                 all_ele.push(start_ele)
128                 build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
129             }
130             $("#top :button:eq(0)").click(function () {
131                 $("#tcs>tbody").empty()
132                 tcs_init()
133                 b_r = $("#top #rows").val();
134                 b_c = $("#top #cols").val();
135                 cols = parseInt(b_c);
136                 //生成表单
137                 var num = 1;
138                 for(var i = 0; i < b_r ; i ++ ){
139                     var btr = r_tr.clone();
140                     for(var j = 0 ; j < b_c ; j ++ ){
141                         var btd = r_td.clone();
142                         btd.prop("id",num);
143                         btd.appendTo(btr);
144                         num++
145                     }
146                     btr.appendTo($("#tcs>tbody"))
147                 }
148                 //生成起点
149             })
150             $("#top :button:eq(1)").click(function(){
151                 //动起来
152                 if($(this).val()=="开始游戏"){
153                     tcs_init()
154                     tcs_start_init()
155                     tcs_move()
156                     $(this).val("重新开始")
157                 }else{
158                     if(tcs_mov_con != undefined){
159                         clearTimeout(tcs_mov_con)
160                     }
161                     tcs_init()
162                     $(this).val("开始游戏")
163                 }
164             })
165             $(document).keydown(function (event){
166                 var ab = event.keyCode-36
167                 if(ab < 5 && ab > 0){
168                     if(key_val != ab){
169                         last_key_val = key_val;
170                         key_val=parseInt(ab);
171                     }
172                 }
173             })
174         })
175     </script>
176 </head>
177 <body>
178 <div id="all_show">
179    <div id = "top" >
180        <table >
181            <tr>
182                <td>行数:</td>
183                <td><input id="rows" type="text"></td>
184                <td>列数:</td>
185                <td><input id="cols" type="text"></td>
186                <td>时间:</td>
187                <td><input id="time" type="text"></td>
188                </tr>
189            <tr>
190                <td><input type="button" value="生成表格"></td>
191                <td><input type="button" value="开始游戏"></td>
192            </tr>
193        </table>
194    </div>
195 
196    <div id="content">
197        <table id="tcs" border="1px"cellspacing="1" cellpadding="1">
198            <tbody>
199            </tbody>
200        </table>
201    </div>
202 </div>
203 </body>
204 </html>

 

你可能感兴趣的:(juery实现贪吃蛇的游戏)