当前位置:博客首页>>javacript >> 阅读正文

js版贪吃蛇

作者: 郑晓 分类: javacript 发布于: 2016-10-27 19:00 浏览(2,474) 评论(10)


参考网上某代码写的js版贪吃蛇,贪吃蛇整个过程分为三部分,地图的生成、食物的随机显示,蛇的显示和移动。运行时按键盘上下左右进行方向控制,蛇头撞到边界或自己时游戏结束。目前已知的问题为:生成食物时未排除生成到蛇身上的可能。

(function() {
    var t = null;
    var map = null;
    var food={x:0,y:0,div:null};
    var snake={
        //初始化时的蛇身部分
        snakeBody : [[1,2,null], [2,2,null], [3,2,null], [4,2,null]],
        direct : "right"
    };
    var config = {
        width:200,
        height:200,
        px:10,  //单位块大小
        mapColor:"#dddddd",
        foodColor:"#555555",
        snakeColor:"#666666",
        position:'absolute',
        speed:100
    };
    var showMap = function() {
        var div = document.createElement("div");
        div.style.width = config.width + "px";
        div.style.height= config.height + "px";
        div.style.backgroundColor = config.mapColor;
        div.style.position = config.position;
        document.getElementsByTagName("body")[0].appendChild(div);
        map = div;
    };
    var showFood = function() {
        var x = Math.floor(Math.random()*config.width/config.px);
        var y = Math.floor(Math.random()*config.height/config.px);
        food.x = x;
        food.y = y;
        if(food.div == null) {
            var div = document.createElement("div");
            div.style.width = config.px + "px";
            div.style.height= config.px + "px";
            div.style.backgroundColor = config.foodColor;
            div.style.position = config.position;
            div.style.left = x * config.px + "px";
            div.style.top = y * config.px + "px";
            map.appendChild(div);
            food.div = div;
        } else {
            food.div.style.left = x * config.px + "px";
            food.div.style.top = y * config.px + "px";
        }
    };
    var showSnake = function() {
        for(var i=0;i<snake.snakeBody.length; i++) {
            if(snake.snakeBody[i][2] == null) {
                var div = document.createElement("div");
                div.style.width = config.px + "px";
                div.style.height= config.px  + "px";
                div.style.backgroundColor = config.snakeColor;
                div.style.position = config.position;
                div.style.left = snake.snakeBody[i][0] * config.px + "px";
                div.style.top = snake.snakeBody[i][1] * config.px + "px";
                snake.snakeBody[i][2] = div;
                map.appendChild(div);
            } else {
                snake.snakeBody[i][2].style.left = snake.snakeBody[i][0] * config.px + "px";
                snake.snakeBody[i][2].style.top = snake.snakeBody[i][1] * config.px + "px";
            }
        }
    };
    var moveSnake = function() {
        var snakeLength = snake.snakeBody.length;
        for(var i=0; i<snakeLength-1; i++) {
            snake.snakeBody[i][0] = snake.snakeBody[i+1][0];
            snake.snakeBody[i][1] = snake.snakeBody[i+1][1];
        }
        //头部向前移动一步(区分方向)
        if(snake.direct == "right") {
            snake.snakeBody[snakeLength - 1][0] += 1;
        } else if(snake.direct == "left") {
            snake.snakeBody[snakeLength - 1][0] -= 1;
        } else if(snake.direct == "up") {
            snake.snakeBody[snakeLength - 1][1] -= 1;
        } else if(snake.direct == "down") {
            snake.snakeBody[snakeLength - 1][1] += 1;
        }
        for(var i=0; i<snakeLength-1; i++) {
            if(snake.snakeBody[i][0] == snake.snakeBody[snakeLength - 1][0] && snake.snakeBody[i][1] == snake.snakeBody[snakeLength - 1][1]) {
                alert("game over");
                clearInterval(t);
                return;
            }
        }
        //吃到食物
        if(snake.snakeBody[snakeLength - 1][0] == food.x && snake.snakeBody[snakeLength - 1][1] == food.y) {
            //蛇长加1
            snake.snakeBody.push([food.x, food.y, null])
            //刷新食物
            showFood();
        }
        if(snake.snakeBody[snakeLength-1][0]>=config.width/config.px || snake.snakeBody[snakeLength-1][0]<0 ||
            snake.snakeBody[snakeLength-1][1]>=config.height/config.px || snake.snakeBody[snakeLength-1][1] <0) {
            alert("game over");
            clearInterval(t);
            return;
        }
        showSnake();
    };
    var startGame = function() {
        showMap();
        showFood();
        showSnake();
        t = setInterval(function(){moveSnake()}, config.speed);
        window.onkeydown = function() {
            if(37 == event.keyCode) {
                snake.direct = "left";
            } else if(38 == event.keyCode) {
                snake.direct = "up";
            } else if(39 == event.keyCode) {
                snake.direct = "right";
            } else if(40 == event.keyCode) {
                snake.direct = "down";
            }
        }
    };
    startGame()
})()

运行截图:
javascript-snake

↓↓↓微信扫码请我吃辣条↓↓↓

本文出自 郑晓个人博客,转载时请注明出处及相应链接。

本文永久链接: https://www.zh30.com/js-snake.html

js版贪吃蛇:目前有10 条留言

用户评论头像 嚼蜡发表于 2017年11月09日 20:51[回复]

有点意思,我刚好路过

用户评论头像 zhaib发表于 2017年11月06日 16:02[回复]

挺好的

用户评论头像 有见识的麻花发表于 2017年05月10日 22:40[回复]

厉害了!

用户评论头像 严谨的帅哥发表于 2016年12月17日 15:32[回复]

Nightsong.cc 晚歌的个人博客

用户评论头像 三五营销发表于 2016年12月15日 15:42[回复]

挺好的,祝你快乐

用户评论头像 fanniebaby发表于 2016年11月09日 22:41[回复]

这个不错。

用户评论头像 华夏九州套图发表于 2016年11月03日 14:51[回复]

我只是来随便看看!

    用户评论头像 殷勤的锅饼发表于 2016年11月12日 11:00[回复]

    第三方

用户评论头像 一生一世套图发表于 2016年11月02日 10:31[回复]

三天不来手痒痒!

用户评论头像 增达任务网发表于 2016年10月28日 14:03[回复]

相当不错,自愧不如!