devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

为了让你们进阶 Canvas，我花 7 小时写了 3 个有趣的小游戏！！！

作者：我家自动化 | 2024-03-27 10:16:36

赞

踩

canvas小游戏

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

前言

大家好，我是林三心，相信大家看了我前一篇canvas入门文章为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章，对canvas已经有了入门级的了解。今天，我又用canvas写了三个有趣的小游戏，来哄你们开心，没错，我的心里只有你们，没有她。

现在是凌晨0点15分，咱们开搞????????????????????????????????????????，一边调试一边把这篇文章写了！！！

贪吃蛇????

最终效果如下： 实现步骤分为以下几步：

  • 1、把蛇画出来

  • 2、让蛇动起来

  • 3、随机投放食物

  • 4、蛇吃食物

  • 5、边缘检测与撞自己检测

1. 把蛇画出来

其实画蛇很简单，蛇就是由蛇头和蛇身组成，而其实都可以用正方格来表示，蛇头就是一个方格，而蛇身可以是很多个方格

画方格可以用ctx.fillRect来画，蛇头使用head表示，而蛇身使用数组body来表示

  1. // html
  2. <canvas id="canvas" width="800" height="800"></canvas>
  3.  
  4. // js
  5.  
  6.  
  7. draw()
  8.  
  9. function draw() {
  10.     const canvas = document.getElementById('canvas')
  11.  
  12.     const ctx = canvas.getContext('2d')
  13.  
  14.     // 小方格的构造函数
  15.     function Rect(x, y, width, height, color) {
  16.         this.x = x
  17.         this.y = y
  18.         this.width = width
  19.         this.height = height
  20.         this.color = color
  21.     }
  22.  
  23.     Rect.prototype.draw = function () {
  24.         ctx.beginPath()
  25.         ctx.fillStyle = this.color
  26.         ctx.fillRect(this.x, this.y, this.width, this.height)
  27.         ctx.strokeRect(this.x, this.y, this.width, this.height)
  28.     }
  29.  
  30.     // 蛇的构造函数
  31.     function Snake(length = 0) {
  32.  
  33.         this.length = length
  34.         // 蛇头
  35.         this.head = new Rect(canvas.width / 2, canvas.height / 2, 40, 40, 'red')
  36.  
  37.         // 蛇身
  38.         this.body = []
  39.  
  40.         let x = this.head.x - 40
  41.         let y = this.head.y
  42.  
  43.         for (let i = 0; i < this.length; i++) {
  44.             const rect = new Rect(x, y, 40, 40, 'yellow')
  45.             this.body.push(rect)
  46.             x -= 40
  47.         }
  48.     }
  49.  
  50.     Snake.prototype.drawSnake = function () {
  51.         // 绘制蛇头
  52.         this.head.draw()
  53.         // 绘制蛇身
  54.         for (let i = 0; i < this.body.length; i++) {
  55.             this.body[i].draw()
  56.         }
  57.     }
  58.  
  59.     const snake = new Snake(3)
  60.     snake.drawSnake()
  61. }
  62. 复制代码

2. 让蛇动起来

蛇动起来有两种情况：

  • 1、蛇一开始就会默认向右移动

  • 2、通过方向键控制，往不同方向移动

这两种情况每秒都是移动一个方格的位置

让蛇动起来，其实原理很简单，我就以蛇向右移动来举例子吧：

  • 1、蛇头先右移一个方格距离，蛇身不动

  • 2、蛇身首部加一个方格

  • 3、蛇身尾部的方格去除

  • 4、利用定时器，造成蛇不断向右移动的视觉

  1.     Snake.prototype.moveSnake = function () {
  2.         // 将蛇头上一次状态，拼到蛇身首部
  3.         const rect = new Rect(this.head.x, this.head.y, this.head.width, this.head.height, 'yellow')
  4.         this.body.unshift(rect)
  5.  
  6.         this.body.pop()
  7.  
  8.         // 根据方向，控制蛇头的坐标
  9.         switch (this.direction) {
  10.             case 0:
  11.                 this.head.x -= this.head.width
  12.                 break
  13.             case 1:
  14.                 this.head.y -= this.head.height
  15.                 break
  16.             case 2:
  17.                 this.head.x += this.head.width
  18.                 break
  19.             case 3:
  20.                 this.head.y += this.head.height
  21.                 break
  22.         }
  23.     }
  24.  
  25.     document.onkeydown = function (e) {
  26.         // 键盘事件
  27.         e = e || window.event
  28.         // 左37  上38  右39  下40
  29.         switch (e.keyCode) {
  30.             case 37:
  31.                 console.log(37)
  32.                 // 三元表达式，防止右移动时按左，下面同理(贪吃蛇可不能直接掉头)
  33.                 snake.direction = snake.direction === 2 ? 2 : 0
  34.                 snake.moveSnake()
  35.                 break
  36.             case 38:
  37.                 console.log(38)
  38.                 snake.direction = snake.direction === 3 ? 3 : 1
  39.                 break
  40.             case 39:
  41.                 console.log(39)
  42.                 snake.direction = snake.direction === 0 ? 0 : 2
  43.                 break
  44.             case 40:
  45.                 console.log(40)
  46.                 snake.direction = snake.direction === 1 ? 1 : 3
  47.                 break
  48.  
  49.         }
  50.     }
  51.  
  52.     const snake = new Snake(3)
  53.     // 默认direction为2，也就是右
  54.     snake.direction = 2
  55.     snake.drawSnake()
  56.  
  57.     function animate() {
  58.         // 先清空
  59.         ctx.clearRect(0, 0, canvas.width, canvas.height)
  60.         // 移动
  61.         snake.moveSnake()
  62.         // 再画
  63.         snake.drawSnake()
  64.     }
  65.  
  66.     var timer = setInterval(() => {
  67.         animate()
  68.     }, 100)
  69. }
  70. 复制代码

