JavaScript 实现各种小游戏源码 ！js贪吃蛇源码

其实计算机系的童鞋都会学习到各种编程语言从C, C++ C# JAVA 等等 但是多少人和我一样唯独对前端感兴趣,对javascript也是真爱 。

之前大学里有很多人对javascript有误解， javascript ? 弱类型语言 写一些网页特效就差不多了 , 我认为他们没有真的去深入学习它,只有真真懂了它，才能更好去玩它，即使伪面向对象, 也能写出平时玩过的各种小游戏 ， 下面贴出自己接触javascript初期自己所理解的javascript面向对象思想的贪吃蛇游戏源码。

//  页面加载完毕运行游戏
window.onload = function(){
	GameControl.init();
};

//  游戏基本配置参数
var GameConfiguration = {
};

//  游戏控制器
var GameControl = {
	init : function(){  //游戏初始化
		GameConfiguration = {
			GameStart : false,  //  游戏是否已经开始
			width : 500,  //  游戏区域总宽度
			height : 500,  //  游戏区域总高度
			time :null,  //  蛇自动行走计时器
			snakelength : null,//  蛇当前长度
			frequency : 1,  //  控制点击蛇转换方向频率
			speed : 1000,  //  蛇每移动的时间
			newcol : null,  //  新生成方块的列
			newrow : null,  //  新生成方块的行
			NewRandowSqure : null,  //  新随机生成的方块
			NewMap : null,  //  地图类
			NewSnake : null,  //  蛇类
			score : 0,  //  分数
			addspeed : null  //  自动增加速度
		}
		
		
		//  实例化地图类并绘画出来
		GameConfiguration.NewMap = new map(GameConfiguration.width,GameConfiguration.height);
		GameConfiguration.NewMap.draw();
		
		//  实例化蛇并绘画出来
		GameConfiguration.NewSnake = new snake();
		GameConfiguration.NewSnake.draw();
		
		//  监听键盘事件
		document.onkeydown = function(e){
			//  蛇移动监听事件
			GameConfiguration.NewSnake.listenkeyboard(e.keyCode);
		}
		
		//  随机生成一个方块,并且不能与当前蛇身体各方块坐标重合
		setColAndRow(GameConfiguration.NewSnake);
		GameConfiguration.NewRandowSqure = new randowSqure();
		GameConfiguration.NewRandowSqure.draw();		
	},
	gameover : function(){
		clearInterval(GameConfiguration.time);
		clearInterval(GameConfiguration.addspeed);
		document.onkeydown =  null;
		GameConfiguration.NewSnake.destory();
		GameConfiguration.NewMap.destory();
		this.init();
	}
}

//  地图类
var map = function(width,height){
	this.width = width;
	this.height = height;
	this.ele = null;
	this.draw = function(){
		if(this.ele == null){
			this.ele = document.createElement('div');
			this.ele.id = 'main';
			this.ele.setAttribute('style','position: relative;margin:auto;overflow: hidden;');
			this.ele.style.width = this.width +'px';
			this.ele.style.height = this.height +'px';
			document.body.appendChild(this.ele);
			for(var i = 0;i<400;i++){
				var e = document.createElement('div');
				e.style.width = (this.width/20-2) +'px';
			    e.style.height = (this.height/20-2) +'px';
			    e.style.border = '1px solid #ccc';
			    e.style.float = 'left';
			    this.ele.appendChild(e);
			}
		}
	};
	this.destory = function(){
		document.body.removeChild(this.ele);
	};
}

//  方块类
var squre = function(width,height,state,col,row,bgc){  // col 横坐标   row 纵坐标
	this.width = width;
	this.height = height;
	this.col = col;
	this.row = row;
	this.ele = null;
	this.bgc = bgc;
	this.state = state ;  //  方块当前状态  是否未被吃,成为新的蛇的头部,或者是蛇的身体
	this.draw = function(){
		if(this.ele == null){
			this.ele = document.createElement('div');
			this.ele.setAttribute('style','position: absolute;margin:auto;overflow: hidden;')
			this.ele.style.width = this.width-2 +'px';
			this.ele.style.height = this.height-2 +'px';
			this.ele.style.border = '1px solid #fff';
			if(document.getElementById('main')){
				document.getElementById('main').appendChild(this.ele);
			}
		}
		this.ele.style.backgroundColor = this.bgc;
		this.ele.style.left = this.col*this.width +'px';
		this.ele.style.top = this.row*this.height +'px';
	}
}

//  创建一个随机的方块,并且不能与当前蛇身体每个块坐标相同函数
    function setColAndRow(e){
    	GameConfiguration.newcol = Math.floor(Math.random()*20);
    	GameConfiguration.newrow = Math.floor(Math.random()*20);
    	for(var i=0;i<e.body.length;i++){
    		if(e.body[i].col==GameConfiguration.newcol&&e.body[i].row==GameConfiguration.newrow){
    			setTimeout(function(){
    				setColAndRow(e);
    			});
    			break;
    			return false;
    		}
    	}
    }

//  随机出现的方块类
var randowSqure = function(e){
	squre.call(this,GameConfiguration.width/20,GameConfiguration.height/20,'food',GameConfiguration.newcol,GameConfiguration.newrow,'green');	
}

