jQuery(javascript)でゲーム(クソゲー)を作った話

クソゲーをプレイする 友人のために作った一発ネタのゲーム(クソゲー) jQuery(javascript)で作ったので、スマホ対応までばっちり！ 微妙に需要がありそうだったのでソースコードを公開します。 是非これを参考にゲームを作って、友人の誕生日プレゼントとかにしよう 5分ぐらいは盛り上がるはず(適当) ※元々は友人の顔の画像ので作っていたのですが、ここに公開するのは流石に可哀そうだったため 画像は私のものに変更しています。 クソゲーをプレイする

HTML

ue1_mesが初期表示 ue1_mes2がクリア画面 ue1_gameがゲーム画面 これら3つの画面をjsで切り替えて表示しています。

jQuery(javascript)

$(function(){
	/*game*/
	var ueimgcount=0;
	var tapcount=0;
	var gamestartflag=false;

	//カウントダウン
	setTimeout(function(){
		$('.ue1_mes_2').text('2');
	},1000);

	setTimeout(function(){
		$('.ue1_mes_2').text('1');
	},2000);

	//ゲーム部表示
	setTimeout(function(){
		$('.ue1_mes').css('display','none');
	    $('.ue1_game').css('display','flex');
	    ueimgcount=1;
	    gamestartflag=true;

	},3000);

	//ゲームの内容
    setInterval(function(){
    	//0.1以下になったらクリア
    	if(ueimgcount>0.1){
	    	//常時値は増え続ける
    		ueimgcount+=0.003;
    	}else if(gamestartflag){
	    	//クリア後のメッセージなど
 	    	$('.ue1_game').css('display','none');
			$('.ue1_mes2').css('display','block');
			$('.ue1_mes2_2_span').text(tapcount);
    	}
    	//値を画像サイズに反映する
        $('.ue1_img').css('transform','translate(-50%, -50%) scale('+ueimgcount+', '+ueimgcount+')');
    },10);

   	//タップすると値が減る
	$('.ue1_img').click(function () {
	    ueimgcount-=0.1;
	    tapcount++;
    });
});

ほぼコメントにある通り、ueimgcountをいじくることによって難易度調整ができます。 gamestartflagはゲームスタート後に起動、そうしないといきなりクリアになってしまいます。

CSS

.ue1_mes,.ue1_mes2{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.ue1_mes_1,.ue1_mes2_1{
    font-size: 3.5vw;
    line-height: 1.25;
}
.ue1_mes_2,.ue1_mes2_2{
    text-align: center;
    font-size: 7vw;
    line-height: 2;
}
.ue1_game{
    position: relative;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.ue1_img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vw;
  height: auto;
  transform: translate(-50%, -50%) scale(1, 1);
  cursor: pointer;
  cursor: hand
}

基本的にはpositionで位置調整している。 それ以外解説はとくになし。