juery实现贪吃蛇的游戏
2016-03-06 21:06
471 查看
今天用juery做了一个贪吃蛇的游戏,代码比较简陋,不过作为这些天学习juery的成果,非常有成就感。另外关于代码内容如有雷同不胜荣幸。
更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么好看
修改了下让它可以在碰壁后从另一侧出来
编写过程中遇到的问题:
更改了下 让头和身子的颜色不一样 这样好区分些,虽然还是不怎么好看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style type="text/css"> #all_show{ text-align: center; margin:0 auto; width: 1200px; height: 100%; } #top{ width:100% } .c_blue{ background-color: blue; } .c_red{ background-color: red; } .c_black{ background-color: #000000; } #content td{ width:5px; height: 5px; } #content{ margin-top: 50px;; borderr-color:green; width:100%; } </style> <script type="text/javascript"> var r_tr=$("<tr>"); var r_td = $("<td>"); var all_ele = new Array(); var start_ele; var last_key_val=3; var key_val=3; var cols = 0; var tcs_time=1000; var tcs_mov_con; //正常前进事件 nele 为新的元素 function normal_t(nele ,flag){ if(!flag){ $(all_ele[all_ele.length-1]).removeClass(); all_ele.pop(); } nele.removeClass() all_ele.reverse() all_ele.push(nele) nele.addClass("c_red") //nele.addClass("c_blue") //为开始的元素赋值 start_ele =nele all_ele.reverse(); if(all_ele.length > 1){ all_ele[1].removeClass(); all_ele[1].addClass("c_blue"); } if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){ build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black"); } } //放入一个juery对象随机返回一个juery对象 function build_tag(source){ return $(source).eq(parseInt(Math.random()*($(source).size()))); } //动起来根据key_val 选择下一个元素 function tcs_next_ele(next_val){ if(next_val == 1){ return $(start_ele).prev(); }else if(next_val == 2){ return $("#"+(parseInt($(start_ele).prop("id"))-cols)) }else if(next_val == 3){ return $(start_ele).next(); }else if(next_val == 4){ return $("#"+(parseInt($(start_ele).prop("id"))+cols)) } } //对取到的值验证 function tcs_check_ele(keyvalue){ var next_ele = tcs_next_ele(keyvalue) if($(next_ele).prop("id") == undefined ){ return false }else{ if($(next_ele).hasClass("c_black")){ normal_t($(next_ele),true) }else if($(next_ele).hasClass("c_blue")){ //当回头时 让他继续往前 if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){ key_val=last_key_val; if(keyvalue == last_key_val){ return false; }else { return tcs_check_ele(last_key_val) } }else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){ return false } normal_t($(next_ele),false) }else{ normal_t($(next_ele),false) } } return true; } //执行 游戏入口 function tcs_move(){ if(!tcs_check_ele(key_val)){ alert("游戏结束") return ; } tcs_mov_con =setTimeout("tcs_move()",tcs_time) } $(function(){ //初始化 function tcs_init(){ all_ele.length=0; start_ele = undefined; //初始化表格 if($("#top #time").val() != "") tcs_time = $("#top #time").val(); $("#tcs>tbody td").removeClass() } //开始前准备 function tcs_start_init(){ var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2); start_ele = $("#"+start_id.toString()) start_ele.addClass("c_red") all_ele.push(start_ele) build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black"); } $("#top :button:eq(0)").click(function () { $("#tcs>tbody").empty() tcs_init() b_r = $("#top #rows").val(); b_c = $("#top #cols").val(); cols = parseInt(b_c); //生成表单 var num = 1; for(var i = 0; i < b_r ; i ++ ){ var btr = r_tr.clone(); for(var j = 0 ; j < b_c ; j ++ ){ var btd = r_td.clone(); btd.prop("id",num); btd.appendTo(btr); num++ } btr.appendTo($("#tcs>tbody")) } //生成起点 }) $("#top :button:eq(1)").click(function(){ //动起来 if($(this).val()=="开始游戏"){ tcs_init() tcs_start_init() tcs_move() $(this).val("重新开始") }else{ if(tcs_mov_con != undefined){ clearTimeout(tcs_mov_con) } tcs_init() $(this).val("开始游戏") } }) $(document).keydown(function (event){ var ab = event.keyCode-36 if(ab < 5 && ab > 0){ if(key_val != ab){ last_key_val = key_val; key_val=parseInt(ab); } } }) }) </script> </head> <body> <div id="all_show"> <div id = "top" > <table > <tr> <td>行数:</td> <td><input id="rows" type="text"></td> <td>列数:</td> <td><input id="cols" type="text"></td> <td>时间:</td> <td><input id="time" type="text"></td> </tr> <tr> <td><input type="button" value="生成表格"></td> <td><input type="button" value="开始游戏"></td> </tr> </table> </div> <div id="content"> <table id="tcs" border="1px"cellspacing="1" cellpadding="1"> <tbody> </tbody> </table> </div> </div> </body> </html>
修改了下让它可以在碰壁后从另一侧出来
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style type="text/css"> #all_show{ text-align: center; margin:0 auto; width: 1200px; height: 100%; } #top{ width:100% } .c_blue{ background-color: blue; } .c_red{ background-color: red; } .c_black{ background-color: #000000; } #content td{ width:5px; height: 5px; } #content{ margin-top: 50px;; borderr-color:green; width:100%; } </style> <script type="text/javascript"> var r_tr=$("<tr>"); var r_td = $("<td>"); var all_ele = new Array(); var start_ele; var last_key_val=3; var key_val=3; var cols = 0; var tcs_time=1000; var tcs_mov_con; var b_c var b_r //正常前进事件 nele 为新的元素 function normal_t(nele ,flag){ if(!flag){ $(all_ele[all_ele.length-1]).removeClass(); all_ele.pop(); } nele.removeClass() all_ele.reverse() all_ele.push(nele) nele.addClass("c_red") //nele.addClass("c_blue") //为开始的元素赋值 start_ele =nele all_ele.reverse(); if(all_ele.length > 1){ all_ele[1].removeClass(); all_ele[1].addClass("c_blue"); } if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){ build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black"); } } //放入一个juery对象随机返回一个juery对象 function build_tag(source){ return $(source).eq(parseInt(Math.random()*($(source).size()))); } //动起来根据key_val 选择下一个元素 function tcs_next_ele(next_val){ if(next_val == 1){ //判断是否到头了 if($(start_ele).prev().prop("id") == undefined){ return $(start_ele).parent().find("td:last-child"); } return $(start_ele).prev(); }else if(next_val == 2){ if( $("#"+(parseInt($(start_ele).prop("id"))-cols)).prop("id") == undefined){ return $("#"+(parseInt($(start_ele).prop("id"))+((b_r-1)*b_c))); } return $("#"+(parseInt($(start_ele).prop("id"))-cols)) }else if(next_val == 3){ if($(start_ele).next().prop("id") == undefined){ return $(start_ele).parent().find("td:first-child") } return $(start_ele).next(); }else if(next_val == 4){ if($("#"+(parseInt($(start_ele).prop("id"))+cols)).prop("id") == undefined){ return $("#"+(parseInt($(start_ele).prop("id"))-((b_r-1)*b_c))); } return $("#"+(parseInt($(start_ele).prop("id"))+cols)) } } //对取到的值验证 function tcs_check_ele(keyvalue){ var next_ele = tcs_next_ele(keyvalue) if($(next_ele).prop("id") == undefined ){ return false }else{ if($(next_ele).hasClass("c_black")){ normal_t($(next_ele),true) }else if($(next_ele).hasClass("c_blue")){ //当回头时 让他继续往前 if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){ key_val=last_key_val; if(keyvalue == last_key_val){ return false; }else { return tcs_check_ele(last_key_val) } }else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){ return false } normal_t($(next_ele),false) }else{ normal_t($(next_ele),false) } } return true; } //执行 游戏入口 function tcs_move(){ if(!tcs_check_ele(key_val)){ alert("游戏结束") return ; } tcs_mov_con =setTimeout("tcs_move()",tcs_time) } $(function(){ //初始化 function tcs_init(){ all_ele.length=0; start_ele = undefined; //初始化表格 if($("#top #time").val() != "") tcs_time = $("#top #time").val(); $("#tcs>tbody td").removeClass() } //开始前准备 function tcs_start_init(){ var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2); start_ele = $("#"+start_id.toString()) start_ele.addClass("c_red") all_ele.push(start_ele) build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black"); } $("#top :button:eq(0)").click(function () { $("#tcs>tbody").empty() tcs_init() b_r = $("#top #rows").val(); b_c = $("#top #cols").val(); cols = parseInt(b_c); //生成表单 var num = 1; for(var i = 0; i < b_r ; i ++ ){ var btr = r_tr.clone(); for(var j = 0 ; j < b_c ; j ++ ){ var btd = r_td.clone(); btd.prop("id",num); btd.appendTo(btr); num++ } btr.appendTo($("#tcs>tbody")) } //生成起点 }) $("#top :button:eq(1)").click(function(){ //动起来 if($(this).val()=="开始游戏"){ tcs_init() tcs_start_init() tcs_move() $(this).val("重新开始") }else{ if(tcs_mov_con != undefined){ clearTimeout(tcs_mov_con) } tcs_init() $(this).val("开始游戏") } }) $(document).keydown(function (event){ var ab = event.keyCode-36 if(ab < 5 && ab > 0){ if(key_val != ab){ last_key_val = key_val; key_val=parseInt(ab); } } }) }) </script> </head> <body> <div id="all_show"> <div id = "top" > <table > <tr> <td>行数:</td> <td><input id="rows" type="text"></td> <td>列数:</td> <td><input id="cols" type="text"></td> <td>时间(毫秒):</td> <td><input id="time" type="text"></td> </tr> <tr> <td><input type="button" value="生成表格"></td> <td><input type="button" value="开始游戏"></td> </tr> </table> </div> <div id="content"> <table id="tcs" border="1px"cellspacing="1" cellpadding="1"> <tbody> </tbody> </table> </div> </div> </body> </html>
编写过程中遇到的问题:
//1、当函数内部不使用var 的时候是作为一个全局变量声明的,但是如果没执行这个函数的时候 这个全局变量是不存在的。 //2、$(a).addClass()的时候$(a).find(a[class])是可以找到的,$(a).removeClass() 也会认为它有class属性 但是没值。
相关文章推荐
- objc_property_attribute_t 的value和name
- easyUI confirm消息框的OK和cancel按钮的修改
- (java)Increasing Triplet Subsequence
- 使用Arduino读取噪声传感器分贝值
- 批判性思维——Asking The Right Questions
- 骨骼算法,仿生中的外观
- View Programming Guide for iOS 学习笔记_3
- Android Volley完全解析(三),定制自己的Request
- 关于UITableView 的一些重用技术注意点
- hdu1509 Windows Message Queue(优先队列水)
- leetcode52 N-Queens II
- (java)Unique Binary Search Trees
- POJ 3458 Colour Sequence
- hdu 5063 Operation the Sequence(Bestcoder Round #13)
- StringBuffer和StringBuilder存在的作用是什么
- blade and soul pvp guide
- blade and soul races guide
- UI设计 - iOS
- UI设计 - Web
- UI设计 - PPT