前言

在慕课网上看了 bobo 老师的两门canvas基础视频（有点意思），心里就忍不住想搞点事情，说干就干吧！就这样诞生了我的一个canvas小游戏。喜欢的话可以 star 我的 github

预览地址

贪吃蛇在线玩

代码结构

        
 
            开始 
            
0
 
            
0
 
            
 
            

        
    

// *名称：canvas仿慕课网贪吃蛇
// *作者：章理

window.onload = function() {
    Game = new GluttonousSnake('gameCanvas')

    var snakeAudio = document.querySelector('.snake-audio')
    var gameMusic = document.querySelector('.game-music')
    var gameButton = document.querySelector('.game-button')

    gameButton.onclick = function() {
        if (Game.isOverGame) {
            // 再来
            Game.restart()
        }

        if (Game.isInGame) {
            // 暂停
            this.innerHTML = '继续'
            Game.stopGame()
            Game.isOpenAudio && snakeAudio.pause()
        } else {
            // 继续
            this.innerHTML = '暂停'
            Game.startGame()
            Game.isOpenAudio && snakeAudio.play()
        }
        Game.isInGame = !Game.isInGame
    }

    gameMusic.onclick = function() {
        var isClose = this.classList.toggle('close')

        if (isClose) {
            // 关闭
            Game.isOpenAudio = false
            if (Game.isInGame) {
                snakeAudio.pause()
            }
        } else {
            // 开启
            Game.isOpenAudio = true
            if (Game.isInGame) {
                snakeAudio.play()
            }
        }
    }
}

var GluttonousSnake = function (id) {
    this.canvas = document.getElementById(id)
    this.ctx = this.canvas.getContext('2d')
    this.mapLength = 25
    this.grid = 18
    // this.gameMap = []
    // 1 => 苹果
    // 0 => 空白
    // 2 => 蛇头
    // 3 => 蛇身
    // 4 => 蛇尾
    this.map_2017 = [
        [1, 0, 2, 3, 3, 0, 2, 3, 3, 0, 0, [2, 't'], 0, 2, 3, 3],
        [0, 0, 0, 0, 3, 0, [4, 'b'], 0, 3, 0, 0, 3, 0, 0, 0, 3],
        [0, 0, 3, 3, 3, 0, 3, 0, 3, 0, 0, 3, 0, 0, 0, 3],
        [0, 0, 3, 0, 0, 0, 3, 0, 3, 0, 0, 3, 0, 0, 0, 3],
        [0, 0, 3, 3, 4, 0, 3, 3, 3, 0, 0, [4, 't'], 0, 0, 0, [4, 't']]
    ];
    // 是否游戏中
    this.isInGame = false
    // 是否结束游戏
    this.isOverGame = false
    // 执行方向
    this.moveDir = 'r'
    // 准备方向 - 防止快速多次按下切换方向
    this.preDir = this.moveDir
    // 蛇的速度
    this.MaxSpeed = 240
    this.minSpeed = 80
    this.speed = this.MaxSpeed
    // 蛇 定时器
    this.snakeTimer = null
    // 蛇 
    this.snakeData = this._initSnakeMap()
    // [
    //     [0, 6], [0, 5], [0, 4], [0, 3], [0, 2], [0, 1], [0, 0], [0, -1]
    // ]
    // 食物
    this.food = []
    // 当前分数
    this.score = 0
    // 最高分数
    this.bestScore = 0
    // 是否开启音乐
    this.isOpenAudio = true

    this._init()
}

// 初始化蛇的坐标
GluttonousSnake.prototype._initSnakeMap = function() {
    var array = []
    var head = 6
    for (var i = 0; i  {
        this.goGame()
    }, this.speed)
}

GluttonousSnake.prototype.goGame = function() {
    if (!this.food.length) {
        // 创建食物
        this._createFood()
    }
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    // 绘制格子
    this._drawGridBg()

    var direct = this.moveDir = this.preDir
    var nextPos = this._nextPos(direct)
    // 是否撞墙
    var isOver = this._isCollision(nextPos)
    // 修改蛇的位置 路线
    var isChangeSpeed = null
    if (!isOver) {
        isChangeSpeed = this._walk(nextPos)
    }
    // 绘制蛇
    this._drawSnake()
    // 绘制食物
    this._drawFood()

    // 绘制完蛇，在进行判断
    if (isOver) {
        this._drawOver()
        return
    }
    // 最后才执行
    if (isChangeSpeed) {
        // 清除定时器重新触发
        this.stopGame()
        this.startGame()
    }
}

// 是否撞墙并返回值
GluttonousSnake.prototype._isCollision = function(nextPos) {
    if (this._collisionDetection(nextPos)) {
        this.stopGame()
        this._overGame()
        return true
    }
    return false
}

// 碰撞检测
GluttonousSnake.prototype._collisionDetection = function(next) {
    // 撞到墙了
    if (
        next[0] = this.mapLength ||
        next[1] >= this.mapLength
    ) {
        return true
    }

    for (let i = 0; i  是否吃到食物
GluttonousSnake.prototype._walk = function(nextPos) {
    var isChange = false
    // 是否吃到食物
    if (this._isEat(nextPos)) {
        // 创建食物坐标
        this._createFood()
        // 更新分数
        var nowScore = this.score += 1
        this.bestScore = nowScore > this.bestScore ? nowScore : this.bestScore  
        this.saveScore(nowScore)
        this.saveBestScore(this.bestScore)
        // 减速度
        var residue = this.MaxSpeed - parseInt(this.score / 10) * this.minSpeed
        // 检测是否变化了速度
        if (residue !== this.speed && residue >= this.minSpeed) {
            isChange = true
        }
        this.speed = residue  {
        this.ctx.fillStyle = 'rgba(55,44,34,0.7)'
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

        this.ctx.drawImage(overImage, (450 - 255) / 2, (450 - 163) / 2, 255, 163)
    }
}

// 重置文字及参数
GluttonousSnake.prototype._overGame = function() {
    this.isOverGame = true
    this.isInGame = false
    document.querySelector('.game-button').innerHTML = '再来'
    this.overAudioPlay()
}

GluttonousSnake.prototype.eatAudioPlay = function() {
    var eatAudio = document.querySelector('.eat-audio')
    this.isOpenAudio && eatAudio.play()
}

GluttonousSnake.prototype.overAudioPlay = function() {
    var overAudio = document.querySelector('.over-audio')
    this.isOpenAudio && overAudio.play()

    var snakeAudio = document.querySelector('.snake-audio')
    this.isOpenAudio && snakeAudio.pause()
}

最后

我总觉得自己的写的代码结构不是很优美规范，差点什么东东。