ブログが続かないわけ

この日記のはてなブックマーク数
Webエンジニアが思うこと by junichiro on Facebook

[JavaScript]今度はボードゲームのダイヤモンドを作った

このエントリーを含むはてなブックマーク hateb
js 特訓月なので、js をいろいろ触っているのだが、今度はダイヤモンドという人気のボードゲームを実装してみた。本来のダイヤモンドは、ダイヤモンドの眠る危険な洞窟に、これ以上奥まで行くか、はたまたここで帰るのかというジレンマを、周囲のみんなを牽制し合いながら楽しむという非常にスリリングなのものなのだが、その大事な部分をばっさりとカットして、今回は1人用のダイヤモンドにした。

奥深くまで行く方がメリットが出るようにアレンジし、ひとりでも楽しめるようにしたのだが、まあ、評判は悪い。
11:10 mizzu_1: もうでけたのか
11:10 mizzu_1: ああ
11:10 junichiro: ひとり用だもの
11:10 mizzu_1: 1人プレイかい
(中略)
11:13 mizzu_1: 坊主めくりじゃんって
11:13 mizzu_1: 気がしちゃうんです

【それでも遊びたい方はこちら→】Diamond
僕は、最高で259個のダイヤモンドを持ち帰ったことがある。

diamond/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/diamond.css">
<script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../lib/diamond.js" type="text/javascript"></script>
<title>Diamond</title>
</head>
<body>
<h1>Diamond</h1>
<div id="status">
<span class="label">現在のダイヤモンド: </span>
<span class="value"><span id="count">0</span>個</span>
<span class="label">危険度: </span>
<span class="value"><span id="danger">0</span>%</span>
<span class="label">残り枚数: </span>
<span class="value"><span id="left">30</span>枚</span>
</div>
<div id="field"></div>
<div id="action">
<input type="button" id="go" value="Go!" />
<input type="button" id="return" value="Return..." />
</div>
<div>
<h3>危険度によるブースト</h3>
<ul>
<li> 0〜10% - そのまま</li>
<li>10〜20% - 2倍</li>
<li>20〜30% - 4倍</li>
<li>30〜40% - 8倍</li>
<li>40% 以上 - 20倍</li>
</ul>
</div>
</body>
</html>

