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

js版贪吃蛇

作者 郑晓 发布时间 2016-10-27 19:00 文章分类 javacript 文章评论 9条评论 阅读次数已被围观1,359次

参考网上某代码写的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


如果此文章对您有所帮助,希望能支持我一下~
  • ¥1.00 (支付宝/郑晓)
  • ¥1.00 (微信/zx)
  • 土豪无上限 (支付宝/郑晓)
  • 土豪无上限 (微信/zx)

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

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

    Nightsong.cc 晚歌的个人博客

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

    挺好的,祝你快乐

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

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

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

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

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

    这个不错。

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

    我只是来随便看看!

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

      第三方

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

    三天不来手痒痒!

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

    相当不错,自愧不如!

发表评论

change vcode看不清?点击换一张!