「日記2010年10月その1」の編集履歴（バックアップ）一覧に戻る
日記2010年10月その1 - (2010/11/02 (火) 18:28:11) のソース
*2010/11/2
http://my.chiebukuro.yahoo.co.jp/my/sinapusu2002
Yahoo知恵袋マスターになってしまった。
結構適当な回答もしてるので、ベストアンサーの率は低いなおれ。
*2010/10/10～13
自作ミニゲーム プログラム制作日記。
コード HTML5.0+JScript5.5+ＧｏｏｇｌｅＣｈｒｏｍｅで動くミニゲーム。
固定画面に次々と現れる雑魚敵を戦車で倒す超古典ゲームになる予定。
この程度のコードでは趣味レベルなので、オープンソースとして公開。
一応完成したら、"趣味で作る初めてのブラウザゲーム"という初心者向けタイトルを関した本レベルのゲームにまで完成させる予定です。
[[2DTankGameCodeVer1]]
実装状況。
http://www.geocities.jp/sinapusu2002/2dTanklGame/canvasTest3.htm
マウスポインタを狙ってくる固定砲台と戦車ぽい何かを実装。
実際に動くのを確認できる。
敵一覧。
放物線を描いて飛ぶ弾を一定間隔で発射する固定砲台をあらわすクラス。
cannonクラス。
これを拡張して、多数の敵を作る予定。
&ref(ブラウザゲーム敵の動き模式図.png)
使用イラスト著作権
http://free-icon.org/16train/index.html
http://runway.s20.xrea.com/icon/policefire.html#police
http://www.google.co.jp/imglanding?q=%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3+%E7%B4%A0%E6%9D%90%E3%80%80%E8%87%AA%E8%B5%B0%E7%A0%B2&um=1&hl=ja&biw=1440&bih=775&tbs=isch:1&tbnid=7zkOFvnzPIglVM:&imgrefurl=http://www.sembado.com/&imgurl=http://www.sembado.com/photo/6673.jpg&zoom=1&w=320&h=206&iact=hc&ei=hJSzTK62C4S2vQPa3rS_Bg&oei=VZSzTPC8IJOjcdasxKAI&esq=3&page=1&tbnh=136&tbnw=212&start=0&ndsp=24&ved=1t:429,r:16,s:0
http://www.google.co.jp/imglanding?q=%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3+%E7%B4%A0%E6%9D%90%E3%80%80%E9%A3%9B%E8%A1%8C%E6%A9%9F&um=1&hl=ja&biw=1440&bih=775&tbs=isch:1&tbnid=G7UwpC-zBAEBoM:&imgrefurl=http://freesozais.com/html/free_name552.html&imgurl=http://freesozais.com/free/i_machine/machine_009.jpg&zoom=1&w=300&h=300&iact=hc&ei=EJWzTOGrMZSrcbL3zKoI&oei=EJWzTOGrMZSrcbL3zKoI&esq=1&page=1&tbnh=144&tbnw=144&start=0&ved=1t:429,r:4,s:0
-リスト
-製作者履歴
コード製作者 堀江伸一
ソースが気に入って手を入れた方はここに追加してください。
そのほうが管理人としても楽なのでこれを読んだ方是非お願いします。
一人の知恵より二人の知恵、二人の知恵より3人の知恵ですよ♪
var KeyBuffer;//キー入力バッファ
var e_manage=new Array()//マップ上にいる敵データを管理する配列
var myUnit=CreateMyUnit(100,100) //自機の管理,当面ダミーデータ
var x_position=new Array()//敵味方の大雑把な位置を表現する
var eBullet_manage=new Array();//敵の弾を管理する配列
var myBullet_manage=new Array();//自機の弾を管理する配列。
var map;//画面マップ
var mapHeightDates=new Array()//地面の凸凹を現す変数データ、地面は1次元の折れ線として表現される、当たり判定がめんどくさくなる理由の王様;
var g=9.8//重力の値、必要に応じて変更予定
var baseClock=0.1;//弾の移動や敵の移動などの元となる1ｆｐｓでbasicClock時間が進む。
var mapHeight=600;
var mapWidth=1000;
//とりあえず出来た気がするのでタイマーを使ってループ処理を組み込んで大砲クラスの動作をチェック
function eCannon(x,y,hp,size,timer,rndTimer,BulletSpeed) {
//大砲を表現するクラス
this.x = x;
this.y = y;
this.hp= hp;//ヒットポイント
//this.bmp = new Image("e_CannonBody.jpg");//キャノン本体の画像
//this.Cannon = new Image("e_Cannon.jpg");キャノンの砲身の画像
this.AttackTimer= timer;//攻撃間隔
this.rndTimer = rndTimer;//攻撃間隔のランダムな揺らぎの秒数、ｆｐｓ単位
this.BulletSpeed=BulletSpeed;//弾速
this.state=0;//0なら稼働中、１なら爆発エフェクト中、２なら大砲を発射後の反動アニメーション
this.round=0;//大砲の砲身の角度を表す変数
this.nextAttackTimer=100;//ｆｐｓ計算一回ごとに1引かれる変数、これが0以下になると弾発射処理が行われ、nextAttackTimerは再セットされる。
this.size=size//大砲のサイズ／大きいのや小さいのや色々作りたくなる変数
this.no=0;
this.attack = function()
{
//放物線を描いて飛ぶ大砲の弾。これを発射しeBullet_manageに弾を登録するメソッド;
//弾の移動は全てeBullet_manageから取り出しmoveメソッドで行う。jscriptではスタックに複数の型を混在させることが出来たか記憶があいまい、混在出来るいい意味でいい加減な言語だったと思うけど？
// 主人公機と自機のＸ，Ｙ座標の差分にあわせて、大砲の発射角が変更される
this.nextAttackTimer--
if(this.nextAttackTimer<0)
{
var x1=myUnit.x-this.x;
var y1=myUnit.y-this.y;
if(Math.abs(x1)<1){
if(x1>0){
x1=1;//真上にはうてないということで
}else{
x1=-1;
}
}
var k=0.5*g*x1*x1/(this.BulletSpeed*this.BulletSpeed);
var d=x1*x1-4*k*(k+y1);
//弾が届く位置に敵がいたらｄ＞0となるので発射
if(d>0)
{
var s=(x1+Math.sqrt(d))/(2*k);
var t=Math.sqrt(1+s*s);
var direction=1;//弾を発射する向き1なら右向きに発射、-1なら左向きに発射
if(Math.abs(x1)>x1)
{
direction=-1;
}
var cb=CannonBullet(this.x,this.y,direction*this.BulletSpeed/t,this.BulletSpeed*s/t);
registerBallet(cb);
}
this.nextAttackTimer=this.AttackTimer+Math.random()*this.rndTimer;
}
}
this.raunchingR_Set=function()
{
//大砲の砲身の傾きをセットする関数、十数ＦＰＳに一回程度の稼動で問題なし
}
}
function ground_dates(g_HeightDates,MapSplitSize){
this.g_HeightDates =g_HeightDates;//地面の折れ線データ
this.cosDates =new Array()//地面の傾きに対するＣｏｓの値
this.roundDates =new Array();//地面の傾き角度、戦車を地面に設置させるのに必須
this.MapSplitSize =MapSplitSize;//折れ線データの横幅、一定値
this.pointTypes= new Array();//頂点データ、地面が凸形状か凹形状かを指し示す指標データ
var c;
var t;
var s;
var d=MapSplitSize;//計算式を読みやすく
for(i=0;i<g_HeightDates.length-1;i++){
t=g_HeightDates[i+1]-g_HeightDates[i];
c=d/Math.sqrt(d*d+t*t);
this.cosDates.push(c);//地面の傾きに対するcosの値を格納する
//地面の傾き角を求める
s=t/Math.sqrt(d*d+t*t)
this.roundDates.push(Math.asin(s)*180/Math.PI);//傾きデータ
}
for(i=0;i<g_HeightDates.length-2;i++){
t=(g_HeightDates[i+2]+g_HeightDates[i])/2-g_HeightDates[i+1];//結果が0以上なら凹地形、0以下なら凸地形
this.pointTypes.push(t);
};
this.groundMove=function(x,y,speed){
//地面の上を移動するとき、移動物体の次のx位置を決める関数,このゲームではxが決まればｙは自動的にもとまるのでｘのみを返す
//位置エネルギーと運動エネルギーの等価と折れ線の境界線を越える場合の処理を考えて処理を記述する。
}
this.groundHitCheck=function(x,y,nextX,nextY){
//地面との当たり判定。
//折れ線地面との当たり判定を行う
}
}
function registerBallet(bc){
//弾を管理する配列に弾を登録する
eBullet_manage.push(bc);
bc.no=eBullet_manage.length-1;
}
function delBallet(delNo){
//弾を管理する配列から弾を削除する
//この関数を呼び出す場合、呼び出し元のループを-1する必要がある
//弾が一個のときこの関数はどうなるか？
eBullet_manage[delNo]=eBullet_manage.pop();
eBullet_manage[delNo].no=delNo;
}
function CreateMyUnit(x,y){
this.x=x;
this.y=y;
//とりあえず後日の大砲テスト用ダミーデータ
}
function CannonBullet(x,y,xSpeed,ySpeed){
//大砲から発射される弾を表現するデータ、弾は大地と接触する、もしくは画面の右端、左端に到達するまで放物線を描いて飛び、到達、着弾と同時に画面から消失する
//誤差が出て困る計算なわけもなく座標は折れ線で近似計算する
this.x=x;
this.y=y;
this.xSpeed=xSpeed;
this.ySpeed=ySpeed;
this.r=3//弾の当たり判定、空中でこの範囲内に主人公機がいれば当たる
this.state=0//大砲の弾の状態、0なら移動中、１なら着弾し爆発エフェクト
this.explosionTimer=30;//爆発の持続時間 nFPS
this.explosionSize=10;//爆発時のサイズ,ゲーバラとあわせてよく考える必要あり
this.nextX;//弾の移動後の位置
this.nextY;//弾の移動後の位置
this.time=0//弾が発射されてからの秒数、１ｆｐｓごとにbasicClockだけ増加する。
this.no=0;
this.move=function (){
//弾の移動state=0なら移動処理;
//state=1なら爆発アニメ,explosionTimeを1減らし、これが0以下になるまでは爆発効果
//計算により弾が地面とぶつかることが判明した場合、state=1に変更、弾を爆発させる。
if(this.state==1)
{
this.explosionTimer--;
if(this.explosionTimer<0){
// eBullet_manageからこの弾を削除する関数を呼び出す
delBallet(this.no)
}
}else{
//弾の移動処理
this.time+=baseClock;
var t=this.time;
this.nextX=t*this.xSpeed+this.x;
this.nextY=t*this.ySpeed-0.5*g*t*t+this.y;
if(Ground_hit_check(this.x,this.y,this.nextX,this.nextY)==true)
this.state=1;
}
}
}
function Ground_hit_check(x,y,nextX,nextY){
//Cannonクラスがきちんと作動するかどうかをチェックするための暫定関数
//後日折れ線地面との当たり判定を
if(mapWidth<=nextX || nextX>=0){
return true;
}
if(nextY<0){
return true;
}
return false;
}
JSCRIPTの配列は異なる型を混在できるというすこし楽しい言語だったりする。
この性質を使って、いい加減コーディングでゲームを作れないか思案中。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 警告ウィンドウを表示する
function alt() {
var a=new xx(100);
var x=new Array("a",a,8);
window.alert(x[0]+" "+ x[1].x+" "+x[2]);
}
function xx(x){
this.x=x
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<BR><BR>
<p onClick="alt()">jscriptの配列は異なる型を混在できる！</p>
</BODY>
</HTML>
*2010/10/12
今日は、ブラウザゲームの敵移動の模式図作図。
しなさんこと管理人に絵描きとしての能力はない。
ので相当簡単な模式図で間に合わせる予定。
地面と弾の当たり判定。
地面は折れ線で表現されている。
折れ線部分での当たり判定の表現。
&ref(弾の地面との接触判定.png)
弾と地面の当たり判定。
2本の直線に分解して考える。
&ref(弾の地面との接触判定1.png)
&ref(弾の地面との接触判定3.png)
計算後の弾の位置が2本の直線、それぞれと比べて両方よりも下にあれば地面に当たったとみなす。
当たり判定は紫色となる共通集合となる。
&ref(弾の地面との接触判定2.png)
地面が凹んでいる場合は
&ref(弾の地面との接触判定4.png)
地面との当たり判定を和集合で表現できる。
問題は、地面がとがっているとき、当たり判定をどうするかという問題。
薄壁のように盛り上がった地面を弾が貫通してしまう場合などへの対処。
&ref(弾の地面との接触判定5.png)
弾が地面をすり抜けてしまう場合はどうするか？
移動前と移動後の位置を結んだ線分と、地面をあらわす折れ線の線分が交点を持つかどうかという問題で捉えなおしてといたほうがいいかも？
制作に当たってお世話になる予定の掲示板。
http://torasukenote.blog120.fc2.com/?no=55
http://www.tagindex.com/cgi-lib/bbsnew/newlog.cgi
http://blog.livedoor.jp/kotesaki/archives/1311895.html
*2010/10/15
&ref(戦車の移動表現.png)
戦車の場合、計算の簡素化とゲームとしてのテンポを考え位置エネルギーと運動エネルギーの交換は行わない。
実際のゲームでは、計算を簡単にするために地面は等間隔の高度データ(折れ線)として表現する。
折れ線の上を戦車が動く場合。
折れ線の斜面の長さに比例して移動距離が決まるとする。
xを戦車のｘ座標、aを戦車の速度、θを戦車が今いる斜面の角度、ｄを等幅間隔として。
ちなみに戦車の速度は一回の計算で３つの線分の上を通らない速度に押さえること。、
b=a/sqrt(d^2+h^2)*cosθ;
if((b+x) \ d > x \ d){
(d-x)
}else if((b+x)*d < x \d){
}
続きは全部出来ているけど、今日はめんどくさいのでここまで
