原生JS基于canvas写的一个贪吃蛇小游戏

最新推荐文章于 2024-06-25 10:05:02 发布
最新推荐文章于 2024-06-25 10:05:02 发布
阅读量208 收藏 1
点赞数
分类专栏： 动画 文章标签： canvas javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kavii_a/article/details/116518768
版权

直接复制粘贴就能玩

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>贪吃蛇</title>
  <style>
    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  
    html, body {
      padding-top: 20px;
      text-align: center;
      background-color: #efefef;
    
    }
  
    canvas {
      margin: 0 auto;
      box-shadow: 0 0 40px #333;
    }
  
    .canvasContainer {
      position: relative;
      display: inline-block;
      height: 600px;
    }
  
    .pageContainer {
      position: relative;
    }
  
    .pageContainer > .masked {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-color: #00000020;
    }
  
    .masked > button {
      outline: none;
      padding: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #00000020;
      border-radius: 5px;
      color: #ffffff;
      background-color: #cccccc;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 0 10px 5px #00000020;
    }
  
    .currentScore {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 999;
      font-size: 20px;
    }
  
    .remote > div {
      font-size: 20px;
    }
  
    /*移动端媒体查询样式*/
    @media screen and (max-width: 1000px) {
      html, body {
        padding-top: 0;
        width: 100%;
        height: 100%;
      }
    
      canvas {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0;
      }
    
      .pageContainer, .canvasContainer {
        width: 100%;
        height: 100%;
      }
    
      /*遥控器样式*/
      .remote {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #d1d1d180;
      }
    
      .remote > .left, .right, .top, .down {
        position: absolute;
        width: 0;
        height: 0;
        background-color: #ffffff50;
        border-radius: 8px;
        box-shadow: 0 0 10px 5px #00000010;
      }
    
      .remote > .left {
        top: 50%;
        transform: translateY(-50%);
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 40px solid #00000020;
      }
    
      .remote > .top {
        left: 50%;
        transform: translateX(-50%);
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 40px solid #00000020;
      }
    
      .remote > .right {
        top: 50%;
        transform: translateY(-50%);
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 40px solid #00000020;
      }
    
      .remote > .down {
        left: 50%;
        transform: translateX(-50%);
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 40px solid #00000020;
      }
    
      /*竖屏遥控器*/
      @media (orientation: portrait ) {
      
        .canvasContainer {
          height: 80%;
        }
      
        .remote {
          left: 0;
          width: 100%;
          height: 20%;
        }
      
        .remote > .top {
          top: 5px;
        }
      
        .remote > .down {
          bottom: 5px;
        }
      
        .remote > .left {
          left: calc(50% - 80px);
        }
      
        .remote > .right {
          right: calc(50% - 80px);
        }
      }
      /*横屏遥控器*/
      @media ( orientation: landscape ) {
        html, body {
          width: 100%;
          height: 100%;
        }
      
        .canvasContainer {
          display: block;
          width: 80%;
          height: 100%;
        }
      
        .remote {
          top: 0;
          width: 20%;
          height: 100%;
        }
      
        .remote > .top {
          top: 30%;
        }
      
        .remote > .down {
          bottom: 30%;
        }
      
        .remote > .left {
          left: 5px;
        }
      
        .remote > .right {
          right: 5px;
        }
      }
    }
  </style>
</head>
<body>
<div class="pageContainer">
  <div class="canvasContainer">
    <canvas id="myCanvas" width="800" height="600">当前浏览器不支持canvas，请更新浏览器。</canvas>
    <h4 class="currentScore">分数：0</h4>
  </div>
  <div class="remote"></div>
  <div class="masked">
    <button class="start">开始</button>
  </div>
