高齢者ドライブシミュレータ InitialE作ってみた【クソゲー】

イニシャルッ E～　タンタンタン！

やってみたかった
遊び方
実装方法
問題点
おわりに
スペシャルサンクス

どうもNSZ山本です。

突然ですがいきなりゲーム作ってみました。

プレイ時間は30秒。クソゲーですが最小限の時間の浪費

やってみたかった

PHP+HTML+JSでレスポンシブ対応のロールプレイングゲーム作ってみた – Qiita

これを読んでしまった。すっげえかっけえ。

僕も作りたい！(中学生並みの感想)！

ブラウザゲームでこれ程できるのか。

unityとかぜったい触りたくないし(ボタン多すぎ)

というわけで作ってみました。

これがタイトル画面です。

遊び方

ここへアクセス。

INITIAL E -beta

ブラウザゲームなのでアクセスするだけです。

左右キー←→とエンターだけで動かせます。

車は見ればわかりますが私の手書きです。

車を選んでスタート。

制限時間は30秒

いらすとやさんの絵がポップです。

ルールは特に説明していませんが

おそらく「道に現れる歩行者や自転車を出来るだけREKI-SATSUすればハイスコア」だと思います。

あくまで暗黙のルールなので、よけるゲームとしてご利用いただいてもOK。

そんな物騒なの明言するわけにはいかんでしょ（すっとぼけ）

ほんとにどっちとしても遊べますからね？！

爆破音の効果音もつけました。

リザルト画面。

スコアを反映してあなたの運転レベルが出ます。ゴールドから免許返納レベルのステータスが与えられます。

更に上に隠しステータスもあります。

実装方法

ほぼjqueryなどのjs系で作ってます。

画面が3つ

タイトル
ゲーム
リザルト

で構成しています。それぞれ使った技術を紹介します。まあこれをみてこれを作ろうなんて思う人は居ないと思うので、軽く書いておきます。

1タイトル

車の選択は実はスリックデス。

とりあえずスリック。みんな大好きSlick.jsを導入しておきます。

$(window).keydown(function(e){						
						
	if(e.keyCode == 37){$('.slick-prev').trigger('click')}					
	if(e.keyCode == 39){$('.slick-next').trigger('click')}					
	if(e.keyCode == 13){					
		var imgname = $('.slick-current').find('img').attr('src');				
		$("#formtext").val(imgname);				
		$('button').trigger('click');				
	}					
});

$(window).keydown(function(e){

if(e.keyCode == 37){$('.slick-prev').trigger('click')}

if(e.keyCode == 39){$('.slick-next').trigger('click')}

if(e.keyCode == 13){

var imgname = $('.slick-current').find('img').attr('src');

$("#formtext").val(imgname);

$('button').trigger('click');

}

});

キーダウンイベントでキーコード判定して左右に動かす。37が左で39が右。

Enterでクリックイベントにバインド。

form{						
  display: none;						
}

form{

display: none;

}

画面遷移を起こして2のゲーム画面に移動するのですが、画像自体にA hrefしてません。

cssでhiddenでフォームをこっそり隠して、そこにエンター押した瞬間、真ん中にある要素の画像名を取得してドーン

初心者丸出しの実装だな。

2.ゲーム

Velocity.jsの出番です。

Velocity.js

ヴェロシティじぇーえすは、jqueryのアニメーションよりも大幅に軽く、きれいなアニメーションを実現するとのこと。

構文も直感的で書きやすいと感じました。

敵

var images = [						
  'iy/cardgame_man.png'						
// <只の画像の羅列なので省略>						
 ];						
function img(){						
	var a = Math.floor( Math.random() * 1801 ) ;					
	if(a<901){					
						
		$('.iy').css({'margin-left':a});				
	}else{					
		$('.iy').css({'margin-right':a-900});				
	}					
						
	$('.iy').velocity(					
		{ 				
			top: 1000 			
		},{				
			duration:1500, 			
			delay:0,			
			easing:'swing',			
			complete: function(){			
				if (time < 1){		
					var fscore = $('h1').text()	
					var fkill = $('h3').text()	
						
					$("#fkill").val(fkill);	
					$("#fscore").val(fscore);	
					$("#fexext").val('gameend');	
					$('button').trigger('click');	
				} else {		
					$('.iy').remove();	
					var rndImg = images[Math.floor(Math.random() * images.length)];	
					$('.dummy').after("<div class = 'iy'><img  class='img'  src='"+rndImg+"'></div>");	
					img()	
				}		
						
			}			
		}				
	);					
}

