2. 程式人生 > >手把手教學h5小遊戲 - 貪吃蛇

手把手教學h5小遊戲 - 貪吃蛇

阿新 • • 發佈：2019-11-30

簡單的小遊戲製作，程式碼量只有兩三百行。遊戲可自行擴充套件延申。

原始碼已釋出至github，喜歡的點個小星星，原始碼入口：game-snake

遊戲已釋出，遊戲入口：http://snake.game.yanjd.top

第一步 - 製作想法

遊戲如何實現是首要想的，這裡我的想法如下：

  1. 利用canvas進行繪製地圖（格子裝）。
  2. 利用canvas繪製蛇，就是佔用地圖格子。讓蛇移動，即：更新蛇座標，重新繪製。
  3. 建立四個方向按鈕，控制蛇接下來的方向。
  4. 隨機在地圖上繪製出果子，蛇移動時“吃”到果子，增加長度和“移速”。
  5. 開始鍵和結束鍵配置，分數顯示、歷史記錄

第二步 - 框架選型

從第一步可知，我想實現這個遊戲，只需要用到canvas繪製就可以了，沒有物理引擎啥的，也沒有高階的UI特效。可以選個簡單點的，用來方便操作canvas繪製。精挑細選後選的是EaselJS，比較輕量，用於繪製canvas，以及canvas的動態效果。

第三步 - 開發

準備

目錄和檔案準備：

| - index.html

| - js

| - | - main.js

| - css

| - | - stylesheet.css

index.html 匯入相關的依賴，以及樣式檔案和指令碼檔案。設計是螢幕80%高度為canvas繪製區域，20%高度是操作欄以及展示分數區域.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
    content="ie=edge">
  <title>貪吃蛇</title>
  <link rel="stylesheet" href="css/stylesheet.css">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
</head>

<body>
  <div id="app">
    <div class="content-canvas">
      <canvas></canvas>
    </div>
    <div class="control">
    </div>
  </div>
  <script src="https://cdn.bootcss.com/EaselJS/1.0.2/easeljs.min.js"></script>
  <!-- 載入jquery 方便dom操作 -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <!-- sweetalert 美化alert用的 -->
  <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

stylesheet.css

* {
  padding: 0;
  margin: 0;
}
body {
  position: fixed;
  width: 100%;
  height: 100%;
}
#app {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
/* canvas繪製區域 */
.content-canvas {
  width: 100%;
  max-width: 768px;
  height: 80%;
  position: fixed;
  overflow: hidden;
}
.content-canvas canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 操作區域 */
.control {
  position: fixed;
  width: 100%;
  max-width: 768px;
  height: 20%;
  bottom: 0;
  background-color: #aeff5d;
}

main.js

$(function() {
  // 主程式碼編寫區域
})

1.繪製格子

注意的點（遇到的問題以及解決方案）：

  1. canvas繪製的路線是無寬度的，但線條是有寬度的。比如：從(0, 0)到(0, 100)繪製一條寬度為10px的線，則線條一半是在區域外看不見的。處理方案是起點偏移，比如：從(0, 0)到(0, 100)繪製一條寬度為10px的線，改為從(5,0)到(5,100)，偏移量為線條寬度的一半。
  2. 用樣式定義canvas的寬高座標會被拉伸，處理方案是給canvas元素設定寬高屬性，值為它當前的實際寬高。

程式碼

main.js

