都说码农都该有自己的博客，我也整个，这是第一次发。
自学JS/JQ半年多，半年前要是听说谁会用JS/JQ做个贪吃蛇我都会觉得他是大神，现在觉得，也就那样了。
最近没项目做，正好想到贪吃蛇我现在应该能做出来了。
说干就干，先不看别人的代码，自己搞，半天的时间搞定了。
偷个懒用JQ写的，也不知道有没有啥问题。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var hgn = 15;//横格数 var sgn = 10;//竖格数 var sc = 3;//初始蛇长 var sind = new Array;//蛇索引 var sd = 200;//速度 var fxcur = null; var inv; var dan_ind;//胆索引 var stop_onf = true;//暂停 $(".body").css({width:50*hgn+"px"}); $(".msg").css({width:$(".body").css("width")}); for(var i=0;i<hgn;i++){ for(var j=0;j<sgn;j++){ $(".body ul").append("<li></li>"); } } for(var i=0;i<sc;i++){ sind[i]=i; } dan(); she(); move(); //绘蛇 function she(){ $("ul li").removeClass("she"); for(var i=0;i<sc;i++){ $("ul li:eq("+sind[i]+")").addClass("she"); } } //移动 function move(){ if(inv){ window.clearInterval(inv); } inv = window.setInterval(function(){ goway(fxcur); },sd); } //移动开关 function stopmove(){ if(stop_onf){ if(inv){ window.clearInterval(inv); } $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("STOP"); }else{ $(".msg").html("GO").animate({top:"-50px"}); move(); } stop_onf = !stop_onf; } //结束 function gameover(){ if(inv){ window.clearInterval(inv); } $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("GAME OVER"); } //判断撞到自己 function zsf(){ for(var i=0;i<sc-1;i++){ if(sind[sc-1]==sind[i]){ gameover(); return true; } } return false; } //移动功能 function goway(fx){ for(var i=0;i<sc-1;i++){ if(sind[sc-1]==sind[i]){ gameover(); return; } } if(fx=="you"){ if(sind[sc-1]+1==dan_ind){//吃胆 scsc=sc+1; sind[sc-1]=dan_ind; dan(); she(); return; }else if((sind[sc-1]+1)%hgn==0){//撞墙 gameover(); return; } for(var i=0;i<sc;i++){ if(i==sc-1){ sind[i]=sind[i]+1; she(); return; } sind[i]=sind[i+1]; } }else if(fx=="xia"){ if(sind[sc-1]+hgn==dan_ind){//吃胆 scsc=sc+1; sind[sc-1]=dan_ind; dan(); she(); return; }else if(sind[sc-1]>hgn*sgn-hgn){//撞墙 gameover(); return; } for(var i=0;i<sc;i++){ if(i==sc-1){ sind[i]=sind[i]+hgn; she(); return; } sind[i]=sind[i+1]; } }else if(fx=="zuo"){ if(sind[sc-1]-1==dan_ind){//吃胆 scsc=sc+1; sind[sc-1]=dan_ind; dan(); she(); return; }else if((sind[sc-1])%hgn==0){//撞墙 gameover(); return; } for(var i=0;i<sc;i++){ if(i==sc-1){ sind[i]=sind[i]-1; she(); return; } sind[i]=sind[i+1]; } }else if(fx=="shang"){ if(sind[sc-1]-hgn==dan_ind){//吃胆 scsc=sc+1; sind[sc-1]=dan_ind; dan(); she(); return; }else if(sind[sc-1]<hgn){//撞墙 gameover(); return; } for(var i=0;i<sc;i++){ if(i==sc-1){ sind[i]=sind[i]-hgn; she(); return; } sind[i]=sind[i+1]; } }else{ return; } } //判断是否吃到胆 function isdan(num){ if(num==dan_ind){ scsc=sc+1; sind[sc-1]=num; dan(); } } //按键 $(document).keydown(function(event){ var down_num = event.which; var fx = null; if(down_num==37){//左 fx = "zuo"; }else if(down_num==38){//上 fx = "shang"; }else if(down_num==40){//下 fx = "xia"; }else if(down_num==39){//右 fx = "you"; }else if(down_num==32){ stopmove(); } //需判断能否点击 if(fxcur=="shang"&&fx=="xia"||fxcur=="xia"&&fx=="shang"||fxcur=="zuo"&&fx=="you"||fxcur=="you"&&fx=="zuo"){ return; }else{ fxfxcur = fx; } }); //绘胆 function dan(){ //需判断生成胆是否在蛇索引上 dan_ind = parseInt(hgn*sgn*Math.random()-1); for(var i=0;i<sc;i++){ if(dan_ind==sind[i]){ dan(); return; } } $("ul li").removeClass("dan"); $("ul li:eq("+dan_ind+")").addClass("dan"); } }) </script> <style> /*整体设置*/ a:active {outline: none;star:expression(thisthis.onFocus=this.blur());} html{ overflow-y:scroll;} *{margin:0;padding:0;list-style:none;outline:none;word-wrap:break-word;} img{border:none} h1,h2,h3,h4,h5,h6,body,small{font-size:12px; font-weight:400; font-family:Arial,"宋体";} table{table-layout:fixed; border-collapse:collapse} a{ text-decoration:none;} body{ background:#fff;} .body{ overflow:hidden; border:1px solid #666; position:absolute; left:250px; top:0;} li{ width:48px; height:48px; overflow:hidden; float:left; border:1px solid #666; background:#6C9;} li.she{ background:#069;} li.dan{ background:#0CF;} .tel{ font-size:24px;} .msg{ overflow:hidden; font-size:24px; color:#333; text-align:center; position:absolute; left:250px; top:0;} </style> </head> <body> <div class="tel">方向键控制方向<br />空格键暂停</div> <div class="body"> <ul> </ul> </div> <div class="msg"></div> </body> </html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