闲着没事 在用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);键盘按键事件
View Code 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 }构造画面
View Code 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 }随即生成食物坐标
View Code 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);}判断是否吃到食物
View Code 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 Array(0, 0); 6 arr_A[l - 1][0] = arr_B[0]; 7 arr_A[l - 1][1] = arr_B[1]; 8 CreatFood(); 9 }10 }判断是否撞到东西
View Code 1 function isFail() { 2 //判断是否失败 3 fail = false; 4 if (arr_A[0][0] > 549 || arr_A[0][0] < 0) { 5 fail = true; 6 clearInterval(timeSet); 7 } 8 if (arr_A[0][1] > 549 || arr_A[0][1] < 0) { 9 fail = true;10 clearInterval(timeSet);11 }12 for (i = 1; i < l; i++) {13 //是否撞身体14 if (arr_A[0][0] == arr_A[i][0] && arr_A[0][1] == arr_A[i][1]) fail = true;15 }16 if (fail) {17 ctx.save();18 clearInterval(timeSet);19 ctx.font = "bolder 60px 幼圆";20 ctx.strokeText("Gave Over", 430, 690);21 ctx.restore();22 }23 }转载于:https://www.cnblogs.com/xiaobuild/archive/2011/07/21/2112985.html
相关资源：Javascript canvas 实现贪吃蛇小游戏