实现效果如下：

蛇动起来.gif

3. 随机投放食物

随机投放食物，也就是在画布中随机画一个方格，要注意以下两点：

  • 1、坐标要在画布范围内

  • 2、食物不能投到蛇身或者蛇头上(这样会把蛇砸晕的嘿嘿)

  1.     function randomFood(snake) {
  2.         let isInSnake = true
  3.         let rect
  4.         while (isInSnake) {
  5.             const x = Math.round(Math.random() * (canvas.width - 40) / 40) * 40
  6.             const y = Math.round(Math.random() * (canvas.height - 40) / 40) * 40
  7.             console.log(x, y)
  8.             // 保证是40的倍数啊
  9.             rect = new Rect(x, y, 40, 40, 'blue')
  10.             // 判断食物是否与蛇头蛇身重叠
  11.             if ((snake.head.x === x && snake.head.y === y) || snake.body.find(item => item.x === x && item.y === y)) {
  12.                 isInSnake = true
  13.                 continue
  14.             } else {
  15.                 isInSnake = false
  16.             }
  17.         }
  18.         return rect
  19.     }
  20.  
  21.     const snake = new Snake(3)
  22.     // 默认direction为2，也就是右
  23.     snake.direction = 2
  24.     snake.drawSnake()
  25.     // 创建随机食物实例
  26.     var food = randomFood(snake)
  27.     // 画出食物
  28.     food.draw()
  29.  
  30.     function animate() {
  31.         // 先清空
  32.         ctx.clearRect(0, 0, canvas.width, canvas.height)
  33.         // 移动
  34.         snake.moveSnake()
  35.         // 再画
  36.         snake.drawSnake()
  37.         food.draw()
  38.     }
  39. 复制代码

效果如下，随机食物画出来了：

4. 蛇吃食物

其实蛇吃食物，很简单理解，也就是蛇头移动到跟食物的坐标重叠时，就算是吃到食物了，注意两点：

  • 1、吃到食物后，蛇身要延长一个空格

  • 2、吃到食物后，随机食物要变换位置

  1. const canvas = document.getElementById('canvas')
  2.  
  3. const ctx = canvas.getContext('2d')
  4.  
  5. // 定义一个全局的是否吃到食物的一个变量
  6. let isEatFood = false
  7.     
  8.  
  9.     Snake.prototype.moveSnake = function () {
  10.         // 将蛇头上一次状态，拼到蛇身首部
  11.         const rect = new Rect(this.head.x, this.head.y, this.head.width, this.head.height, 'yellow')
  12.         this.body.unshift(rect)
  13.  
  14.         // 判断蛇头是否与食物重叠，重叠就是吃到了，没重叠就是没吃到
  15.         isEatFood = food && this.head.x === food.x && this.head.y === food.y
  16.  
  17.         // 咱们上面在蛇身首部插入方格
  18.         if (!isEatFood) {
  19.             // 没吃到就要去尾，相当于整条蛇没变长
  20.             this.body.pop()
  21.         } else {
  22.             // 吃到了就不去尾，相当于整条蛇延长一个方格
  23.  
  24.             // 并且吃到了，就要重新生成一个随机食物
  25.             food = randomFood(this)
  26.             food.draw()
  27.             isEatFood = false
  28.         }
  29.  
  30.         // 根据方向，控制蛇头的坐标
  31.         switch (this.direction) {
  32.             case 0:
  33.                 this.head.x -= this.head.width
  34.                 break
  35.             case 1:
  36.                 this.head.y -= this.head.height
  37.                 break
  38.             case 2:
  39.                 this.head.x += this.head.width
  40.                 break
  41.             case 3:
  42.                 this.head.y += this.head.height
  43.                 break
  44.         }
  45.     }
  46. 复制代码

5. 碰边界与碰自己

