JavaScript를 사용하여 웹 버전 Pongo 디자인 아이디어 및 소스 코드 공유

1. 게임 배경 소개(앞에 말도 안 되는 내용이 적혀 있음):

5월 초 어느 날, 퐁고(Pongo)라는 게임을 추천하는 웹사이트를 봤는데 꽤 괜찮아 보여서 다운받아서 아이패드로 두 게임을 해본 후 꽤 재미있다는 생각이 들었습니다. 휴대용 게임은 다들 아시죠?

그런데 얼마 후 아이패드에서 게임에 버그가 있는 것 같다는 걸 알게 됐는데, 한참 플레이하다가 멈칫해서 강제로 종료해야 해서 정말 걱정이 되었고, 기록이 아직도 기다리고 있었습니다. 깨지다.

어떻게 해야 할까요? 게임을 하는 것은 자신이 하는 게임만큼 좋지 않다는 나쁜 생각이 다시 떠올랐고, 나는 마음이 상해서 조용히 컴퓨터로 돌아와서 멈추지 않는 나만의 게임을 쓰기 시작했다. .

기본 프레임워크를 작성하는 데 약 2시간이 걸렸고, 시나 앱에서 사용해 보았는데 기본적으로 효과가 재생 가능했고, 잠에 들었습니다.

다음날 일어나보니 주말에 할 일이 없어서 인터페이스를 디자인하느라 시간을 보냈는데, 아쉽게도 심각한 버그를 발견하고 결국 수정하는 데 시간을 보냈습니다.

결국 게임 이름은 "퐁고(Pongo)"로 정했습니다(플레이하려면 휴대폰을 클릭하세요). 컴퓨터 버전은 당분간 지원되지 않으므로 Github에 소스 코드를 업로드하고 점수 제출 모듈을 제거했습니다.

2. 게임 평가판 웹사이트:

Pongo(모바일 버전만 해당): http://mypongo.sinaapp.com/

github 오픈 소스(더 나은 게임을 만들기 위해 포크에 오신 것을 환영합니다): https://github.com/ChenReason/pongo/blob/gh-pages/index.html

3. 게임 규칙 및 게임플레이:

화면을 클릭하면 베젤의 이동 방향이 변경됩니다. 한 번 클릭하면 베젤의 방향이 변경됩니다. 단지 굴러가는 공이 큰 원에서 벗어나는 것을 방지하기 위한 것입니다. 길수록 좋습니다! 마지막으로 순위를 매기기 위해 자신만의 결과를 제출할 수 있습니다!

4. 게임에 사용된 기술:

HTML, CSS, 자바스크립트, 캔버스, PHP

5. 게임 디자인 아이디어:

a) 캔버스를 사용하여 게임의 기본 인터페이스를 그립니다. 하단에는 큰 원이 덮여 있는 단색 직사각형이 그려져 있으며, 큰 원 위에는 배플도 그려져 있습니다. 배플 중앙에 1px 크기의 원을 만듭니다. (충돌 감지를 구현하기 위해)

b) 작은 원의 이동 방향은 위, 아래, 왼쪽, 오른쪽, 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽 아래 등 8개입니다.

c) 배플의 이동 방향은 시계 방향과 시계 반대 방향 두 가지뿐입니다.

d) 충돌 감지는 엔진을 사용하지 않고 배플 중앙의 작은 원과 초소형 원 사이의 거리를 판단하여 간단한 충돌 감지를 구현합니다.

e) 충돌 후 공의 리바운드 방향을 상식적으로 판단하여 총 8가지 상황을 나열합니다.

6. 게임 구현의 어려움:

a) 충돌 감지.

b) 타이머 setInterval을 지우는 타이밍과 그것이 명확하고 철저한지 여부.

c) 타이머 기간과 게임 경험 사이의 관계.

d) Android와 IOS 기기 간의 성능 차이로 인해 발생하는 게임 유창성 문제.

7. 현재 게임의 문제점:

a) 충돌 감지는 두 원의 중심 사이의 거리를 비교하고 타이머를 사용하기 때문에 타이머 간격이 매우 짧기 때문에 육안으로 볼 때 한 번의 충돌 뒤에 실제로 수십 번의 충돌이 발생합니다. 최적화 후에는 공의 최종 실제 리바운드 방향이 달라지므로 발생 확률은 낮아지지만 여전히 피할 수 없습니다. 따라서 일부 플레이어에서는 공이 장벽에 정확하게 닿지 않는 경우가 있습니다. , 보드 중앙으로 인해 게임이 실패할 수 있습니다.

b) 기능이 너무 장황하고 실행 효율이 낮으며 타이머를 사용하기 때문에 Andorid에서의 게임 경험은 iOS나 다른 모바일 단말기와 다릅니다(전체적으로 Android보다 iOS가 좋습니다). .

c) 순위는 실시간으로 자동 업데이트되지 않습니다. (아직 데이터베이스 사용법을 모르겠습니다)

8. 게임 인터페이스 미리보기:

(사진 1이 첫 번째 버전, 사진 2가 버튼 제거, 사진 3이 최종 버전, 사진 4가 순위)

JavaScript를 사용하여 웹 버전 Pongo 디자인 아이디어 및 소스 코드 공유_javascript 기술 구현

사진 1

JavaScript를 사용하여 웹 버전 Pongo 디자인 아이디어 및 소스 코드 공유_javascript 기술 구현

사진 2

JavaScript를 사용하여 웹 버전 Pongo 디자인 아이디어 및 소스 코드 공유_javascript 기술 구현

사진 3

JavaScript를 사용하여 웹 버전 Pongo 디자인 아이디어 및 소스 코드 공유_javascript 기술 구현

9. 게임 JavaScript 소스 코드의 일부:

코드 복사 코드는 다음과 같습니다.

//////////////////////////////////////////
탭미 ();
var 타이머;
function startgame(){//开始游戏

    if(ifingame==0)
    {
        ifingame=1;
        grade=0;
        var xx=Math.floor(Math.random()*8);
/*      스위치(xx)
        {
            케이스 0:
   smallcircle.direction=gamedirection.shang;
   break;
   케이스 1:
   smallcircle.direction=gamedirection.xia;
   break;
   사례 2:
   smallcircle.direction=gamedirection.zuo;
   break;
   사례 3:
   smallcircle.direction=gamedirection.you;
   break;
   사례 4:
   smallcircle.direction=gamedirection.zuoshang;
   break;
   사례 5:
   smallcircle.direction=gamedirection.zuoxia;
   break;
   사례 6:
   smallcircle.direction=gamedirection.youshang;
   break;
   사례 7:
   smallcircle.direction=gamedirection.youxia;
   break;
   기본값:
   break;
        } */
    smallcircle.direction=gamedirection.xia;
smallcircle.x=smallcircle.y=0;
line.start=Math.PI/2-Math.PI/26;
라인. end=Math.PI/2 Math.PI/26;
line.direction=gamedirection.anticlock;

clearInterval(timer);
timer=setInterval(movetest,10);
}
}//开始游戏 startgame()
    함수 opentop()
    {
        window.location="http://pongotop.sinaapp.com";
    }