HTML5를 기반으로 한 슈퍼마리오 게임 데모의 샘플 코드에 대한 자세한 소개

기능 설명:

HTML5를 기반으로 한 슈퍼마리오 게임의 데모입니다. 화살표 키는 좌우 이동을 제어하고, 화살표 키는 점프를 제어합니다. 제가 개발한 HTML5 게임 프레임워크인 cnGameJS입니다.

최신 버전의 브라우저를 사용하여 시청해주세요.

효과 표시:

코드 구현:

이 게임 데모의 주요 요소는 리소스 로딩, 외부 입력, 충돌 감지, 애니메이션, 게임 루프 및 장면입니다. 단계별로 분석하고 설명하겠습니다.

　1. 리소스 로딩:

먼저 레벨을 나타내는 게임 개체가 필요합니다. 이 개체에는 초기화, 업데이트 및 그리기의 세 가지 메서드가 있습니다. 각각의 기능은 초기화, 모든 게임 요소 업데이트, 모든 게임 요소 그리기입니다. 게임이 시작되기 전에 모든 이미지 리소스가 먼저 로드되어야 하며 그런 다음 게임 루프가 시작되고 게임 개체의 초기화 매개변수가 호출됩니다.

 srcObj={
    startSrc:"images/gamestart.png",
    backgroundSrc:"images/background.png",
    enemySrc:"images/enemy.png",
    playerSrc:"images/player.png",
    stoneSrc:"images/stone.png",
    stoneSrc2:"images/stone2.png",
    pillarSrc:"images/pillar.png",
    bulletSrc:"images/bullet.png"
}

cnGame.init('gameCanvas',{width:500,height:400});
 maryGame={
    initialize:(){
    },
    update:(){

    },
    draw:(){
    }
}
    cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);

2. 외부 입력:

Mary의 움직임을 유발하려면 키보드 방향 키가 필요하므로 키보드 방향 키가 눌렸는지 감지해야 합니다. cnGameJS의 isPressed(keyName)를 사용하여 키보드 입력을 감지할 수 있습니다. :

        (cnGame.input.isPressed("up")){
.jump();

        }
 (cnGame.input.isPressed("right")){
.moveRight();    
        }
 (cnGame.input.isPressed("left")){
.moveLeft();
        }
{
.stopMove();
        }

　 이런 식으로 Mary는 다양한 키보드 입력을 통해 다양한 동작을 수행할 수 있습니다.

3. 충돌 감지:

cnGameJS는 직사각형과 직사각형의 충돌 감지를 캡슐화하므로 이를 게임 개체 간의 충돌 감지로 사용할 수 있습니다. 여기서는 충돌의 복잡성 감지는 Mary와 적 또는 돌 사이의 충돌을 감지하고 상황을 따라 Mary의 속도와 가속도를 변경하는 것입니다.

1: 메리는 적과 충돌하고, 메리의 Y 방향 속도에 따라 적이 죽는지 메리가 죽는지 판단합니다.

　2: 메리가 돌과 충돌하여 메리의 Y방향 속도는 0, Y방향 가속도는 0이 됩니다.

　3: 메리가 돌을 떠남: 중력가속도가 회복됩니다. .

4. 애니메이션:

여기서 애니메이션은 주로 Mary가 움직일 때의 발 애니메이션을 의미하며 Mary가 움직일 때의 애니메이션을 사용할 수 있습니다. . 소위 애니메이션은 실제로 큰 그림 내의 프레임 애니메이션입니다. 예를 들어 먼저 다음과 같은 그림을 준비할 수 있습니다.

　

그런 다음 Mary를 매번 다른 위치에서 애니메이션을 완료합니다. 효과 미리보기

5. 게임 루프

게임 루프는 리소스가 로드된 후 시작되는 루프입니다. fps가 사용자에 의해 전달되므로 주기 간격을 계산하고 매번 프레임을 업데이트하고 프레임을 그리고 게임 애니메이션을 생성합니다:

                    (cg.loop&&!cg.loop.stop){                        cg.loop.end();
                    }
                    cg.loop= cg.GameLoop(self.gameObj);                    cg.loop.start();

　6. 장면:

이른바 장면이란 메리가 움직일 때 메리는 캔버스 중앙에 머물고 배경은 반대 방향으로 움직이는 오브제이다. 장면 개체는 배경을 이동할 뿐만 아니라 플레이어가 아닌 게임 개체도 플레이어의 속도에 따라 반대 방향으로 이동합니다. 효과 미리보기

            .background= cnGame.View({src:srcObj.backgroundSrc,player:.player,imgWidth:2301});            .background.centerPlayer();            .background.insideView(.player,"x");

위 내용은 HTML5를 기반으로 한 슈퍼마리오 게임 데모의 샘플 코드에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!