众所周知，蛇头碰到边界，或者碰到蛇身，都会终止游戏

  1.     Snake.prototype.drawSnake = function () {
  2.         // 如果碰到了
  3.         if (isHit(this)) {
  4.             // 清除定时器
  5.             clearInterval(timer)
  6.             const con = confirm(`总共吃了${this.body.length - this.length}个食物，重新开始吗`)
  7.             // 是否重开
  8.             if (con) {
  9.                 draw()
  10.             }
  11.             return
  12.         }
  13.         // 绘制蛇头
  14.         this.head.draw()
  15.         // 绘制蛇身
  16.         for (let i = 0; i < this.body.length; i++) {
  17.             this.body[i].draw()
  18.         }
  19.     }
  20.     
  21.     
  22.     function isHit(snake) {
  23.         const head = snake.head
  24.         // 是否碰到左右边界
  25.         const xLimit = head.x < 0 || head.x >= canvas.width
  26.         // 是否碰到上下边界
  27.         const yLimit = head.y < 0 || head.y >= canvas.height
  28.         // 是否撞到蛇身
  29.         const hitSelf = snake.body.find(({ x, y }) => head.x === x && head.y === y)
  30.         // 三者其中一个为true则游戏结束
  31.         return xLimit || yLimit || hitSelf
  32.     }
  33. 复制代码

自此，贪吃蛇????小游戏完成喽：

6. 全部代码：

  1.  
  2. draw()
  3.  
  4. function draw() {
  5.     const canvas = document.getElementById('canvas')
  6.  
  7.     const ctx = canvas.getContext('2d')
  8.  
  9.     // 定义一个全局的是否吃到食物的一个变量
  10.     let isEatFood = false
  11.  
  12.     // 小方格的构造函数
  13.     function Rect(x, y, width, height, color) {
  14.         this.x = x
  15.         this.y = y
  16.         this.width = width
  17.         this.height = height
  18.         this.color = color
  19.     }
  20.  
  21.     Rect.prototype.draw = function () {
  22.         ctx.beginPath()
  23.         ctx.fillStyle = this.color
  24.         ctx.fillRect(this.x, this.y, this.width, this.height)
  25.         ctx.strokeRect(this.x, this.y, this.width, this.height)
  26.     }
  27.  
  28.     // 蛇的构造函数
  29.     function Snake(length = 0) {
  30.  
  31.         this.length = length
  32.         // 蛇头
  33.         this.head = new Rect(canvas.width / 2, canvas.height / 2, 40, 40, 'red')
  34.  
  35.         // 蛇身
  36.         this.body = []
  37.  
  38.         let x = this.head.x - 40
  39.         let y = this.head.y
  40.  
  41.         for (let i = 0; i < this.length; i++) {
  42.             const rect = new Rect(x, y, 40, 40, 'yellow')
  43.             this.body.push(rect)
  44.             x -= 40
  45.         }
  46.     }
  47.  
  48.     Snake.prototype.drawSnake = function () {
  49.         // 如果碰到了
  50.         if (isHit(this)) {
  51.             // 清除定时器
  52.             clearInterval(timer)
  53.             const con = confirm(`总共吃了${this.body.length - this.length}个食物，重新开始吗`)
  54.             // 是否重开
  55.             if (con) {
  56.                 draw()
  57.             }
  58.             return
  59.         }
  60.         // 绘制蛇头
  61.         this.head.draw()
  62.         // 绘制蛇身
  63.         for (let i = 0; i < this.body.length; i++) {
  64.             this.body[i].draw()
  65.         }
  66.     }
  67.  
  68.     Snake.prototype.moveSnake = function () {
  69.         // 将蛇头上一次状态，拼到蛇身首部
  70.         const rect = new Rect(this.head.x, this.head.y, this.head.width, this.head.height, 'yellow')
  71.         this.body.unshift(rect)
  72.  
  73.         // 判断蛇头是否与食物重叠，重叠就是吃到了，没重叠就是没吃到
  74.         isEatFood = food && this.head.x === food.x && this.head.y === food.y
  75.  
  76.         // 咱们上面在蛇身首部插入方格
  77.         if (!isEatFood) {
  78.             // 没吃到就要去尾，相当于整条蛇没变长
  79.             this.body.pop()
  80.         } else {
  81.             // 吃到了就不去尾，相当于整条蛇延长一个方格
  82.  
  83.             // 并且吃到了，就要重新生成一个随机食物
  84.             food = randomFood(this)
  85.             food.draw()
  86.             isEatFood = false
  87.         }
  88.  
  89.         // 根据方向，控制蛇头的坐标
  90.         switch (this.direction) {
  91.             case 0:
  92.                 this.head.x -= this.head.width
  93.                 break
  94.             case 1:
  95.                 this.head.y -= this.head.height
  96.                 break
  97.             case 2:
  98.                 this.head.x += this.head.width
  99.                 break
  100.             case 3:
  101.                 this.head.y += this.head.height
  102.                 break
  103.         }
  104.     }
  105.  
  106.     document.onkeydown = function (e) {
  107.         // 键盘事件
  108.         e = e || window.event
  109.         // 左37  上38  右39  下40
  110.         switch (e.keyCode) {
  111.             case 37:
  112.                 console.log(37)
  113.                 // 三元表达式，防止右移动时按左，下面同理(贪吃蛇可不能直接掉头)
  114.                 snake.direction = snake.direction === 2 ? 2 : 0
  115.                 snake.moveSnake()
  116.                 break
  117.             case 38:
  118.                 console.log(38)
  119.                 snake.direction = snake.direction === 3 ? 3 : 1
  120.                 break
  121.             case 39:
  122.                 console.log(39)
  123.                 snake.direction = snake.direction === 0 ? 0 : 2
  124.                 break
  125.             case 40:
  126.                 console.log(40)
  127.                 snake.direction = snake.direction === 1 ? 1 : 3
  128.                 break
  129.  
  130.         }
  131.     }
  132.  
  133.     function randomFood(snake) {
  134.         let isInSnake = true
  135.         let rect
  136.         while (isInSnake) {
  137.             const x = Math.round(Math.random() * (canvas.width - 40) / 40) * 40
  138.             const y = Math.round(Math.random() * (canvas.height - 40) / 40) * 40
  139.             console.log(x, y)
  140.             // 保证是40的倍数啊
  141.             rect = new Rect(x, y, 40, 40, 'blue')
  142.             // 判断食物是否与蛇头蛇身重叠
  143.             if ((snake.head.x === x && snake.head.y === y) || snake.body.find(item => item.x === x && item.y === y)) {
  144.                 isInSnake = true
  145.                 continue
  146.             } else {
  147.                 isInSnake = false
  148.             }
  149.         }
  150.         return rect
  151.     }
  152.  
  153.     function isHit(snake) {
  154.         const head = snake.head
  155.         // 是否碰到左右边界
  156.         const xLimit = head.x < 0 || head.x >= canvas.width
  157.         // 是否碰到上下边界
  158.         const yLimit = head.y < 0 || head.y >= canvas.height
  159.         // 是否撞到蛇身
  160.         const hitSelf = snake.body.find(({ x, y }) => head.x === x && head.y === y)
  161.         // 三者其中一个为true则游戏结束
  162.         return xLimit || yLimit || hitSelf
  163.     }
  164.  
  165.     const snake = new Snake(3)
  166.     // 默认direction为2，也就是右
  167.     snake.direction = 2
  168.     snake.drawSnake()
  169.     // 创建随机食物实例
  170.     var food = randomFood(snake)
  171.     // 画出食物
  172.     food.draw()
  173.  
  174.     function animate() {
  175.         // 先清空
  176.         ctx.clearRect(0, 0, canvas.width, canvas.height)
  177.         // 移动
  178.         snake.moveSnake()
  179.         // 再画
  180.         snake.drawSnake()
  181.         food.draw()
  182.     }
  183.  
  184.     var timer = setInterval(() => {
  185.         animate()
  186.     }, 100)
  187. }
  188. 复制代码

