canvas炒鸡简单的贪吃蛇效果✪υ✪ html+css+js

举报
北极光之夜。 发表于 2021/04/22 18:22:09 2021/04/22
【摘要】 一.话不多，先瞅效果：又在别的地方嫖到了这个效果研究了亿下下，制作过程如下（超详细）： 二.实现过程（源码在最后）： 1.定义canvas标签： <canvas id="canvas"></canvas> 2.基本css样式：#canvas{ position: absolute; top: 50%; left: 50%; ...

一.话不多，先瞅效果：

在这里插入图片描述

又在别的地方嫖到了这个效果研究了亿下下，制作过程如下（超详细）：

二.实现过程（源码在最后）：

1.定义canvas标签：

 <canvas id="canvas"></canvas>

2.基本css样式：

#canvas{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 10px rgb(150, 150, 150);     
        }

position: absolute; 绝对定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 阴影。

3.开始js部分，获取标签：

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');

4.定义基本变量：

        //画布宽
        var wide=600;
        //画布高
        var high=600;
        // 变量，判断一次渲染中只识别按键一次
        var kd = 0;
        //当前分数
        var fraction =0;
        //速度，就是执行定时器的时间参数
        var speed = 250;
        // 蛇的初始颜色 红色
        var yanse = `red`;
        // 蛇数组，组成蛇的每一个方块
        var snake = [];
        // 食物数组
        var food = {};
        // 蛇的移动方向，x轴：1为向右，-1为向左；y轴：1为向下，-1为向上 。不能斜着走，所以0为某轴无方向。
        var diretion = {
            x:-1,
            y:0
        }
        // 给画布宽高赋值 打算画一个长宽都是30个20px的方块画布
        canvas.width = wide;
        canvas.height = high;

5. 初始化：

function chushi(){            
        //蛇初始长度为3个方块，位置如下（这个随意）
            for(let i =0;i<3;i++){
                snake.push({
                    x: i+10,
                    y: 10
                })
            }
            // 给食物一个随机位置和随机颜色
            food = {
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
        }

6. 绘制图形：

  // 绘制图形
        function draw(){
            // 绘制显示当前分数的文字
            ctx.fillStyle = 'rgba(255,255,255,0.5)';
                ctx.font="50px 仿宋";
                ctx.textAlign = 'center'; 
                ctx.fillText("你的分数为："+fraction+" 分",300,300);

             // 绘制方格，长宽都是30个，都是19px*19px的方格   
            for(let i=0;i<30;i++){
                for(let j=0;j<30;j++){
                    ctx.fillStyle = 'rgba(255, 255, 255,.3)';
                    ctx.fillRect(i*20,j*20,19,19);
                }
            }
              // 绘制蛇
            for(let i=0;i<snake.length;i++){
                temp = snake[i];
                ctx.fillStyle = yanse;
                ctx.fillRect(temp.x*20,temp.y*20,19,19);
                // 判断蛇头（第一个方块）是否与身体某个方块重合 ，就是头撞到身体
                if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
                    // 游戏结束，重新给初始化
                    alert('游戏结束~点击确认再来一次~'); 
                    fraction = 0;
                    snake.length=0;  
                    chushi();
                    
                }
            }
               // 绘制食物，绘制一个圆形
                ctx.beginPath();
                ctx.fillStyle = food.color;
                ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
                ctx.stroke();
                ctx.fill();
                ctx.closePath();
      
               // 给蛇头绘制一个字符，☆ ，好区分头尾 ，也可省略
                ctx.fillStyle = 'yellow';
                ctx.font="15px 仿宋";
                ctx.textAlign = "start";
                ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);

               
                
        }