$(function () {
  var LINE_WIDTH = 1 // 線條寬度
  var LINE_MAX_NUM = 32 // 一行格子數量
  var canvasHeight = $('canvas').height() // 獲取canvas的高度
  var canvasWidth = $('canvas').width() // 獲取canvas的寬度
  var gridWidth = (canvasWidth - LINE_WIDTH) / LINE_MAX_NUM // 格子寬度，按一行32個格子計算
  var num = { w: LINE_MAX_NUM, h: Math.floor((canvasHeight - LINE_WIDTH) / gridWidth) } // 計算橫向和縱向多少個格子，即：橫座標的最大值和縱座標的最大值

  /**
 * 繪製格子地圖
 * @param graphics
 */
  function drawGrid(graphics) {
    var wNum = num.w
    var hNum = num.h
    graphics.setStrokeStyle(LINE_WIDTH).beginStroke('#ffac52')
    // 畫橫向的線條
    for (var i = 0; i <= hNum; i++) {
      if (i === hNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(0.1)
      graphics.moveTo(LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
        .lineTo(gridWidth * wNum + LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
    }
    graphics.setStrokeStyle(LINE_WIDTH)
    // 畫縱向的線條
    for (i = 0; i <= wNum; i++) {
      if (i === wNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(.1)
      graphics.moveTo(i * gridWidth + LINE_WIDTH / 2, LINE_WIDTH / 2)
        .lineTo(i * gridWidth + LINE_WIDTH / 2, gridWidth * hNum + LINE_WIDTH / 2)
    }
  }

  function init() {
    $('canvas').attr('width', canvasWidth) // 給canvas設定寬高屬性賦值上當前canvas的寬度和高度（單用樣式配置寬高會被拉伸）
    $('canvas').attr('height', canvasHeight)
    var stage = new createjs.Stage($('canvas')[0])
    var grid = new createjs.Shape()
    drawGrid(grid.graphics)
    stage.addChild(grid)
    stage.update()
  }

  init()
})

效果圖

瀏覽器開啟index.html,可以看到效果：

2.繪製蛇

蛇可以想象成一串座標點（陣列），“移動時”在陣列頭部新增新的座標，去除尾部的座標。類似佇列，先進先出。

程式碼

main.js

$(function () {
  var LINE_WIDTH = 1 // 線條寬度
  var LINE_MAX_NUM = 32 // 一行格子數量
  var SNAKE_START_POINT = [[0, 3], [1, 3], [2, 3], [3, 3]] // 初始蛇座標
  var DIR_ENUM = { UP: 1, DOWN: -1, LEFT: 2, RIGHT: -2 }    // 移動的四個方向列舉值，兩個對立方向相加等於0
  var GAME_STATE_ENUM = { END: 1, READY: 2 } // 遊戲狀態列舉
  var canvasHeight = $('canvas').height() // 獲取canvas的高度
  var canvasWidth = $('canvas').width() // 獲取canvas的寬度
  var gridWidth = (canvasWidth - LINE_WIDTH) / LINE_MAX_NUM // 格子寬度，按一行32個格子計算
  var num = { w: LINE_MAX_NUM, h: Math.floor((canvasHeight - LINE_WIDTH) / gridWidth) } // 計算橫向和縱向多少個格子，即：橫座標的最大值和縱座標的最大值
  var directionNow = null // 當前移動移動方向
  var directionNext = null // 下一步移動方向
  var gameState = null // 遊戲狀態

  /**
 * 繪製格子地圖
 * @param graphics
 */
  function drawGrid(graphics) {
    var wNum = num.w
    var hNum = num.h
    graphics.setStrokeStyle(LINE_WIDTH).beginStroke('#ffac52')
    // 畫橫向的線條
    for (var i = 0; i <= hNum; i++) {
      if (i === hNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(0.1)
      graphics.moveTo(LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
        .lineTo(gridWidth * wNum + LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
    }
    graphics.setStrokeStyle(LINE_WIDTH)
    // 畫縱向的線條
    for (i = 0; i <= wNum; i++) {
      if (i === wNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(.1)
      graphics.moveTo(i * gridWidth + LINE_WIDTH / 2, LINE_WIDTH / 2)
        .lineTo(i * gridWidth + LINE_WIDTH / 2, gridWidth * hNum + LINE_WIDTH / 2)
    }
  }

  /** 
   * 座標類
   */
  function Point(x, y) {
    this.x = x
    this.y = y
  }

  /**
   * 根據移動的方向，獲取當前座標的下一個座標
   * @param direction 移動的方向
   */
  Point.prototype.nextPoint = function nextPoint(direction) {
    debugger
    var point = new Point(this.x, this.y)
    switch (direction) {
      case DIR_ENUM.UP:
        point.y -= 1
        break
      case DIR_ENUM.DOWN:
        point.y += 1
        break
      case DIR_ENUM.LEFT:
        point.x -= 1
        break
      case DIR_ENUM.RIGHT:
        point.x += 1
        break
    }
    return point
  }

  /**
 * 初始化蛇的座標
 * @returns {[Point,Point,Point,Point,Point ...]}
 * @private
 */
  function initSnake() {
    return SNAKE_START_POINT.map(function (item) {
      return new Point(item[0], item[1])
    })
  }

  /**
   * 繪製蛇
   * @param graphics
   * @param snakes // 蛇座標
   */
  function drawSnake(graphics, snakes) {
    graphics.clear()
    graphics.beginFill("#a088ff")
    var len = snakes.length
    for (var i = 0; i < len; i++) {
      if (i === len - 1) graphics.beginFill("#ff6ff9")
      graphics.drawRect(
        snakes[i].x * gridWidth + LINE_WIDTH / 2,
        snakes[i].y * gridWidth + LINE_WIDTH / 2,
        gridWidth, gridWidth)
    }
  }

  /**
 * 改變蛇身座標
 * @param snakes 蛇座標集
 * @param direction 方向
 */
  function updateSnake(snakes, direction) {
    var oldHead = snakes[snakes.length - 1]
    var newHead = oldHead.nextPoint(direction)
    // 超出邊界 遊戲結束
    if (newHead.x < 0 || newHead.x >= num.w || newHead.y < 0 || newHead.y >= num.h) {
      gameState = GAME_STATE_ENUM.END
    } else if (snakes.some(function (p) { // ‘吃’到自己 遊戲結束
      return newHead.x === p.x && newHead.y === p.y
    })) {
      gameState = GAME_STATE_ENUM.END
    } else {
      snakes.push(newHead)
      snakes.shift()
    }
  }

  /**
   * 引擎
   * @param graphics
   * @param snakes
   */
  function move(graphics, snakes, stage) {
    clearTimeout(window._engine) // 重啟時關停之前的引擎
    run()
    function run() {
      directionNow = directionNext
      updateSnake(snakes, directionNow) // 更新蛇座標
      if (gameState === GAME_STATE_ENUM.END) {
        end()
      } else {
        drawSnake(graphics, snakes)
        stage.update()
        window._engine = setTimeout(run, 500)
      }
    }
  }

  /**
   * 遊戲結束回撥
   */
  function end() {
    console.log('遊戲結束')
  }

  function init() {
    $('canvas').attr('width', canvasWidth) // 給canvas設定寬高屬性賦值上當前canvas的寬度和高度（單用樣式配置寬高會被拉伸）
    $('canvas').attr('height', canvasHeight)
    directionNow = directionNext = DIR_ENUM.DOWN // 初始化蛇的移動方向
    var snakes = initSnake()
    var stage = new createjs.Stage($('canvas')[0])
    var grid = new createjs.Shape()
    var snake = new createjs.Shape()
    drawGrid(grid.graphics) // 繪製格子
    drawSnake(snake.graphics, snakes)
    stage.addChild(grid)
    stage.addChild(snake)
    stage.update()
    move(snake.graphics, snakes, stage)
  }

  init()
})

效果圖

效果圖（gif）：

3.移動蛇

製作4個按鈕，控制移動方向

程式碼

index.html

...
<div class="control">
  <div class="row">
    <div class="btn">
      <button id="UpBtn">上</button>
    </div>
  </div>
  <div class="row clearfix">
    <div class="btn half-width left">
      <button id="LeftBtn">左</button>
    </div>
    <div class="btn half-width right">
      <button id="RightBtn">右</button>
    </div>
  </div>
  <div class="row">
    <div class="btn">
      <button id="DownBtn">下</button>
    </div>
  </div>
  </div>
</div>
...

stylesheet.css

...
.control .row {
  position: relative;
  height: 33%;
  text-align: center;
}

.control .btn {
  box-sizing: border-box;
  height: 100%;
  padding: 4px;
}

.control button {
  display: inline-block;
  height: 100%;
  background-color: white;
  border: none;
  padding: 3px 20px;
  border-radius: 3px;
}

.half-width {
  width: 50%;
}

.btn.left {
  padding-right: 20px;
  float: left;
  text-align: right;
}

.btn.right {
  padding-left: 20px;
  float: right;
  text-align: left;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

mian.js

...
/**
 * 改變蛇行進方向
 * @param dir
 */
function changeDirection(dir) {
  /* 逆向及同向則不改變 */
  if (directionNow + dir === 0 || directionNow === dir) return
  directionNext = dir
}

/**
 * 繫結相關元素點選事件
 */
function bindEvent() {
  $('#UpBtn').click(function () { changeDirection(DIR_ENUM.UP) })
  $('#LeftBtn').click(function () { changeDirection(DIR_ENUM.LEFT) })
  $('#RightBtn').click(function () { changeDirection(DIR_ENUM.RIGHT) })
  $('#DownBtn').click(function () { changeDirection(DIR_ENUM.DOWN) })
}

function init() {
  bindEvent()
  ...
}

效果圖

效果圖（gif）：

4. 繪製果子

隨機取兩個座標點繪製果子，判定如果“吃到”，則不刪除尾巴。縮短定時器的時間間隔增加難度。

注意的點（遇到的問題以及解決方案）：新增一個果子不能佔用蛇的座標，一開始考慮的是隨機生成一個座標，如果座標已被佔用，那就繼續生成隨機座標。然後發現這樣做有個問題就是整個介面剩餘兩個座標可用時（極端情況，蛇佔了整個螢幕就差兩個格子了），那這樣的話，不停隨機取座標，要取到這最後兩個座標要耗不少時間。後面改了方法，先統計所有座標，然後迴圈蛇身座標，一一排除不可用座標，然後再隨機抽取可用座標的其中一個。

程式碼

main.js

$(function () {
  var LINE_WIDTH = 1 // 線條寬度
  var LINE_MAX_NUM = 32 // 一行格子數量
  var SNAKE_START_POINT = [[0, 3], [1, 3], [2, 3], [3, 3]] // 初始蛇座標
  var DIR_ENUM = { UP: 1, DOWN: -1, LEFT: 2, RIGHT: -2 }    // 移動的四個方向列舉值，兩個對立方向相加等於0
  var GAME_STATE_ENUM = { END: 1, READY: 2 } // 遊戲狀態列舉
  var canvasHeight = $('canvas').height() // 獲取canvas的高度
  var canvasWidth = $('canvas').width() // 獲取canvas的寬度
  var gridWidth = (canvasWidth - LINE_WIDTH) / LINE_MAX_NUM // 格子寬度，按一行32個格子計算
  var num = { w: LINE_MAX_NUM, h: Math.floor((canvasHeight - LINE_WIDTH) / gridWidth) } // 計算橫向和縱向多少個格子，即：橫座標的最大值和縱座標的最大值
  var directionNow = null // 當前移動移動方向
  var directionNext = null // 下一步移動方向
  var gameState = null // 遊戲狀態
  var scope = 0 // 分數

  /**
 * 繪製格子地圖
 * @param graphics
 */
  function drawGrid(graphics) {
    var wNum = num.w
    var hNum = num.h
    graphics.setStrokeStyle(LINE_WIDTH).beginStroke('#ffac52')
    // 畫橫向的線條
    for (var i = 0; i <= hNum; i++) {
      if (i === hNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(0.1)
      graphics.moveTo(LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
        .lineTo(gridWidth * wNum + LINE_WIDTH / 2, i * gridWidth + LINE_WIDTH / 2)
    }
    graphics.setStrokeStyle(LINE_WIDTH)
    // 畫縱向的線條
    for (i = 0; i <= wNum; i++) {
      if (i === wNum || i === 0) graphics.setStrokeStyle(LINE_WIDTH)
      if (i === 1) graphics.setStrokeStyle(.1)
      graphics.moveTo(i * gridWidth + LINE_WIDTH / 2, LINE_WIDTH / 2)
        .lineTo(i * gridWidth + LINE_WIDTH / 2, gridWidth * hNum + LINE_WIDTH / 2)
    }
  }

  /** 
   * 座標類
   */
  function Point(x, y) {
    this.x = x
    this.y = y
  }

  /**
   * 根據移動的方向，獲取當前座標的下一個座標
   * @param direction 移動的方向
   */
  Point.prototype.nextPoint = function nextPoint(direction) {
    var point = new Point(this.x, this.y)
    switch (direction) {
      case DIR_ENUM.UP:
        point.y -= 1
        break
      case DIR_ENUM.DOWN:
        point.y += 1
        break
      case DIR_ENUM.LEFT:
        point.x -= 1
        break
      case DIR_ENUM.RIGHT:
        point.x += 1
        break
    }
    return point
  }

  /**
 * 初始化蛇的座標
 * @returns {[Point,Point,Point,Point,Point ...]}
 * @private
 */
  function initSnake() {
    return SNAKE_START_POINT.map(function (item) {
      return new Point(item[0], item[1])
    })
  }

  /**
   * 繪製蛇
   * @param graphics
   * @param snakes // 蛇座標
   */
  function drawSnake(graphics, snakes) {
    graphics.clear()
    graphics.beginFill("#a088ff")
    var len = snakes.length
    for (var i = 0; i < len; i++) {
      if (i === len - 1) graphics.beginFill("#ff6ff9")
      graphics.drawRect(
        snakes[i].x * gridWidth + LINE_WIDTH / 2,
        snakes[i].y * gridWidth + LINE_WIDTH / 2,
        gridWidth, gridWidth)
    }
  }

  /**
 * 改變蛇身座標
 * @param snakes 蛇座標集
 * @param direction 方向
 */
  function updateSnake(snakes, fruits, direction, fruitGraphics) {
    var oldHead = snakes[snakes.length - 1]
    var newHead = oldHead.nextPoint(direction)
    // 超出邊界 遊戲結束
    if (newHead.x < 0 || newHead.x >= num.w || newHead.y < 0 || newHead.y >= num.h) {
      gameState = GAME_STATE_ENUM.END
    } else if (snakes.some(function (p) { // ‘吃’到自己 遊戲結束
      return newHead.x === p.x && newHead.y === p.y
    })) {
      gameState = GAME_STATE_ENUM.END
    } else if (fruits.some(function (p) { // ‘吃’到水果
      return newHead.x === p.x && newHead.y === p.y
    })) {
      scope++
      snakes.push(newHead)
      var temp = 0
      fruits.forEach(function (p, i) {
        if (newHead.x === p.x && newHead.y === p.y) {
          temp = i
        }
      })
      fruits.splice(temp, 1)
      var newFruit = createFruit(snakes, fruits)
      if (newFruit) {
        fruits.push(newFruit)
        drawFruit(fruitGraphics, fruits)
      }
    } else {
      snakes.push(newHead)
      snakes.shift()
    }
  }

  /**
   * 引擎
   * @param graphics
   * @param snakes
   */
  function move(snakeGraphics, fruitGraphics, snakes, fruits, stage) {
    clearTimeout(window._engine) // 重啟時關停之前的引擎
    run()
    function run() {
      directionNow = directionNext
      updateSnake(snakes, fruits, directionNow, fruitGraphics) // 更新蛇座標
      if (gameState === GAME_STATE_ENUM.END) {
        end()
      } else {
        drawSnake(snakeGraphics, snakes)
        stage.update()
        window._engine = setTimeout(run, 500 * Math.pow(0.9, scope))
      }
    }
  }

  /**
   * 遊戲結束回撥
   */
  function end() {
    console.log('遊戲結束')
  }

  /**
   * 改變蛇行進方向
   * @param dir
   */
  function changeDirection(dir) {
    /* 逆向及同向則不改變 */
    if (directionNow + dir === 0 || directionNow === dir) return
    directionNext = dir
  }

  /**
   * 繫結相關元素點選事件
   */
  function bindEvent() {
    $('#UpBtn').click(function () { changeDirection(DIR_ENUM.UP) })
    $('#LeftBtn').click(function () { changeDirection(DIR_ENUM.LEFT) })
    $('#RightBtn').click(function () { changeDirection(DIR_ENUM.RIGHT) })
    $('#DownBtn').click(function () { changeDirection(DIR_ENUM.DOWN) })
  }

  /**
 * 建立水果座標
 * @returns Point
 * @param snakes
 * @param fruits
 */
  function createFruit(snakes, fruits) {
    var totals = {}
    for (var x = 0; x < num.w; x++) {
      for (var y = 0; y < num.h; y++) {
        totals[x + '-' + y] = true
      }
    }
    snakes.forEach(function (item) {
      delete totals[item.x + '-' + item.y]
    })
    fruits.forEach(function (item) {
      delete totals[item.x + '-' + item.y]
    })
    var keys = Object.keys(totals)
    if (keys.length) {
      var temp = Math.floor(keys.length * Math.random())
      var key = keys[temp].split('-')
      return new Point(Number(key[0]), Number(key[1]))
    } else {
      return null
    }
  }

  /**
 * 繪製水果
 * @param graphics
 * @param fruits 水果座標集
 */
  function drawFruit(graphics, fruits) {
    graphics.clear()
    graphics.beginFill("#16ff16")
    for (var i = 0; i < fruits.length; i++) {
      graphics.drawRect(
        fruits[i].x * gridWidth + LINE_WIDTH / 2,
        fruits[i].y * gridWidth + LINE_WIDTH / 2,
        gridWidth, gridWidth)
    }
  }

  function init() {
    bindEvent()
    $('canvas').attr('width', canvasWidth) // 給canvas設定寬高屬性賦值上當前canvas的寬度和高度（單用樣式配置寬高會被拉伸）
    $('canvas').attr('height', canvasHeight)
    directionNow = directionNext = DIR_ENUM.DOWN // 初始化蛇的移動方向
    var snakes = initSnake()
    var fruits = []
    fruits.push(createFruit(snakes, fruits))
    fruits.push(createFruit(snakes, fruits))
    var stage = new createjs.Stage($('canvas')[0])
    var grid = new createjs.Shape()
    var snake = new createjs.Shape()
    var fruit = new createjs.Shape()
    drawGrid(grid.graphics) // 繪製格子
    drawSnake(snake.graphics, snakes)
    drawFruit(fruit.graphics, fruits)
    stage.addChild(grid)
    stage.addChild(snake)
    stage.addChild(fruit)
    stage.update()
    move(snake.graphics, fruit.graphics, snakes, fruits, stage)
  }

  init()
})

效果圖

效果圖（gif）:

5. 分數顯示、遊戲結束提示、排行榜

這一部分就比較簡單了，處理下資料的展示即可。這部分程式碼就不展示出來了。

效果圖

結語

介面比較粗糙，主要是學習邏輯操作。中間出現一些小問題，但都一一的解決了。createjs這個遊戲引擎還是比較簡單易學的，整體只用了繪製圖形的api

相關推薦

手把手教學h5小遊戲 - 貪吃蛇

簡單的小遊戲製作，程式碼量只有兩三百行。遊戲可自行擴充套件延申。 原始碼已釋出至github，喜歡的點個小星星，原始碼入口：game-snake 遊戲已釋出，遊戲入口：http://snake.game.yanjd.top 第一步 - 製作想法 遊戲如何實現是首要想的，這裡我的想法如下： 利用canva

C語言實現經典小遊戲貪吃蛇

純c語言寫的小遊戲，本人才疏學淺，程式碼有很多不足，僅供給初學者參考。 實現功能： ↑ ↓ ← →分別用來控制上下左右四個方向 空格暫停 esc退出遊戲 f1加速， f2 減速 蛇的長度越長，速度越快（速度有上限） 食物顏色隨機

go語言程式設計小遊戲--貪吃蛇

前提準備條件:安裝gcc環境，可以百度也可以安裝這個連結：https://pan.baidu.com/s/1BbXFcBZywK-k-eIkWqY3Ug 提取碼：04wp 複製這段內容後開啟百度網盤手機App，操作更方便哦，直接解壓，然後放到環境變數中。 程式碼： 主檔案： package mai

C語言程式設計小遊戲——貪吃蛇，覺得不錯請關注點贊加轉發！

C/C++企業實戰級課程資源（素材+原始碼+視訊）、編譯大禮包免費分享，需要的加學習群892643663。 #define N 200 #include <graphics.h> #include <stdlib.h> #include <dos.h>

python小遊戲——貪吃蛇

# -*- coding: utf-8 -*- """ Created on Sat Jan 13 21:45:32 2018 @author: 樂亦亦樂 """ #!/usr/bin/env python import pygame,sys,time,ra

c++小遊戲——貪吃蛇

#include #include #include #include #include <conio.h> #include #include <windows.h>

Day02 騷年，玩蛇嗎？（製作小遊戲貪吃蛇）

花了兩天時間，終於讓我的蛇跑起來了，第一次自己獨立做成功一個小遊戲，感覺很有成就感。嘻嘻嘻嘻嘻嘻~~~ 附上實現後的圖，可以玩，但還有些細節需要改進，比如記分，暫停，重玩等功能暫時還沒實現，以後會改進的 我說一下思路和步驟 第一步：JFrame畫出視窗 第二步：重寫p

動手用JAVA做個小遊戲--貪吃蛇

轉眼在大學蹲了快三個春秋，在這幾年裡我可謂是經歷過了大學的“風風雨雨”，逃課、泡女、通宵打機......種種的種種！還有一年就畢業了，回首過去，說實在的還真有點後悔，畢竟看到別人被大公司提前錄用而自己還在碌碌無為在此我想給那些剛進大學的朋友一個忠告：大學真的真的不是給你來玩

C#winform 經典小遊戲貪吃蛇V1.0（一）

關於V1.0   為什麼我給這個版本定義為V1.0嘞，因為在這個版本中僅僅實現了蛇的自動行進，按鍵對蛇的行進方向的操作和吃掉食物蛇身的增長等操作。 但是任何事情都必須一步一步來，當我們完成這個乞丐版的貪吃蛇，就為我們版本的更新打下了基礎。 思路 首先我們

C語言小遊戲————貪吃蛇.c

1.主函式框架的搭建 int main (void) { starup();//資料初始化 while(1) { show();//列印畫面 updateWithoutInput();//與使用者輸入無關的更新 updateWithInput();//與

h5小遊戲構建架設h5棋牌平臺開發制作

開始 margin post menu 讓我 com 管理啟動 版本 char 還記得貪吃蛇這個經典遊戲嗎？在諾基亞時代，在黑白像素點遊戲機時代，就是這樣一個簡單的遊戲也能讓我們玩上幾個小時。 還有現在最熱門的h5棋牌平臺開發制作Q-2189563389,也都是利用H5開發

原生JS實現的h5小遊戲-植物大戰僵屍

完成後 資源 life css lan posit 獲得 抽象 dom 代碼地址如下：http://www.demodashi.com/demo/12755.html 項目介紹 本項目是利用原生js實現的h5小遊戲-植物大戰僵屍，主要結合了一下自己對於h5小遊戲的理解，

javascript實現遊戲貪吃蛇

return display val ase document 清除 char 代碼 keycode 1、設計蛇：屬性有寬、高、方向、狀態（有多少節），方法：顯示，跑 2、設計食物：屬性寬、高 3、顯示蛇：根據狀態向地圖裏加元素 4、蛇跑起來：下一節到前一節的位置，蛇頭根據

H5小遊戲的營銷價值及相關案例

什麼是遊戲營銷？它是一個將品牌營銷遊戲化的過程。它能將某些東西轉變成一個遊戲——對於營銷人員來說，它將你的入境營銷轉變為一個遊戲——以達到預想的結果。你的聽眾（客戶，粉絲，追隨者，讀者，無論誰）參與到某種形式的遊戲，並且可能會贏得一些禮物作為回報。與此同時，你也從他們身上得到了你想要的東西。

做h5小遊戲遇到的關於音訊視訊的坑

用H5做小遊戲最大的坑在於Android和IOS的各種不相容性，經常其中一個好用另一個不好用，把目前遇到並解決的問題列一下以防自己以後忘記 1.   首先，ios和And都是不支援音訊視訊的自動播放的，因為手機設定幫助省流量的原因，所以需要做成偽自動播放，也就是引導使用者去

基於eui的白鷺引擎H5小遊戲入門總結

前言 由於實習公司要人做 H5遊戲，使用白鷺引擎開發，語言是typescript。本著想學習ts的心態，就開始學習一波H5小遊戲開發。幾天時間看了下egret, eui, typescript的文件，花了3天半的時間，導師讓仿一個360的小遊戲。沒啥遊戲邏輯，入門小專案，現在寫個小總結。 模仿專案：360

H5網頁版貪吃蛇原始碼

(function(){ var PI_2 = Math.PI * 2; var canvasW = 1000; var canvasH = 560; var numMovers = 600; var friction =

最簡單的HTML5遊戲——貪吃蛇

<html> <head> <meta charset="UTF-8"/> <title>貪吃蛇</title> </head> <body>     <canvas id="canvas" width="1000" h

字元遊戲-貪吃蛇的設計

現在我們可以寫一個簡單的字元遊戲–貪吃蛇，以下大體講一下它的設計。 貪吃蛇分為幾個部分： 蛇的移動 食物的生成 蛇的伸長 蛇的控制 死亡的判斷 地圖的輸出 首先是設計地圖： 然後是食物的生成： 關於蛇的伸長：想法是當蛇將要

京東H5小遊戲《瘋狂足球》Android外掛實現

前言 首先宣告，此文僅用於技術交流，若用於牟利，後果自負！由於這個小遊戲高分者可獲得實體獎勵，通過外掛作弊取得高分獲取獎勵實屬詐騙，相信遊戲團隊也有辨別作弊的實力，請大家不要拿自己的信用作賭注，三思後行！ 正文 最近，相信大家也被《瘋狂足球》這個小