闲着没事 在用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 }