enchant.jsのTips 小数点の誤差について

この記事について

数年間enchant.jsを授業での実習用ライブラリとして利用しています。
授業内の情報共有は専用のWebページなどで行うこともなどもありましたが、学年をまたいでの情報共有なども考えこちらに一部転載していこうと思います。
授業用サイトはクロースドな環境で、質問者の個人名なども入っていることがあるため、こちらでは個人情報を外したうえで、まとめていきます。
また、学生の分かりやすさ優先で記述をしている部分もありますのでご容赦ください。
※後日サンプルプログラム含めて、修正や加筆をしていく予定です。

JavaScriptでの小数点の扱い

JavaScriptでは、小数点をＩＥＥＥ７５４という規約に従って処理をしていますが、浮動小数点の精度の問題で、計算結果に誤差が発生する場合があります。
バグとはいえないところがかえって厄介かもしれません。

疑問１：Spriteクラスから生成したオブジェクトの座標値を小数点として持てるのか？

答え：持てます。（プログラムでは小数点第一位まで持つ場合でテスト）

http://code.9leap.net/codes/show/140319
※クマは右方向へ動いていますが非常にゆっくりです。

//疑問１：Spriteクラスから生成したオブジェクトの座標値を小数点として持てるのか？

// Spriteオブジェクトのｘ座標として、小数点をもつ変数の値を渡すとどうなるか
// 実際に動きをみてみるプログラム 
// 変数に、0.2ずつ加算するが、実際の表示はどうなるのか。
//
// クマの動きはとてもゆっくりです。

// code.9leap.net default template
// based on enchant.js v0.7.1
enchant();

window.onload = function(){
    var game = new Core(320, 320);
    game.fps = 32;
    game.preload('chara1.png');

    // 変数
    var val = 0;

    game.onload = function(){
        // ラベルの表示
        var label0 = new Label('変数の値　　val    : ');
        var label1 = new Label('クマのX座標 kuma.x : ');
        label0.y = 20;
        label1.y = 40;
        game.rootScene.addChild(label0);
        game.rootScene.addChild(label1);

        // Spriteオブジェクト（クマ）の表示
        var kuma = new Sprite(32,32);
        kuma.image = game.assets['chara1.png'];
        kuma.y = 160;
        kuma.scale(2,2);
        game.rootScene.addChild(kuma);

        game.rootScene.addEventListener('enterframe',function(){
            if(game.frame % game.fps === 0)
            {
                // 変数に、0.2ずつ加算する。
                val += 0.2;
                kuma.x = val;
                // 変数の値をクマの座標値として代入する。
                label0.text = '変数の値　　val    : ' + val;
                label1.text = 'クマのX座標 kuma.x : ' + kuma.x;
            }
        });

    };
    game.start();
};

小数点を扱いたい（計算する）ときにはどうしたらいいか

いろいろ方法はあるようですが、サンプルプログラムでは、「〇倍して整数値に戻して計算をし、最後に〇で割って戻す。」という方法を使っています。

例：小数点第一位まで持ちたい場合。
・計算→１０倍→四捨五入→１０で割る
http://code.9leap.net/codes/show/140324

                // 計算
                val = (val * 10) + (0.2 * 10); // １０倍して計算する　
                val /= 10;             //  10で割る
                kuma.x = val;

                // 変数の値をクマの座標値として代入する。
                label0.text = '変数の値　　val    : ' + val;
                label1.text = 'クマのX座標 kuma.x : ' + kuma.x;