[自作ゲーム]息抜きに短時間で作ったお試し品

今まで作っていたゲームが行き詰まったので、息抜きに思いつきでゲームっぽいものを作ってみた。

HTML5＋Javascript (phina.js)で制作

遊び方

上部に表示されている数字より大きいものをタッチ。

正解すれば +1.00sec

不正解だと -1.00sec

また正解すると、上部の数字との差が加算される。

遊ぶ
(別ウィンドウ全画面表示)

Javascriptコード

需要があるかわからないけど（自分で振り返る為にも）一応載せておきます。

// runstant
phina.globalize();

const SCREEN_WIDTH = 640;
const SCREEN_HEIGHT = 940;

let gTimer = 30;
let basicvalue = 0;
let choice = [];
let score = 0;

// 自作ラベル
phina.define('MyLabel', {
    superClass: 'Label',
    
    init: function(text, x, y, size, color, align) {
        this.superInit(text);
        this.x              = x;
        this.y              = y;
        this.fill           = color;
        this.fontSize       = size;
        this.align          = align;
    },
});

// ポップアップラベル
phina.define('Popup', {
    superClass: 'Label',
    init: function(text, x, y) {
        this.superInit(text);
        this.x              = x;
        this.y              = y;
        this.fill           = 'white';
        this.fontSize       = 30;
        this.align          = 'center';
        this.tweener.to({y: this.y - 50, alpha: 0,}, 1000).call(function(){this.remove()});
    },
});

// 自作ボタン
phina.define('MyButton', {
    superClass: 'Button',
    init: function(text, x, y, size, group) {
        this.superInit();
        this.x              = x;
        this.y              = y;
        this.width          = 120;
        this.height         = 120;
        this.text           = text;
        this.fontColor      = 'white';
        this.fontSize       = size;
        this.fill           = 'pink';
        this.cornerRadius   = 5;
        this.stroke         = 'white';
        this.strokeWidth    = 3;
        this.labelgroup     = group;
    },
    onpointstart: function() {
        if(this.text - basicvalue > 0) {
            gTimer += 1;
            score += this.text - basicvalue;
            var popupLabel = Popup('正解!\n+1.00sec', this.x, this.y - 100).addChildTo(this.labelgroup);
        }else{
            gTimer -= 1;
            var popupLabel = Popup('ハズレ!\n-1.00sec', this.x, this.y - 100).addChildTo(this.labelgroup);
        }
        this.parent.parent.makeBasic();
        this.parent.parent.makeChoice();
    }
});

// ゲームメイン画面
phina.define('MainScene', {
    superClass: 'DisplayScene',
    
    init: function() {
        this.superInit();
        gTimer = 30;
        score = 0;
        
        // スコア表示
        this.score = MyLabel('SCORE:' + score, SCREEN_WIDTH - 20, 40, 40, 'white', 'right').addChildTo(this);
        
        // ゲームタイマー
        this.timer = MyLabel(gTimer, SCREEN_WIDTH/2, SCREEN_HEIGHT/10, 80, 'white', 'center').addChildTo(this);
        
        // 基準となる数値
        this.basicvalue = MyLabel(basicvalue, SCREEN_WIDTH/2, SCREEN_HEIGHT/3, 80, 'white', 'center').addChildTo(this);
        this.question = MyLabel('これより大きい数字を選んでね！', SCREEN_WIDTH/2, SCREEN_HEIGHT/3 + 100, 40, 'white', 'center').addChildTo(this);
        
        this.makeBasic();
        this.makeChoice();
        
        // 回答ボタン
        this.anserGroup = DisplayElement().addChildTo(this);
        this.popupLabelGroup = DisplayElement().addChildTo(this);
        
        for(i=0;i<4;i++) {
            MyButton(choice[i], SCREEN_WIDTH/5*(i+1), 650, 50, this.popupLabelGroup).addChildTo(this.anserGroup);
        }
    },
    update: function(app) {
        gTimer -= (app.deltaTime/1000);
        pTimer = gTimer;
        this.timer.text = gTimer.toFixed(2);
        this.basicvalue.text = basicvalue;
        this.score.text = 'SCORE:' + score;
        if(gTimer < 0) {
            this.exit('result',{score:score,message:'遊んでくれてありがとう！'});
        }
        for(i=0;i<4;i++) {
            this.anserGroup.children[i].text = choice[i];
        }
        
    },
    makeBasic: function() {
        basicvalue = Math.randint(200, 900);
    },
    makeChoice: function() {
        choice[0] = basicvalue - Math.randint(1, 20);
        choice[1] = basicvalue - Math.randint(21, 30);
        choice[2] = basicvalue - Math.randint(31, 40);
        choice[3] = basicvalue + Math.randint(1, 10);
        
        for(i=choice.length-1;i>0;i--){
            var r = Math.floor(Math.random() * (i + 1));
            var tmp = choice[i];
            choice[i] = choice[r];
            choice[r] = tmp;
        }        
    }
});

