贪吃蛇

贪吃蛇效果：

键盘的w、s、a、d分别来控制蛇移动方向：上、下、左、右
js代码：

// 创建地图
var map = document.createElement('div')
// 设置样式
setStyle(map,{
    width:"800px",
    height:"500px",
    border:"3px solid #000",
    position:"relative",
    backgroundColor:"#eee"   
})
// 将地图放入body中
document.body.appendChild(map)
// 创建食物
var food = createFood()
function createFood(){
    var div = document.createElement('div')
    // 设置样式
    setStyle(div,{
        width:"10px",
        height:"10px",
        backgroundColor:"#0f0",
        position:"absolute",
        // 因为蛇是一次移动10px，所以left和top是随机的，但是必须保证是10的倍数
        left:parseInt(getRandom(map.clientWidth - 10)/10)*10 + 'px',
        top:parseInt(getRandom(map.clientHeight - 10)/10)*10 + 'px',
    })
    // 将食物放在地图中
    map.appendChild(div)
    return div
}
// 定义蛇的身体的坐标
var body = [
    {
        x:0,
        y:0
    },
    {
        x:10,
        y:0
    },
    {
        x:20,
        y:0
    },
]
// 根据蛇的身体坐标显示蛇的身体
show()
function show(){
    for(var i=0;i<body.length;i++){
        var div = document.createElement('div')
        setStyle(div,{
            width:"10px",
            height:"10px",
            backgroundColor:"blue",
            position:"absolute",
            left:body[i].x + 'px',
            top:body[i].y + 'px'
        })
        // 给蛇身体div设置类名
        div.className = 'snake';
        // 蛇头的特殊样式
        if(i === body.length-1){
            div.style.borderRadius = '50%';
            div.style.backgroundColor = 'red';
        }
        // 将蛇的身体放进地图中
        map.appendChild(div)
    }
}
// 定义蛇的默认移动方向
var direction = 'right';
// 设置键盘事件更改移动方向
document.onkeydown = function(){
    var e = window.event;
    // 通过键盘码获取到当前按下的键的字符
    var keycode = e.keyCode || e.which;
    var word = String.fromCharCode(keycode).toLowerCase()
    switch(word){
        case 'a':
            direction = 'left';
        break;
        case 'w':
            direction = 'up';
        break;
        case 'd':
            direction = 'right';
        break;
        case 's':
            direction = 'down';
        break;
    }
}
// 让蛇根据方向移动身体
var timerId = setInterval(function(){
    // 将之前的身体删除 - 创建新的身体
    var snakes = document.querySelectorAll('.snake');
    if(snakes.length){
        for(var i=0;i<snakes.length;i++){
            map.removeChild(snakes[i])
        }
    }
    // 修改身体坐标 - 除了蛇头的坐标外，其他身体的坐标是前一节身体的坐标
    for(var i=0;i<body.length-1;i++){
        body[i].x = body[i+1].x;
        body[i].y = body[i+1].y;
    }   
    // 根据移动方向修改蛇头的坐标
    switch(direction){
        case 'up':
            body[body.length-1].y -= 10
        break;
        case 'down':
            body[body.length-1].y += 10
        break;
        case 'left':
            body[body.length-1].x -= 10
        break;
        case 'right':
            body[body.length-1].x += 10
        break;
    }
    // 根据新的坐标重新显示身体
    show()
    // 移动过程判断是否吃到食物
    eat()
    // 移动过程判断是否死亡
    die()
},500)
// 蛇死亡
function die(){
    // 蛇头撞墙
    if(body[body.length-1].x<0 || body[body.length-1].x>map.clientWidth-10 || body[body.length-1].y<0 || body[body.length-1].y>map.clientHeight-10){
        alert('GAME OVER')
        // 清除定时器
        clearInterval(timerId)
    }
    // 蛇头撞自己身体
    for(var i=0;i<body.length-1;i++){
        if(body[i].x===body[body.length-1].x && body[i].y===body[body.length-1].y){    
            alert('GAME OVER')
            // 清除定时器
            clearInterval(timerId)
        }
    }
}
// 蛇吃到食物
function eat(){
    // 如果蛇头的坐标跟食物的坐标完全重叠就表示吃到了食物
    if(body[body.length-1].x === food.offsetLeft && body[body.length-1].y === food.offsetTop){
        // 删除食物
        map.removeChild(food)
        // 蛇的身体增加一节
        body.unshift({
            x:body[0].x,
            y:body[0].y
        })
        // 重新创建食物
        food = createFood()
    }
}
// 获取随机数的函数
function getRandom(a,b=0){
    var max = a;
    var min = b;
    if(a<b){
        max = b;
        min = a;
    }
    return Math.floor(Math.random() * (max - min)) + min;
}
// 设置样式的函数
function setStyle(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}