Profile Image of the Author
March7th
Hello, I'm March7th.
Bilibli
公告
欢迎来到我的博客！这是一则示例公告。
934 字
5 分钟

AI开发贪吃蛇（完整代码）

2024-11-10
未分类
无标签

本文为AI开发实例，所有代码均为AI生成，仅供参考。 使用工具：智谱清言 项目：贪吃蛇游戏开发 时间：2024年11月10日16:16:16 用户：祎果 AI：ChatGLM

HTML部分#

index.html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>贪吃蛇小游戏</title>
    <style>
      #gameCanvas {
        border: 1px solid black;
        background-color: #ddd;
      }
      #score {
        font-family: Arial, sans-serif;
        font-size: 24px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div id="score">得分: 0</div>
    <script src="game.js"></script>
  </body>
</html>

JavaScript部分#

game.js
const canvas = document.getElementById('gameCanvas')
const ctx = canvas.getContext('2d')
const scoreElement = document.getElementById('score') // 获取得分元素
const scale = 20
const rows = canvas.height / scale
const columns = canvas.width / scale
let score = 0 // 初始化得分
let paused = false // 初始化暂停状态


window.addEventListener('keydown', evt => {
  const direction = evt.key.replace('Arrow', '')
  snake.changeDirection(direction)
})


function Snake() {
  this.currentDirection = 'Right' // 初始化当前方向
  this.x = 0
  this.y = 0
  this.xSpeed = scale * 1
  this.ySpeed = 0
  this.total = 0
  this.tail = []


  this.draw = function () {
    ctx.fillStyle = '#FFFFFF'
    for (let i = 0; i < this.tail.length; i++) {
      ctx.fillRect(this.tail[i].x, this.tail[i].y, scale, scale)
    }


    ctx.fillRect(this.x, this.y, scale, scale)
  }


  this.update = function () {
    for (let i = 0; i < this.tail.length - 1; i++) {
      this.tail[i] = this.tail[i + 1]
    }


    this.tail[this.total - 1] = {x: this.x, y: this.y}


    this.x += this.xSpeed
    this.y += this.ySpeed


    if (this.x > canvas.width) {
      this.x = 0
    }


    if (this.y > canvas.height) {
      this.y = 0
    }


    if (this.x < 0) {
      this.x = canvas.width
    }


    if (this.y < 0) {
      this.y = canvas.height
    }
  }


  this.changeDirection = function (direction) {
    const oppositeDirections = {
      Up: 'Down',
      Down: 'Up',
      Left: 'Right',
      Right: 'Left',
    }


    // 防止蛇掉头
    if (oppositeDirections[direction] !== this.currentDirection) {
      switch (direction) {
        case 'Up':
          this.xSpeed = 0
          this.ySpeed = -scale * 1
          break
        case 'Down':
          this.xSpeed = 0
          this.ySpeed = scale * 1
          break
        case 'Left':
          this.xSpeed = -scale * 1
          this.ySpeed = 0
          break
        case 'Right':
          this.xSpeed = scale * 1
          this.ySpeed = 0
          break
      }
      this.currentDirection = direction // 更新当前方向
    }
  }


  this.eat = function (fruit) {
    if (this.x === fruit.x && this.y === fruit.y) {
      this.total++
      return true
    }


    return false
  }


  this.checkCollision = function () {
    for (let i = 0; i < this.tail.length; i++) {
      if (this.x === this.tail[i].x && this.y === this.tail[i].y) {
        this.total = 0
        this.tail = []
      }
    }
  }
}


function Food() {
  this.x
  this.y


  this.pickLocation = function () {
    let locationFound = false
    while (!locationFound) {
      this.x = (Math.floor(Math.random() * rows - 1) + 1) * scale
      this.y = (Math.floor(Math.random() * columns - 1) + 1) * scale
      locationFound = true // 假设位置是好的，除非下面的循环证明不是


      // 检查食物是否生成在蛇的身体上
      for (let i = 0; i < snake.tail.length; i++) {
        if (this.x === snake.tail[i].x && this.y === snake.tail[i].y) {
          locationFound = false // 如果食物在蛇的身体上，重新寻找位置
          break
        }
      }
    }
  }


  this.draw = function () {
    ctx.fillStyle = '#FF0000'
    ctx.fillRect(this.x, this.y, scale, scale)
  }
}


const snake = new Snake()
let food = new Food()
food.pickLocation()


function gameLoop() {
  if (!paused) {
    // 如果游戏没有暂停，则更新游戏
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    snake.update()
    snake.draw()
    food.draw()


    // Check for collision with food
    if (snake.x === food.x && snake.y === food.y) {
      snake.total++
      score += 10 // 每次吃到食物得分增加10
      updateScore() // 更新得分显示
      food = new Food() // 创建新的食物实例
      food.pickLocation() // 为新食物设置位置
    }


    // Check for collision with self
    for (let i = 0; i < snake.tail.length; i++) {
      if (snake.x === snake.tail[i].x && snake.y === snake.tail[i].y) {
        snake.total = 0
        score = 0 // 重置得分
        updateScore() // 更新得分显示
        snake.tail = []
      }
    }
  }
  setTimeout(gameLoop, 1000 / 10) // 10 updates per second
}


gameLoop()


// Update the score display
function updateScore() {
  scoreElement.textContent = '得分: ' + score
}


// Toggle pause state
function togglePause() {
  paused = !paused
}


// Add keyboard event listener
window.addEventListener('keydown', function (e) {
  let direction = ''
  switch (e.keyCode) {
    case 37:
      direction = 'Left'
      break
    case 38:
      direction = 'Up'
      break
    case 39:
      direction = 'Right'
      break
    case 40:
      direction = 'Down'
      break
    case 32: // Space key to pause/resume the game
      togglePause()
      return // No need to change direction
  }
  if (direction && snake.direction !== direction && snake.direction !== oppositeDirection(direction)) {
    snake.changeDirection(direction)
  }
})


// Helper function to get the opposite direction
function oppositeDirection(direction) {
  switch (direction) {
    case 'Up':
      return 'Down'
    case 'Down':
      return 'Up'
    case 'Left':
      return 'Right'
    case 'Right':
      return 'Left'
  }
}

游戏试玩和下载#

相关工具#

AI开发贪吃蛇（完整代码）
https://march7th.online/blog/posts/0029-ai开发贪吃蛇完整代码/
作者
Yiguo
发布于
2024-11-10
许可协议
CC BY-NC-SA 4.0
最后更新于 2024-11-10，距今已过 364 天

部分内容可能已过时

本地AI搭建-python示例代码
AI开发贪吃蛇
浙ICP备2023002888号-1
© 2025 March7th. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Yiguo

目录