</div>
<script>
  snakeInit();
  function snakeInit() {
    // 判断当前是否为移动端
    let multiport = getMultiport();
    if (multiport === 'mobile') {
      let str = `
            <div class="left"></div>
            <div class="top"></div>
            <div class="right"></div>
            <div class="down"></div>
        `;
      const remote = document.querySelector('.remote');
      remote.innerHTML = str;
      // 获取移动端4个按钮
      const left = document.querySelector('.left');
      const top = document.querySelector('.top');
      const right = document.querySelector('.right');
      const down = document.querySelector('.down');
      left.ontouchstart = () => snake.direction = 0;
      top.ontouchstart = () => snake.direction = 1;
      right.ontouchstart = () => snake.direction = 2;
      down.ontouchstart = () => snake.direction = 3;
      stopUserScalable();
    }
    const c = document.getElementById("myCanvas");
    const ctx = c.getContext("2d");
    const masked = document.querySelector('.masked');
    // 是否吃到食物开关变量
    let isEatFood = false;
    // 当前分数变量
    let currentScore = 0;
    // 定时器开关变量
    let timer = null;
    // 操作DOM点击开始按钮隐藏遮罩层 并且开始定时器
    const btnStart = document.querySelector('.start');
    btnStart.onclick = () => {
      masked.style.display = 'none';
      timer = setInterval(animate, 200);
    }
    // 画矩形构造函数
    function Rect(x, y, width, height, color) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.color = color;
    }
    // 矩形构造函数原型
    Rect.prototype = {
      constructor: Rect,
      rDraw: function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.strokeRect(this.x, this.y, this.width, this.height);
      }
    }
    // snake构造函数
    function Snake() {
      // 蛇头
      this.head = new Rect(40, 60, 40, 40, 'pink');
      // 蛇身
      this.body = [];
      let {x, y, width, height} = this.head;
      const rect = new Rect(x - 40, y, width, height, 'skyblue');
      this.body.push(rect);
      // 控制蛇的方向 默认向右走
      this.direction = 2;
    }
    // snake构造函数原型
    Snake.prototype = {
      constructor: Snake,
      // 绘制蛇的方法
      sDraw: function () {
        // 绘制蛇头
        this.head.rDraw();
        // 遍历蛇身数组 调用绘制矩形的方法
        this.body.forEach(reactItem => reactItem.rDraw());
      },
      // 蛇移动的方法
      move: function () {
        // 加头
        let {x, y, width, height} = this.head;
        const rect = new Rect(x, y, width, height, 'skyblue');
        this.body.unshift(rect);
        isEatFood === false ? this.body.pop() : isEatFood = false;
        // 控制蛇行走的方向
        switch (this.direction) {
          case 0:
            this.head.x -= this.head.width;
            break;
          case 1:
            this.head.y -= this.head.height;
            break;
          case 2:
            this.head.x += this.head.width;
            break;
          case 3:
            this.head.y += this.head.height;
            break;
        }
        // 判断是否撞到墙
        if (this.head.x >= c.width || this.head.x < 0 || this.head.y >= c.height || this.head.y < 0) {
          ctx.clearRect(0, 0, c.width, c.height)
          clearInterval(timer);
          timer = null;
          alert(`Game Over~\n本局分数为${currentScore}分`);
          window.location.reload();
        }
        // 判断蛇头和蛇身是否重叠
        this.body.forEach(item => {
          if (isRectHit(this.head, item)) {
            clearInterval(timer);
            timer = null;
            alert(`Game Over~\n本局分数为${currentScore}分`);
            window.location.reload();
          }
        })
      }
    }
    // 监听键盘事件 如按下上下左右返回对应的direction 决定蛇行走的方向
    document.onkeydown = (e) => {
      switch (e.code) {
        case 'ArrowLeft':
          snake.direction = 0;
          break;
        case 'ArrowUp':
          snake.direction = 1;
          break;
        case 'ArrowRight':
          snake.direction = 2;
          break;
        case 'ArrowDown':
          snake.direction = 3;
          break;
      }
    }
    // 创建蛇的实例对象
    const snake = new Snake();
    // 创造食物的返回值为一个Rect的实例对象
    let food = randForFood();
    // 游戏开始前先渲染一次
    animate()
    // 动画函数
    function animate() {
      ctx.clearRect(0, 0, c.width, c.height);
      food.rDraw();
      snake.move();
      snake.sDraw();
      // 判断是否吃到食物 碰撞检测
      if (isRectHit(snake.head, food)) {
        updateScore();
        isEatFood = true;
        food = randForFood();
      }
    }
    // 随机创造食物函数
    function randForFood() {
      // 食物是否在蛇头或者蛇身上开关变量
      let isInsSnake = true;
      // 如果为true 则一直循环直到false
      while (isInsSnake) {
        let x = getRandInRange(0, (c.width - 40) / 40) * 40;
        let y = getRandInRange(0, (c.height - 40) / 40) * 40;
        // 食物矩形
        const rect = new Rect(x, y, 40, 40, 'green');
        // 判断食物是否与蛇头重叠
        if (isRectHit(snake.head, rect)) {
          isInsSnake = true;
          continue;
        }
        isInsSnake = false;
        // 判断食物是否与蛇身重叠
        snake.body.forEach(item => {
          if (isRectHit(item, rect)) {
            isInsSnake = true;
          }
        })
        return rect;
      }
    }
    // 更新分数方法
    function updateScore() {
      let str = `分数：${++currentScore}`;
      const score = document.querySelector('.currentScore');
      score.innerHTML = str;
    }
    // 获取随机数方法
    function getRandInRange(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    }
    // 碰撞检测方法
    function isRectHit(rect1, rect2) {
      const minX1 = rect1.x;
      const minX2 = rect2.x;
      const minY1 = rect1.y;
      const minY2 = rect2.y;
      
      const maxX1 = rect1.x + rect1.width;
      const maxX2 = rect2.x + rect2.width;
      const maxY1 = rect1.y + rect1.height;
      const maxY2 = rect2.y + rect2.height;
      // 判断矩形相交的最大/最小值
      const minX = Math.max(minX1, minX2);
      const minY = Math.max(minY1, minY2);
      const maxX = Math.min(maxX1, maxX2);
      const maxY = Math.min(maxY1, maxY2);
      
      if (minX < maxX && minY < maxY) return true;
    }
    // ios阻止页面被双击放大和双指缩放
    function stopUserScalable() {
      let lastTouchEnd = 0;
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.addEventListener('touchend', function (event) {
        const now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
      
      document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
      });
    }
    // 判断当前处于移动端还是PC端
    function getMultiport() {
      if (navigator.userAgent.match(/(iPhone|iPad|ipod|Android|ios)/i)) {
        return 'mobile';
      }
      return 'PC';
    }
  }
  /* 贪吃蛇步骤
  *
  *  1. 画蛇
  *     1.1 蛇头蛇身
  *
  *  2. 让蛇动起来
  *     2.1 添加键盘事件
  *     2.2 animate运动
  *
  *  3. 随机投放食物
  *     3.1 坐标位置
  *     3.2 食物是否投放到了蛇头和蛇身上（数组去重）
  *
  *  4. 吃食物
  *     4.1 碰撞检测
  *     4.2 将食物添加到蛇身上
  *
  *  5.边缘检测，判断游戏是否结束
  *     5.1 碰撞检测
  * */
