今天用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属性 但是没值。