JS实现贪吃蛇

javascript实现贪吃蛇

新学的用面向对象做一个贪吃蛇小游戏，和大家分享一下！
贪吃蛇总体分为三个部分：地图、食物、蛇

设置样式的函数

// 设置样式
function setStyle(ele,obj) {
   
    for(var attr in obj){
   
        ele.style[attr] = obj[attr];
    }
}

我先创建了一个设置样式的函数，方便之后调用。

地图

// 创建地图
function Map() {
    
    this.map = document.createElement("div");
    setStyle(this.map,{
            //调用setStyle给this.map设置样式
        width:"400px",
        height:"400px",
        background:"#abcdef",
        border:"3px solid #ccc",
        position:"relative",
    });
    document.body.appendChild(this.map);    //把this.map插入body
}
var map = new Map();

1. 创建一个div标签
2. 调用setStyle函数设置样式
   1.添加相对定位
3. 把创建的map插入body中

获取随机数

// 获取随机数
function getRandom(a,b) {
   
    var max = Math.max(a,b);    //a,b中大的值赋给max
    var min = Math.min(a,b);    //a,b中小的值赋给min
    //(（随机数 *（max-min）/10）取整)*10 + min ，并且把值返回函数  这样随机数会是10的倍数
    return parseInt((Math.random()*(max-min))/10)*10+min;
}

创建了一个获取随机数的函数，方便“食物”随机出现。

食物

// 创建食物
function Food(){
   
    this.food = document.createElement("span");
    setStyle(this.food,{
           //调用setStyle给this.food设置样式
        width:"10px",
        height:"10px",
        background:"red",
        position:"absolute",
        left:getRandom(0,map.map.clientWidth-10)+"px",      
        top:getRandom(0,map.map.clientHeight-10)+"px",
    });
    map.map.appendChild(this.food);         //把this.food插入map
}
var food = new Food();

1. 创建一个span标签
2. 调用setStyle函数设置样式
   1.添加j绝对定位
   2.left和top的值，就调用getRandom函数创建随机值
3. 把创建的span插入map中

蛇

// 创建蛇
function Snake(){
   
    this.body = [       //定义蛇的身体
        {
   
            x:20,       //蛇头
            y:0,
        },
        {
   
            x:10,       //蛇身   第一节
            y:0,
        },
        {
   
            x:0,        //蛇身   第二节
            y:0,
        },
    ];
    this.direction = "right";       //蛇默认移动的方向
    this.timer = null;              //定时器
    this.flag = true;
    this.score = 0;                 //分数
    document.onkeypress=e=>{
           //监听键盘事件，敲击键盘改变方向
        var e = e || window.event;
        var keycode = e.keyCode || e.which;
        switch(keycode){
   
            case 119:   //"w键"
                this.direction = "up";
            break;
            case 115:   //"s键"
                this.direction = "down";
            break;
            case 97:   //"a键"
                this.direction = "left";
            break;
            case 100:   //"d键"
                this.direction = "right";
            break;
        }
    }
    this.Show();    //让蛇身显示
    // this.timer = setInterval(()=> {  //设置定时器
    //     this.Die();     //死亡
    //     if(this.flag){
   
    //         this.Move();    //让蛇移动
    //         this.Eat();     //吃食物
    //     }
    // },200);             //200毫秒执行一次
}
//死亡
Snake.prototype.Die = function(){
   
    // 撞墙
    if(this.body[0].x