Javascriptでテトリスをつくってみた。

JavaScriptでテトリスを作ってみました。
C言語のコードをそのまま移植しただけのでなんか重い。

ソースはこちら
https://drive.google.com/file/d/0B5M9qMMg3tfQOHdHNWp3cWhfNlU/edit?usp=sharing

ビットコインの論文を読んでみた

最近話題のビットコインの論文を読んで、ビットコインの技術を勉強してみました。
http://www.bitcoin.co.jp/docs/SatoshiWhitepaper.pdf
この論文相当面白いです。

仮想通貨だけあって、この論文を書いた中本哲史という人も仮想の人物らしいです。
京都大学の教授だとという噂があります。

http://www.kurims.kyoto-u.ac.jp/~motizuki/

宇宙際幾何学者らしいです。
独身。

もう、この名前や写真の髪型がめちゃくちゃ怪しいんですが、この人マジですごすぎ。

ブラウザで花火の物理シュミレーションをしてみた

ブラウザとJavaScriptとHTMLのdivタグだけでいろいろな数値計算シュミレーションができるんじゃないかと思って、打ち上げ花火のシュミレーション行うプログラムを作ってみました。

IntenetExplorerでも動かしたいので、あえてcanvasとかは使いません。

コンパイルいらないし、昔のBasicみたいな感じで手軽にいろいろな数値計算をするシュミレーションプログラムが作れて、とっても楽しくていい感じ。

はじめてのプログラム学習とかでも使えそう。

次はライフゲームを作ってみようと思います。

------------

function print(name)

{

if(name==null)return;

$("body").append(name+"<br/>");

}

function myrandom()

{

return Math.random();

}

function mysin(d)

{

return Math.sin(d);

function mycos(d)

{

return Math.cos(d);

}

$(function(){

oninit();

main();

});

var event_no=0;

var event_param1=0;

var event_param2=0;

var quantity=300;

var size = 3;

var circle=0.97;

var gravity=1.1;

var speed=5;

var top=3;

var left=2;

var color=0xffff00;

var Radian = 6.283;

var pos_x=[];

var pos_y=[];

var vel_x=[];

var vel_y=[];

var frame = 0;

function init_hanabi()

{

var i;

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

var angle = myrandom() * Radian;

var aspeed = myrandom() * speed;

pos_x[i]=400;

pos_y[i]=100;

vel_x[i]=mycos(angle) * aspeed;

vel_y[i]=mysin(angle) * aspeed;

}

frame = 0;

}

function render_hanabi()

{

var i;

var len;

frame++;

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

pos_x[i] += vel_x[i];

pos_y[i] += vel_y[i];

vel_x[i] *= circle;

vel_y[i] *= circle;

pos_y[i] += gravity;

}

}

function view_render()

{

var i;

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

$("#tag"+i).css({

left: ""+parseInt(pos_x[i])+"px",

top: ""+parseInt(pos_y[i])+"px"

});

}

return 0;

}

function view_init()

{

var i;

$("body").css({

'background-color':"#000000",

});

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

$("body").append("<div id=\"tag"+i+"\"></div>")

$("#tag"+i).css({

'background-color':"#ffcc88",

position:"absolute",

border:"solid 1px",

width: "2px",

height: "2px"

});

}

view_render();

return 0;

}

function oninit()

{

var i;

init_hanabi();

view_init();

return 0;

}

function main()

{

var en=0;

while(event_no!=-1){

if(frame>200)return 0;

render_hanabi();

view_render();

setTimeout(main,50);

break;

}

return 0;

}

CSSで画像を中央に表示する その３

InternetExplorer6でも写真を枠にぴったしスペースをいれずに表示する方法を昨日の深夜に考えてみました。
一番外側のタグの中に横幅が3倍のタグを作って、そのなかに横幅を指定しない写真を作ればよかったんです。

タグをこんな風に３つ重ねれば、アスペクト比が33%から300%までの画像ならばどんなブラウザでも表示できます。

$(parent_tag_name).append("<div id=\tag1\"></div>");
$("#tag1").css({
    position:"absolute",
    width:"200px",
    height: "200px",
    left: "100px",
    top: "100px",
    overflow:"hidden"
});  
$("#tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
    position:"absolute",
    width:"600px",
    height: "200px",
    'margin-left': "-200px"
});  
$("#tag2").append("<div id=\"tag3\"></div>");
$("#tag3").css({
    position:"static",
    'layout-grid-line': "200px",
    display:"table-cell",
    'text-align': "center",
    'vertical-align': "middle",
    width:"600px",
    height: "200px"
});  
$("#tag3").append("<img id=\"tag4\" src=\"0.jpg\"/>");
$("#tag4").css({
    'vertical-align': "top",
    height:"200px"
});  

