javaScript实战——贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布

邻家的肥猫

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量3.7k

点赞数

分类专栏：前端实战练习合集文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sinat_50265804/article/details/124214219

版权

前端实战练习合集专栏收录该内容

13 篇文章 5 订阅

订阅专栏

功能实现：

地图map，我们通过在map类里面用二维数组建立行和列，实现网格状容器地图
食物food，功能一是蛇吃掉食物后食物消失，功能二重新生成新的食物，我们通过设置容器背景图的方式绘制食物，并获取食物和蛇头在map中的位置，如果蛇头与食物坐标一致，删除该位置容器的食物背景图。通过随机数的方式生成新的随机坐标，并将此位置的容器背景图更换为食物。
障碍物block，一样通过背景图绘制在地图上，功能一蛇碰到障碍物游戏结束，与蛇吃食物的方法类似，也是通过比较蛇头与障碍物的位置，坐标一致则游戏结束，功能二蛇每次吃掉食物后，重置障碍物位置，也是与重置食物的方法类似，不过因为障碍物是多个坐标，我们要通过数组控制，麻烦一点。
蛇snake，蛇吃掉食物后，需要增加一单位的长度，我们通过给蛇的数组末尾添加一个数据实现，此外蛇碰撞地图边界后，游戏结束。

温馨提示：

咱们这个贪吃蛇项目全程都用的面向对象的编程方式，处处涉及到对象、构造函数、原型，不建议小白食用！（把这些知识学完再看）

源码：

index.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>贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            margin: 50px auto;
        }
        .row {
            display: flex;
        }
        .col {
            flex: 1;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-size: cover;
        }
    </style>
</head>
<body>
    <script src="./js/game.js"></script>
    <script src="./js/map.js"></script>
    <script src="./js/snake.js"></script>
    <script src="./js/food.js"></script>
    <script src="./js/block.js"></script>
    <script>
    var map = new Map(20, 20, 500, 500);
    var snake = new Snake({
        head: ['./img/1.png', './img/2.png', './img/3.png', './img/4.png'], //左37，上38，右39， 下40，
        body: ['./img/5.png'],
        tail: ['./img/8.png', './img/9.png', './img/6.png', './img/7.png'] //左37，上38，右39， 下40，
    });
    var food = new Food(6, 2, './img/food.jpg');
    var block = new Block();
    var game = new Game(map, snake, food, block);
    </script>
</body>
</html>

game.js