星星连线

效果如下，是不是很酷炫呢，兄弟们（背景图片[3] 可以自己去下载一下）：

星星连线.gif

这个小游戏可分为以下几步：

  • 1、画出单个小星星并使他移动

  • 2、造出一百个小星星

  • 3、星星之间靠近时，进行连线

  • 4、鼠标移动生成小星星

  • 5、鼠标点击产生5个小星星

1. 画出单个小星星，并使他移动

其实移动星星很简单，就是清除后重新绘制星星，并利用定时器，就会有移动的视觉了。注意点在于：碰到边界要反弹。

  1. // html
  2. <style>
  3.     #canvas {
  4.             background: url(./光能使者.jpg) 0 0/cover no-repeat;
  5.         }
  6. </style>
  7. <canvas id="canvas"></canvas>
  8.  
  9. // js
  10.  
  11. const canvas = document.getElementById('canvas')
  12.  
  13. const ctx = canvas.getContext('2d')
  14.  
  15. // 获取当前视图的宽度和高度
  16. let aw = document.documentElement.clientWidth || document.body.clientWidth
  17. let ah = document.documentElement.clientHeight || document.body.clientHeight
  18. // 赋值给canvas
  19. canvas.width = aw
  20. canvas.height = ah
  21.  
  22. // 屏幕变动时也要监听实时宽高
  23. window.onresize = function () {
  24.     aw = document.documentElement.clientWidth || document.body.clientWidth
  25.     ah = document.documentElement.clientHeight || document.body.clientHeight
  26.     // 赋值给canvas
  27.     canvas.width = aw
  28.     canvas.height = ah
  29. }
  30.  
  31. // 本游戏无论是实心，还是线条，色调都是白色
  32. ctx.fillStyle = 'white'
  33. ctx.strokeStyle = 'white'
  34.  
  35. function Star(x, y, r) {
  36.     // x，y是坐标，r是半径
  37.     this.x = x
  38.     this.y = y
  39.     this.r = r
  40.     // speed参数，在  -3 ~ 3 之间取值
  41.     this.speedX = (Math.random() * 3) * Math.pow(-1, Math.round(Math.random()))
  42.     this.speedY = (Math.random() * 3) * Math.pow(-1, Math.round(Math.random()))
  43. }
  44.  
  45. Star.prototype.draw = function () {
  46.     ctx.beginPath()
  47.     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
  48.     ctx.fill()
  49.     ctx.closePath()
  50. }
  51.  
  52. Star.prototype.move = function () {
  53.     this.x -= this.speedX
  54.     this.y -= this.speedY
  55.     // 碰到边界时，反弹，只需要把speed取反就行
  56.     if (this.x < 0 || this.x > aw) this.speedX *= -1
  57.     if (this.y < 0 || this.y > ah) this.speedY *= -1
  58. }
  59.  
  60. // 随机在canvas范围内找一个坐标画星星
  61. const star = new Star(Math.random() * aw, Math.random() * ah, 3)
  62. star
  63.  
  64. // 星星的移动
  65. setInterval(() => {
  66.     ctx.clearRect(0, 0, aw, ah)
  67.     star.move()
  68.     star.draw()
  69. }, 50)
  70. 复制代码