7.更新位置：

 //更新
        function update(){
            // 建一个对象head，这个为蛇的新头，通过绘制新头，去掉尾部实现移动效果
            var head = {};
            //判断蛇头是否遇到边界，到边界则在另一边重新绘制 x轴
            switch (snake[0].x+diretion.x){
                case -1: head.x=29;break;
                case 30: head.x=0;break;
                // 没到边界则为当前位置加方向
                default:  head.x = snake[0].x+diretion.x;
            }
           //判断蛇头是否遇到边界，到边界则在另一边重新绘制 y轴
            switch (snake[0].y+diretion.y){
                case -1: head.y=29;break;
                case 30: head.y=0;break;
                // 没到边界则为当前位置加方向
                default:  head.y = snake[0].y+diretion.y;
            }
            // 判断新蛇头是否与食物重合，就是吃到食物
           if(head.x==food.x&&head.y==food.y){
               //蛇的颜色为吃到食物的颜色
            yanse = food.color;
             // 重新给食物初始化
            food = {
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
            //在蛇尾添加一节
            let temp = snake[length-1];
            snake.push(temp);
            fraction+=1;
            // 吃完食物速度加快
            if(speed>80){
                //定时器间隔减10
                speed = speed-10;
                // 清除原来定时器，重新绘制
                clearInterval(time);
                 time = setInterval(function () {
                    kd = 0;
                    ctx.clearRect(0, 0, wide, high);
                    update();
                    draw();

                }, speed);
            
            }
           
           }
            //添加新头
            snake.splice(0,0,head);
            //去掉尾部
            snake.pop();
                     
        }

8.判断点击键盘事件：

 //判断点击事件 
        document.addEventListener('keydown', event=>{
              switch (event.keyCode){
                  // 按了向上键
                  case 38:
                      // 判断当前不是向下移动与还没按过键，否则蛇会重叠
                      if(diretion.y!=1&&kd==0){
                          // 重新给移动方向赋值
                        diretion.x=0;
                        diretion.y=-1;
                        kd=1;
                      }
                      break;
                      // 下面以此类推一样的原理
                  case 39:
                      if(diretion.x!=-1&&kd==0){
                        diretion.x=1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;
                  case 40:
                      if(diretion.y!=-1&&kd==0){                     
                      diretion.x=0;
                      diretion.y=1;
                      kd=1;
                      }
                      break; 
                  case 37:
                      if(diretion.x!=1&&kd==0){
                        diretion.x=-1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;        

              }
        })

9.设置定时器，开始动画：

 chushi();    
            var time = setInterval(function(){
            kd=0;
            ctx.clearRect(0,0,wide,high);
            update();
            draw();      
        
        },speed);

三.完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
        }
        video{
            position: fixed;
            z-index: -10;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #canvas{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 10px rgb(150, 150, 150);     
        }
    </style>
</head>
<body>
    <video src="video/rain.mp4" muted autoplay loop></video>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext('2d');

        //画布宽 
        var wide=600;
        //画布高
        var high=600;
        // 变量，判断一次渲染中只识别按键一次
        var kd = 0;
        //当前分数
        var fraction =0;
        //速度，就是执行定时器的时间参数
        var speed = 250;
        // 蛇的初始颜色 红色
        var yanse = `red`;
        // 蛇数组，组成蛇的每一个方块
        var snake = [];
        // 食物数组
        var food = {};
        // 蛇的移动方向，x轴：1为向右，-1为向左；y轴：1为向下，-1为向上 。不能斜着走，所以0为某轴无方向。
        var diretion = {
            x:-1,
            y:0
        }
        // 给画布宽高赋值 打算画一个长宽都是30个20px的方块画布
        canvas.width = wide;
        canvas.height = high;

        function chushi(){            
        //蛇初始长度为3个方块，每个位置如下（这个随意）
            for(let i =0;i<3;i++){
                snake.push({
                    x: i+10,
                    y: 10
                })
            }
            // 给食物一个随机位置和随机颜色
            food = {
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
        }

        // 绘制图形
        function draw(){
            // 绘制显示当前分数的文字
            ctx.fillStyle = 'rgba(255,255,255,0.5)';
                ctx.font="50px 仿宋";
                ctx.textAlign = 'center'; 
                ctx.fillText("你的分数为："+fraction+" 分",300,300);

             // 绘制方格，长宽都是30个，都是19px*19px的方格   
            for(let i=0;i<30;i++){
                for(let j=0;j<30;j++){
                    ctx.fillStyle = 'rgba(255, 255, 255,.3)';
                    ctx.fillRect(i*20,j*20,19,19);
                }
            }
              // 绘制蛇
            for(let i=0;i<snake.length;i++){
                temp = snake[i];
                ctx.fillStyle = yanse;
                ctx.fillRect(temp.x*20,temp.y*20,19,19);
                // 判断蛇头（第一个方块）是否与身体某个方块重合 ，就是头撞到身体
                if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
                    // 游戏结束，重新给初始化
                    alert('游戏结束~点击确认再来一次~'); 
                    fraction = 0;
                    snake.length=0;  
                    chushi();
                    
                }
            }
               // 绘制食物，绘制一个圆形
                ctx.beginPath();
                ctx.fillStyle = food.color;
                ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
                ctx.stroke();
                ctx.fill();
                ctx.closePath();


                /* var img = new Image();
                img.src = "img/snake/orange.png";
                img.onload = function(){
                    ctx.drawImage(img,food.x*20,food.y*20,19,19);
                }  */
      
               // 给蛇头绘制一个字符，☆ ，好区分头尾 ，也可省略
                ctx.fillStyle = 'yellow';
                ctx.font="15px 仿宋";
                ctx.textAlign = "start";
                ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);

               
                
        }

        //更新
        function update(){
            // 建一个对象head，这个为蛇的新头，通过绘制新头，去掉尾部实现移动效果
            var head = {};
            //判断蛇头是否遇到边界，到边界则在另一边重新绘制 x轴
            switch (snake[0].x+diretion.x){
                case -1: head.x=29;break;
                case 30: head.x=0;break;
                // 没到边界则为当前位置加方向
                default:  head.x = snake[0].x+diretion.x;
            }
           //判断蛇头是否遇到边界，到边界则在另一边重新绘制 y轴
            switch (snake[0].y+diretion.y){
                case -1: head.y=29;break;
                case 30: head.y=0;break;
                // 没到边界则为当前位置加方向
                default:  head.y = snake[0].y+diretion.y;
            }
            // 判断新蛇头是否与食物重合，就是吃到食物
           if(head.x==food.x&&head.y==food.y){
               //蛇的颜色为吃到食物的颜色
            yanse = food.color;
             // 重新给食物初始化
            food = {
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
            //在蛇尾添加一节
            let temp = snake[length-1];
            snake.push(temp);
            fraction+=1;
            // 吃完食物速度加快
            if(speed>80){
                //定时器间隔减10
                speed = speed-10;
                // 清除原来定时器，重新绘制
                clearInterval(time);
                 time = setInterval(function () {
                    kd = 0;
                    ctx.clearRect(0, 0, wide, high);
                    update();
                    draw();

                }, speed);
            
            }
           
           }
            //添加新头
            snake.splice(0,0,head);
            //去掉尾部
            snake.pop();
                     
        }

       //判断点击事件 
        document.addEventListener('keydown', event=>{
              switch (event.keyCode){
                  // 按了向上键
                  case 38:
                      // 判断当前不是向下移动与还没按过键，否则蛇会重叠
                      if(diretion.y!=1&&kd==0){
                          // 重新给移动方向赋值
                        diretion.x=0;
                        diretion.y=-1;
                        kd=1;
                      }
                      break;
                      // 下面以此类推一样的原理
                  case 39:
                      if(diretion.x!=-1&&kd==0){
                        diretion.x=1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;
                  case 40:
                      if(diretion.y!=-1&&kd==0){                     
                      diretion.x=0;
                      diretion.y=1;
                      kd=1;
                      }
                      break; 
                  case 37:
                      if(diretion.x!=1&&kd==0){
                        diretion.x=-1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;        

              }
        })

        chushi();    
            var time = setInterval(function(){
            kd=0;
            ctx.clearRect(0,0,wide,high);
            update();
            draw();      
        
        },speed);
        
    </script>
</body>
</html>

四.总结：

最近又在听蕊希电台了。干点鸡汤~
在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Canvas CSS HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入