質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2765閲覧

JavaScriptによるゲーム開発 判定処理

minarai_pro

総合スコア18

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/03/08 06:44

前提

「避けゲー」をつくっています
上からランダムに落ちてくる敵(neko*)をうまくよけて
自分(nezumi)に当たってしまったところでゲームオーバーです

該当のソースコード

javascript

1<script> 2 var x = 130; 3 function left(){ 4 x -= 10; 5 if(x<=0){ 6 x=0; 7 } 8 document.getElementById( 'a' ).style.left = x + "px"; 9 } 10 function right(){ 11 x += 10; 12 if(x>=260){ 13 x=260; 14 } 15 document.getElementById( 'a' ).style.left = x + "px"; 16 } 17</script>

HTML

1<body> 2 <marquee direction="down" height="580" position: absolute; 3 left: 60%; 4 top: 90%; scrollamount="20" truespeed > 5 <img src="neko.png" class="teki1"> 6 <img src="neko2.png" class="teki2"> 7 <img src="neko3.png" class="teki3"> 8</marquee> 9 <button onclick="left()" class="b1">←</button> 10 <img src="nezumi.png" id="a" style="position:absolute;left:130px;top:400px;"> 11 <button onclick="right()" class="b2">→</button> 12</body> 13</html>

css

1/**/ 2body{ 3 background-color: black; 4} 5img{ 6 width: 100px; 7} 8.a{ 9 width: 100px; 10 height: 100px; 11} 12.b1{ 13 width: 50px; 14 height: 50px; 15 position: absolute; 16 left: 30%; 17 top: 90%; 18} 19 20.b2{ 21 width: 50px; 22 height: 50px; 23 position: absolute; 24 left: 60%; 25 top: 90%; 26} 27 28.teki1{ 29 30} 31 32.teki2{ 33 position: absolute; 34 left: 60%; 35 top: 100px; 36} 37.teki3{ 38 position: absolute; 39 left: 80px; 40 top: -190px; 41}

現状

現在完了している動きは
・敵が上から落ちてくること(種類、座標指定(xとy))
・ボタンによって自分(nezumi)を左右に移動できること
のみです

実現したいこと・質問

解決したいことは

・敵の種類,落ちてくる位置(X座標),タイミングをランダムで設定すること ・上記ができれば、多くの画像が降りてくると思うが、 そのなかのどれかひとつにでも自分(nezumi)が当たってしまったところで ゲームオーバー判定を出すこと

の主に二つです。

後者に関しては、「画像が重なったときに動作する」という考え方だけはわかっているのですが、それをどう実行すればいいかわかりません。

補足情報(FW/ツールのバージョンなど)

関係ないかもですが
monacaでやってます
ゲームの使用端末は エクスペディア です
jQueryは全く理解できておらず、なるべく使いたくありません
狭い条件で申し訳ないですが、協力していただけるとありがたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

JavaScriptで大量のオブジェクトの当たり判定を効率的にとる
の記事が参考になるかもしれません。
オブジェクト数が増えてきたときの工夫も書いてあります

投稿2019/03/08 07:01

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こちらの記事を参考にされるといいかもしれません。
Marqueeタグに詳しくないと攻略できないブロック崩しゲーム

ただ、<marquee/>タグを使ってゲームをつくるのは苦行です。
上記の記事もゲームしてちゃんとうごいていますが、これはハッカーがネタで書いた記事だと考えてください。

ゲームを作りたいのであればUnity等のゲームエンジン/ゲームフレームワークを使用することをおすすめいたします。自分で1からHTMLやJavaScriptを駆使してゲームをつくることもできますが、あたり判定やリソースの管理その他もろもろ自分で実装する必要になり、ゲームを完成させるという目標には遠回りになります。もちろんJavaScriptにもゲームフレームワーク等があります。ググればたくさんでてくると思うのでご検討ください。

投稿2019/03/08 10:14

redshoga

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問