이 기사는 욕심 많은 뱀 게임을 달성하기 위해 H5 캔버스를 소개하고 다음과 같이 모든 사람과 공유합니다.
효과는 다음과 같습니다 구현 아이디어 :추신 : 이것은 단지 자세한 내용은 코드 주석을 볼 수 있습니다
1. 먼저 뱀을 그립니다 <! </head> <body> <canvas id = 캔버스 너비 = 800 높이 = 500> </body> <cript> var canvas = getElementByid ( 'canvas'); ( '2d'); COLOR = COLOR;} // 블록 rect.prototype.Draw = function () {context.fillStyle = this.Rect.Rect w, this.h); // 4 개의 정사각형 블록을 그리며 (var i = 0; i <4; i ++) {var rect = new rect (i*20,0,20,20, Grey); 뱀을 사용하여 뱀 헤드가 배열의 첫 번째 위치에 나타납니다 두 가지 후에 일반적으로 사용되는 것은 속성으로 설정되므로 나중에 이것을 호출합니다. (키 코드 오른쪽 화살표 포함) this.direction = 39;} // 뱀 뱀을 그리는 방법. this.snakearray [i] .Draw ();} // 뱀 운동의 방법 뱀 .prototype.move = function () {// 핵심 부분, 뱀의 움직임 방법 // 1. 회색 사각형을 그립니다. 뱀 헤드로 위치를 겹쳐 놓으십시오 // 2. 배열의 뱀 머리 뒤에 위치 에이 블록을 삽입하십시오. // 3. 끝을 잘라 // 4. 뱀 머리를 설정 방향의 방향으로 움직입니다. 하나의 그리드 var rect (this.head.y, this.head.h, this.snakearray.splice); / 음식을 먹을지 여부를 결정하십시오. iseat 결정 기능은 끝에 쓰여집니다. getrandomfood ();} else {this.snakearray.pop ();} // 뱀 머리의 움직임 방향을 설정, 37 왼쪽, 38, 39 오른쪽, 40 스티치 (this. 방향) {case 37 : this.head. x- = this.wed .y += this.head.h break; break;} // if (this.head.x> canvas.width || this.head. x <0 || this.the.head. .y> canvas.height || i = 1; i this.snakearay.length; if (this.snakearray [i] .x == this.head.x && snakearray [i] .y == this.head.yy) {clearinterval (타이머);}}} // 초기 뱀 var snake = new Snake () snake.draw (); {context.clearrect (0,0, 캔버스, 캔버스); 뱀이 문서로 직접 돌릴 수 없도록하십시오. snake.direction = 37;} break;} case 38 : {if (snake.direction! == 40) {snake.direction = 38;} case 39 : {if.direction! Direction = 39;} break;} case 40 : {if (snake.direction! == 38) {snake.direction = 40;} 기능, [min, max] 범위 (min, max)의 값을 가져옵니다. var range = var r = math.random (); 그런 다음 VaritativeSnake = true를 재생합니다 진술은 다음과 같은 진술을 실행하지 않습니다. 20, 20, 녹색); y == rect.y) {// 결정이 다시 코일로 표시되면 임의의 숫자가 다시 isonsnake = true;}}을 다시 설정하십시오 물체 음식은 드로우 방법 리턴 rect;}를 가지고 있습니다.} // 음식을 먹는 음식, 즉 뱀 머리 좌표와 기능의 음식 좌표는 () {if (snake.head.x == food.x && snake .. head.y == food.y) {return true;} else {return false;} </script> </html>위는이 기사의 모든 내용입니다.