JavaScript 강화 튜토리얼 - Snake 구현을 위한 6단계

JavaScript 강화 튜토리얼 - Snake 구현을 위한 6단계

1. 먼저 div를 만들고 div에 스타일을 추가합니다

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

. ..> 맵(div 및 테이블), 모든 블록(뱀 머리, 푸드 바디 플러스 스타일)

2. 맵 생성

rree

3. createNode 함수를 호출하여 블록을 생성합니다

document.write("<table cellspacing=&#39;0px&#39;>");
    for (var i = 0; i < 10; i++) {... }
    document.write("</table>");

4. 타이머

var pannel = document.getElementById("pannel");
    function createNode(type) {... } //根据type创建块（0头部 1食物 2身体）    //申请一些变量以便以后调用
    var allNode = new Array();//存所有吃到的身体
    var fooldNode = null;//指向食物a
    var headNode = null;//指向头部b
    headNode = createNode(0);//创建头部A
    headNode.value = 39;//给头部一个方向  37左 38上 39右 40下
    fooldNode = createNode(1);//创建食物B

function moveNode() {...};

5.

setInterval(moveNode, 500);启动定时器

6. 핵심 논리
4장의 moveNode() {...}; 함수는 이 함수를 정기적으로 실행하여
다음을 달성합니다. 1. 모든 몸체 이동
2. 뱀 머리 이동
3. 새로운 블록을 생성하면 뱀의 꼬리와 같은 방향으로 새로운 블록이 생성됩니다
---------------- ----------------- --------------------------------- ---- -------------
구현 소스 코드

document.onkeydown = function () {通过
event.keyCode改变headNode.value
实现用户按键改变蛇头自动移动的方向}

위는 JavaScript 개선 튜토리얼입니다. - 탐욕스러운 뱀을 구현하는 6단계 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!