lib/diamond.js
if( typeof( window.Diamond ) == "undefined") {

// Diamond コンストラクタ
var Diamond = function() { return this; };

// Version
Diamond.VERSION = '0.01';

// Diamond オブジェクトのプロパティ(デフォルト値)
Diamond.prototype.cgiurl = 'diamond.cgi';
Diamond.prototype.cards = [
2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,
'Sneak', 'Sneak', 'Sneak',
'Explosion', 'Explosion', 'Explosion',
'Gas', 'Gas', 'Gas',
'Scorpion', 'Scorpion', 'Scorpion',
'Rock', 'Rock', 'Rock',
];

Diamond.prototype.bads = {
"Sneak":0, "Explosion":1, "Gas":2, "Scorpion":3, "Rock":4
}

Diamond.prototype.potential = new Array();
Diamond.prototype.accident = new Array();
for(var i = 0; i<5; i++) {
Diamond.prototype.potential[i] = 3;
Diamond.prototype.accident[i] = 0;
}

Diamond.prototype.diamond = 0;
Diamond.prototype.left = 30;

Diamond.prototype.init = function() {
var __this = this;
__this.cards = [
2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,
'Sneak', 'Sneak', 'Sneak',
'Explosion', 'Explosion', 'Explosion',
'Gas', 'Gas', 'Gas',
'Scorpion', 'Scorpion', 'Scorpion',
'Rock', 'Rock', 'Rock',
];
$("#go").click(function(e) {
__this.go(e);
});
$("#return").click(function(e) {
__this.go_home(e);
});
__this.diamond = 0;
__this.left = 30;
for(var i = 0; i<5; i++) {
__this.potential[i] = 3;
__this.accident[i] = 0;
}
__this.display();
}

Diamond.prototype.go = function( arg ) {
var __this = this;
var left = __this.cards.length;
var draw_sub = Math.floor( Math.random() * left );
var draw = __this.cards[draw_sub];
__this.add_field( draw );
var new_cards = new Array();
for( var i = 0; i<left; i++ ) {
if( i == draw_sub ) continue;
new_cards.push(__this.cards[i]);
}
__this.cards = new_cards;
if(typeof draw == 'string') { // accident!
var sub = __this.bads[draw];
__this.potential[sub]--;
__this.accident[sub]++;
if(__this.is_finished()) {
__this.game_over();
};
}
if(typeof draw == 'number') { // diamond!
__this.diamond += draw * __this.boost();
}
__this.display();
}

Diamond.prototype.go_home = function( arg ) {
var __this = this;
alert("You are a chiken!¥nGo home!¥n¥nYou got " + __this.diamond + " diamonds!");
$("#go").unbind();
$("#return").unbind();
$("#action").empty();
}

Diamond.prototype.danger = function( arg ) {
var __this = this;
var dan = 0;
for(var i = 0; i<5; i++) {
if(__this.accident[i] == 1) dan += __this.potential[i];
}
var danger = Math.floor(dan * 100 / __this.cards.length * 10) / 10;
return danger;
}

Diamond.prototype.boost = function( arg ) {
var __this = this;
var danger = __this.danger();
if(danger < 10) return 1;
if(danger < 20) return 2;
if(danger < 30) return 4;
if(danger < 40) return 8;
return 20;
}

Diamond.prototype.is_finished = function( arg ) {
var __this = this;
for(var i = 0; i<5; i++) {
if(__this.accident[i] == 2) return true;
}
return false;
}

Diamond.prototype.display = function ( arg ) {
var __this = this;
$('#left').empty().append(__this.cards.length);
$('#count').empty().append(__this.diamond);
$('#danger').empty().append(__this.danger());
}


Diamond.prototype.game_over = function ( arg ) {
var __this = this;
alert("You got no diamond!¥nGAME OVER!");
$("#go").unbind();
$("#return").unbind();
$("#action").empty();
__this.diamond = 0;
__this.left = 30;
__this.init();
}


Diamond.prototype.add_field = function ( arg ) {
var div = document.createElement('div');
div.setAttribute('class', 'card');
var text = document.createTextNode(arg);
div.appendChild(text);
if(typeof arg == 'string'){
jQuery(div).css('background-color', '#FFDDDD');
}
$('#field').append( div );
if(typeof arg == 'string'){
var br = document.createElement('br');
jQuery(br).css('clear', 'both');
$('#field').append( br );
}
}

// リモート計算を行うメソッド
Diamond.prototype.expr = function ( arg ) {
// CGI に渡すパラメータオブジェクトを生成
var param = {
q: arg
};
// コールバック関数無いではthis が使えないのでコピー
var __this = this;
// JSON データを受取るコールバック関数
var func = function ( data ) {
if ( ! data ) return null;
if ( data.status != 'ok' ) data.result = '';
$(__this.result).text(data.result);
$(__this.status).text(data.status);
};
// CGI を呼び出して、JSON データを受取る
jQuery.getJSON( this.cgiurl, param, func );
}
}

// main
$(document).ready(function(){
var d = new Diamond();
$('#field').empty();
d.init();
});

AI を実装してNPC とプレイできるようにすればそこそこ盛り上がるとアドバイスをもらい、AI といえばjunichiro くらいのノリで行きたい僕としては、多いにモチベーションがあがったのだが、js の特訓という目的から大きく逸脱していることに気がついてやめた。

次のお勉強は、ドラッグアンドドロップとなんとなくうわついたフレームみたいなやつを学ぶ予定。それからちょっとしたビジュアル的ななにかを勉強して行きたい。ダイヤモンド のNPC のAI はその後だが、その頃には需要がなくなっていると予想。
この記事のトラックバックURL
http://en.yummy.stripper.jp/trackback/1255419
トラックバック
コメント









関連情報