贪吃蛇插件
代码：
<!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>