</script>
</body>
</html>
_ForeverYouth_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas实现js原生贪吃蛇
m0_63615227的博客
05-29 533
先看效果图： 游戏要求： 1.方向键可以控制蛇头的运动方向。 2.食物随机出现在画布中。 3.蛇身跟随蛇头运动。 4.蛇头不能撞墙或撞到蛇身。 5.蛇吃了食物后蛇身增长。 细节注意事项： 其实贪吃蛇游戏有几个细节需要注意： 1.当蛇向上时向下键无效，同理当蛇向左时向右键无效等等。 2.蛇身的每一次移动相对前一段有延后性。 3.当蛇身长度小于等于三个时是无论如何也不会装上自己的。(可以减少一些计算量) 实现思路： 一，准备画布和按钮(主要逻辑不在此，所以不需要深入) css用到
js+canvas实现简易版贪吃蛇
wanghuan1020的博客
12-15 154
js+canvas实现简易版贪吃蛇贪吃蛇源码 贪吃蛇源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇</title> <style> canva
JS配合canvas实现贪吃蛇小游戏
见贤思齐焉，见不贤内自省
04-25 974
@Descripttion: @Author: zhangJunQing @Date: 2021-04-25 @LastEditors: zhangJunQing 机会是留给有准备的人的！ 这是五一前一周周六，吃了午饭，突然想做个贪吃蛇，没有为啥，也不知道为啥想做这个，马上氪： 首先 我们看一下效果图 我们先将简单的样式搞出来： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-.
javascript用canvas实现贪吃蛇
sdxjwkq01的博客
08-18 256
这次再来个正常点儿的，JavaScript贪吃蛇，算法从上一版php贪吃蛇移植过来的，把部分php函数改成了JavaScript的方法，php版本是用table标签画蛇，JavaScript是用canvas画蛇，实现方法不一样，但算法都是一样的，下面还是先上效果图，再上代码。要是在电脑端玩最好加上键盘监听，通过键盘控制蛇体方向，这里不再赘述，很简单。$this.cpu()方法负责计算蛇体位置数组和食物以及方向控制和得分情况。界面没仔细雕琢，很简陋，下面还是先上代码。大体流程就是这样，代码注释比较详细了。..
Canvas+JS制作贪吃蛇小游戏
lyar1225的博客
02-13 746
1.Canvas布局 &lt;body style="text-align: center; margin: 100px; background: #aaa;"&gt; &lt;canvas id="canv" width="400" height="400" style="background-color: gray;"&gt;&lt;/canvas&gt
原生js基于canvas实现一个简单的前端截图工具代码实例
10-16
主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
一个canvas写的贪吃蛇小游戏
10-07
一个canvas写的贪吃蛇小游戏.仅为学习交流使用。头部和身体分离设计的。并非一个点。空格键是暂停.遗憾的是没有关卡
H5 canvas实现贪吃蛇小游戏
01-19
本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下： 实现效果如下 实现思路： ps：这个只是思路，详细可看代码注释 一、先把蛇画出来 定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身...
教你如何一步一步用Canvas写一个贪吃蛇
09-22
贪吃蛇游戏是学习Canvas的一个很好的实践项目，因为它涉及到基本的绘图、动画和碰撞检测。 首先，我们要定义游戏区域。贪吃蛇游戏的屏幕由蛇身和苹果这两部分组成，它们都可以通过正方形格子来表示。为了使游戏看...
原生js贪吃蛇源码，采用canvas实现
03-20
游戏板由一个固定大小的 div 元素表示，蛇和食物均由小方块表示，设和食物可定制头像。蛇的移动和食物的生成都是通过 JavaScript 代码实现的。玩家可以通过方向键控制蛇的移动方向。游戏循环通过 setInterval 函数...
利用Canvas+js编写贪吃蛇游戏
小涛Dirge
08-24 985
我的贪吃蛇游戏是采用Canva+js脚本实现的，有设置难度选择；其实难度就是根据蛇运动的speed(速度)不一样就行了。首先界面奉上：附上js代码： //拿到画板 行内 var canvas = document.getElementById("canvas"); //获取画板权限 var ctx = canvas.getContext("2d"); var
canvas+js实现简单的贪吃蛇小游戏
zem
08-15 2004
贪吃蛇作为一个经典的游戏，直到现在还有不少人在玩，但是比起玩别人的游戏，还是玩自己的游戏比较有成就感，本篇博文就将告诉大家如何用<canvas>+js实现简单的贪吃蛇小游戏，如果对canvas的API不了解的同学请先学习canvas的基础知识再看本文。 本人还只是入坑前端不久，如有哪些做的不好，还请各位大神指出。 首先，在写游戏开始，我们要先写一个简单的html文件，这里不考虑美观...
html5 canvas+js贪吃蛇网页小游戏代码
wjh091225的博客
03-28 7935
html5 canvas+js贪吃蛇网页小游戏代码 注解都在代码里了,自己理解吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte.
利用Canvas+js实现贪吃蛇(1)
u013742084的专栏
06-12 3302
今天想写一个贪吃蛇的页面，于是就选择了Canvs，不过只实现蛇身的长度是1的情况，对于蛇身大于2的情况，我还没想出来 如何绘制蛇，等查资料后，再来实现 下面是源码部分： html： score:0js部分：window.onload = function() { var canvas = document.getElementById('my
原生js+canvas实现类贪吃蛇的小游戏
rememberyf的博客
06-03 4655
写在前面 这是一个类贪吃蛇的小游戏，因为最近又翻到了canvas，想着写一些东西来巩固下，刚好就看到博主写的demo，不过我在其基础上进行了一定的规则限制，下面附上链接：博主原文 设计初衷 此次这个游戏加入了 1、积分规则， 2、碰壁死亡规则， 3、调用requestAnimationFrame方法实现循环。 游戏的截图效果如下： 死亡效果截图如下： 设计步骤 1、...
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 929
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 1080
JSON，Ajax
jQuery 选择前、后、父元素进行操作
最新发布
qq_30049249的博客
06-25 280
https://andi.cn/page/621465.html
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 250
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
基于前端代码写一个贪吃蛇小游戏
03-29
但是，我可以提供一些基本的思路和提示，帮助您开始编写贪吃蛇小游戏。 1. HTML布局 首先，需要创建一个 HTML 页面来展示游戏。可以使用一个 canvas 元素来绘制游戏区域，并添加一些按钮和文本框来控制游戏。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值