ソースや試験したデータはここにおいてみました。
https://drive.google.com/file/d/0B5M9qMMg3tfQVWhnNHdCZ1p6WWc/edit?usp=sharing

CSSで画像を中央に表示する その２

ひとつ前に書いた、CSSで画像を中央に表示するのをいちいちCSSファイルとHTMLで書くのはとても面倒です。
そこで、ライブラリをつくってみました。この関数を使って画像を表示するdivタグを自動生成できます。

全関数をInternetExplorer6、InternetExplorer8、InternetExplorer11、Firefox、Chrome、Safariで動くことを確かめる試験もしました。うーん試験がとてもめんどくさい。

----------------------------

function dispimg_create_normal(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}



function dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto "+tag_w+"px"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}



function dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': ""+tag_w+"px auto"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}




function dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-height':""+tag_h+"px",
width:""+tag_w+"px"
});
return 0;
}


function dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-width':""+tag_w+"px",
height:""+tag_h+"px"
});
return 0;
}


function dispimg_create(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
switch(format){
case 0:
return dispimg_create_normal(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 1:
return dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 2:
return dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 3:
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 4:
return dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
default: // default is type3
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
}
}

CSSで画像を中央に表示する

はじめてJavascriptでWebページを作ると、だいたい最初につまずくところが画像を枠の真ん中、上下左右ともに中央に表示する方法。いろいろなページにいろいろな方法が書いてあるのですが、InternetExplorer6で動かなかったり、position:absoluteで任意の位置に表示できなかったり。どれも一長一短です。

そこで僕も写真を中央に表示する方法をブログに書くことに参戦。
僕の使っている秘伝の方法を書きます。


・一番簡単な方法を取りたいならば1の方法をお勧めします。
・写真を枠のサイズに拡大縮小していれて、スペースを入れずに、はみ出した部分を切り取りたいのならば2と2'の方法を組み合わせることをお勧めします。
・写真を上下または左右にスペースをいれて枠のサイズに拡大縮小してほしいのならば3と3'の方法を組み合わせることをお勧めします。

InternetExplorer6で動く、スペースを入れずに写真を枠内にぴったしと入れる方法は、僕はcssだけではできないと思っています。本当はあるのかなぁ？


1　一番簡単な写真の中央部分を切り出してそのままの倍率で表示する方法


$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat"
});

２　横長の写真の左右をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
　　縦長の写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法

ただしこの方法はInternetExplorer8以下では1の動作になります。

$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto 200px"
});

２’　横長の写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
　　縦長の写真の上下をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
ただしこの方法もInternetExplorer8以下では1の動作になります。

$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "200px"
});


３　写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は縦長の縮小する写真はだめなので3'の方法と組み合わせるとよい


$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});

$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});

$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-height': "200px",
width:"200px"
});

return 0;
}


３'　縦長写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は横長の縮小する写真はだめ



$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});

$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});

$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-width': "200px",
heigt:"200px"
});



----------------------------

利用者の72%が利用したくないショップで買ってみた。

世の中にはいろいろなネットショップがあります。
サギまないなサイトもありますが、まじめに運営しているにも関わらず、大半の利用者が二度と利用したくないと書いているショップもあります。

http://kakaku.com/shopreview/1819/


真面目にやっていて顧客満足度が異常に低いショップというのはどのようなものなのか、とっても面白そうなので、amazonに出店しているそのショップでモバイルルータを買ってみました。

http://www.amazon.co.jp/gp/product/B00B9F8U5M/ref=oh_details_o05_s00_i00?ie=UTF8&psc=1

まず、そのモバイルルータの価格ですが、１円。
そもそも価格設定が間違っている気がします。
でも送料は500円なので、きっとそこで儲けているのでしょう。
ヤフオクでもひとつ前のモデルの落札価格が500円前後。
そんなもんなのでしょう。

多くのショップは注文して数時間で注文受付のメールが来て数時間で発送されますが、僕の注文したショップは丸一日以上注文受付のメールが来ず、そのあと３日でやっと商品が発送されますメールがきました。
そして注文から待つこと一週間、やっとの思いで商品が届きました。

やっぱり。というか予想通り。モバイルルータなんて届かなく、箱の中には下敷きが入っていました。
まぁ１円だからね。

しかし！一緒に同封されていた注文用紙には、きちんとモバイルルータと書いてあり、検品した判子まで押されています。
うーん。いったいこの人は何を検品しているのでしょう。

