canvas炒雞簡(jiǎn)單的貪吃蛇效果?υ? html+css+js

一.話(huà)不多，先瞅效果：

又在別的地方嫖到了這個(gè)效果研究了億下下，制作過(guò)程如下（超詳細(xì)）：

二.實(shí)現(xiàn)過(guò)程（源碼在最后）：

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

position: absolute; 絕對(duì)定位。

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');

//畫(huà)布寬 var wide=600; //畫(huà)布高 var high=600; // 變量，判斷一次渲染中只識(shí)別按鍵一次 var kd = 0; //當(dāng)前分?jǐn)?shù) var fraction =0; //速度，就是執(zhí)行定時(shí)器的時(shí)間參數(shù) var speed = 250; // 蛇的初始顏色 紅色 var yanse = `red`; // 蛇數(shù)組，組成蛇的每一個(gè)方塊 var snake = []; // 食物數(shù)組 var food = {}; // 蛇的移動(dòng)方向，x軸：1為向右，-1為向左；y軸：1為向下，-1為向上 。不能斜著走，所以0為某軸無(wú)方向。 var diretion = { x:-1, y:0 } // 給畫(huà)布寬高賦值 打算畫(huà)一個(gè)長(zhǎng)寬都是30個(gè)20px的方塊畫(huà)布 canvas.width = wide; canvas.height = high;

function chushi(){ //蛇初始長(zhǎng)度為3個(gè)方塊，位置如下（這個(gè)隨意） for(let i =0;i<3;i++){ snake.push({ x: i+10, y: 10 }) } // 給食物一個(gè)隨機(jī)位置和隨機(jī)顏色 food = { x: parseInt(Math.random()*30), y: parseInt(Math.random()*30), color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})` } }

// 繪制圖形 function draw(){ // 繪制顯示當(dāng)前分?jǐn)?shù)的文字 ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font="50px 仿宋"; ctx.textAlign = 'center'; ctx.fillText("你的分?jǐn)?shù)為："+fraction+" 分",300,300); // 繪制方格，長(zhǎng)寬都是30個(gè)，都是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(){ // 建一個(gè)對(duì)象head，這個(gè)為蛇的新頭，通過(guò)繪制新頭，去掉尾部實(shí)現(xiàn)移動(dòng)效果 var head = {}; //判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 x軸 switch (snake[0].x+diretion.x){ case -1: head.x=29;break; case 30: head.x=0;break; // 沒(méi)到邊界則為當(dāng)前位置加方向 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; // 沒(méi)到邊界則為當(dāng)前位置加方向 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})` } //在蛇尾添加一節(jié) let temp = snake[length-1]; snake.push(temp); fraction+=1; // 吃完食物速度加快 if(speed>80){ //定時(shí)器間隔減10 speed = speed-10; // 清除原來(lái)定時(shí)器，重新繪制 clearInterval(time); time = setInterval(function () { kd = 0; ctx.clearRect(0, 0, wide, high); update(); draw(); }, speed); } } //添加新頭 snake.splice(0,0,head); //去掉尾部 snake.pop(); }

//判斷點(diǎn)擊事件 document.addEventListener('keydown', event=>{ switch (event.keyCode){ // 按了向上鍵 case 38: // 判斷當(dāng)前不是向下移動(dòng)與還沒(méi)按過(guò)鍵，否則蛇會(huì)重疊 if(diretion.y!=1&&kd==0){ // 重新給移動(dòng)方向賦值 diretion.x=0; diretion.y=-1; kd=1; } break; // 下面以此類(lèi)推一樣的原理 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);

三.完整代碼：

四.總結(jié)：

最近又在聽(tīng)蕊希電臺(tái)了。干點(diǎn)雞湯~

Canvas CSS HTML

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。