码迷,mamicode.com
首页 > Web开发 > 详细

js制作贪吃蛇小游戏

时间:2019-05-31 00:55:51      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:oct   pre   get   range   round   position   node   char   doc   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map{
            width: 800px;
            height: 800px;
            background-color: black;
            position: relative;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    ((function(){
        function Food(width,height,color,x,y){
            this.width = width || 20;
            this.height = height || 20;
            this.color = color || "blue";
            this.x = x || 0;
            this.y = y || 0;
            this.element = document.createElement("div")
        }
        Food.prototype.init = function(map){

            var div = this.element;
            div.style.width = this.width +"px";
            div.style.height = this.height+"px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            //设置随机坐标
            this.x = Math.floor(Math.random()*(map.offsetWidth/this.width))*this.width;
            console.log(this);
            this.y = Math.floor(Math.random()*(map.offsetHeight/this.height))*this.height;
            div.style.left = this.x+"px";
            div.style.top = this.y +"px";
            map.appendChild(div);

        }
        window.Food = Food;
    })());

    //小蛇的构造函数
    ((function(){
        var elements = [];//专门存放蛇的部位
        function Snake(width,height,direction){
            this.width = width || 20;
            this.height = height || 20;
            //方向
            this.direction = direction || "right";
            //小蛇的身体刻度
            this.body = [
                {x:3,y:1,color:"red"},//小蛇的头部
                {x:2,y:1,color :"orange"},//身体
                {x:1,y:1,color:"orange"}//身体
            ]
        }
        //2.在原型对象上初始化小蛇
        Snake.prototype.init = function(map){
            //先删再创建
            remove();
            //2.遍历的创建div
            for(var i = 0; i < this.body.length;i++){
                //每一个部位的刻度
                var obj = this.body[i]
                //创建div并且添加样式
                var div = document.createElement("div");
                div.style.width = this.width+"px";
                div.style.height = this.height+"px";
                div.style.position = "absolute";
                div.style.backgroundColor = obj.color
                //设置坐标
                div.style.left = obj.x*this.width+"px";
                div.style.top = obj.y*this.height+"px";
                map.appendChild(div);
                //把蛇添加到数组里--->目的:为了删除
                elements.push(div);
            }
        }
        //3.添加方法---移动小蛇
        Snake.prototype.move = function(food,map){
            //3.1.改变小蛇身体的坐标,因为小蛇的头部去判断方向
            for(var i = this.body.length-1; i > 0;i--){
                //当i=2;让第三块的x坐标等于第二块的x坐标
                this.body[i].x = this.body[i-1].x;
                this.body[i].y = this.body[i-1].y;
            }
            //3.2判断小蛇头部的坐标,分析:小蛇往上走,y轴减一
            switch (this.direction){
                case"right":
                    this.body[0].x++;//小蛇的头部
                    break;
                case"left":
                    this.body[0].x--;
                    break;
                case"top":
                    this.body[0].y--;
                    break;
                case"bottom":
                    this.body[0].y++;
            }
            //3.3最后,判断小蛇是否吃到食物-->即判断头部坐标和食物的坐标一致
            //头部的坐标
            var headX = this.body[0].x*this.width;
            var headY = this.body[0].y*this.height;
            //食物的坐标
            var foodX = food.x;
            var foodY = food.y;
            if(headX == foodX && headY == foodY){
                //追加一个蛇的身体到body的最后
                var last =this.body[this.body.length-1];//复制小蛇的尾巴
                this.body.push({
                    x:last.x,
                    y:last.y,
                    color:last.color
                })
                //食物吃完了要刷新位置
                food.init(map)
            }
        }
        //4.封装删除小蛇的函数
        function remove(){
            //先删尾,尾巴现出来
            for(var i = elements.length-1;i >=0;i--){
                //数组里的每一个部位
                var ele = elements[i]
                //在map中删除div
                ele.parentNode.removeChild(ele);
                //删数组中的div
                elements.splice(i,1);
            }
        }
        window.Snake = Snake;
    })());

    //游戏对象
    ((function () {
        var that;
        //1.游戏的构造函数
        function Game(map){
            this.food = new Food();//食物对象
            this.snake = new Snake();//小蛇对象
            this.map = map;
            that = this;
        }
        //2.初始化游戏
        Game.prototype.init = function(){
            this.food.init(this.map);
            this.snake.init(this.map);
            //调用
            this.runSnake(this.map)
            //调用按键方法
            this.bindKey();
        }
        //3.添加方法使小蛇自动跑起来
        Game.prototype.runSnake = function(map){
            var timeId = setInterval(function(){
               that.snake.move(that.food,that.map);
               that.snake.init(map);
               //判断横纵坐标的最大最小值
                var maxX = map.offsetWidth / that.snake.width;
                var maxY = map.offsetHeight /that.snake.height;
                //蛇头的坐标
                var headX = that.snake.body[0].x;
                var headY = that.snake.body[0].y;
                if(headX < 0 || headX >= maxX){
                    clearInterval(timeId);
                    alert("太菜了")
                }
                if(headY < 0 || headY >= maxY){
                    clearInterval(timeId);
                    alert("太菜了")
                }
            },50)
        }
        //4.设置用户的按键,来改变小蛇移动的方向
        Game.prototype.bindKey = function(){
            document.addEventListener("keydown",function(e){
                switch (e.keyCode){
                    case 37:
                        that.snake.direction = "left";
                        break;
                    case 38:
                        that.snake.direction = "top";
                        break;
                    case 39:
                        that.snake.direction = "right";
                        break;
                    case 40:
                        that.snake.direction = "bottom";
                        break;
                }
            })
        }
        window.Game = Game;
    })());
    var game = new Game(document.getElementById("map"));
    game.init();
    // var food =  new Food();
    // var map = document.getElementById("map")
    // food.init(map);
    // var snake = new Snake();
    // snake.init(map);
    // snake.move();
   // setInterval(function(){
   //     snake.init(map);
   //     snake.move();
   // },200)


</script>

 

js制作贪吃蛇小游戏

标签:oct   pre   get   range   round   position   node   char   doc   

原文地址:https://www.cnblogs.com/Ironman725/p/10952880.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!