//  蛇类
var snake = function(){
	var t = this;
	this.body = null;
	this.draw = function(){
		if(this.body == null){
			this.body = [];
			for(var i = 0;i<3;i++){
				if(i==0){
				  var NewSqure = new squre(GameConfiguration.width/20,GameConfiguration.height/20,null,10+i,10,'deepskyblue');
				  NewSqure.draw();
				}
				else{
				var NewSqure = new squre(GameConfiguration.width/20,GameConfiguration.height/20,null,10+i,10,'yellow');
				NewSqure.draw();
				}
				this.body.push(NewSqure);
			}
		}
	};
	this.eatfood = function(){
		if(this.body[0].col == GameConfiguration.NewRandowSqure.col&&this.body[0].row == GameConfiguration.NewRandowSqure.row){
			if(GameConfiguration.NewRandowSqure){
				GameConfiguration.score ++;
				GameConfiguration.NewRandowSqure.bgc = 'yellow';
				this.body.push(GameConfiguration.NewRandowSqure);
				setColAndRow(GameConfiguration.NewSnake);
				GameConfiguration.NewRandowSqure = new randowSqure();
				GameConfiguration.NewRandowSqure.draw();
			}
		}
	};
	this.hitSelf = function(){
		for(var i=1;i<this.body.length;i++){
    		if(this.body[i].col==this.body[0].col&&this.body[i].row==this.body[0].row){
    			alert('咬到自己了!分数:'+GameConfiguration.score*100);
    			GameControl.gameover();
    		}
    	}
		if(this.body[0].col<0||this.body[0].col>19||this.body[0].row<0||this.body[0].row>19){
			alert('撞墙了！分数:'+GameConfiguration.score*100);
			GameControl.gameover();
		}
	};
	this.autorunning = function(){
		if(t.direction !=null){
			if(GameConfiguration.frequency){
				switch(t.direction){
					case 1 : t.moveUp();  //  上
					break;
					case 2 : t.moveDown();  //  下
					break;
					case 3 : t.moveLeft();  //  左
					break;
					case 4 : t.moveRight();  //  右
					break;
		        }
				t.hitSelf();
				t.eatfood();
				GameConfiguration.frequency = 0;
				setTimeout(function(){
				GameConfiguration.frequency = 1;	
				},GameConfiguration.speed);
			}
			if(GameConfiguration.time){
				clearInterval(GameConfiguration.time);
			}
			GameConfiguration.time = setInterval(function(){
				switch(t.direction){
					case 1 : t.moveUp();  //  上
					break;
					case 2 : t.moveDown();  //  下
					break;
					case 3 : t.moveLeft();  //  左
					break;
					case 4 : t.moveRight();  //  右
					break;
		       };
		       t.hitSelf();
		       t.eatfood();
			},GameConfiguration.speed);
		}
	}
	this.moveUp = function(){
		if(this.body != null){
			GameConfiguration.snakelength = this.body.length;
				for(var i = GameConfiguration.snakelength-1;i > 0;i--){
				t.body[i].col = t.body[i-1].col;
				t.body[i].row = t.body[i-1].row;
				t.body[i].draw();
			   }
			this.body[0].row -= 1;
			this.body[0].draw();	
		}
	};
	this.moveDown = function(){
		if(this.body != null){
			GameConfiguration.snakelength = this.body.length;
				for(var i = GameConfiguration.snakelength-1;i > 0;i--){
				t.body[i].col = t.body[i-1].col;
				t.body[i].row = t.body[i-1].row;
				t.body[i].draw();
			   }
			this.body[0].row += 1;
			this.body[0].draw();	
		}
	};
	this.moveLeft = function(){
		if(this.body != null){
			GameConfiguration.snakelength = this.body.length;
				for(var i = GameConfiguration.snakelength-1;i > 0;i--){
				t.body[i].col = t.body[i-1].col;
				t.body[i].row = t.body[i-1].row;
				t.body[i].draw();
			   }
			this.body[0].col -= 1;
			this.body[0].draw();	
		}
	};
	this.moveRight = function(){
		if(this.body != null){
			GameConfiguration.snakelength = this.body.length;
				for(var i = GameConfiguration.snakelength-1;i > 0;i--){
				t.body[i].col = t.body[i-1].col;
				t.body[i].row = t.body[i-1].row;
				t.body[i].draw();
			   }
			this.body[0].col += 1;
			this.body[0].draw();	
		}
	};
	this.direction = 3;
	this.listenkeyboard = function(eve){
		if(!GameConfiguration.GameStart) {
		GameConfiguration.GameStart = true;
		GameConfiguration.addspeed = setInterval(function(){
			if(GameConfiguration.speed == 100){
				clearInterval(GameConfiguration.addspeed);
			}
			else{
				GameConfiguration.speed -= 100;
			}
		},5000);
		}
		switch(eve){
			case 87 :if(this.direction ==2) return false; this.direction = 1;  //  上
			break;
			case 83 :if(this.direction ==1) return false; this.direction = 2;  //  下
			break;
			case 65 :if(this.direction ==4) return false; this.direction = 3;  //  左
			break;
			case 68 :if(this.direction ==3) return false; this.direction = 4;  //  右
			break;
		}
		this.autorunning();
	};
	this.destory = function(){
		for(var i=0;i<this.body.length;i++){
			this.body[i].ele.remove();
		}
	};
}

说到这里javascript还是很强大吧，毕竟是我们前端人员的利器 ,用处可不小 ！后续我还写了 超级玛丽，坦克打站，飞机大战 ，网页三国杀 ，以及原创的一些 游戏 就不贴一一出来了 到后来h5游戏的兴起， 虽然没往这方面发展了 ，但是对此感兴趣的javascript兴趣者可以去阔步前进！

ps ，贴出的图片都是微博号啥都偶然下载他人的 懒得打码了 - -！

转载于:https://my.oschina.net/u/3320489/blog/856627