达到以下移动以及反弹的效果：

星星反弹.gif

2、画100个小星星

创建一个数组stars来存储这些星星

  1. const stars = []
  2. for (let i = 0; i < 100; i++) {
  3.     // 随机在canvas范围内找一个坐标画星星
  4.     stars.push(new Star(Math.random() * aw, Math.random() * ah, 3))
  5. }
  6.  
  7. // 星星的移动
  8. setInterval(() => {
  9.     ctx.clearRect(0, 0, aw, ah)
  10.     // 遍历移动渲染
  11.     stars.forEach(star => {
  12.         star.move()
  13.         star.draw()
  14.     })
  15. }, 50)
  16. 复制代码

效果如下：

100个星星.gif

3. 星星之间靠近时，进行连线

当两个星星的x和y相差都小于50时，就进行连线，连线只需要使用ctx.moveTo和ctx.lineTo就可以了

  1. function drawLine(startX, startY, endX, endY) {
  2.     ctx.beginPath()
  3.     ctx.moveTo(startX, startY)
  4.     ctx.lineTo(endX, endY)
  5.     ctx.stroke()
  6.     ctx.closePath()
  7. }
  8.  
  9. // 星星的移动
  10. setInterval(() => {
  11.     ctx.clearRect(0, 0, aw, ah)
  12.     // 遍历移动渲染
  13.     stars.forEach(star => {
  14.         star.move()
  15.         star.draw()
  16.     })
  17.     stars.forEach((star, index) => {
  18.         // 类似于冒泡排序那样，去比较，确保所有星星两两之间都比较到
  19.         for (let i = index + 1; i < stars.length; i++) {
  20.             if (Math.abs(star.x - stars[i].x) < 50 && Math.abs(star.y - stars[i].y) < 50) {
  21.                 drawLine(star.x, star.y, stars[i].x, stars[i].y)
  22.             }
  23.         }
  24.     })
  25. }, 50)
  26. 复制代码

大家可以想一想，为什么两个forEach不能何在一起去执行。这是个值得思考的问题，或者大家可以合并在一起执行，试试效果，获取就懂了。算是给大家留的一个作业哈！

效果如下：

连线星星.gif

4.鼠标移动时带着小星星

也就是鼠标到哪，那个小星星就到哪，并且这个小星星走到哪都会跟距离近的小星星连线

  1. const mouseStar = new Star(0, 0, 3)
  2.  
  3. canvas.onmousemove = function (e) {
  4.     mouseStar.x = e.clientX
  5.     mouseStar.y = e.clientY
  6. }
  7.  
  8. // 星星的移动
  9. setInterval(() => {
  10.     ctx.clearRect(0, 0, aw, ah)
  11.     // 鼠标星星渲染
  12.     mouseStar.draw()
  13.     // 遍历移动渲染
  14.     stars.forEach(star => {
  15.         star.move()
  16.         star.draw()
  17.     })
  18.     stars.forEach((star, index) => {
  19.         // 类似于冒泡排序那样，去比较，确保所有星星两两之间都比较到
  20.         for (let i = index + 1; i < stars.length; i++) {
  21.             if (Math.abs(star.x - stars[i].x) < 50 && Math.abs(star.y - stars[i].y) < 50) {
  22.                 drawLine(star.x, star.y, stars[i].x, stars[i].y)
  23.             }
  24.         }
  25.         // 判断鼠标星星连线
  26.         if (Math.abs(mouseStar.x - star.x) < 50 && Math.abs(mouseStar.y - star.y) < 50) {
  27.             drawLine(mouseStar.x, mouseStar.y, star.x, star.y)
  28.         }
  29.     })
  30. }, 50)
  31. 复制代码

效果如下：

鼠标星星.gif

5. 鼠标点击生成五个小星星

思路就是，鼠标点击，生成5个小星星，并加到数组stars中

  1. window.onclick = function (e) {
  2.     for (let i = 0; i < 5; i++) {
  3.         stars.push(new Star(e.clientX, e.clientY, 3))
  4.     }
  5. }
  6. 复制代码

效果如下：

点击生成星星.gif

最终效果：TODO: 图片待插入