var images = [

'iy/cardgame_man.png'

// <只の画像の羅列なので省略>

];

function img(){

var a = Math.floor( Math.random() * 1801 ) ;

if(a<901){

$('.iy').css({'margin-left':a});

}else{

$('.iy').css({'margin-right':a-900});

}

$('.iy').velocity(

{

top: 1000

},{

duration:1500,

delay:0,

easing:'swing',

complete: function(){

if (time < 1){

var fscore = $('h1').text()

var fkill = $('h3').text()

$("#fkill").val(fkill);

$("#fscore").val(fscore);

$("#fexext").val('gameend');

$('button').trigger('click');

} else {

$('.iy').remove();

var rndImg = images[Math.floor(Math.random() * images.length)];

$('.dummy').after("<div class = 'iy'><img class='img' src='"+rndImg+"'></div>");

img()

}

);

}

敵の出現位置は左右のみで管理。

乱数(1800の範囲)で数字を出し、margin-leftまたはmargin-rightのcssを上書きして左右に変化を付けて出現させます。

あとは.velocityでtop属性を、1.5秒間の間に1000px変化させることで下に落ちてくるようなアニメーションを表現。

自機

var clf = true;						
$(window).keydown(function(e){						
	if(clf){					
		var carp = parseInt($('.cary').css('margin-left'), 10);				
		if(e.keyCode == 37){				
			clf = false;			
			carp = carp -200;			
			$('.cary').velocity(			
			{ 			
				'margin-left':carp		
			},{			
				duration:500, 		
				easing:'swing',		
				complete:function(){		
					clf = true;	
				}		
			});			
		}				
		if(e.keyCode == 39){				
			clf = false;			
			carp = carp +200;			
			$('.cary').velocity(			
			{ 			
				'margin-left':carp		
			},{			
				duration:500, 		
				easing:'swing',		
				complete:function(){		
					clf = true;	
				}		
			});			
		}				
	}					
});

var clf = true;

$(window).keydown(function(e){

if(clf){

var carp = parseInt($('.cary').css('margin-left'), 10);

if(e.keyCode == 37){

clf = false;

carp = carp -200;

$('.cary').velocity(

{

'margin-left':carp

},{

duration:500,

easing:'swing',

complete:function(){

clf = true;

}

});

}

if(e.keyCode == 39){

clf = false;

carp = carp +200;

$('.cary').velocity(

{

'margin-left':carp

},{

duration:500,

easing:'swing',

complete:function(){

clf = true;

}

});

}

});

自機フリウスは、現在の位置を取得、margin-left属性を変化。

右を押したらmargin-leftをプラス

左を押したらmargin-leftをマイナス

当たり判定

var score = 0;						
var kill = 0;						
$(function () {						
	setInterval(function(){					
	  var iyp = $('.iy>img').offset();					
	  var iytop = iyp.top;					
	  var iyleft = iyp.left;					
						
	  var caryp = $('.cary>img').offset();					
	  var carlmax = caryp.left -200;					
	  var carrmax = caryp.left +200;					
	  var cartmax = caryp.top +100;					
	  var carbmax = caryp.top -100;					
						
	if (carlmax < iyleft && iyleft < carrmax && cartmax > iytop && iytop > carbmax){					
						
        var src = $('.iy').children('img').attr('src');						
        //役人だったらgameover						
        if(src =='iy/bad2.png' || src =='iy/bad.png' ){						
			var fscore = $('h1').text()			
			var fkill = $('h3').text()			
						
			$("#fkill").val(fkill);			
			$("#fscore").val(fscore);			
			$("#fexext").val('bad');			
			$('button').trigger('click');			
        }						
	  	score+=100;				
	  	kill+=1;				
	  	if(kill==10){				
	  		//BOUNOUS POINTS			
	  		score+=10000;			
	  		$('h4').text('CONGRATULATION!　U KILLED 10 FUTURE TAXPAYER!');			
	  	}else if(kill==20){				
	  		score+=100000;			
	  		$('h4').text('R U CRAZY? SERIAL KILLER LAH.');			
	  	}				
	  	$( '#sound' ).get(0).play();				
	  	$('h1').text('score:'+score);				
	  	$('h3').text('kill:'+kill);				
	  	$('body').css('background','red');				
	  	setTimeout(function(){				
     		$('body').css('background','black');				
		},100);				
	  }					
      },200);						
});