原创作品，转载请注明来源http://www.cnblogs.com/zhber/p/4391336.html
估计没几个人会想到研究性学习搞加各种特效的贪吃蛇的吧
把这几周搞研究性学习的结果记录一下
本人负责html代码相关……数据库维护请转到app.htouko.com/snake/（为什么换服务器了？我也不知道……）
1.0：学会了用canvas画布画出好烂好烂的贪吃蛇界面……而且仅仅是界面……不过初学者嘛……不要在意这些细节
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>crazy_SNAKE</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-family: "Microsoft YaHei";} 8 #page{margin-right:auto;margin-left:auto;margin-top:20px;height: 600px;width:980px;} 9 #yard{width:auto;border:1px solid #c3c3c3;box-shadow:0 0 10px black;float:right;} 10 </style> 11 <script type="text/javascript"> 12 13 var cell_size=20; 14 var Height=30; 15 var Width=40; 16 //const define 17 18 var map=new Array()//地图状态 19 for (var i=0;i<Height;i++) 20 { 21 map[i]=new Array() 22 for (var j=0;j<Width;j++) map[i][j]=0; 23 } 24 var snake=[];//蛇的坐标 25 var c=null;//绘图对象 26 var direction=3;//方向 27 var length=4;//长度 28 var foodx=0;//食物坐标 29 var foody=0; 30 //var define 31 function draw() 32 { 33 c.clearRect(0,0,cell_size*Width,cell_size*Height); 34 c.strokestyle="black"; 35 c.linewidth=1.0; 36 37 //======================================================================================横线竖线 38 for (var i=1;i<=Height;i++) 39 { 40 c.beginPath(); 41 c.moveTo(0,i*cell_size); 42 c.lineTo(Width*cell_size,i*cell_size); 43 c.stroke(); 44 } 45 for(var i=1;i<=Width;i++) 46 { 47 c.beginPath(); 48 c.moveTo(i*cell_size,0); 49 c.lineTo(i*cell_size,Height*cell_size); 50 c.stroke(); 51 } 52 } 53 function init() 54 { 55 for (var i=0;i<length;i++) 56 { 57 snake.unshift({x:i,y:0}); 58 map[i][0]=1; 59 } 60 add_food(); 61 draw(); 62 } 63 function move() 64 { 65 66 } 67 68 function judge_eat() 69 { 70 71 } 72 73 function judge_dead() 74 { 75 76 } 77 78 function add_food() 79 { 80 foodx=-1; 81 foody=-1; 82 while(!(foodx>=0&&foody>=0&&foodx<=Width&&foody<=Height&&map[foodx][foody]==0)) 83 { 84 foodx=Math.floor(Math.random()*(Width-1)); 85 foody=Math.floor(Math.random()*(Height-1)); 86 } 87 } 88 window.onload=function() 89 { 90 c=document.getElementById('screen').getContext('2d'); 91 init(); 92 } 93 </script> 94 </head> 95 96 <body> 97 <div id="page"> 98 <div id="yard"><canvas id="screen" height="600px" width="800px"></canvas></div> 99 </div> 100 </body> 101 </html>