Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Mar 13, 2013

Line-height is ignored on Canvas


    You can't set line-height on HTML5 Canvas. You can set the font of canvas in the same manner as CSS, but number of line-height is ignored.

    I bump into a this problem.

// output statements are skipped.
var message = 'Where is a pig! I am very hungry... Give me a pig!';
var label = new Label();
label.color = 'black';
label.text = message;

// both font-size and line-height are 75px, but those are ignored.
label.font = '75px/75px fantasy';

game.currentScene.addChild(message);


On Canvas API Specification, line-height number is automatically set 'normal'.
I done deal in such a way as to using array by hand.


var messages = [
    'Where is a pig!',
    'I am very hungry...',
    'Give me a pig!'
];
for(var i = 0; i < messages.length; i++) {
    var label = new Label();
    label.color = 'black';
    label.text = message;
    label.font = '75px fantasy';
    label.y = 75 * i;  // 手動で高さを調整
    game.currentScene.addChild(message);
}

Reference
- W3C HTML Canvas 2D Context, Level 2 Nightly 
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles

Feb 15, 2013

Minesweeper Gyakushiki

    I published a new browser game, "Minesweeper Gyakushiki". Gyakushiki is a japanese word that meanes "Reverse". Bombs are shown on display from the start of game. Your object is to open all number panels. This game is compatible with PC and SmartPhone. And it's MIT License.


    Source codes are opend on github page. The game is powered by enchant.js that is JavaScript library for HTML5 browser games from japan.

Dec 20, 2012

Janken Shooting is released


    I released Janken Shooting on GitHub.
    http://yokano.github.com/JankenShooting/

    It is browser game for Google Chrome written by Javascript.
    And it working on Google App Engine.

    You can see source codes form my GitHub page.