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

//  页面加载完毕运行游戏
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){

d72a
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();
}
};
}

另外需要超级玛丽，坦克打站，飞机大战, 别踩白块等源码的可以联系笔者, 都是在学校一时兴起写的一些小游戏