ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【ホロスコープ(Horoscope)篇】 黄道十二宮(Zodiac)を描く

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

 enchant.jsでホロスコープを作りたいと思う。以下では、黄道十二宮(Zodiac)を描いていく。まずは領域だけだが。

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 直線を描く”の記事で、ダーツのパネルのような円の描画と直線の描画を合わせたものを描いてみたが、これ基にコードを修正して、黄道十二宮(Zodiac)を描いてみよう。

■コードの変更点

 なんてことはない、直線を描画する為の始点と終点を、30°ずつsinとcosで計算して、描いているだけだ。これでもう完成である。

[html firstline=”1″ highlight=”96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124″ title=”main.js”]
enchant();

var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.

var CIRCLE_ORIGIN_X = (SCREEN_WIDTH / 2); // 円の原点(X座標).
var CIRCLE_ORIGIN_Y = (SCREEN_WIDTH / 2); // 円の原点(Y座標).
var CIRCLE_MARGIN = 50;
var CIRCLE_RADIUS = ((SCREEN_WIDTH / 2) – CIRCLE_MARGIN); // 半径.
var CIRCLE_DIAMETER = (CIRCLE_RADIUS * 2); // 直径.

var ZODIAC_WIDTH = 40; // 黄道十二宮の幅.

var SIN_0 = Math.sin( 0 * Math.PI / 180 );
var SIN_30 = Math.sin( 30 * Math.PI / 180 );
var SIN_60 = Math.sin( 60 * Math.PI / 180 );
var SIN_90 = Math.sin( 90 * Math.PI / 180 );
var SIN_120 = Math.sin( 120 * Math.PI / 180 );
var SIN_150 = Math.sin( 150 * Math.PI / 180 );

var COS_0 = Math.cos( 0 * Math.PI / 180 );
var COS_30 = Math.cos( 30 * Math.PI / 180 );
var COS_60 = Math.cos( 60 * Math.PI / 180 );
var COS_90 = Math.cos( 90 * Math.PI / 180 );
var COS_120 = Math.cos( 120 * Math.PI / 180 );
var COS_150 = Math.cos( 150 * Math.PI / 180 );

var CIRCLE_RADIUS_SIN_0 = (CIRCLE_RADIUS * SIN_0); // 半径×sin30°.
var CIRCLE_RADIUS_SIN_30 = (CIRCLE_RADIUS * SIN_30); // 半径×sin30°.
var CIRCLE_RADIUS_SIN_60 = (CIRCLE_RADIUS * SIN_60); // 半径×sin60°.
var CIRCLE_RADIUS_SIN_90 = (CIRCLE_RADIUS * SIN_90); // 半径×sin90°.
var CIRCLE_RADIUS_SIN_120 = (CIRCLE_RADIUS * SIN_120); // 半径×sin120°.
var CIRCLE_RADIUS_SIN_150 = (CIRCLE_RADIUS * SIN_150); // 半径×sin150°.

var CIRCLE_RADIUS_COS_0 = (CIRCLE_RADIUS * COS_0); // 半径×cos0°.
var CIRCLE_RADIUS_COS_30 = (CIRCLE_RADIUS * COS_30); // 半径×cos30°.
var CIRCLE_RADIUS_COS_60 = (CIRCLE_RADIUS * COS_60); // 半径×cos60°.
var CIRCLE_RADIUS_COS_90 = (CIRCLE_RADIUS * COS_90); // 半径×cos90°.
var CIRCLE_RADIUS_COS_120 = (CIRCLE_RADIUS * COS_120); // 半径×cos120°.
var CIRCLE_RADIUS_COS_150 = (CIRCLE_RADIUS * COS_150); // 半径×cos150°.

window.onload = function() {
// 表示領域を設定(幅と高さ).
game = new Game( SCREEN_WIDTH, SCREEN_HEIGHT );

// メイン処理を実行.
game.onload = function() {
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#eece95’;

// Spriteを作成.
sprite = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT );

// Surfaceを作成.
surface = new Surface( SCREEN_WIDTH, SCREEN_HEIGHT );

// SpriteのimageにSurfaceを代入.
sprite.image = surface;

// Surfaceのコンテキストを取得.
context = surface.context;

// 原点(240,240)、半径190pxの円を描画.
context.beginPath();
context.strokeStyle = ‘#220022’;
context.lineWidth = 4;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, CIRCLE_RADIUS, 0, (Math.PI * 2), true );
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle = ‘#eece95’;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, CIRCLE_RADIUS, 0, (Math.PI * 2), true );
context.closePath();
context.fill();

// 原点(240,240)、半径150pxの円を描画.
context.beginPath();
context.strokeStyle = ‘#220022’;
context.lineWidth = 2;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, (CIRCLE_RADIUS – ZODIAC_WIDTH), 0, (Math.PI * 2), true );
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle = ‘#eece95’;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, (CIRCLE_RADIUS – ZODIAC_WIDTH), 0, (Math.PI * 2), true );
context.closePath();
context.fill();

// 直線を描画.
context.beginPath();
context.strokeStyle = ‘#220022’;
context.lineWidth = 2;

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_0, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_0 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_0 + (ZODIAC_WIDTH * COS_0), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_0 + (ZODIAC_WIDTH * SIN_0) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_0 – (ZODIAC_WIDTH * COS_0), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_0 – (ZODIAC_WIDTH * SIN_0) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_0, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_0 );

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_30, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_30 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_30 + (ZODIAC_WIDTH * COS_30), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_30 + (ZODIAC_WIDTH * SIN_30) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_30 – (ZODIAC_WIDTH * COS_30), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_30 – (ZODIAC_WIDTH * SIN_30) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_30, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_30 );

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_60, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_60 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_60 + (ZODIAC_WIDTH * COS_60), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_60 + (ZODIAC_WIDTH * SIN_60) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_60 – (ZODIAC_WIDTH * COS_60), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_60 – (ZODIAC_WIDTH * SIN_60) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_60, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_60 );

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_90, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_90 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_90 + (ZODIAC_WIDTH * COS_90), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_90 + (ZODIAC_WIDTH * SIN_90) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_90 – (ZODIAC_WIDTH * COS_90), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_90 – (ZODIAC_WIDTH * SIN_90) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_90, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_90 );

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_120, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_120 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_120 + (ZODIAC_WIDTH * COS_120), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_120 + (ZODIAC_WIDTH * SIN_120) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_120 – (ZODIAC_WIDTH * COS_120), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_120 – (ZODIAC_WIDTH * SIN_120) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_120, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_120 );

context.moveTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_150, CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_150 );
context.lineTo( CIRCLE_ORIGIN_X – CIRCLE_RADIUS_COS_150 + (ZODIAC_WIDTH * COS_150), CIRCLE_ORIGIN_Y – CIRCLE_RADIUS_SIN_150 + (ZODIAC_WIDTH * SIN_150) );
context.moveTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_150 – (ZODIAC_WIDTH * COS_150), CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_150 – (ZODIAC_WIDTH * SIN_150) );
context.lineTo( CIRCLE_ORIGIN_X + CIRCLE_RADIUS_COS_150, CIRCLE_ORIGIN_Y + CIRCLE_RADIUS_SIN_150 );

context.closePath();
context.stroke();

// ゲームのシーンにSurfaceを追加.
game.rootScene.addChild( sprite );
}

// ゲームをスタート.
game.start();
}
[/html]

 上記コードのイメージ画像は以下の通り。お好みで色を変えたり線を増やしたりしてみてほしい。私は取り敢えず、以下をベースのまま作っていく予定だ。

enchant51

(アシベズヘア@ashibehair_m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です