案例二:贪吃蛇小游戏

最新推荐文章于 2023-07-24 15:02:25 发布

苦逼的猿宝

最新推荐文章于 2023-07-24 15:02:25 发布

阅读量180

点赞数 2

分类专栏： js案例文章标签：前端 javascript 学习 Powered by 金山文档

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129306955

版权

js案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

贪吃蛇小游戏

一、html部分

<!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>
    <link rel="stylesheet" href="./index.css">
    <script src="./mapPlus版本.js"></script>
    <script src="./snakePlus版本.js"></script>
    <script src="./foodPlus版本.js"></script>
    <!-- <script src="../map.js"></script> -->
</head>

<body>
    <p class="notice">提示：空格键控制开始/ 暂停，方向键控制蛇的移动方向，F键刷新</p>
    <script>
        // 生成地图
        var map = new Map(10, 10)
        map.init()

        //生成蛇
        var snake = new Snake(map)
        snake.init()

        //生成食物
        var food = new Food(map,snake)
        food.init()
    </script>
</body>

</html>

二、css部分

*{
    margin:0;
    padding:0;
    border: 0px;
}
body{
    background: #444;
}
table{
    border-collapse:collapse;
    overflow: hidden;
    border:1px solid #ddd;
    margin:10px auto 10px auto;
}
td{
    display: table-cell;
    width:20px;
    height:20px;
    background: #fff;
    border:1px #eeeeee solid;
}
.snake{
    background: #3388ee;
}
.notsnake{
    background: #fff;
}
.food{
    background: #33aa33;
}
.snake_head{
    background: #dd4444;
}
.notice{
    width:450px;
    text-align: center;
    margin:50px auto;
    color:#fff;
    font-size: 14px;
}

三、map.js

function Map(row, col) {
    this.row = row
    this.col = col
    this.grids = []
}

Map.prototype.genArr = function () {
    this.grids = new Array(this.row)
    for (let i = 0; i < this.grids.length; i++) {
        this.grids[i] = new Array(this.col)
    }
}

Map.prototype.init = function () {
    this.genArr()
    const table = document.createElement('table')
    for (let i = 0; i <= this.row - 1; i++) {
        const tr = document.createElement('tr')
        for (let j = 0; j <= this.col - 1; j++) {
            const td = document.createElement('td')
            tr.appendChild(td)
            this.grids[i][j] = td
        }
        table.appendChild(tr)
    }
    console.log(this.grids)
    document.body.appendChild(table)
}

四、food.js

function Food(map, snake) {
    this.map = map
    this.foodPoint = [3, 3]
    this.snake = snake
}

Food.prototype.genPoint = function () {
    let x = Math.round(Math.random() * (this.map.row - 1))
    let y = Math.round(Math.random() * (this.map.col - 1))

    let bool = this.snake.snakeGrids.some((item) => {
        return item[0] === x && item[1] === y
    })
    if (bool) {
        this.genPoint()
    } else {
        this.foodPoint = [x, y]
        this.snake.foodPoint=[x,y]
    }
}

Food.prototype.init = function () {
    this.genPoint()
    let x = this.foodPoint[0]
    let y = this.foodPoint[1]
    this.map.grids[x][y].classList.add('food')
}

五、snake.js

function Snake(map) {
    this.snakeGrids = [
        [0, 1],
        [0, 2],
        [0, 3]
    ]
    this.map = map
    this.isMove = false
    this.time = null
    this.direction = 'right'
    this.foodPoint = []
    this.isEnd = false
    this.score = 0
}

Snake.prototype.drawSnake = function () {
    //画蛇头
    let snakeHead = this.snakeGrids[this.snakeGrids.length - 1]
    console.log(snakeHead);
    this.map.grids[snakeHead[0]][snakeHead[1]].classList.add('snake_head')
    console.log(this.map.grids[snakeHead[0]][snakeHead[1]]);
    //画蛇身
    for (let i = 0; i < this.snakeGrids.length - 1; i++) {
        let snakeBody = this.snakeGrids[i]
        this.map.grids[snakeBody[0]][snakeBody[1]].classList.add('snake')
    }
}

Snake.prototype.init = function () {
    console.log("生成了");
    this.drawSnake()
    this.bindEvent()
}

Snake.prototype.move = function () {
    this.time = setInterval(() => {
        let oldSnakeHead = this.snakeGrids[this.snakeGrids.length - 1]//老蛇头
        let x = oldSnakeHead[0]
        let y = oldSnakeHead[1]

        if (this.direction === 'right') {
            y++
        } else if (this.direction === 'left') {
            y--
        } else if (this.direction === 'up') {
            x--
        } else if (this.direction === 'down') {
            x++
        }

        // 新蛇头
        let newSnakeHead = [x, y]
        // 判断食物的坐标和蛇身是否重合
        if (x < 0 || x > this.map.row - 1 || y < 0 || y > this.map.col - 1) {
            clearInterval(this.time)
            this.isEnd = true
            let answer = confirm(`你个臭傻逼把蛇撞死了,重新开始点确定,得分为${this.score}`)
            if (answer === true) {
                location.reload()
            }
            return
        }
 
        let list = this.snakeGrids.filter(item => item[0] === x && item[1] === y)
        if (list.length > 0) {
            //撞到自己了
            clearInterval(this.time)
            this.isEnd = true
            let answer = confirm(`你是真的6,把自己撞死了,重新开始点确定,得分为${this.score}`)
            if (answer === true) {
                location.reload()
            }
            return
        }

        this.map.grids[oldSnakeHead[0]][oldSnakeHead[1]].classList.remove('snake_head')
        if (this.foodPoint[0] === x && this.foodPoint[1] === y) {
            // 放入新蛇头
            this.score += this.snakeGrids.length / 3
            this.snakeGrids.push(newSnakeHead)
            //重新上色
            this.drawSnake()
            this.map.grids[this.foodPoint[0]][this.foodPoint[1]].classList.remove('food')
            new Food(this.map, this).init()
        }
        else {
            // 放入新蛇头
            this.snakeGrids.push(newSnakeHead)
            // 去除老蛇尾
            let oldSnakeWei = this.snakeGrids.shift()
            //擦除老蛇尾事件
            this.map.grids[oldSnakeWei[0]][oldSnakeWei[1]].classList.remove('snake')
            //重新上色
            this.drawSnake()
        }
    }, 300)
}


Snake.prototype.stop = function () {
    clearInterval(this.time)
}


Snake.prototype.bindEvent = function () {
    window.onkeydown = (e) => {
        var evt = event || e
        if (evt.keyCode === 32) {
            console.log('空格');
            if (!this.isMove && !this.isEnd) {
                this.isMove = true
                this.move()
            } else {
                this.isMove = false
                this.stop()
            }
        } else if (evt.keyCode === 87) {
            if (this.direction !== 'down')
                this.direction = 'up'
        } else if (evt.keyCode === 83) {
            if (this.direction !== 'up')
                this.direction = 'down'
        } else if (evt.keyCode === 65) {
            if (this.direction !== 'right')
                this.direction = 'left'
        } else if (evt.keyCode === 68) {
            if (this.direction !== 'left')
                this.direction = 'right'
        }
    }
}