enchant.js로 블록 붕괴 만들기

과거에 자신이 쓴 소스 코드는여기.
동작은 여기.에서 확인할 수 있다.

개발 환경

MacOS Catalina 10.15.1
enchant.js v0.8.3
Google Chrome: 78.0.3904.108

개시하다

이 기사는 HTML5와 자바스크립트의 프레임워크enchant.js를 사용하여 블록을 뜯는 것에 관한 기사입니다.이 프레임은 게임을 간단하게 만들어 시뮬레이션을 할 수 있다.이번 처리는 물리 시뮬레이션을 하는 세계enchant.box2d.PhysicsWorld급이다.또 과거 자신이 쓴 여기.의 소스 코드에 따라 해설한다.

이 보도를 쓴 주요 이유

자신의 비망록이자 친구의 지도하에 실시된 것이기 때문에 다른 사람에 대한 이해를 넓히기 위한 것이다.

enchant.js를 사용하는 작품의 예를 찾을 수 없기 때문이다.

개발시의 문제점과 어려움

정부측document을 읽는 데 저촉되는 정서가 있어 그 독법을 몰라서 실시하기 어렵다

enchant.js의 이해가 애매하다

원래 인코딩에 익숙하지 않아

정의 함수

프로그램에서 정의한 함수 이름과 작용을 다음과 같이 내보냅니다.매개 변수의 의미와 사용 예는 원본 코드를 보십시오.
무엇을 하고 싶은지 생각해서 그 동작의 함수를 확인하고 그 실행을 참고하는 것도 방법이다.
또한 함수는 각각 어떤 동작을 나타내는지 숫자와 연결된 후 번호를 흔들었으니 참고하시기 바랍니다.

main.js

1. function createScoreLabel(size_and_font, color, x, y)
// スコアラベル作成
2. function createHelpLabel(size_and_font, color)
// ヘルプラベル作成
3. function createGameScene()
// ゲームのシーン作成
4. function createBall(ball_num, x, y, dx, dy)
// ボール作成
5. function createItem(radius, x, y, dx, dy)
// アイテム作成
6. function createWall(width, height, friction, restitution, x, y)
// 壁作成
7. function createBlock(block_num, col, row)
// ブロック作成
8. function judgeObj(ary)
// 引数にオブジェクトの配列を取り、オブジェクトと何か(例えば、画面下の衝突判定(削除判定)等)を行います。

장면계
main.js

// スタート時
function createStartScene()
// クリア時
function createClearScene()
// 失敗時
function createFalseScene()
// ステージクリアと次ステージの間
function createRestScene()
// クリア後
function createEndScene() 
// ポーズボタンを押した時の一時停止期間
function createPoseScene()
// シーン変更
function replaceScene(createStartScene())

주로 자기가 넘어진 곳이에요.

아래의 각 점, 절은 각각 설명한다.

sprite(대상)의 차이

충돌 확인 및 객체 제거

화면 사이즈 취득(추가)

Sprite의 차이점

enchant.js에는 Sprite 대상과 PhySprite 대상이 있다.당초 나는 Sprite와PhySprite가 같은 세계에서 처리할 수 있다는 것을 깨달았다.그러나 충돌 판정이 실시될 때 대상이 화면에서 사라졌지만 사라지지 않는 원인을 모른다.그 원인을 조사한 결과 이 오해의 원인이 되었다.Sprite는 하나의 대상일 뿐이고 PhySprite는 물리 시뮬레이션에서 처리된 대상임을 확인하세요.

충돌 확인 및 객체 삭제

다음 함수judgeObj(ary)는 매개 변수에서 대상 목록을 수신하고 커서 아래의 대상을 삭제합니다.다만object.destroy()이라면 요소로 사라지지만 충돌 판정은 남는다.이를 위해서는 scene.removeChild(object)에서 장면에서 제거해야 한다.
main.js

function judgeObj(ary) {
    for (var i = 0; i < ary.length; i++) {
        if (ary[i].y > game.height) {
            ary[i].destroy();
            scene.removeChild(ary[i]);
            ary.splice(i, 1);
        }
    }
}

화면 크기 지정(할인)

엔찬트입니다.js와 상관없이 화면 사이즈에 따라 무엇을 설정하거나 스펀지 패드에 대응하고 싶을 때 다음과 같은 방법으로 얻을 수 있다.
main.js

// 縦の長さ
window.innerHeight;
// 横の長さ
window.innerWidth;

그게 다야.세부 사항에 관해서는 읽고공식 문서하면 쓰겠습니다.

끝말

나는 이 보도가 누구의 의문을 없앨 수 있었으면 좋겠다고 생각한다.또 이것은 단지 보도일 뿐이다.실현할 때, 나는 당신이 이 문장이 아닌 공식 문서를 참고하여 인코딩하는 것을 강력히 건의합니다.

참고 자료

enchant.공식 문서.box2d.PhysicsWorld