자바스크립트를 이용해 웹게임을 만들어보자. it_javascript 스킬을 살펴보자.

최종 제품 코드는 내결함성도 없고, 불합리한 캡슐화도 없이 급하게 작성되었으며, 핵심 부분만 구현되었고, 다른 부분은 여러분이 좋아하는 오래된 추가 사항이었습니다.

튜토리얼을 시작하겠습니다(튜토리얼이라고 하자, 그냥 급하게 적을게요, 시간이 너무 부족해서 양해 부탁드립니다)

최고 난이도 분석 게임의.
첫 번째 단계, 종합 분석
게임의 주요 요소를 보고 3개의 부분, 그림 블록 몇 쌍, 그림 블록을 담을 수 있는 사각형 용기, 두 블록을 연결할 수 있는 선을 찾아보세요. .

두 번째 단계, 요소 분석
그림 블록: 총 32개의 패턴이 있으며, 각 패턴마다 4개의 타일이 마우스 클릭에 반응하여 사라집니다. .
사각판: 타일 128개, 2차원 베어링, 가로 16개, 세로 8개 타일을 담을 수 있습니다. 정사각형 판은 타일을 담을 수 있어 기존 타일의 순서를 깨뜨릴 수 있습니다.
연결: 게임의 핵심은 두 개의 타일을 연결하여 중심점을 얻는 것입니다. 최대 두 번만 접을 수 있으며 타일을 관통할 수 없습니다.

세 번째 step, abstract
위의 분석을 통해 3개의 요소가 3개의 객체로 추상화됩니다. 추상화하는 방법은 본인의 두뇌를 사용하면 됩니다. 제가 작성한 코드는 두뇌 능력이 부족하여 캡슐화가 지저분해지기 때문입니다.

4부, 핵심 알고리즘

1, 셔플링 알고리즘(매우 간단한 알고리즘)
2차원 배열의 데이터를 1차원 배열로 밀어넣고 위치 속성을 교환합니다. 데이터를 위치에 따라 교체합니다.


2. 경로 찾기:
사실 Lianliankan에서 가장 중요한 것은 최대 2개의 타일 사이의 경로를 찾는 방법입니다. 여기서 구현하는 방법은 최단 경로나 최적 경로가 아닌 찾은 방법입니다.
연구에 따르면 연결은 두 부분으로 나눌 수 있습니다. 한 부분은 법선이고 다른 부분은 블록에 의해 법선에 투영되는 광선입니다. 그런 다음 이 관계를 사용할 수 있습니다. 길을 찾으려고. 구현되지 않는 곳 : (기본적으로 무관합니다. 패스는 셔플링 방식에 따라 쉽게 변경될 수 있습니다. 관심있으신 분은 구현해 보세요)
타이밍, 채점, 프롬프트, 패시지

스크립트하우스-www.jb51.net Lianliankan <title> </title> <style> .select{filter:Gray} #lineDiv{height:20px} .lineDot{position:absolute; background:#f60;padding:0;font-size:0;width:10px;height:10px} #gridDiv{padding:50px;background:#000;border:5px solid #ccc} #gridTalbe{background-repeat:no-repeat; background-position:center; margin:0} #gridTalbe td{width:41px;height:50px;} #gridTalbe img{width:40px; border-right:1px solid #666;} body{ padding:0; margin:0} </style> <table width="100%" border="1"> <tr> <td><div id="gridDiv"></div></td> <td width="180" align="center" bgcolor="#CCCCCC"><input name="button" type="button" onclick="oGrid.shuffle()" value="洗牌"></td> </tr> </table> <div id="lineDiv"> </div> <div id="debug"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]