js编写“贪吃蛇”的小游戏

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

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>贪吃蛇</title><link rel="stylesheet" type="text/css" href="./css.css"><script type="text/javascript" src="./jquery-1.7.2.min.js"></script><script type="text/javascript" src="./js.js"></script></head><body><div id="info"><div id="score">0</div><form action="" id="form" name="form"><input type="radio" name="time" value="500" checked="checked"/>简单<input type="radio" name="time" value="300"/>中等<input type="radio" name="time" value="150"/>高级<input type="radio" name="time" value="50"/>神速<input type="button" value="开始" class="button" id="start"/><input type="button" value="重玩" class="button" id="res"/> </form> </div><div id="main"><div id="home"><！--<div style="background:url（./images/snake0.png） no-repeat;"></div><div style="background:url（./images/snake1.png） no-repeat; left:20px;"></div><div style="background:url（./images/snake2.png） no-repeat; left:40px;"></div><div style="background:url（./images/snake3.png） no-repeat; left:60px;"></div>--></div><div class="wall left"></div><div class="wall right"></div><div class="wall top"></div><div class="wall bottom"></div></div></body> </html>

这里是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/20var rows = 23;var cols = 25;var die = false;//用于判断是否game overvar food = [];var sorce = 0; //得分的显示

首先要想有snake就必须创造snake，

for（ var i=0; i<4; i++ ）{//var snakeDiv = document.createElement（"div"）;//snakeDiv.style = "background:url（./images/snake" + i + ".png） no-repeat;";var snakeDiv = $（"<div style="background:url（./images/snake" + i + ".png） no-repeat;z-index:999"></div>"）;home.append（snakeDiv）;snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};setPosition（snakeArr[i]）; }

有snake之后，自然就是移动了（move）：

function move（）{var timer = setInterval（function（）{for（ var i=snakeArr.length -1; i>0; 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 < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ）{clearInterval（timer）;die = true;alert（"GAME OVER"）;} //2. snake撞到自己for（ var i=1; i<snakeArr.length; i++ ）{if（ snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ）{ clearInterval（timer）; die = true; alert（"GAME OVER"）;}} //snake吃水果if（ snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ）{food[0].div.css（{background : "url（./images/snake2.png） no-repeat"}）;snakeArr.splice（snakeArr.length - 1, 0, food[0]）;food.shift（）;sorce += 10;$（"#score"）.html（sorce）;} //snake产生水果if（ food.length == 0 ）{createFood（）; }for（var i = 0; i < snakeArr.length; i++）{setPosition（snakeArr[i]）;}},speed）; }

食物的产生：

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 = $（"<div style="background:url（./images/fruit"+ i +".png）;"></div>"）;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程序设计有所帮助。