javaScript贪吃蛇游戏

最新推荐文章于 2024-10-10 09:56:47 发布

js之爷

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量48

点赞数

文章标签： javascript 游戏 css

本文链接：https://blog.csdn.net/wangmingzhi111/article/details/130033781

版权

该文章详细介绍了使用JavaScript实现贪吃蛇游戏的过程，包括食物对象、蛇对象和游戏对象的属性与方法。食物对象包含宽高、背景颜色等属性及渲染方法；蛇对象有宽高、方向等属性，具备渲染、移动（吃食物）功能；游戏对象整合食物和蛇，实现游戏渲染和控制。HTML代码创建游戏容器，JS代码定义并操作游戏元素。

摘要由CSDN通过智能技术生成

文章目录

JS 贪吃蛇

JS 贪吃蛇

分析属性方法
食物对象：
属性：宽高背景颜色定位左距离上距离
方法：食物的渲染方法

蛇对象
属性：宽高背景颜色定位左距离上距离方向
方法：蛇渲染方法蛇的移动（蛇吃食物）蛇移动的方向

游戏对象
属性：食物蛇地图
方法：游戏渲染方法

html代码

 <style>
    #map {
      width: 800px;
      height: 600px;
      background-color: #999;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>
<script src="./js/food.js"></script>
<script src="./js/snake.js"></script>
<script src="./js/game.js"></script>
<body>
  <div id="map"></div>
</body>
<script>
  var map = document.getElementById('map')

  var game = new Game(new Food(20, 20, 'blue', 'absolute', 0, 0, []),
    new Snake(20, 20, 'absolute', 'right', []),
    map
  )
  game.renderGame()

js代码

// 蛇对象

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.borderRadius = '50%';
        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 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.borderRadius = '50%';
    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 = 0; i < this.snakeArr.length; i++) {
    //     // pop()  shift()
    //     console.log(i); // 0 1
    //     this.snakeArr.splice(i, 1)
    // }
    for (var i = this.foodArr.length - 1; i >= 0; i--) {
        // 删除DOM
        // 父元素.removeChild()
        map.removeChild(this.foodArr[i])

        this.foodArr.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
        var maxY = map.clientHeight / this.snake.height
        var x = this.snake.body[0].x
        var y = this.snake.body[0].y
        if (x > -1 && x < maxX && y > -1 && y < maxY) {
            this.snake.deleteSnake()
            // 调用蛇移动方法
            // console.log(this);
            this.snake.moveSnake(this.food)
            // 重新渲染
            this.snake.renderSnake()
        } else {
            clearInterval(timer)
            alert('Game over')
        }

    }.bind(this), 200)
}
Game.prototype.directionSnake = function () {
    var that = this;
    console.log(that);
    document.onkeydown = 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;
        }
    }
}