贪吃蛇
2018-10-25 本文已影响0人
阿布朗迪
最近一直在学习面向对象编程，其中最经典的贪吃蛇算一个了吧。。结合最简单的案例，熟练掌握面向对象编程的理论，其中内在的原理。大致分为：
- OOA 面向对象分析
- OOD 面向对象设计
- OOP 面向对象编程
其中最重要的是OOA面向对象分析。如果说分析到位，后面的两个部分游刃有余。OOA其中的道理和我们生活中纯在同样的道理。大事化小，把一件事件分成多个部分，再由多个这些部分在细分下去，然后再结合OOD原理进行设计框架，最后在框架内进行更加细致地部位。
在熟练这些部分，再难的问题，也会解决。加油！！伙计！！
下面是关于贪吃蛇的代码部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>贪吃蛇</title>
</head>
<body>
计数<span></span>
</body>
<script>
//OOA
//地图map
//创建:width height margin position：relative 背景色
//食物food
//创建：width height margin position：relative 背景色
//移动：怎么移动 如何设置
//蛇 （蛇节，
//OOD
function Map(){
this.w = 800;
this.h = 600;
this.color = "#f2f2f2"
this.createDiv();
}
Map.prototype.createDiv = function(){
this.m = document.createElement('div');
this.m.style.width = this.w + 'px';
this.m.style.height = this.h + 'px';
this.m.style.background = this.color;;
this.m.style.margin = "10px auto";
this.m.style.position = "relative";
document.body.appendChild( this.m );
}
function Food(){
this.w = 20;
this.h = 20;
this.color = "blue";
this.x = 0;
this.y = 0;
this.createDiv()
}
Food.prototype.createDiv = function(){
if(!this.f){
this.f = document.createElement('div');
this.f.style.width = this.w + 'px';
this.f.style.height = this.h + 'px';
this.f.style.background = this.color;
this.f.style.position = "absolute";
}
// this.move()
// Food.prototype.move = function(){
this.x = random(0,39);
this.y = random(0,29);
this.f.style.left = this.x * this.w + 'px';
this.f.style.top = this.y * this.h + 'px';
// }
map.m.appendChild(this.f);
}
function Snake(){
this.w = 20;
this.h = 20;
this.body = [{x:6,y:5,c:"green"},{x:5,y:5,c:"yellow"},{x:4,y:5,c:"red"}];
this.direction = "right";
this.createDiv();
this.g = 0;
}
Snake.prototype.createDiv = function(){
for( var i = 0;i < this.body.length;i++){
if(!this.body[i].s){
this.body[i].s = document.createElement('div');
this.body[i].s.style.width = this.w + 'px';
this.body[i].s.style.height = this.h + 'px';
this.body[i].s.style.position = "absolute";
this.body[i].s.style.background = this.body[i].c;
map.m.appendChild(this.body[i].s);
}
this.body[i].s.style.left = this.body[i].x * this.w +'px';
this.body[i].s.style.top = this.body[i].y * this.h + 'px';
}
var that = this;
setTimeout( function(){
that.move()
},100)
}
Snake.prototype.move = function(){
//刷新页面时，自动移动位置 方向为 右
for(var i = this.body.length-1;i >0;i--){
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
// this.body[0].x +=1;
switch( this.direction ){
case "left":
this.body[0].x -= 1;break;
case "top":
this.body[0].y -= 1;break;
case "right":
this.body[0].x += 1;break;
case "bottom":
this.body[0].y += 1;break;
}
if(this.body[0].x == food.x && this.body[0].y == food.y){
food.createDiv();
var lastX = this.body[this.body.length-1].x;
var lastY = this.body[this.body.length-1].y;
this.body.push({
x:lastX,
y:lastY,
c:"pink"
})
var count = document.querySelector('span');
this.g += 10
// console.log( this.g)
count.innerHTML = this.g;
}
//边界限定
if(this.body[0].x < 0 || this.body[0].y <0 || this.body[0].x > 39 || this.body[0].y > 29){
alert("死亡");
return;
}
//不能吃到自己
for( var i = 1;i < this.body.length;i++){
if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
alert("迟到自己了");
return;
}
}
this.createDiv()
}
Snake.prototype.direct = function( value ){
switch(value){
case 37:this.direction = "left";break;
case 38:this.direction = "top";break;
case 39:this.direction = "right";break;
case 40:this.direction = "bottom";break;
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b)
}
document.onkeydown = function(eve){
var e = eve || window.event;
var key = e.keyCode || e.which;
snake.direct( key )
}
var map = new Map();
var food = new Food()
var snake = new Snake()
</script>
</html>
