js实现贪吃蛇小游戏

最新推荐文章于 2024-05-23 22:21:26 发布

学前端真的泰裤辣！！！

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量216

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_64344470/article/details/130033687

版权

文章目录

一、body部分
二、食物部分
三、蛇部分
四、游戏的主体部分

一、body部分

    <style>
        #box{
            width: 800px;
            height: 600px;
            background-color: #999;
            position: relative;
        }
    </style>
</head>
<script src="./贪吃蛇js/食物.js"></script>
<script src="./贪吃蛇js/蛇.js"></script>
<script src="./贪吃蛇js/游戏.js"></script>

<body>
    <!-- 新建一个盒子用来做背景 -->
    <div id="box"></div>
</body>
<script>
    /* 
    食物对象：
        属性：宽，高，背景颜色，定位，左距离，上距离
        方法：食物的渲染方法（随机生成 ）
    
    */
    var map =document.getElementById('box')
    var game = new Game(new Food(20, 20, 'blue', 'absolute', 0, 0, []),
    new Snake(20, 20, 'absolute', 'right', []),
    map
  )
    game.renderGame()

二、食物部分

// 创建食物的构造函数
function Food(width, height, bgColor, position, left, top, foodArr) {
  this.width = width;
  this.height = height;
  this.bgColor = bgColor;
  this.position = position;
  this.left = left;
  this.top = top;
  this.foodArr =foodArr;
}
//在食物构造函数的原型中添加随机生成的方法
Food.prototype.renderFood = function () {
  //在地图中建立一个div
  var foodBox = map.appendChild(document.createElement("div"));
  // 给这个添加的div设置样式，设置的样式根据实例化
  foodBox.style.width = this.width + "px";
  foodBox.style.height = this.height + "px";
  foodBox.style.backgroundColor = this.bgColor;
  foodBox.style.position = this.position;

  //随机产生食物
  this.left =
    parseInt(Math.random() * (map.clientWidth / this.width)) * this.width;
  this.top =
    parseInt(Math.random() * (map.clientHeight / this.height)) * this.height;
  foodBox.style.left = this.left + "px";
  foodBox.style.top = this.top + "px";
  this.foodArr.push(foodBox);
};
Food.prototype.deleteFood = function () {
  for (var i = this.foodArr.length - 1; i >= 0; i--) {
    map.removeChild(this.foodArr[i]);
    this.foodArr.splice(i, 1);
  }
};

三、蛇部分

function Snake(width, height, position, direction, snakeArr) {
    this.width = width;
    this.height = height;
    // this.bgColor = bgColor;
    this.position = position;
    // this.left = left;
    // this.top = top;
    this.direction = direction;
    this.body = [
        // 蛇头
        {
            x: 2,
            y: 1,
            color: 'yellow'
        },
        // 蛇身
        {
            x: 1,
            y: 1,
            color: 'red'
        },
        // 蛇尾
        {
            x: 0,
            y: 1,
            color: 'red'
        }
    ]
    this.snakeArr = snakeArr
}
Snake.prototype.renderSnake = function () {
    for (var i = 0; i < this.body.length; i++) {
        var snakeBox = map.appendChild(document.createElement('div'))
        snakeBox.style.width = this.width + 'px';
        snakeBox.style.height = this.height + "px";
        snakeBox.style.position = this.position;
        snakeBox.style.left = this.body[i].x * this.width + 'px';
        snakeBox.style.top = this.body[i].y * this.height + 'px';
        snakeBox.style.backgroundColor = this.body[i].color;
        this.snakeArr.push(snakeBox)
    }
    console.log(this.snakeArr);
}
Snake.prototype.moveSnake = function (food) {
    console.log('蛇移动了');
    /*     this.body[0].x++
        this.body[1].x++
        this.body[2].x++ */
    // for (var i = 0; i < this.body.length; i++) {
    //     // this.body[i].x++

    // }
    for (var i = this.body.length - 1; i > 0; i--) {
        /* 
        i = 2  蛇尾   蛇身
        i = 1  蛇身   蛇头
        */
        this.body[i].x = this.body[i - 1].x
        this.body[i].y = this.body[i - 1].y
    }
    switch (this.direction) {
        case 'left':
            this.body[0].x--
            break;
        case 'right':
            this.body[0].x++
            break;
        case 'top':
            this.body[0].y--
            break;
        case 'bottom':
            this.body[0].y++
            break;
        default:
            break;
    }
    // 蛇吃食物  蛇尾变长  食物消失 重新渲染
    // 让蛇头的left和top 等于食物的left和top
    var snakeLeft = this.body[0].x * this.width
    var snakeTop = this.body[0].y * this.height
    console.log(food.left);
    if (food.left == snakeLeft && food.top == snakeTop) {
        console.log('重合了');
        this.body.push({
            x: this.body[this.body.length - 1].x,
            y: this.body[this.body.length - 1].y,
            color: this.body[this.body.length - 1].color
        })
        // 重新渲染
        this.renderSnake()
        // 食物消失
        food.deleteFood()
        // 重新渲染
        food.renderFood()
    }
}
// 蛇删除
Snake.prototype.deleteSnake = function () {
    // for (var i = 0; i < this.snakeArr.length; i++) {
    //     // pop()  shift()
    //     console.log(i); // 0 1
    //     this.snakeArr.splice(i, 1)
    // }
    for (var i = this.snakeArr.length - 1; i >= 0; i--) {
        // 删除DOM
        // 父元素.removeChild()
        map.removeChild(this.snakeArr[i])

        this.snakeArr.splice(i, 1)
    }
    console.log(this.snakeArr);
}

四、游戏的主体部分

function Game(food, snake, map) {
    this.food = food;
    this.snake = snake;
    this.map = map;
}
Game.prototype.renderGame = function () {
    this.food.renderFood()
    this.snake.renderSnake()
    this.startGame()
    this.directionSnake()
}
// 游戏开始
Game.prototype.startGame = function () {
    console.log('游戏开始');
    var timer = setInterval(function () {
        console.log('定时器');
        var maxX = map.clientWidth / this.snake.width - 1
        var maxY = map.clientHeight / this.snake.height - 1
        var x = this.snake.body[0].x
        var y = this.snake.body[0].y
        if (x > 0 && x < maxX && y > 0 && y < maxY) {
            // this.snake.deleteSnake()
            // 调用蛇移动方法
            // console.log(this);
            this.snake.moveSnake(this.food)
            // 重新渲染
            this.snake.renderSnake()
        } else {
            clearInterval(timer)
            alert('Game over')
        }

    }.bind(this), 150)
}
Game.prototype.directionSnake = function () {
    var that = this;
    console.log(that);
    document.onkeyup = function () {
        var event = event || window.event
        console.log(event.keyCode);
        // console.log(this);
        switch (event.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;
            default:
                break;
        }
    }
}