js贪吃蛇小游戏

来源：互联网发布：linux vi 删除行编辑：程序博客网时间：2024/04/20 13:29

最近突然爱上了js，特地做几个经典的小游戏来玩一玩，学java学了这么久，欢欢

snake.html:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>贪吃蛇</title><script language="javascript" src="js/jquery.1.8.1.js"></script><script language="javascript" src="js/snake.js"></script><link href="css/snake.css" rel="stylesheet" type="text/css"/></head><body><table id="frameTable">        </table>    <input type="button" value="开始" id="start"/></body></html>

snake.css:

/* CSS Document */body{text-align:center;}#frameTable{width:530px;height:530px;border-collapse: collapse;border: 1px solid #000;margin:0 auto}tr td{border: 1px solid #000;padding:0px;}input{margin-top:20px;width:100px;height:30px;}

snake.js:

// JavaScript Documentvar game = {init:{rowNum : 20,//初始化表格的行colNum : 20,//初始化表格的列foodNum : 10,//初始化食物数量speed: 200,//初始化蛇的移动速度foodColor: 'red',//食物颜色snakeBodyColor: '#6F3',//蛇身体的颜色snakeHeadColor: 'black',//蛇头的颜色backgroundColor: 'yellow',//表格的颜色direction : 'right',//默认蛇的移动方向,右state: '',snakePosition : ["10-7","10-8","10-9","10-10"],//蛇每节身体的坐标，横纵坐标以-隔开initFrame:function() {//加载游戏界面game.pfunction.loadWall();game.pfunction.loadSnake();game.pfunction.loadFood(game.init.foodNum);game.init.initEvent();},initEvent:function(){$("#start").unbind("click");$("#start").bind("click", function() {//开始按钮事件if($(this).val() == "再来一局") {game.gamerestart();return;}game.init.direction = "right";$(this).hide();game.init.state = setInterval(function() {var len = game.pfunction.getSnakeSize();//得到蛇的长度if(game.init.direction == "right") {//向右移动//得到蛇头的将要到达的坐标，向右移动x坐标不变，y坐标+1var x = game.pfunction.getX(len-1);var y =game.pfunction.getY(len-1) + 1;if(y>=game.init.rowNum) {//判断蛇是否撞到了墙game.gameover();return;}}else if(game.init.direction == "left") {//向左移动//得到蛇头的将要到达的坐标，向左移动x坐标不变，y坐标-1var x = game.pfunction.getX(len-1);var y =game.pfunction.getY(len-1) - 1;if(y<0) {game.gameover();return;}}else if(game.init.direction == "up") {//向上移动//得到蛇头的将要到达的坐标，向上移动x坐标-1，y坐标不变var x = game.pfunction.getX(len-1) - 1;var y =game.pfunction.getY(len-1);if(x<0) {game.gameover();return;}}else if(game.init.direction == "down") {//向下移动//得到蛇头的将要到达的坐标，向下移动x坐标+1，y坐标不变var x = game.pfunction.getX(len-1) + 1;var y =game.pfunction.getY(len-1);if(x>=game.init.colNum) {game.gameover();return;}}game.pfunction.judgeWhetherIsSnakeBody(x+"-"+y);//判断蛇是都撞到了自己的身体，若是游戏结束game.pfunction.judgeWhetherIsFood(x+"-"+y);//判断将要前进的方向是否是食物game.pfunction.addHead(x+"-"+y);//蛇头前一个位置变成蛇头game.pfunction.createFood();//如果蛇吃掉了一个食物，重新产生一个食物，没有则不产生game.pfunction.loadSnake();//重新把蛇显示出来},game.init.speed);});$(document).keydown(function(event){ //键盘按下事件var e = event || window.event || arguments.callee.caller.arguments[0];          if(e && e.keyCode==87){ // 按 w if(game.init.direction == "down") {game.init.direction = "down"return;}               game.init.direction = "up";              }              if(e && e.keyCode==65){ // 按 a if(game.init.direction == "right") {game.init.direction = "right"return;}                  game.init.direction = "left";                }                         if(e && e.keyCode==83){ // 按 sif(game.init.direction == "up") {game.init.direction = "up"return;}                game.init.direction = "down";           }if(e && e.keyCode==68){ // 按 dif(game.init.direction == "left") {game.init.direction = "left"return;}               game.init.direction = "right";           }}); }},pfunction:{loadWall:function() {//动态产生整个表格，也就是蛇活动的区域for(var i=0;i<game.init.rowNum;i++) {$TR = $("<tr/>").attr("id",i);for(var j=0;j<game.init.colNum;j++) {$TD = $("<td/>").attr("id",i+"-"+j).attr("class","empty").css("background",game.init.backgroundColor);$TR.append($TD);}$("#frameTable").append($TR);}},loadSnake:function() {//遍历蛇身的坐标，把蛇在界面上显示出来for(var i=0;i<game.pfunction.getSnakeSize();i++) {var position = game.init.snakePosition[i];if(i == game.pfunction.getSnakeSize()-1) {$("#"+position).css("background",game.init.snakeHeadColor);}else {$("#"+position).css("background",game.init.snakeBodyColor);}$("#"+position).attr("class","snake");}},loadFood:function(foodNum) {//随机产生foodNum个食物var i = 0;while(i<foodNum) {var x = parseInt(Math.random()*19);var y = parseInt(Math.random()*19);var seat = x+"-"+y;if($("#"+seat).attr("class") == "snake" || $("#"+seat).attr("class") == "food") {continue;}$("#"+seat).css("background",game.init.foodColor);$("#"+seat).attr("class","food");i++;}},getX:function(index) {return parseInt(game.init.snakePosition[index].split("-")[0]);},getY:function(index) {return parseInt(game.init.snakePosition[index].split("-")[1])},removeFoot:function() {//移除蛇尾return game.init.snakePosition.splice(0,1);},addHead:function(head) {//添加蛇头game.init.snakePosition.push(head);},getSnakeSize:function() {//得到此时蛇的长度return game.init.snakePosition.length;},judgeWhetherIsFood:function(pre) {if($("#"+pre).attr("class") != "food") {var foot = game.pfunction.removeFoot();$("#"+foot).css("background",game.init.backgroundColor);$("#"+foot).attr("class","empty");}},judgeWhetherIsSnakeBody:function(pre) {if($("#"+pre).attr("class") == "snake") {game.gameover();}},createFood:function() {//遍历整个界面的食物，如果食物少了一个，重新产生一个食物var foodNo = 0;for(var i=0;i<game.init.rowNum;i++) {for(var j=0;j<game.init.colNum;j++) {if($("#"+i+"-"+j).attr("class") == "food") {foodNo++;}}}if(foodNo<game.init.foodNum) {game.pfunction.loadFood(1);}},},gamerestart:function() {//再来一局，重新初始化界面for(var i=0;i<game.init.rowNum;i++) {for(var j=0;j<game.init.colNum;j++) {$("#"+i+"-"+j).attr("class","empty").css("background",game.init.backgroundColor);}}game.init.snakePosition = ["10-7","10-8","10-9","10-10"];game.pfunction.loadSnake();game.pfunction.loadFood(game.init.foodNum);$("#start").val("开始");},gameover:function() {//游戏结束clearInterval(game.init.state);$("#start").val("再来一局");$("#start").show();alert("game over");}};$(function() {game.init.initFrame();});

运行截图：

1 0