// 游戏类,控制地图、蛇、食物、障碍物的交互
function Game(map, snake, food, block) {
    this.map = map;
    this.snake = snake;
    this.food = food;
    this.block = block;
    this.timebar;
    this.state = true;
    this.init();
    this.gameStart();
    this.bindEvent();
}
//初始化
Game.prototype.init = function() {
    this.renderMap();
    this.renderFood();
    this.renderBlock();
    this.renderSnake();
}
Game.prototype.renderMap = function() {
    this.map.init();
}
Game.prototype.renderFood = function() {
    this.map.arr[this.food.y][this.food.x].style.backgroundImage = 'url(' + this.food.img + ')';
}
Game.prototype.renderBlock = function() {
    for (var i = 0; i < this.block.arr.length; i++) {
        this.map.arr[this.block.arr[i].y][this.block.arr[i].x].style.backgroundImage = 'url(' + this.block.img + ')';
    };
};
Game.prototype.renderSnake = function() {
    //绘制头
    var snakeHead = this.snake.arr[0];
    this.map.arr[snakeHead.y][snakeHead.x].style.backgroundImage = 'url(' + this.snake.headImg + ')';
    //绘制尾
    var snakeTail = this.snake.arr[this.snake.arr.length - 1];
    this.map.arr[snakeTail.y][snakeTail.x].style.backgroundImage = 'url(' + this.snake.tailImg + ')';
    //绘制身体
    for (var i = 1; i < this.snake.arr.length - 1; i++) {
        var snakeBody = this.snake.arr[i];
        this.map.arr[snakeBody.y][snakeBody.x].style.backgroundImage = 'url(' + this.snake.bodyImg + ')';
    }
}
// 游戏启动
Game.prototype.gameStart = function() {
    var me = this;
    this.timebar = setInterval(function() {
        me.snake.move();
        me.checkMap();
        me.checkBlock();
        if (me.state) {
            me.map.clear();
            me.renderFood();
            me.renderBlock();
            me.renderSnake();
        };
        me.checkFood();
    },400)
}
// 绑定键盘事件，通过键盘的上下左右控制蛇运动的方向
Game.prototype.bindEvent = function() {
    var me = this;
    window.onkeydown = function(e) {
        me.snake.change(e.keyCode);
    }
}
// 边界处理，当蛇碰撞到地图边界时，结束游戏
Game.prototype.checkMap = function() {
    var head = this.snake.arr[0];
    if (head.x < 0 || head.y < 0 || head.x > this.map.col - 1 || head.y > this.map.row - 1) {
        this.gameOver();
        console.log('边界');
    }
}
// 障碍物处理，当蛇碰撞到障碍物时，结束游戏
Game.prototype.checkBlock = function() {
    var head = this.snake.arr[0];
    for (var i = 0; i < this.block.arr.length; i++) {
        if (head.x === this.block.arr[i].x && head.y === this.block.arr[i].y) {
            this.gameOver();
            console.log('障碍物');
        }
    }
}
// 食物处理，当蛇吃到食物时，蛇的长度+1，同时重置食物和障碍物的位置，游戏继续
Game.prototype.checkFood = function() {
    var head = this.snake.arr[0];
    if (head.x === this.food.x && head.y === this.food.y) {
        this.snake.snakeGrow();
        this.resetBlock();
        this.resetFood();
    }
}
// 重置食物位置
Game.prototype.resetFood = function() {
    let x = parseInt(this.map.col * Math.random());
    let y = parseInt(this.map.row * Math.random());
    // 食物重置的位置不能在障碍物内
    for (var i = 0; i < this.block.arr.length; i++) {
        var block = this.block.arr[i];
        if (x === block.x && y === block.y) {
            this.resetFood();
            return;
        }
    }
    // 食物重置的位置不能在蛇身上
    for (var i = 0; i < this.snake.arr.length; i++) {
        var snake = this.snake.arr[i];
        if (x === snake.x && y === snake.y) {
            this.resetFood();
            return;
        }
    }
    this.food.reset(x, y);
}
// 重置障碍物位置
Game.prototype.resetBlock = function() {
    let x = parseInt((this.map.col - this.block.arr.length) * Math.random());
    let y = parseInt((this.map.row - this.block.arr.length) * Math.random());
    // 重置障碍物第一个位置不能在蛇身上
    for (var i = 0; i < this.snake.arr.length; i++) {
        var snake = this.snake.arr[i];
        if (x === snake.x && y === snake.y) {
            this.resetBlock();
            return;
        }
    }
    this.block.reset(x, y);
}
// 结束游戏，弹框告知玩家游戏分数即贪吃蛇的长度。
Game.prototype.gameOver = function() {
        clearInterval(this.timebar);
        this.state = false;
        alert('亲爱的玩家，游戏结束啦，您的分数为' + this.snake.arr.length + '分')
}

map.js

// 地图类
function Map(row, col, width, height) {
    this.row = row;
    this.col = col;
    this.width = width;
    this.height = height;
    this.dom = document.createElement('div');
    this.arr = [];
}
// 初始化地图
Map.prototype.init = function() {
    for (var i = 0; i < this.row; i++) {
        // console.log(i);
        var rowDom = document.createElement('div');
        rowDom.className = 'row';
        var rowArr = [];
        for (var j = 0; j < this.col; j++) {
            var colDom = document.createElement('div');
            colDom.className = 'col';
            colDom.style.width = this.width / this.col + 'px';
            colDom.style.height = this.height / this.row + 'px';
            rowDom.appendChild(colDom);
            rowArr.push(colDom);
        }
        this.dom.appendChild(rowDom);
        this.arr.push(rowArr);
    }
    this.dom.className = 'box';
    this.dom.style.width = this.width + 'px';
    this.dom.style.height = this.height + 'px';
    document.body.appendChild(this.dom);
}
// 当蛇移动时，清除蛇，重新绘制蛇
Map.prototype.clear = function() {
    for (var i = 0; i < this.arr.length; i++) {
        for (var j = 0; j < this.arr[i].length; j++) {
            this.arr[i][j].style.backgroundImage = '';
        }
    }
}

food.js

// 食物类
function Food(x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
}
// 重置食物的位置
Food.prototype.reset = function(x,y) {
    this.x = x;
    this.y = y;
    console.log(this.x, this.y);
}

block.js

