- <html>
- <head>
- <meta charset='utf-8'/>
- <title>Snake</title>
- </head>
- <body>
- <canvas id="plank" style="border"></canvas>
- <script type="text/javascript">
- //内置大量BUG,I'm sorry.
- var lev=100; //定时器间隔时间
- var num=30; //网格大小,现在是30x30
- var direction=3; //0:up 1:down 2:left 3:right
- var handle; //用于管理定时器
- var score=0; //分数
- var pause=true; //暂停使用
- var canvas = document.getElementById('plank');
- var context = canvas.getContext('2d');
- var snakex=new Array(); //存储蛇身x坐标,下同
- var snakey=new Array();
- var prize=new Array(-1,-1); //食物的位置
- function rand(){ //产生随机数
- return parseInt(Math.random()*num);
- }
- function chk(x,y){ //检查是否结束,包括越界
- if(x<0||y<0) return false;
- if(x>num-1||y>num-1) return false;
- for (var i=0; i!=snakex.length-1;i++) {
- if(snakex[i]==x&&snakey[i]==y) {return false;}
- };
- return true;
- }
- function drawScore(text){ //打印分数
- context.clearRect(0,0,300,25);
- context.fillText("Score:"+text,5,5);
- }
- function makeprize(){ //产生食物的位置
- var flag=false;
- var prizepre=new Array(2); //使用链表会更好
- while(!flag){ //食物位置不能在蛇体内
- flag=true;
- prizepre[0]=rand();prizepre[1]=rand();
- for (var i=0; i!=snakex.length;i++) {
- if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}
- }
- }
- prize=prizepre;
- }
- function runscore(x,y){ //判断是否吃到食物,并做处理
- if(prize[0]==x&&prize[1]==y){
- score=score+1;
- drawScore(score);
- snakex[snakex.length]=prize[0];
- snakey[snakey.length]=prize[1];
- makeprize();
- drawNode(prize[0],prize[1]);
- return true;
- }
- return false;
- }
- function run(){ //定时器用来判断snake行进方向等等
- switch(direction){ //方向
- case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;
- case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]+1;break;
- case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;
- case 3: snakex[snakex.length]=snakex[snakex.length-1]+1;snakey[snakey.length]=snakey[snakey.length-1];break;
- }
- if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){
- if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {
- clearInterval(handle);
- drawScore('\\tGame over');
- return;
- }
- drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);
- }
- clearNode(snakex[0],snakey[0]);
- snakex.shift();
- snakey.shift();
- }
- function drawNode(x,y){ //画点,共30X30个点(10*10像素算1个点)
- context.fillRect(x*10+1,y*10+31,10,10);
- }
- function clearNode(x,y){
- context.clearRect(x*10+1,y*10+31,10,10);
- }
- function init(){ //初始化,设置画布大小,启动定时器等等
- canvas.width = 510;
- canvas.height = 600;
- context.font = "normal 20px Airl";
- context.textBaseline = "top";
- context.fillText('P键开始/暂停,方向键控制',0,350);
- drawScore('');
- context.strokeRect(0,30,302,302);
- makeprize();
- drawNode(prize[0],prize[1]);
- snakex[0]=0;snakex[1]=1;snakex[2]=2;
- snakey[0]=0;snakey[1]=0;snakey[2]=0;
- drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);
- }
- document.onkeydown=function(event){ //注册键盘事件,up,down,left,right,暂停键p
- var e = event || window.event;
- if(e&&e.keyCode==38){
- direction=0;
- }
- if(e&&e.keyCode==40){
- direction=1;
- }
- if(e&&e.keyCode==37){
- direction=2;
- }
- if(e&&e.keyCode==39){
- direction=3;
- }
- if(e&&e.keyCode==80){
- if(pause) {pause=false;handle=setInterval(run,lev);}
- else {pause=true;clearInterval(handle);}
- }
- }
- init();
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1603201511894.html
来源: http://www.codesnippet.cn/detail/1603201511894.html