最近一直在學(xué)習(xí)面向?qū)ο缶幊?，其中最?jīng)典的貪吃蛇算一個(gè)了吧。。結(jié)合最簡單的案例，熟練掌握面向?qū)ο缶幊痰睦碚?，其中?nèi)在的原理。大致分為：
- OOA 面向?qū)ο蠓治?/li>
- OOD 面向?qū)ο笤O(shè)計(jì)
- OOP 面向?qū)ο缶幊?br>
其中最重要的是OOA面向?qū)ο蠓治?。如果說分析到位，后面的兩個(gè)部分游刃有余。OOA其中的道理和我們生活中純在同樣的道理。大事化小，把一件事件分成多個(gè)部分，再由多個(gè)這些部分在細(xì)分下去，然后再結(jié)合OOD原理進(jìn)行設(shè)計(jì)框架，最后在框架內(nèi)進(jìn)行更加細(xì)致地部位。
在熟練這些部分，再難的問題，也會解決。加油?。』镉?jì)??！
下面是關(guān)于貪吃蛇的代碼部分。
<!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>
計(jì)數(shù)<span></span>
</body>
<script>
//OOA
//地圖map
//創(chuàng)建:width height margin position：relative 背景色
//食物food
//創(chuàng)建：width height margin position：relative 背景色
//移動：怎么移動 如何設(shè)置
//蛇 （蛇節(jié)，
//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(){
//刷新頁面時(shí)，自動移動位置 方向?yàn)?右
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>