// 障碍物类
function Block() {
    this.x;
    this.y;
    this.arr = [
        {x: 3, y: 6},
        {x: 4, y: 6},
        {x: 5, y: 6},
        {x: 6, y: 6},
        {x: 7, y: 6},
        {x: 8, y: 6},
    ];
    this.img = './img/block.png';
}
// 重置障碍物位置
Block.prototype.reset = function(x, y) {
    this.x = x;
    this.y = y;
    // 通过随机数控制障碍物方向，如果随机数<0.5，障碍物呈水平方向，否则呈垂直方向
    var toggle = Math.random();
    if (toggle < 0.5) {
        this.arr = [
            {x: this.x, y: this.y},
            {x: this.x + 1, y: this.y},
            {x: this.x + 2, y: this.y},
            {x: this.x + 3, y: this.y},
            {x: this.x + 4, y: this.y},
            {x: this.x + 5, y: this.y},
        ]
    } else {
        this.arr = [
            {x: this.x, y: this.y + 1},
            {x: this.x, y: this.y + 2},
            {x: this.x, y: this.y + 3},
            {x: this.x, y: this.y + 4},
            {x: this.x, y: this.y + 5},
            {x: this.x, y: this.y + 6},
        ] 
    }
}

snake.js

// 蛇类
function Snake(img) {
    this.arr = [
        {x: 6, y: 4},
        {x: 5, y: 4},
        {x: 4, y: 4},
    ];
    this.img = img;
    this.lock = false;
    this.direction = 39;
    this.headImg = this.img.head[this.direction - 37];
    this.bodyImg = this.img.body[0];
    this.tailImg = this.img.tail[this.direction - 37];
}
// 通过键盘上下左右键控制蛇移动方向
Snake.prototype.move = function() {
    //创建头对象
    var newHead = {x: this.arr[0].x, y: this.arr[0].y};
    //左37，上38，右39， 下40，
    switch (this.direction) {
        //向左,x-1,y不变
        case 37:
            newHead.x -= 1;
            break;
        //向上,y+1,x不变
        case 38:
            newHead.y -= 1;
            break;
        //向右,x+1,y不变
        case 39:
            newHead.x += 1;
            break;
        //向下,y-1,x不变
        case 40:
            newHead.y += 1;
            break;
        default:
            break;
    }
    this.arr.unshift(newHead);
    this.arr.pop();
    var last_2 = this.arr[this.arr.length - 2];
    var last_1 = this.arr[this.arr.length - 1];
    if (last_1.x === last_2.x) {
        if (last_1.y < last_2.y) {
            this.tailImg = this.img.tail[3];
        } else {
            this.tailImg = this.img.tail[1];
        }
    } else{
        if (last_1.x < last_2.x) {
            this.tailImg = this.img.tail[2];
        } else {
            this.tailImg = this.img.tail[0];
        }
    }
    this.lock = false;
}
// 改变蛇的方向
Snake.prototype.change = function(code) {
    if (this.lock) {
        return;
    }
    this.lock = true;
    var num = Math.abs(code - this.direction);
    if (num === 0 || num === 2) {
        return;
    }
    this.direction = code;
    this.headImg = this.img.head[this.direction - 37];
}
// 蛇吃掉食物后，蛇的长度增加1
Snake.prototype.snakeGrow = function() {
    var tail = this.arr[this.arr.length - 1];
    this.arr.push(tail);
}

效果展示：

JavaScript实战——贪吃蛇

项目源码及素材：

链接：https://pan.baidu.com/s/1YEx7Agcskb_p--K3YquWMw?pwd=Q7D0
提取码：Q7D0
--来自百度网盘超级会员V2的分享

邻家的肥猫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
javaScript实战——贪吃蛇

功能实现：地图map，我们通过在map类里面用二维数组建立行和列，实现网格状容器地图食物food，功能一是蛇吃掉食物后食物消失，功能二重新生成新的食物，我们通过设置容器背景图的方式绘制食物，并获取食物和蛇头在map中的位置，如果蛇头与食物坐标一致，删除该位置容器的食物背景图。通过随机数的方式生成新的随机坐标，并将此位置的容器背景图更换为食物。障碍物block，一样通过背景图绘制在地图上，功能一蛇碰到障碍物游戏结束，与蛇吃食物的方法类似，也是通过比较蛇头与障碍物的位置，坐标一致则游戏结束，功能二蛇
复制链接

扫一扫