phina.main(function(){
  var app = GameApp({
    width: SCREEN_WIDTH,
    height:SCREEN_HEIGHT,
    backgroundColor:'pink',
    title: 'Big or Small',
    
    startLabel:'title',

  });
  app.run();
});

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

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

// runstant

phina.globalize();

const SCREEN_WIDTH = 640;

const SCREEN_HEIGHT = 940;

let gTimer = 30;

let basicvalue = 0;

let choice = [];

let score = 0;

// 自作ラベル

phina.define('MyLabel', {

superClass: 'Label',

init: function(text, x, y, size, color, align) {

this.superInit(text);

this.x = x;

this.y = y;

this.fill = color;

this.fontSize = size;

this.align = align;

});

// ポップアップラベル

phina.define('Popup', {

superClass: 'Label',

init: function(text, x, y) {

this.superInit(text);

this.x = x;

this.y = y;

this.fill = 'white';

this.fontSize = 30;

this.align = 'center';

this.tweener.to({y: this.y - 50, alpha: 0,}, 1000).call(function(){this.remove()});

});

// 自作ボタン

phina.define('MyButton', {

superClass: 'Button',

init: function(text, x, y, size, group) {

this.superInit();

this.x = x;

this.y = y;

this.width = 120;

this.height = 120;

this.text = text;

this.fontColor = 'white';

this.fontSize = size;

this.fill = 'pink';

this.cornerRadius = 5;

this.stroke = 'white';

this.strokeWidth = 3;

this.labelgroup = group;

onpointstart: function() {

if(this.text - basicvalue > 0) {

gTimer += 1;

score += this.text - basicvalue;

var popupLabel = Popup('正解!\n+1.00sec', this.x, this.y - 100).addChildTo(this.labelgroup);

}else{

gTimer -= 1;

var popupLabel = Popup('ハズレ!\n-1.00sec', this.x, this.y - 100).addChildTo(this.labelgroup);

}

this.parent.parent.makeBasic();

this.parent.parent.makeChoice();

}

});

// ゲームメイン画面

phina.define('MainScene', {

superClass: 'DisplayScene',

init: function() {

this.superInit();

gTimer = 30;

score = 0;

// スコア表示

this.score = MyLabel('SCORE:' + score, SCREEN_WIDTH - 20, 40, 40, 'white', 'right').addChildTo(this);

// ゲームタイマー

this.timer = MyLabel(gTimer, SCREEN_WIDTH/2, SCREEN_HEIGHT/10, 80, 'white', 'center').addChildTo(this);

// 基準となる数値

this.basicvalue = MyLabel(basicvalue, SCREEN_WIDTH/2, SCREEN_HEIGHT/3, 80, 'white', 'center').addChildTo(this);

this.question = MyLabel('これより大きい数字を選んでね！', SCREEN_WIDTH/2, SCREEN_HEIGHT/3 + 100, 40, 'white', 'center').addChildTo(this);

this.makeBasic();

this.makeChoice();

// 回答ボタン

this.anserGroup = DisplayElement().addChildTo(this);

this.popupLabelGroup = DisplayElement().addChildTo(this);

for(i=0;i<4;i++) {

MyButton(choice[i], SCREEN_WIDTH/5*(i+1), 650, 50, this.popupLabelGroup).addChildTo(this.anserGroup);

}

update: function(app) {

gTimer -= (app.deltaTime/1000);

pTimer = gTimer;

this.timer.text = gTimer.toFixed(2);

this.basicvalue.text = basicvalue;

this.score.text = 'SCORE:' + score;

if(gTimer < 0) {

this.exit('result',{score:score,message:'遊んでくれてありがとう！'});

}

for(i=0;i<4;i++) {

this.anserGroup.children[i].text = choice[i];

}

makeBasic: function() {

basicvalue = Math.randint(200, 900);

makeChoice: function() {

choice[0] = basicvalue - Math.randint(1, 20);

choice[1] = basicvalue - Math.randint(21, 30);

choice[2] = basicvalue - Math.randint(31, 40);

choice[3] = basicvalue + Math.randint(1, 10);

for(i=choice.length-1;i>0;i--){

var r = Math.floor(Math.random() * (i + 1));

var tmp = choice[i];

choice[i] = choice[r];

choice[r] = tmp;

}

});

phina.main(function(){

var app = GameApp({

width: SCREEN_WIDTH,

height:SCREEN_HEIGHT,

backgroundColor:'pink',

title: 'Big or Small',

startLabel:'title',

});

app.run();

});

非常にシンプルな作り。改善すべき点がたくさんあると思います。

こうしたらいいんじゃないか？

もっとこうすれば見やすいコードになるよ！

などがありましたら、教えていただけると幸いです。