間違った商品が届くためには、出品時にまず何回かチェック漏れがあり、さらに商品発送時にチェック漏れがないと届かないはず。この会社、すごいです。

なので、とりあえず、出品者に違う商品が届いたとメールしてみました。
また、待つこと一日。

=====================================================================
お世話になっております。この度は弊社不手際にて大変ご迷惑をお掛けいたしまして、誠に申し訳ございません。
該当商品につきまして確認させていただきましたところ、 弊社の不手際にて、商品の出品間違いをしている事が発覚致しました。 ※商品の出品につきましては、現在出品の取り下げ、修正をさせて頂いております。
この度は大変ご迷惑、ご不快な思いをお掛け致しまして申し訳ございません。
上記理由の為、誠に申し訳ございませんが、弊社にて商品を回収させて頂き、アマゾンよりお支払い頂きました商品代金を全額ご返金にてご対応させて頂きたく存じます。
商品のご返品方法につきましては、ご返送のお手間等 お客様にご迷惑をお掛けしてしまいます為、 弊社にて返送用の着払い伝票をご用意させて頂き、ゆうパックによる集荷の手配をさせて頂きたく存じます。まず弊社から、返送用の着払い伝票を発送致します。
※発送の都合上、封筒に貼り付けされた状態でのお届けとなります。お受け取りいただいた後、お手数ではございますが その場で着払い伝票をお手元のお荷物に貼り付けて頂き 配達に伺いました配達員にそのままお渡し下さいます様お願い申し上げます。 ※お手数ではございますが発送時の梱包を再度ご利用頂き お手元の商品の梱包の程をお願い致します。既に破棄頂いております場合には、簡易のもので構いません為 簡単に梱包の程をお願い致します。 商品の集荷手配にあたり、お客様のご自宅まで配達員を派遣致します為、商品の集荷にご都合の良い日時をご連絡下さいます様お願い申し上げます。※弊社は静岡県からの集荷となります為、お住まいの東京都までは 到着までに3日ほどの日数が掛かります。その為、お時間の猶予をご検討下さいます様お願い申し上げます。お客様からのご連絡を確認でき次第、着払い伝票をご用意させて頂き、集荷の手配をさせて頂きたく存じます。この度は弊社不手際にて大変ご迷惑をお掛け致しております事改めまして深くお詫び申し上げます。ご連絡をお待ちしております。
=====================================================================

長たらしいこちらが何をしてよいか、よくわからないメールが来ました。
最初、返送用の封筒が送られてくるのかと思っていましたが、最後までよく読むと、こちから都合の良い日を返信しないといけないようです。それならばそのことを先に書いてくれないと。

僕は大体夜しか家にいないし、何時から何時までなら大丈夫なのか、土日は集配してくれるのか一切わからず。
いったいなんなんだ！このメールは。

なので返信すること数回。今度は以下のメールが来ました。

===========================================================
アマゾンでは返品による返金期限が設けられております。 一定期間を過ぎてしまうと返品・返金の意志がないものと見なされてしまい、 申し訳ございませんがそれ以降はご要望に応じる事が出来かねます。 そのため、お忙しい所誠に申し訳ございませんが、 本日より一週間程度以内に弊社へとお荷物をお送り頂けましたら 幸いでございます。 何らかの事情により期限内にご返送が無理な場合は、その旨を弊社まで メールにてご連絡頂けましたら、ご返品期間の延長をお受付させて頂きます。 お手数ですが、同封されておりました納品書と 下記内容の書類（メモでも印字でも構いません）を同封願います。
※納品書を破棄されております場合は、下記メモのみで構いません。

取引番号　　　　：250-3424820-8547839
お名前　　　　　：吉田 ○○子　様
返品理由　　　　：商品違い
対処　　　　　　：全額返金

===========================================================

なんか注文番号や名前が違っている。
もうなんの返金手続きをしているのかさっぱりわかりません。
個人情報が流出しています。

相手がこの紙をいれて商品を送れと言っている以上、こちらもおかしいと思いながらも従います。
この紙を印刷して商品を送り返してみました。

予想されることですが、それ以来、まだ何の音沙汰もありません。
この会社、一生懸命やっているのはわかりますが、出品、発送、返金まで何一つ正しく処理できないのです。お金はいつ戻ってくるのでしょう。

きっと、相手を楽しませてくれるエンターテイメントの会社なんです。
支払った501円以上に楽しむことができます。

皆様も一度利用してみてはいかがでしょう。

つづく。