appMobi + enchant.js

misc

以前から作れ、って言われてたナニを土曜の勢いもあってなんとなくでっち上げました。出てくるソレをタップで消す、というナニです。
beatcoober
以下のサンプルを使わせて頂きました。

とは言え、どちらかというと土曜日に使ったバナナが落ちてくるサンプルのコードを相当参考にしていたりしてます。いっちゃん下でコードを晒す方向。

とは言え

このエントリでは、標題のナニを紹介させて頂きます。とりあえず enchant.js の window.onload に代入してる以下の部分を

window.onload = function() {

doOnload という変数に格納する記述に変えて

var doOnload = function() {

index.html を以下なカンジにしてさしあげれば OK な模様。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="nineleap.enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
    <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
    //Size the display to 768px by 1024px
    AppMobi.display.useViewport(768,1024);
	
	//hide splash screen
    AppMobi.device.hideSplashScreen();

    function sleep(time){
        setTimeout(after, time);
    }

    function after(){
        doOnload();
    }

    sleep(1);
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
</script>

    <style type="text/css">
        body {
            background-color:#fff;
            margin: 0;
        }
    </style>
</head>
<body>
</body>
</html>

記述に関する解説は略させて下さい。
で、main.js の実装が以下です。今後も継続して機能追加予定、かもしれません。

enchant();

var TOUCH_ENABLED = (function() {
    var div = document.createElement('div');
    div.setAttribute('ontouchstart', 'return');
    return typeof div.ontouchstart == 'function';
})();

window.onload = function() {
    var visibleCount = 0;
    var removeCount = 0;
    var gameEnd = false;
    var targets = [];
    var width = 320;
    var height = 320;
    var interval = 24;

    var game = new Game(width, height);
    game.fps = interval;
    game.score = 0;
    game.preload('kuber.gif');

    game.onload = function() {
        game.frameCount = 0;

        var title = new Label();
        title.x = 120;
        title.y = 10;
        title.text = 'くーばータタキ';
        title.font = "0.8em 'Arial'";
        game.rootScene.addChild(title);

        var pointLabel = new Label();
        pointLabel.x = 10;
        pointLabel.y = 10;
        pointLabel.text = 'Score: ' + game.score;
        pointLabel.font = "0.8em 'Arial'";
        game.rootScene.addChild(pointLabel);

        var addFunc = function() {
            var target = new Sprite(20, 30);
            target.image = game.assets['kuber.gif'];
            target.x = Math.floor(Math.random() * width);
            if (target.x > width - 20) {
                target.x = width - 20;
            }
            target.y = Math.floor(Math.random() * height);
            if (target.y > height - 30) {
                target.y = height - 30;
            }
            if (target.y < 30) target.y += 30;
            target.visible = false;
            target.buttonMode = true;
            target.addEventListener('enterframe', function() {
                if (this.buttonPressed && !gameEnd) {
                    removeCount++;
                    game.score = game.score + (100 - 10 * (visibleCount - removeCount));
                    pointLabel.text = 'Score: ' + game.score;
                    game.rootScene.removeChild(this);
                }
            });
            targets.push(target);
            game.rootScene.addChild(target);
            targets[visibleCount].visible = true;
            visibleCount++;
        }

        game.addEventListener('enterframe', function() {
                if(!gameEnd) {
                    game.frameCount++;

                    if(game.frameCount > 960 && interval > 6) {
                        interval = 6;
                    } else if (game.frameCount > 720 && interval > 12) {
                        interval = 12;
                    } else if (game.frameCount > 360 && interval > 18) {
                        interval = 18;
                    }

                    if(game.frame % interval == 0){
                        addFunc();
                    }
                }
            });

        game.addEventListener('enterframe', function() {
            if (visibleCount - removeCount >= 10) {
                gameEnd = true;
                game.end(game.score, game.score + "points !!");
            }
        });
    }
    game.start();
}

addFunc という手続きの定義らへんとか微妙にガイキチ気味。こーゆーことができるから javascript 好きです (を