贪吃蛇原生js

最新推荐文章于 2024-07-11 17:05:07 发布

红色波浪号

最新推荐文章于 2024-07-11 17:05:07 发布

阅读量131

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_72815229/article/details/127640847

版权

静态加样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #map {
      width: 800px;
      height: 600px;
      background-color: #999;
      position: relative;
    }

    #btn1,
    #btn2 {
      width: 100px;
      height: 100px;
      background-color: #999;
      float: left;
      line-height: 100px;
      text-align: center;
      font-size: 20px;
      color: white;
      margin-top: 20px;
    }
  </style>
</head>


<body>
  <div id="map"></div>
  <div id="btn1">开始</div>
  <div id="btn2">暂停</div>
</body>
<script src="./js/food.js"></script>
<script src="./js/snake.js"></script>
<script src="./js/game.js"></script>
<script>
  /*
  食物对象：
    属性：宽 高 背景颜色 定位 左距离 上距离
    方法：食物的渲染方法
  
  蛇对象
    属性：宽 高 背景颜色 定位 左距离 上距离 方向
    方法：蛇渲染方法 蛇的移动（蛇吃食物） 蛇移动的方向

  游戏对象  
    属性：食物 蛇 地图
    方法：游戏渲染方法
  */
  var btn1 = document.getElementById('btn1')
  var btn2 = document.getElementById('btn2')
  var map = document.getElementById('map')
  // var food = new Food(20, 20, 'blue', 'absolute', 0, 0)
  // food.renderFood()
  // var snake = new Snake(20, 20, 'absolute', 'right')
  // snake.renderSnake()
  // var game = new Game(new Food(20, 20, 'blue', 'absolute', 0, 0),
  // new Snake(20, 20, 'absolute', 'right'),
  // )
  var game = new Game(new Food(20, 20, 'blue', 'absolute', 0, 0, []),
    new Snake(20, 20, 'absolute', 'right', []),
    map
  )
  game.renderGame()
</script>
<!-- <script src="./js/food.js"></script>
<script src="./js/snake.js"></script>
<script src="./js/game.js"></script> -->

</html>

JS部分

食物

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 () {
    var foodBox = map.appendChild(document.createElement('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 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()
}
// 开始按钮
btn1.onclick = function () {
    game.startGame()
    btn1.disabled = true
    btn2.disabled = false
}
//游戏开始
Game.prototype.startGame = function () {
    var timer = setInterval(function () {
        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()
            //调用蛇移动的方法
            this.snake.moveSnake(this.food)
            //重新渲染
            this.snake.renderSnake()
        } else {
            clearInterval(timer)
            alert('Game over')
        }
        // 暂停按钮
        btn2.onclick = function () {
            btn1.disabled = false
            btn2.disabled = true
            clearInterval(timer)
        }
    }.bind(this), 500)

}
Game.prototype.directionSnake = function () {
    var that = this
    document.onkeyup = function () {
        var event = event || window.event
        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;
        }
    }
}

蛇部分

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)
    }
}
Snake.prototype.moveSnake = function (food) {
    for (var i = this.body.length - 1; 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 '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
    if (food.left == snakeLeft && food.top == snakeTop) {
        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 = this.snakeArr.length - 1; i >= 0; i--) {
        map.removeChild(this.snakeArr[i])
        this.snakeArr.splice(i, 1)
    }
}