频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
js贪吃蛇小游戏
2016-09-17 09:32:00         来源:雪飘雪融的博客  
收藏   我要投稿

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

snake.html:

<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">
 
 
 
    <table id="frameTable">
         
    </table>
    <input type="button" value="开始" id="start">

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 Document
var 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坐标+1
						var 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坐标-1
						var 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){ // 按 s
					if(game.init.direction == "up") {
						game.init.direction = "up"
						return;
					}
                	game.init.direction = "down";
           		}
				if(e && e.keyCode==68){ // 按 d
					if(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];" i="0;" else="" x="parseInt(Math.random()*19);" y="parseInt(Math.random()*19);" seat="x+"-"+y;" return="" foot="game.pfunction.removeFoot();" foodno="0;" j="0;j<game.init.colNum;j++)" game.init.snakeposition="["10-7","10-8","10-9","10-10"];" game="" pre="">
运行截图:

点击复制链接 与好友分享!回本站首页
上一篇:浅谈JavaScript的内置对象和浏览器对象
下一篇:建立JavaWebProject并进行JDBC操作
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站