闲着没事 在用canvas做的一个小游戏

 

公共变量

  1         var arr_A = new Array();  2         var arr_B = new Array();  3         var arr_C = new Array();  4         var arr_D = new Array();          5         var arr_F = new Array();  6         var num = 0;  7         var gx = 1, gy = 0;  8         var l = 6;

初始化

   1                 arr_A = new Array();   2                 arr_A[0] = new Array(55, 66);   3                 arr_A[1] = new Array(44, 66);   4                 arr_A[2] = new Array(33, 66);   5                 arr_A[3] = new Array(22, 66);   6                 arr_A[4] = new Array(11, 66);   7                 arr_A[5] = new Array(0, 66);   8                 arr_B = new Array(999, 999);   9                 arr_C = new Array(999, 999);  10                 document.onkeydown = keydown;  11                 CreatFood();  12                 timeSet = setInterval(Fun4, 200);

键盘按键事件

   1         function keydown(e) {   2             switch (e.keyCode) {   3                 //左     4                 case 37: if (gy != 0) {   5                         gx = -1;   6                         gy = 0;   7                     }   8                     break;   9                 //右    10                 case 39: if (gy != 0) {  11                         gx = 1;  12                         gy = 0;  13                     }  14                     break;  15                 //上    16                 case 38: if (gx != 0) {  17                         gy = -1;  18                         gx = 0;  19                     }  20                     break;  21                 //下    22                 case 40: if (gx != 0) {  23                         gy = 1;  24                         gx = 0;  25                     }  26                     break;  27             }  28         }

构造画面

   1   function Fun4() {   2             ctx.clearRect(0, 0, canvas.width, canvas.height);   3             ctx.beginPath();   4             ctx.moveTo(550, 0);   5             ctx.lineTo(550, 550);   6             ctx.lineTo(0, 550);   7             ctx.lineWidth = 1;   8             ctx.stroke();   9             //头移动  10             arr_B[0] = arr_A[0][0];  11             arr_B[1] = arr_A[0][1];  12             arr_A[0][0] = arr_A[0][0] + 11 * gx;  13             arr_A[0][1] = arr_A[0][1] + 11 * gy;  14             isFail();  15             //身体移动  16             for (j = 1; j < l; j++) {  17                 arr_C[0] = arr_A[j][0];  18                 arr_C[1] = arr_A[j][1];  19                 arr_A[j][0] = arr_B[0];  20                 arr_A[j][1] = arr_B[1];  21                 arr_B[0] = arr_C[0];  22                 arr_B[1] = arr_C[1];  23             }  24             //吃食物  25             eat();  26             //画蛇  27               28             for (i = 0; i < l; i++) {  29                 // alert(arr_A);  30                 if (i == 0) { ctx.fillStyle = "rgb(63, 46, 219)"; }  31                 ctx.fillRect(arr_A[i][0], arr_A[i][1], 10, 10);  32                 ctx.fillStyle = "rgb(154, 210, 244)";  33             }  34             //画食物 ，得分  35             ctx.save();  36             ctx.fillStyle = "red";  37             ctx.fillRect(arr_D[0], arr_D[1], 10, 10);  38             ctx.fillStyle = "black";  39             ctx.clearRect(600, 50, 200, 200);  40             ctx.font = "bolder 20px 宋体";  41             ctx.fillText("得分:" + (l - 6) * 10, 600, 50);  42             ctx.restore();  43         }

随即生成食物坐标

  1   function CreatFood() {  2             //生成食物坐标  3             fx = Math.floor(Math.random() * 50) * 11;  4             fy = Math.floor(Math.random() * 50) * 11;  5             arr_D = new Array(fx, fy);}

判断是否吃到食物

   1   function eat() {   2             //是否吃到食物   3             if (arr_A[0][0] == arr_D[0] && arr_A[0][1] == arr_D[1]) {   4                 l += 1;   5                 arr_A[l - 1] = new

相关阅读

• ·  猜猜，谁从从科幻走进现实了？2012.10.21
• ·  在网页设计中应用大照片作背景的52个优秀范例（上篇）2012.10.21
• ·  HTML特殊字符编码对照表2012.10.21
• ·  常见Web技术之间的关系，你了解多少？2012.10.21
• ·  for(var key in object){}语句枚举2012.10.21

联系我们CONTACT 扫一扫

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。

版权所有：广州中睿信息技术有限公司 粤ICP备13082838号-2