贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识：
1、js函数的熟练掌握，
2、js数组的应用，
3、js小部分ajax的学习
4、js中的splice、shift等一些函数的应用，
基本上就这些吧，下面提重点部分：
前端的页面，这里可自行布局，我这边提供一个我自己的布局：
贪吃蛇 0
简单 中等 高级 神速

这里是css代码：
*{padding: 0px; margin: 0px;font-size: 12px}body{background: #ccc}input.button{ width: 60px; cursor: pointer;}#info{ width: 540px; height: 30px; margin: 30px auto 5px; line-height: 30px;}#score{ width: 73px; height: 28px; padding-left: 64px; background: url(./images/score.png) no-repeat; float: left; font-size: 14px; font-weight: 700; font-style:italic; font-family: '微软雅黑';}#form{ float: right;}#form input{ vertical-align: middle; margin-right: 5px;}#main{ width: 540px; height: 500px; margin: 0 auto; position: relative; /*background: #71a000*/ }#main div{ width: 20px; height: 20px; position: absolute;}#main #home{ width: 500px; height: 460px; left: 20px; top: 20px; position: relative; background: url(./images/background.jpg) no-repeat;}#main #home div{ position: absolute;}#main div.wall{ width: 540px; height: 20px; background: url(./images/div.jpg) repeat-x; position: absolute;}#main div.top{ left:0px; top:0px;} #main div.bottom{ left:0px; top:480px;}#main div.left{ width: 20px; height: 500px; background: url(./images/div.jpg) repeat-y; left:0px; top:0px;}#main div.right{ width: 20px; height: 500px; background: url(./images/div.jpg) repeat-y; left:520px; top:0px;} .l{ -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); /* ie8+ - must be on one line, unfortunately */ -ms-filter: progid:dximagetransform.microsoft.matrix(m11=1, m12=0, m21=0, m22=1, sizingmethod='auto expand'); /* ie6 and 7 */ filter: progid:dximagetransform.microsoft.matrix( m11=1, m12=0, m21=0, m22=1, sizingmethod='auto expand');}.t{ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); /* ie8+ - must be on one line, unfortunately */ -ms-filter: progid:dximagetransform.microsoft.matrix(m11=-1.8369701987210297e-16, m12=-1, m21=1, m22=-1.8369701987210297e-16, sizingmethod='auto expand'); /* ie6 and 7 */ filter: progid:dximagetransform.microsoft.matrix( m11=-1.8369701987210297e-16, m12=-1, m21=1, m22=-1.8369701987210297e-16, sizingmethod='auto expand'); }.r{ -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); /* ie8+ - must be on one line, unfortunately */ -ms-filter: progid:dximagetransform.microsoft.matrix(m11=-1, m12=1.2246467991473532e-16, m21=-1.2246467991473532e-16, m22=-1, sizingmethod='auto expand'); /* ie6 and 7 */ filter: progid:dximagetransform.microsoft.matrix( m11=-1, m12=1.2246467991473532e-16, m21=-1.2246467991473532e-16, m22=-1, sizingmethod='auto expand'); }.b{ -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); /* ie8+ - must be on one line, unfortunately */ -ms-filter: progid:dximagetransform.microsoft.matrix(m11=6.123233995736766e-17, m12=1, m21=-1, m22=6.123233995736766e-17, sizingmethod='auto expand'); /* ie6 and 7 */ filter: progid:dximagetransform.microsoft.matrix( m11=6.123233995736766e-17, m12=1, m21=-1, m22=6.123233995736766e-17, sizingmethod='auto expand'); }
js公共文件
var home = $('#home'); var snakearr = []; var direcation = 'l'; var speed = 0; var timer = ''; //460/20 var rows = 23; var cols = 25; var die = false; //用于判断是否game over var food = []; var sorce = 0; //得分的显示
首先要想有snake就必须创造snake，
for( var i=0; i0; i-- ){ snakearr[i].c = snakearr[i-1].c; snakearr[i].r = snakearr[i-1].r; snakearr[i].d = snakearr[i-1].d; } switch(direcation){ case 'l' : snakearr[0].c--; snakearr[0].d = 'l'; break; case 'r' : snakearr[0].c++; snakearr[0].d = 'r'; break; case 't' : snakearr[0].r--; snakearr[0].d = 't'; break; case 'b' : snakearr[0].r++; snakearr[0].d = 'b'; break; } //snake的方向控制 $(window).keydown(function(event){ switch(event.keycode){ case 37 : direcation = 'l'; break; case 38 : direcation = 't'; break; case 39 : direcation = 'r'; break; case 40 : direcation = 'b'; break; } }); //snake事故 //1. snake撞墙 if( snakearr[0].c = rows ){ clearinterval(timer); die = true; alert('game over'); } //2. snake撞到自己 for( var i=1; i 食物的产生：
function createfood(){ var r = parseint(rows * math.random()); var c = parseint(cols * math.random()); var casrsh = false; //2个水果出现的位置不能一样 while( food.length == 0 ){ //判断snake的位置，不能与snake相撞 for( var i = 0; i < snakearr.length; i++ ){ if( r == snakearr[i].r && c == snakearr[i].c ){ casrsh = true; } } //当位置不重叠的时候，产生水果 if( !casrsh ){ var i = parseint(4 * math.random()); var fooddiv = $('
'); home.append(fooddiv); food.push({r : r, c : c, div : fooddiv}); setposition(food[0]); } } }
还有一个重要的功能就是重新设置定位：
function setposition(obj){ obj.div.css({left : obj.c * 20, top : obj.r * 20}); obj.div.removeclass().addclass(obj.d); } createfood(); //那页面一被加载出来就显示出食物！
希望本文所述对大家学习javascript程序设计有所帮助。