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

 修改了下让它可以在碰壁后从另一侧出来

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

 编写过程中遇到的问题：

1 //1、当函数内部不使用var 的时候是作为一个全局变量声明的，但是如果没执行这个函数的时候  这个全局变量是不存在的。
2 //2、$(a).addClass()的时候$(a).find(a[class])是可以找到的，$(a).removeClass()   也会认为它有class属性 但是没值。

 

posted @ 2016-03-06 21:06  johnny.li  阅读(258)  评论(1)  编辑  收藏  举报