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

js版贪吃蛇

作者: 郑晓 分类: javacript 发布于: 2016-10-27 19:00 浏览(1,594) 评论(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年05月10日 下午 10:40[回复]

厉害了!

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

Nightsong.cc 晚歌的个人博客

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

挺好的,祝你快乐

用户评论头像 增达网发表于 2016年11月30日 下午 02:49[回复]

今天办公室里几个男女在讨论用避孕套的好处和坏处,男方坚决抵制避孕套,女方大力支持使用避孕套,双方各持一词不分伯仲,这时我们办公室一个大姐问我平日用套套吗?我说:我……我…我都是包皮打个结。当时讨论就结束了。

用户评论头像 增达网发表于 2016年11月18日 上午 08:07[回复]

你的博客就像冬天里的一把火!

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

这个不错。

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

我只是来随便看看!

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

    第三方

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

三天不来手痒痒!

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

相当不错,自愧不如!

发表评论

由于某些原因,您暂时可能接收不到我回复后的邮件通知,抱歉。-- 2017-05-24

如需我主动联系您,可以留言注明。

change vcode