其实计算机系的童鞋都会学习到各种编程语言从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 ,贴出的图片都是微博号啥都偶然下载他人的 懒得打码了 - -!