这个贪吃蛇是在网上看到的一个例子,于是自己模仿着写了一个
html代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>贪吃蛇</title> 5 <meta charset="UTF-8"> 6 <meta name="keywords" content="贪吃蛇"> 7 <meta name="Description" content="这是一个初学者用来学习的小游戏"> 8 <style type="text/css"> 9 /* *{margin:0;} */ 10 .map{ 11 margin:100px auto; 12 height:600px; 13 width:900px; 14 background:#00D0FF; 15 border:10px solid #AFAEB2; 16 border-radius:8px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div class="map"> 23 <canvas id="canvas" height="600" width="900"></canvas> 24 </div> 25 26 <script src="snake.js"> </script> 27 </body> 28 </html>
JavaScript代码:
1 2 //获取绘制工具 3 var c=document.getElementById("canvas"); 4 var ctx=c.getContext("2d"); 5 6 var snake =[];//定义一条蛇，画蛇的身体 7 var snakeCount = 6;//初始化蛇的长度 8 var foodx =0; 9 var foody =0; 10 var togo =0; 11 function drawtable()//画地图的函数 12 { 13 for(var i=0;i<60;i++)//画竖线 14 { 15 ctx.strokeStyle="yellow"; 16 ctx.beginPath(); 17 ctx.moveTo(15*i,0); 18 ctx.lineTo(15*i,600); 19 ctx.closePath(); 20 ctx.stroke(); 21 } 22 for(var j=0;j<40;j++)//画横线 23 { 24 ctx.strokeStyle="yellow"; 25 ctx.beginPath(); 26 ctx.moveTo(0,15*j); 27 ctx.lineTo(900,15*j); 28 ctx.closePath(); 29 ctx.stroke(); 30 } 31 32 for(var k=0;k<snakeCount;k++)//画蛇的身体 33 { 34 ctx.fillStyle="black"; 35 if(k==snakeCount-1) 36 { 37 ctx.fillStyle="red";//蛇头的颜色与身体区分开 38 } 39 ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。 40 41 } 42 //绘制食物 43 ctx.fillStyle ="black"; 44 ctx.fillRect(foodx,foody,15,15); 45 // ctx.fill(); 46 } 47 48 function start()//定义蛇的坐标 49 { 50 //var snake =[];//定义一条蛇，画蛇的身体 51 //var snakeCount = 6;//初始化蛇的长度 52 //蛇总是从左上角出发 53 for(var k=0;k<snakeCount;k++) 54 { 55 snake[k]={x:k*15,y:0}; 56 } 57 drawtable(); 58 addfood();//在start中调用添加食物函数 59 } 60 61 function addfood() 62 { 63 foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数 64 foody = Math.floor(Math.random()*40)*15; 65 66 for (var k=0;k<snake;k++) 67 { 68 if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上 69 { 70 addfood(); 71 } 72 } 73 } 74 75 function move() 76 { 77 switch (togo) 78 { 79 case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走 80 case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break; 81 case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break; 82 case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break; 83 case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break; 84 case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break; 85 default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); 86 } 87 snake.shift();//删除数组第一个元素 88 ctx.clearRect(0,0,900,600);//清除画布重新绘制 89 isEat(); 90 isDead(); 91 drawtable(); 92 } 93 94 function keydown(e) 95 { 96 switch(e.keyCode) 97 { 98 case 37: togo=1; break; 99 case 38: togo=2; break; 100 case 39: togo=3; break; 101 case 40: togo=4; break; 102 case 65: togo=5; break; 103 case 68: togo=6; break; 104 } 105 } 106 107 function isEat()//吃到食物后长度加1 108 { 109 if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody) 110 { 111 addfood(); 112 snakeCount++; 113 snake.unshift({x:-15,y:-15}); 114 } 115 116 } 117 118 function isDead() 119 { 120 if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0) 121 { 122 alert("You are dead,GAME OVER!!!"); 123 clearInterval(move); 124 //window.location.reload(); 125 } 126 } 127 128 document.onkeydown=function(e) 129 { 130 keydown(e); 131 132 } 133 window.onload = function()//调用函数 134 { 135 start(); 136 setInterval(move,100); 137 // drawtable(); 138 }