6. 全部代码

  1. const canvas = document.getElementById('canvas')
  2.  
  3. const ctx = canvas.getContext('2d')
  4.  
  5. // 获取当前视图的宽度和高度
  6. let aw = document.documentElement.clientWidth || document.body.clientWidth
  7. let ah = document.documentElement.clientHeight || document.body.clientHeight
  8. // 赋值给canvas
  9. canvas.width = aw
  10. canvas.height = ah
  11.  
  12. // 屏幕变动时也要监听实时宽高
  13. window.onresize = function () {
  14.     aw = document.documentElement.clientWidth || document.body.clientWidth
  15.     ah = document.documentElement.clientHeight || document.body.clientHeight
  16.     // 赋值给canvas
  17.     canvas.width = aw
  18.     canvas.height = ah
  19. }
  20.  
  21. // 本游戏无论是实心，还是线条，色调都是白色
  22. ctx.fillStyle = 'white'
  23. ctx.strokeStyle = 'white'
  24.  
  25. function Star(x, y, r) {
  26.     // x，y是坐标，r是半径
  27.     this.x = x
  28.     this.y = y
  29.     this.r = r
  30.     // speed参数，在  -3 ~ 3 之间取值
  31.     this.speedX = (Math.random() * 3) * Math.pow(-1, Math.round(Math.random()))
  32.     this.speedY = (Math.random() * 3) * Math.pow(-1, Math.round(Math.random()))
  33. }
  34.  
  35. Star.prototype.draw = function () {
  36.     ctx.beginPath()
  37.     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
  38.     ctx.fill()
  39.     ctx.closePath()
  40. }
  41.  
  42. Star.prototype.move = function () {
  43.     this.x -= this.speedX
  44.     this.y -= this.speedY
  45.     // 碰到边界时，反弹，只需要把speed取反就行
  46.     if (this.x < 0 || this.x > aw) this.speedX *= -1
  47.     if (this.y < 0 || this.y > ah) this.speedY *= -1
  48. }
  49.  
  50. function drawLine(startX, startY, endX, endY) {
  51.     ctx.beginPath()
  52.     ctx.moveTo(startX, startY)
  53.     ctx.lineTo(endX, endY)
  54.     ctx.stroke()
  55.     ctx.closePath()
  56. }
  57.  
  58. const stars = []
  59. for (let i = 0; i < 100; i++) {
  60.     // 随机在canvas范围内找一个坐标画星星
  61.     stars.push(new Star(Math.random() * aw, Math.random() * ah, 3))
  62. }
  63.  
  64. const mouseStar = new Star(0, 0, 3)
  65.  
  66. canvas.onmousemove = function (e) {
  67.     mouseStar.x = e.clientX
  68.     mouseStar.y = e.clientY
  69. }
  70. window.onclick = function (e) {
  71.     for (let i = 0; i < 5; i++) {
  72.         stars.push(new Star(e.clientX, e.clientY, 3))
  73.     }
  74. }
  75.  
  76. // 星星的移动
  77. setInterval(() => {
  78.     ctx.clearRect(0, 0, aw, ah)
  79.     // 鼠标星星渲染
  80.     mouseStar.draw()
  81.     // 遍历移动渲染
  82.     stars.forEach(star => {
  83.         star.move()
  84.         star.draw()
  85.     })
  86.     stars.forEach((star, index) => {
  87.         // 类似于冒泡排序那样，去比较，确保所有星星两两之间都比较到
  88.         for (let i = index + 1; i < stars.length; i++) {
  89.             if (Math.abs(star.x - stars[i].x) < 50 && Math.abs(star.y - stars[i].y) < 50) {
  90.                 drawLine(star.x, star.y, stars[i].x, stars[i].y)
  91.             }
  92.         }
  93.  
  94.         if (Math.abs(mouseStar.x - star.x) < 50 && Math.abs(mouseStar.y - star.y) < 50) {
  95.             drawLine(mouseStar.x, mouseStar.y, star.x, star.y)
  96.         }
  97.     })
  98. }, 50)
  99. 复制代码

3. 五子棋

看看将实现的效果：

五子棋分为以下步骤：

  • 1、画出棋盘

  • 2、黑白棋切换着下，不能覆盖已下的坑位

  • 3、判断是否五连子，是的话就赢了

  • 4、彩蛋：跟AI下棋（实现单人玩游戏）

1. 画出棋盘

其实很简单，利用ctx.moveTo和ctx.lineTo，横着画15条线，竖着画15条线，就OK了。

  1. // html
  2. #canvas {
  3.             background: #e3cdb0;
  4.         }
  5. <canvas id="canvas" width="600" height="600"></canvas>
  6.  
  7.  
  8. // js
  9. play()
  10.  
  11. function play() {
  12.     const canvas = document.getElementById('canvas')
  13.  
  14.     const ctx = canvas.getContext('2d')
  15.  
  16.     // 绘制棋盘
  17.  
  18.     // 水平，总共15条线
  19.     for (let i = 0; i < 15; i++) {
  20.         ctx.beginPath()
  21.         ctx.moveTo(20, 20 + i * 40)
  22.         ctx.lineTo(580, 20 + i * 40)
  23.         ctx.stroke()
  24.         ctx.closePath()
  25.     }
  26.  
  27.     // 垂直，总共15条线
  28.     for (let i = 0; i < 15; i++) {
  29.         ctx.beginPath()
  30.         ctx.moveTo(20 + i * 40, 20)
  31.         ctx.lineTo(20 + i * 40, 580)
  32.         ctx.stroke()
  33.         ctx.closePath()
  34.     }
  35. }
  36. 复制代码

