- 締切済み
Jsで画像同士の当たり判定
タイトルの通りですが、Aという画像がBに当たると当たり判定がなされBという画像が消えるというJavascriptを書きたいです。 Jsの知識が全くないため、どのように書くのかわからないです。 どのように書くのかなどでも良いのでアドバイスお願いします。
- shiro857
- お礼率27% (59/216)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
JSの知識というより、プログラム全般で使いますね。 x1,y1,w1,h1 画像Aの位置とサイズ x2,y2,w2,h2 画像Bの位置とサイズ が当然必要ですが。 ----------------------------**********-------------------- 画像A ---------------**********--------------------------------- 画像B 画像Aが移動するとしたら、 画像Bの位置に画像Bの長さを加えたものが、画像Aの開始位置を下回れば接触 ----------------**********-------------------------------- 画像A ----------------------------------**********-------------- 画像B これと、画像A+画像Aの大きさを加えたものが画像Bの開始位置より大きいか？ の2点をANDしたものが、X軸のみ１次元での、交差判定なので、 これを、Y軸に対しても行えば、2次元判定。（３次元も増やすだけで同じ） ってのを関数化して、hit_check()とでもすれば、完成です。 なお、w=width,h=heightの略として書かせてもらいました。 基本的なアルゴリズムなので、おそらく一生使う概念だと思いますよ。 ちなみ、アンカーポイントといって、 画像A、画像Bの中心点を求めておき、差分を求めて、 その値が、画像Aと画像Bのサイズの半分か？ だけでも、求まります。
関連するQ&A
- 画像の有無の判定
こんばんは。 どうしてもできなくて困っています。 過去の質問を遡ってみたのですが、 同じようなものがなかったので質問させていただきます。 （過去に同じ質問があったらすみません。） タイトルのとおりなんですが、 AとBの2枚の画像があるとします。 index.html内にアクセスしたときに、 基本的にはAを表示させて、もし画像Aがみつからなかったら 画像Bを表示するようにしたいのですが… javascriptをはじめたばかりでして何もできない状態です。 画像Aを表示 else画像Bを表示 のような命令になると思うのですが、 どなたかご教授して頂けませんでしょうか。 基礎のない状態ですといきなりこういったものを 作るとなると厳しいものがありまして。。 宜しくお願い致します。
- 締切済み
- JavaScript
- 簡単な当たり判定作りたい
環境FLASH MX ボタンオンでスタート、もう一回押すと画面上ハズレ、又は当たり表示という簡単な判定機を作りたいです。 プログラムの確率は１／１０とします。ただし、完全確率方式でハズレをいったんもとに戻す。またルーレットのように回るような抽選でなく ランダム式がよいです。 ぜひ、アドバイスおねがいします！
- ベストアンサー
- Flash
- 壁との当たり判定
objective-cでプレイヤーと壁の当たり判定に困っています。 いろいろと検索して参考になるサイトをさがしてはいるんですが なかなか見つかりません。 何かお勧めのサイト、または書籍などあれば教えて下さい。 ちなみに当たる壁は複雑な地形の画像でやっています。
- 締切済み
- その他（プログラミング・開発）
- UWSC 画像判定と条件分岐について
UWSC 画像判定と条件分岐について質問です 1.画像Aがあるか判定する 2.画像Aがあれば、画像B又は画像Cをクリックする 3.画像Aなければ、sleepで少し秒数を開けてから1からやり直す 以降繰り返し というプログラムを書きたいのですが、画面上の画像を判定して画像AがあるときだけB,Cをクリック させる方法がよくわかりません。 加えてBを判定してクリック、Cを判定してクリックというのは ifb部分を二つ使い別々に扱えば書けるのですが、 elseなど用いて一ブロックのifb-endifでの 表し方もよくわからないので合わせてそちらも教えていただきたいです 御回答よろしくお願いします
- ベストアンサー
- その他（プログラミング・開発）
- jsファイルで配列を定義し、ｊｓファイルを切りかえて使う
お世話になります。 jsファイルで配列を定義し、その配列の内容を表示しています。 いくつかのjsファイルで配列を定義し、そのjsファイを切りかえることにより、表示する配列の内容を切りかえることはできないでしょうか。 例えば data_a.js DataAry = new Array( new WNData('2006/11/10','ああ','・・.html'), new WNData('2006/11/10','いい','・・.html'), ・・・・・ ); data_b.js DataAry = new Array( new WNData('2006/11/10','aa','・・.html'), new WNData('2006/11/10','bb','・・.html'), ・・・・・ ); dspDataAry.jsで function WNData(Date,Cmnt,Href,Target){ this.Date=Date; this.Cmnt=Cmnt; this.Href=Href; } function DspData(){ strhtml="・・・・ （DataAryを表示するhtmlを作成） return strhtml; } dspDataAry.htmlで <script type='text/javascript' src='dspDataAry.js'></script> <script type='text/javascript' src='data_a.js'></script> <body> <script type='text/javascript'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br> </body> とすれば、data_a.jsの配列の内容が表示されます。 ボタン「ｂを表示」を押すことにより、 data_b.jsを読み込んで、その内容を表示するようにできないものでしょうか。 onClick="ｂを表示する関数"この「ｂを表示する関数」をいう関数をどのように書いたらよいのかわかりません。 data_a.js、data_b.jsで定義する配列名は同じとします。 data_c.js、data_d.js・・・といくつかに分けたく思っています。 前もってdata_b.jsを読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 傾いた長方形と、傾いていない普通の長方形の当たり判定のアルゴリズム教えて！
ゲームを作ろうとして行き詰ってます。 質問はタイトルのとおりです。 一方は傾いた長方形。もう一方は普通の長方形（傾いていない）。これらの当たり判定を取る方法というかアルゴリズム的なものを教えてください。 ただし以下の条件がつきます。 ・これら２つのオブジェクトは毎フレーム動く。 知恵を貸してください。 ちなみにこれは何かというと、シューティングゲームの敵の撃つレーザーが「傾いた長方形」で、「傾いていない長方形」が自機です。
- ベストアンサー
- その他（プログラミング・開発）
- 画像オンオフの判定
今、javascriptについて勉強しています。 それで、ブラウザで画像表示がオンのときとオフの時で適用するスタイルを変えたいと思っているのですが、javascriptのみでブラウザの画像表示がオンかオフかの判定というのは実際に可能でしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- 高さのあるクォータービューの当り判定について
ＶＣ＋＋２０１０＆ＤＸライブラリを使用してタクティクスオウガやモナークモナークのようなＳＬＧをふと作りたくなり、クォータービューを採用しました。 全くの平面な状態ですと、それぞれのブロックチップのひし形の４つの座標を、それぞれ通る４本の一次関数式と現在のマウスカーソル位置との範囲内計算をさせることで、カーソルがあたっている部分だけ色を変えるという処理（ゲーム内カーソルの表示）をさせる処理は上手くいきました。 また、ひし形の頂点の座標をCreatePolygonRgn（）；とPtInRegion()；を使う処理に変えてみても大丈夫でした。 しかし添付しました画像のようにマップに高さの概念を加えていくと、ひし形が重なり合う部分が出てきてしまい、画像のように 青の部分にマウスカーソルが入るとＡとＢが選択されて色が変わった状態になり、 緑の部分にマウスカーソルが入るとＣとＢが選択されて色が変わった状態になり、 赤の部分にマウスカーソルが入るとＤとＢが選択されて色が変わった状態になってしまいます。 （いずれの場合も、一番手前にあるＢの面だけが選択され、色が変わった状態になってほしい、 というのが理想としている動きです） CreatePolygonRgn（）；も使えるので、例えばこの画像のような例ですとＡは変形六角形、ＣとＤは変形五角形として扱うこともできそうですが、常にこういった高さの違うマップだけを表示する、というわけではなく、ブロックによっては高さが任意に変わってしまうため、変形多角形のパターンも多岐になるであろうことが予測できてしまい、目の前が真っ暗になってしまっております。 こういった場合のマウスカーソルの当り判定につきまして、何か良い処理方法をご存知の方がいらっしゃいましたら何卒お教えくださいますようお願いします。
- ベストアンサー
- C・C++・C#
- 当たり判定の処理がわかりません。
ＣとＤＸライブラリでＳＴＧを作っているのですが、あたり判定がわかりません。前、斜め右上、斜め右下の３方向に飛ぶ弾の処理を行いたいのですが、どうすればいいのでしょうか？ 画面に出力することはできたのですが、ななめに飛ぶ弾だけ判定できずに困っています。 ―――――――――ソースの一部――――――――――― //拡散する弾 void JitamaMove2(){ //弾の発射 int key = GetJoypadInputState(DX_INPUT_KEY_PAD1); if( (key & PAD_INPUT_A) && (trigger == 0) ) { for( int i = 0; i < 3; i++ ){ if (jitama[i].life == 0){ jitama[i].life = 1; jitama[i].x = jikidata.x+24; jitama[i].y = jikidata.y+8; jitama[i].y1 = jikidata.y+8; jitama[i].y2 = jikidata.y+8; float dy = jikidata.y; float d = sqrt(dy*dy); jitama[i].yobi = dy/d*idouryou[4]*10; break; } } trigger = 20; } if(trigger>0) trigger = trigger - 1; //弾の移動 for(int i=0; i<3; i=i+1){ if(jitama[i].life > 0){ jitama[i].x = jitama[i].x + idouryou[10]; DrawGraph(jitama[i].x, jitama[i].y,*(jitama[i].ghandle), TRUE); float idouy = (float)jitama[i].yobi / 10; jitama[i].y2 = jitama[i].y2 - idouy; DrawGraph(jitama[i].x, jitama[i].y2 - 10, *(jitama[i].ghandle), TRUE); //斜め下に対する弾の描写 jitama[i].y1 = jitama[i].y1 + idouy; DrawGraph(jitama[i].x, jitama[i].y1 + 10, *(jitama[i].ghandle), TRUE); //斜め上に対する弾の描写 //画面外に出たときの処理 if(jitama[i].x>640) jitama[i].life = 0; } } } /*当たり判定を計算する関数*/ int IsAtari(CharaData *a, CharaData *b){ int retval = 0; int ax1 = a->x + (a->image_w - a->bounds_w)/2; int ay1 = a->y + (a->image_h - a->bounds_h)/2; int ax2 = a->x + (a->image_w + a->bounds_w)/2; int ay2 = a->y + (a->image_h + a->bounds_h)/2; int bx1 = b->x + (b->image_w - b->bounds_w)/2; int by1 = b->y + (b->image_h - b->bounds_h)/2; int bx2 = b->x + (b->image_w + b->bounds_w)/2; int by2 = b->y + (b->image_h + b->bounds_h)/2; if( (ax1<bx2) && (bx1<ax2) && (ay1<by2) && (by1<ay2) ){ switch (a->amode){ case A_NORMAL: //キャラ消滅 a->life = 0; break; case A_HARD: //耐久力-1 a->life = a->life -1; break; } switch (b->amode){ case A_NORMAL: //キャラ消滅 b->life = 0; break; case A_HARD: //耐久力-1 b->life = b->life -1; if(b->life > 0) SetHanten(b->x, b->y, b->image_w, b->image_h); break; } if(b->life == 0) SetBakuen(b->x, b->y); retval = 1; } return(retval); } //当たり判定の処理 int AtariHantei(){ for(int i=0; i<50; i=i+1){ if(tekidata[i].life > 0 && tekidata[i].amode != A_GHOST){//A_GHOS・・・判定なし //自機と敵の判定 if(IsAtari(&jikidata, &tekidata[i])==1) return(1); //弾と敵の判定 for(int j=0; j<3; j=j+1){ if(jitama[j].life > 0 && jitama[j].amode != A_GHOST){ IsAtari(&jitama[j], &tekidata[i]); } } } } for( int i = 0; i < 50; i++ ){ if(tekitama[i].life > 0){ if(IsAtari(&jikidata, &tekitama[i]) == 1) return(1); } } return(0); }
- 締切済み
- C・C++・C#
- 画像拡大機能のjsをスマホで読み込まない
ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
