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

一.话不多，先瞅效果：

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

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

#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); 阴影。

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

//更新 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);

三.完整代码：

四.总结：

最近又在听蕊希电台了。干点鸡汤~

Canvas CSS HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。