这样就画出了棋盘：

截屏2021-07-25 下午12.25.09.png

2. 黑白棋切换着下

  • 1、鼠标点击事件，获取坐标，将棋画出来（ctx.arc）

  • 2、确保已下的棋位不能重复下

第一步，获取鼠标坐标，但是我们要注意一件事，棋子只能下在线的交叉处，所以拿到鼠标坐标后，要做一下处理，四舍五入，以最近的一个线交叉点为圆的圆心

第二步，如何确保棋位不重复下呢？咱们可以使用一个二维数组来记录，初始是0，下过黑棋就变为1，下过白棋就变为2，但是这里要注意一点，数组索引的x，y跟画布坐标的x，y是相反的，所以后面代码里坐标反过来，希望大家能思考一下为啥。

截屏2021-07-25 下午12.33.29.png 
  1. // 是否下黑棋
  2.     // 黑棋先走
  3.     let isBlack = true
  4.  
  5.  
  6.     // 棋盘二维数组
  7.     let cheeks = []
  8.  
  9.     for (let i = 0; i < 15; i++) {
  10.         cheeks[i] = new Array(15).fill(0)
  11.     }
  12.  
  13.     canvas.onclick = function (e) {
  14.         const clientX = e.clientX
  15.         const clientY = e.clientY
  16.         // 对40进行取整，确保棋子落在交叉处
  17.         const x = Math.round((clientX - 20) / 40) * 40 + 20
  18.         const y = Math.round((clientY - 20) / 40) * 40 + 20
  19.         // cheeks二维数组的索引
  20.         // 这么写有点冗余，这么写你们好理解一点
  21.         const cheeksX = (x - 20) / 40
  22.         const cheeksY = (y - 20) / 40
  23.         // 对应元素不为0说明此地方已有棋，返回
  24.         if (cheeks[cheeksY][cheeksX]) return
  25.         // 黑棋为1，白棋为2
  26.         cheeks[cheeksY][cheeksX] = isBlack ? 1 : 2
  27.         ctx.beginPath()
  28.         // 画圆
  29.         ctx.arc(x, y, 20, 0, 2 * Math.PI)
  30.         // 判断走黑还是白
  31.         ctx.fillStyle = isBlack ? 'black' : 'white'
  32.         ctx.fill()
  33.         ctx.closePath()
  34.         // 切换黑白
  35.         isBlack = !isBlack
  36.     }
  37. 复制代码

效果如下：

3. 判断是否五连子

如何判断呢？有四种情况：上下五连子，左右吴连子，左上右下五连子，右上左下五连子，只要咱们每次落子的时候全部判断一次就好了。

截屏2021-07-25 下午12.55.53.png

