JS之贪吃蛇游戏

贪吃蛇游戏实现

最新推荐文章于 2022-12-08 21:55:35 发布

今天吃洋芋呀

最新推荐文章于 2022-12-08 21:55:35 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

文章标签： web前端 JS 贪吃蛇

本文链接：https://blog.youkuaiyun.com/qq_39248504/article/details/97884269

贪吃蛇思路：

首先得有一个地图
一个食物对象
一个蛇对象
游戏

地图样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .map {
      width: 800px;
      height: 600px;
      background-color: #CCC;
      position: relative;
    }
  </style>
</head>
<body>
<!--画出地图,设置样式-->
<div class="map"></div>
<script src="food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
  //初始化游戏对象
  var gm = new Game(document.querySelector(".map"));
  //初始化游戏---开始游戏
  gm.init();
</script>
</body>
</html>

食物对象：

(function(){
    var elements=[];
    function Food(width,height,color,x,y){
        this.width=width||20;
        this.height=height||20;
        this.color=color||"red";
        this.x=x||0;
        this.y=y||0;
    }


    Food.prototype.init=function(map){
        remove();
        var div=document.createElement("div");
        map.appendChild(div);
        // console.log("cc");
       
        div.style.width=this.width+"px";
        div.style.height=this.height+"px";
        div.style.backgroundColor=this.color;      
        div.style.position="absolute";
        // console.log("xx");
        this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
        this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
        console.log("hh");
        div.style.left=this.x+"px";
        div.style.top=this.y+"px";
        elements.push(div);

    };
    function remove(){
        for(var i=0;i<elements.length;i++){
            var ele=elements[i];
            ele.parentNode.removeChild(ele);
            elements.splice(i,1);
        }
    }
    window.Food=Food;
}());

蛇对象：


(function(){
    var elements=[];
    function Snake(width,height,direction){
        this.width=width||20;
        this.height=height||20;
        this.body=[
        {x:3,y:2,color:"red"},
        {x:2,y:2,color:"orange"},
        {x:1,y:2,color:"orange"}
        ];
        this.direction=direction||"right";
    }
Snake.prototype.init=function(map){
    remove();
    for(var i=0;i<this.body.length;i++){
        var obj=this.body[i];
        var div=document.createElement("div");
        map.appendChild(div);
         div.style.position="absolute";
        div.style.width=this.width+"px";
        div.style.height=this.height+"px";
       
        div.style.left=obj.x*this.width+"px";
        div.style.top=obj.y*this.height+"px";
        div.style.backgroundColor=obj.color;
        elements.push(div);
    }
};


//为原型添加方法---小蛇动起来
Snake.prototype.move = function (food, map) {
    //改变小蛇的身体的坐标位置
    var i = this.body.length - 1;//2
    for (; i > 0; i--) {
        this.body[i].x = this.body[i - 1].x;
        this.body[i].y = this.body[i - 1].y;
    }
    //判断方向---改变小蛇的头的坐标位置
    switch (this.direction) {
        case "right":
            this.body[0].x += 1;
            break;
        case "left":
            this.body[0].x -= 1;
            break;
        case "top":
            this.body[0].y -= 1;
            break;
        case "bottom":
            this.body[0].y += 1;
            break;
    }

//判断有没有吃到食物
     //小蛇的头的坐标和食物的坐标一致
     var headX=this.body[0].x*this.width;
     var headY=this.body[0].y*this.height;
     //判断小蛇的头的坐标和食物的坐标是否相同
     if(headX==food.x&&headY==food.y){
         //获取小蛇的最后的尾巴
         var last=this.body[this.body.length-1];
         //把最后的蛇尾复制一个,重新的加入到小蛇的body中
         this.body.push({
             x:last.x,
             y:last.y,
             color:last.color
         });
         //把食物删除,重新初始化食物
         food.init(map);
     }
 }


//删除小蛇的私有的函数=============================================================================
     function remove() {
         //删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除div
         var i = elements.length - 1;
         for (; i >= 0; i--) {
             //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素
             var ele = elements[i];
             //从map地图上删除这个子元素div
             ele.parentNode.removeChild(ele);
             elements.splice(i, 1);
         }
     }

     //把Snake暴露给window,外部可以访问
     window.Snake = Snake;
 }());

游戏对象;

(function () {

    var that = null;//该变量的目的就是为了保存游戏Game的实例对象-------

    //游戏的构造函数
    function Game(map) {
        this.food = new Food();//食物对象
        this.snake = new Snake();//小蛇对象
        this.map = map;//地图
        that = this;//保存当前的实例对象到that变量中-----------------此时that就是this
    }

    //初始化游戏-----可以设置小蛇和食物显示出来
    Game.prototype.init = function () {
        //初始化游戏
        //食物初始化
        this.food.init(this.map);
        //小蛇初始化
        this.snake.init(this.map);
        //调用自动移动小蛇的方法========================||调用了小蛇自动移动的方法
        this.runSnake(this.food, this.map);
        //调用按键的方法
        this.bindKey();//========================================
    };

    //添加原型方法---设置小蛇可以自动的跑起来
    Game.prototype.runSnake = function (food, map) {

        //自动的去移动
        var timeId = setInterval(function () {
            //此时的this是window
            //移动小蛇
            this.snake.move(food, map);
            //初始化小蛇
            this.snake.init(map);
            //横坐标的最大值
            var maxX = map.offsetWidth / this.snake.width;
            //纵坐标的最大值
            var maxY = map.offsetHeight / this.snake.height;
            //小蛇的头的坐标
            var headX = this.snake.body[0].x;
            var headY = this.snake.body[0].y;
            //横坐标
            if (headX < 0 || headX >= maxX) {
                //撞墙了,停止定时器
                clearInterval(timeId);
                alert("游戏结束");
            }
            //纵坐标
            if (headY < 0 || headY >= maxY) {
                //撞墙了,停止定时器
                clearInterval(timeId);
                alert("游戏结束");
            }
        }.bind(that), 300);
    };

    //添加原型方法---设置用户按键,改变小蛇移动的方向
    Game.prototype.bindKey=function () {

        //获取用户的按键,改变小蛇的方向
        document.addEventListener("keydown",function (e) {
            //这里的this应该是触发keydown的事件的对象---document,
            //所以,这里的this就是document
            //获取按键的值
            switch (e.keyCode){
                case 37:this.snake.direction="left";break;
                case 38:this.snake.direction="top";break;
                case 39:this.snake.direction="right";break;
                case 40:this.snake.direction="bottom";break;
            }
        }.bind(that),false);
    };

    //把Game暴露给window,外部就可以访问Game对象了
    window.Game = Game;
}());

效果显示：
在这里插入图片描述