javascript 게임 디자인 패턴

모쿠지

소개

데모

모든 게임은 "이미지를 일정 간격으로 그리기"로 OK

편지지 코드

간단한 흐름도

포인트가 되는 부분

마지막으로

소개

계기

과거 javascript로 게임을 만들 기회가 많았습니다.
베이스가 되는 부분마저 억제해 버리면 코딩은 간단하고, 후에는 아이디어 승부인 느낌이 듭니다.
대략 어떤 게임도 기본은 같기 때문에, 여기저기서 자신을 위해서 정리해 두고 싶다고 생각해, 투고합니다.

여담

이번 자바스크립트의 게임 작성 프레임워크는 넘칠 정도로 많이 있지만, 개인적으로는 아무것도 사용하는 신경이 쓰이지 않습니다.
가장 큰 이유는 개인적으로 "즐겁지 않으니까."
프레임워크를 사용하면, 아무래도 프레임워크 자체의 사용법을 기억할 필요가 있고, 아무래도 이것이 의미가 없다고 느껴 버려 정신적으로 고통.
그래서, 어른수이거나 일로 지정도 되지 않는 한은 스크래치로 작성하기로 하고 있습니다.

데모

과거에 만든 작품입니다.

Chunta 피싱 게임

소스 코드

아이들을위한 낚시 게임입니다.
PC 전용입니다.

Chunta 슈팅 게임

장난스럽게 만든 슈팅 게임입니다.
스마트 폰에도 대응하고 있습니다.

어느 게임도 「이미지를 일정 간격으로 그리기」로 OK

등장하는 모든 것을 물건(=객체)으로서 코드로 합니다.
일정 간격으로 이러한 물체(=객체)의 위치나 상태를 변경하여 그립니다.
일정 간격으로 그리면 동영상으로 보입니다. (1장 1장의 화상을 연속으로 그리면 동영상이 되는 것과 함께입니다)
대부분의 게임은이 사고 방식으로 만들 수 있다고 생각합니다.

편지지가 되는 코드

// ==================================================
// ゲームを開始
// ==================================================
function start_game() {
    // 初期化処理
    init();

    // 一定間隔で実行
    setInterval(function(){exec_one_frame()}, 100);
}

// ==================================================
// 1フレームごとの処理
// ==================================================
function exec_one_frame() {
    // オブジェクトを更新
    update();

    // 描画
    view();

    // 終化処理
    finalize();
}

setInterval 함수에서 반영구적으로 exec_one_frame 함수를 실행합니다.
초기화 처리에서는 주로 오브젝트의 생성 처리, 종화 처리에서는 주로 오브젝트의 삭제 처리를 실시합니다.

간단한 흐름도

알기 쉬운지 미묘하지만, 플로우도적인 것도 기재해 둡니다.

포인트가 되는 부분

포인트라고 생각하는 부분을 소개하겠습니다.

사용자 입력 값으로 업데이트

마우스 클릭이나 키 누름으로 주인공을 움직일 때는,
onmousedown 이벤트에서 객체를 업데이트하는 대신 update 함수 내에서 항상 업데이트합니다.
onmousedown 이벤트에서 업데이트하면,
오브젝트를 갱신하는 간격보다 짧은 간격으로 오브젝트가 갱신되어 버립니다.

// ==================================================
// クリック情報
// ==================================================
var click_info = function() {
    // クリックしたか
    this.is_click = false;
    // X座標
    this.x = 0;
    // Y座標
    this.y = 0;

    // 設定
    this.set_value = function(is_click, x, y) {
        this.is_click = is_click;
        this.x = x;
        this.y = y;
    }
}

// ==================================================
// クリック時の処理
// ==================================================
document.onmousedown = function(e) {
    CLICK_INFO.set_value(true, e.pageX, e.pageY);
}

// ==================================================
// 更新
// ==================================================
update() {
    // クリックによる更新
    update_by_click(CLICK_INFO);
}

객체 그리기

객체를 그릴 때 html 요소를 생성하거나 업데이트합니다.

// ==================================================
// 指定位置に画像を表示
// ==================================================
function dispic(id, img_url, x, y, kakudo) {
    var image;

    if (document.getElementById(id) == null) {
        // オブジェクトが存在しない場合は新規作成
        image = document.createElement("img");
        image.setAttribute("id", id);
        image.setAttribute("src", img_url);
        image.style.position = "absolute";

        document.getElementById(NAME_ID_DISP).appendChild(image);
    } else {
        image = document.getElementById(id);
    }

    image.style.left = x + "px";
    image.style.top = y + "px";
    image.style.transform = "rotate(" + kakudo + "deg)";
}

마지막으로

특히 개인으로 작성할 때는 기능이라든지 효율이라든지보다, 하고 있어 「자신 자신이 즐겁거나 즐겁지 않은가」가 제일이라고 생각합니다.
어쩌면 이 기사가 누군가의 도움이 되면 다행입니다.