顺便附上所有代码

  1. play()
  2.  
  3. function play() {
  4.     const canvas = document.getElementById('canvas')
  5.  
  6.     const ctx = canvas.getContext('2d')
  7.  
  8.     // 绘制棋盘
  9.  
  10.     // 水平，总共15条线
  11.     for (let i = 0; i < 15; i++) {
  12.         ctx.beginPath()
  13.         ctx.moveTo(20, 20 + i * 40)
  14.         ctx.lineTo(580, 20 + i * 40)
  15.         ctx.stroke()
  16.         ctx.closePath()
  17.     }
  18.  
  19.     // 垂直，总共15条线
  20.     for (let i = 0; i < 15; i++) {
  21.         ctx.beginPath()
  22.         ctx.moveTo(20 + i * 40, 20)
  23.         ctx.lineTo(20 + i * 40, 580)
  24.         ctx.stroke()
  25.         ctx.closePath()
  26.     }
  27.  
  28.     // 是否下黑棋
  29.     // 黑棋先走
  30.     let isBlack = true
  31.  
  32.  
  33.     // 棋盘二维数组
  34.     let cheeks = []
  35.  
  36.     for (let i = 0; i < 15; i++) {
  37.         cheeks[i] = new Array(15).fill(0)
  38.     }
  39.  
  40.     canvas.onclick = function (e) {
  41.         const clientX = e.clientX
  42.         const clientY = e.clientY
  43.         // 对40进行取整，确保棋子落在交叉处
  44.         const x = Math.round((clientX - 20) / 40) * 40 + 20
  45.         const y = Math.round((clientY - 20) / 40) * 40 + 20
  46.         // cheeks二维数组的索引
  47.         // 这么写有点冗余，这么写你们好理解一点
  48.         const cheeksX = (x - 20) / 40
  49.         const cheeksY = (y - 20) / 40
  50.         // 对应元素不为0说明此地方已有棋，返回
  51.         if (cheeks[cheeksY][cheeksX]) return
  52.         // 黑棋为1，白棋为2
  53.         cheeks[cheeksY][cheeksX] = isBlack ? 1 : 2
  54.         ctx.beginPath()
  55.         // 画圆
  56.         ctx.arc(x, y, 20, 0, 2 * Math.PI)
  57.         // 判断走黑还是白
  58.         ctx.fillStyle = isBlack ? 'black' : 'white'
  59.         ctx.fill()
  60.         ctx.closePath()
  61.  
  62.         // canvas画图是异步的，保证画出来再去检测输赢
  63.         setTimeout(() => {
  64.             if (isWin(cheeksX, cheeksY)) {
  65.                 const con = confirm(`${isBlack ? '黑棋' : '白棋'}赢了！是否重新开局？`)
  66.                 // 重新开局
  67.                 ctx.clearRect(0, 0, 600, 600)
  68.                 con && play()
  69.             }
  70.             // 切换黑白
  71.             isBlack = !isBlack
  72.         }, 0)
  73.     }
  74.     // 判断是否五连子
  75.     function isWin(x, y) {
  76.         const flag = isBlack ? 1 : 2
  77.         // 上和下
  78.         if (up_down(x, y, flag)) {
  79.             return true
  80.         }
  81.  
  82.         // 左和右
  83.         if (left_right(x, y, flag)) {
  84.             return true
  85.         }
  86.         // 左上和右下
  87.         if (lu_rd(x, y, flag)) {
  88.             return true
  89.         }
  90.  
  91.         // 右上和左下
  92.         if (ru_ld(x, y, flag)) {
  93.             return true
  94.         }
  95.  
  96.         return false
  97.     }
  98.  
  99.     function up_down(x, y, flag) {
  100.         let num = 1
  101.         // 向上找
  102.         for (let i = 1; i < 5; i++) {
  103.             let tempY = y - i
  104.             console.log(x, tempY)
  105.             if (tempY < 0 || cheeks[tempY][x] !== flag) break
  106.             if (cheeks[tempY][x] === flag) num += 1
  107.         }
  108.         // 向下找
  109.         for (let i = 1; i < 5; i++) {
  110.             let tempY = y + i
  111.             console.log(x, tempY)
  112.             if (tempY > 14 || cheeks[tempY][x] !== flag) break
  113.             if (cheeks[tempY][x] === flag) num += 1
  114.         }
  115.         return num >= 5
  116.     }
  117.  
  118.     function left_right(x, y, flag) {
  119.         let num = 1
  120.         // 向左找
  121.         for (let i = 1; i < 5; i++) {
  122.             let tempX = x - i
  123.             if (tempX < 0 || cheeks[y][tempX] !== flag) break
  124.             if (cheeks[y][tempX] === flag) num += 1
  125.         }
  126.         // 向右找
  127.         for (let i = 1; i < 5; i++) {
  128.             let tempX = x + i
  129.             if (tempX > 14 || cheeks[y][tempX] !== flag) break
  130.             if (cheeks[y][tempX] === flag) num += 1
  131.         }
  132.         return num >= 5
  133.  
  134.     }
  135.  
  136.     function lu_rd(x, y, flag) {
  137.         let num = 1
  138.         // 向左上找
  139.         for (let i = 1; i < 5; i++) {
  140.             let tempX = x - i
  141.             let tempY = y - i
  142.             if (tempX < 0 || tempY < 0 || cheeks[tempY][tempX] !== flag) break
  143.             if (cheeks[tempY][tempX] === flag) num += 1
  144.         }
  145.         // 向右下找
  146.         for (let i = 1; i < 5; i++) {
  147.             let tempX = x + i
  148.             let tempY = y + i
  149.             if (tempX > 14 || tempY > 14 || cheeks[tempY][tempX] !== flag) break
  150.             if (cheeks[tempY][tempX] === flag) num += 1
  151.         }
  152.  
  153.         return num >= 5
  154.     }
  155.  
  156.     function ru_ld(x, y, flag) {
  157.         let num = 1
  158.         // 向右上找
  159.         for (let i = 1; i < 5; i++) {
  160.             let tempX = x - i
  161.             let tempY = y + i
  162.             if (tempX < 0 || tempY > 14 || cheeks[tempY][tempX] !== flag) break
  163.             if (cheeks[tempY][tempX] === flag) num += 1
  164.         }
  165.         // 向左下找
  166.         for (let i = 1; i < 5; i++) {
  167.             let tempX = x + i
  168.             let tempY = y - i
  169.             if (tempX > 14 || tempY < 0 || cheeks[tempY][tempX] !== flag) break
  170.             if (cheeks[tempY][tempX] === flag) num += 1
  171.         }
  172.  
  173.         return num >= 5
  174.     }
  175.  
  176. }
  177.  
  178. 复制代码

4. 彩蛋：与AI下棋

其实很简单，每次下完棋，设置一个函数：随机找位置下棋。这样就实现了和电脑下棋，单人游戏的功能了，这个功能我已经实现，但是我就不写出来了，交给大家吧，当做是大家巩固这篇文章的作业。哈哈哈哈

结语

睡了睡了，这篇文章连续写了我7个小时，其实这三个小游戏还有很多可以优化的地方，大家可以提出来，互相学习。喜欢的兄弟姐妹点点赞哈，谢谢大家！！学习群请点这里[4]

image.png

关于本文

来源：Sunshine_Lin

https://juejin.cn/post/6989003710030413838

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/323572
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号