贪吃蛇插件
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #myCanvas{ display:block; margin:50px auto; position:relative; } #myCanvas.active:after{ content:'结束了'; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; background:rgba(0,0,0,.6); } .jf{ text-align:center; } </style> </head> <body> <div class="tcs"> <canvas id="myCanvas"></canvas> <div class="jf"> <p>得分：<span id="num"></span></p> <button id="cxks">重新开始</button> </div> </div> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); c.style.background = '#000'; var gsize = 20; //格子大小 var cWIDTH = 800; //画布宽度 var cHEIGHT = 800; //画布高度 var X,Y; //食物坐标 var sX = cWIDTH / 2 - gsize; var sY = cHEIGHT / 2; //蛇头坐标 var sLeng = 3; //初始蛇身长度 var sData = []; //蛇的每节坐标 var fx = 39; //默认前行方向 37-左 38-上 39-右 40-下 var num = 0; //积分 var game = 0; var numHTML = document.getElementById('num'); var cxks = document.getElementById('cxks'); c.width = cWIDTH; c.height = cHEIGHT; function xyxian(){ //遍历竖线 for(var i=0;i< cWIDTH / gsize;i++){ ctx.beginPath(); ctx.strokeStyle = '#fff'; ctx.moveTo(i*gsize , 0); ctx.lineTo(i*gsize , cHEIGHT); ctx.stroke(); } for(var i=0;i< cHEIGHT / gsize;i++){ ctx.beginPath(); ctx.strokeStyle = '#fff'; ctx.moveTo(0 , i*gsize); ctx.lineTo(cWIDTH , i*gsize); ctx.stroke(); } } xyxian(); function zbX(){ var XB = Math.floor(Math.random()*cWIDTH / gsize); return XB * gsize } function zbY(){ var YB = Math.floor(Math.random()*cHEIGHT / gsize); return YB * gsize } for(var i=0;i<sLeng;i++){ sData[i] = [sX-i*gsize,sY]; } function Sn(){ ctx.beginPath(); ctx.fillStyle = 'yellow'; for(var i=0;i<sLeng;i++){ ctx.fillRect(sData[i][0],sData[i][1],gsize,gsize); ctx.fill(); } ctx.beginPath(); for(var i=0;i<sLeng;i++){ if(i == 0){ ctx.fillStyle = 'yellow'; }else{ ctx.fillStyle = 'green'; } ctx.fillRect(sData[i][0]+1,sData[i][1]+1,gsize-2,gsize-2); ctx.fill(); } } Sn() //随机出现食物 function mathDian(){ X = zbX(); Y = zbY(); return X,Y; } mathDian(); function food(){ ctx.beginPath(); ctx.fillStyle = 'red'; ctx.fillRect(X, Y , gsize , gsize); ctx.fill(); } food(); cxks.onclick = function(){ num = 0; numHTML.innerHTML = num; fx = 39; if(game == 1){ sLeng = 3; sX = cWIDTH / 2 - gsize; sY = cHEIGHT / 2; //蛇头坐标 for(var i=0;i<sLeng;i++){ sData[i] = [sX-i*gsize,sY]; } set = setInterval(dsn,500); document.onkeydown=function(event){ ctx.clearRect(0,0,c.width,c.height); food(); xyxian(); var e = event || window.event || arguments.callee.caller.arguments[0]; var lastData = sData[0]; fx = e.keyCode; switch(e.keyCode){ case 37: sData.unshift([lastData[0] - gsize , lastData[1] ]); break; case 38: sData.unshift([lastData[0] , lastData[1] - gsize]); break; case 39: sData.unshift([lastData[0] + gsize , lastData[1]]); break; case 40: sData.unshift([lastData[0] , lastData[1] + gsize]); break; } xp(); up(); }; game = 0; }else{ num = 0; numHTML.innerHTML = num; fx = 39; for(var i=0;i<sLeng;i++){ sLeng = 3; sX = cWIDTH / 2 - gsize; sY = cHEIGHT / 2; //蛇头坐标 for(var i=0;i<sLeng;i++){ sData[i] = [sX-i*gsize,sY]; } } } } function xp(){ if(sData[0][0] == X && sData[0][1] == Y){ mathDian(); food(); sLeng++; num += 1; numHTML.innerHTML = num; }else{ ctx.clearRect(sData[sLeng-1][0], sData[sLeng-1][1], gsize, gsize); sData.pop(); } Sn(); } document.onkeydown=function(event){ ctx.clearRect(0,0,c.width,c.height); food(); xyxian(); var e = event || window.event || arguments.callee.caller.arguments[0]; var lastData = sData[0]; fx = e.keyCode; switch(e.keyCode){ case 37: sData.unshift([lastData[0] - gsize , lastData[1] ]); break; case 38: sData.unshift([lastData[0] , lastData[1] - gsize]); break; case 39: sData.unshift([lastData[0] + gsize , lastData[1]]); break; case 40: sData.unshift([lastData[0] , lastData[1] + gsize]); break; } xp(); up(); }; function dsn(){ ctx.clearRect(0,0,c.width,c.height); food(); xyxian(); var lastData = sData[0]; switch(fx){ case 37: sData.unshift([lastData[0] - gsize , lastData[1] ]); break; case 38: sData.unshift([lastData[0] , lastData[1] - gsize]); break; case 39: sData.unshift([lastData[0] + gsize , lastData[1]]); break; case 40: sData.unshift([lastData[0] , lastData[1] + gsize]); break; } xp(); up(); } var set = setInterval(dsn,500) function up(){ if(sData[0][0] >= cWIDTH || sData[0][0] < 0 || sData[0][1] >= cHEIGHT || sData[0][1] < 0){ alert('你死了,得分'+num); clearInterval(set); document.onkeydown=function(event){ return false; } game = 1; } for(i in sData){ if(sData[i][0] == sData[0][0] && sData[i][1] == sData[0][1] && i != 0){ alert('你死了,得分'+num); clearInterval(set); document.onkeydown=function(event){ return false; } game = 1; } } } </script> </body> </html>