- ベストアンサー
シューティングゲームの作り方
また行き詰ってしまったので質問させてください。 趣味のプログラミングでシューティングゲームを作ろうと思っていて、下記URLのコードまでは完成しました。 しかし、色々と問題があります。 （１）自機が敵機に当たったときには、衝突応答の関数が実行されるのに、弾が敵に当たった時には実行されないのがなぜだかわからない。 （２）背景の画像をスクロールさせるのに効率のいい方法（できるだけ重くない処理） （３）自機を枠の外に行かないようにするには… （４）”マウスのボタンをクリックするたびに弾を発射”ではなく、”押している間は常に弾を発射する”という処理にするにはどうすればいいのか… （５）マウスを押したままでも、自機の移動を可能にするには…（画像を表示させると、クリック状態で自機の移動ができなくなる） （６）右クリックの禁止ができません。どのサイトを見ても同じようなコードしか書いてなく、そのコードでは右クリックの禁止ができません…（divにoncontextmenu="return false;"） （７）その他、下記URLのコードの無駄や、ゲームを作るならもっとこういう書き方の方がいい！などありましたら教えていただけるとうれしいです。（何より動作の軽いゲームを作りたい（javascriptで。今回他の言語等は考えていません。）） （８）それから、注文が多くて申し訳ありませんが、（７）以外は下記のコードをベースに解決方法を教えていただければ幸いです。 http://www7b.biglobe.ne.jp/~k326/javascript/STG.html ８つも一度に質問するのも気が引けましたが、何度も投稿するよりは…と思ったのでまとめさせていただきました。自分なりにグーグルで１０サイト以上は見て回ったのですが、解決できませんでした。（検索の仕方が悪いのかもしれません…）どうかご教授お願いします。 ※趣味の範囲なので、できれば「センスない」などの中傷はしないでください。お願いします。 ※動作チェックはIEです。とりあえずはIEでできるように…と考えています。 ※2000文字に入りきらなかったので、直接コードを記述せずにURLを載せる事にしました。
- 3104kita
- お礼率47% (95/202)
- JavaScript
- 回答数11
- ありがとう数7
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
返事なんていらないよ！なんか楽しい！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>STG</title> <style type="text/css"> body { background-color:#000; color:#fff; margin:0; overflow:hidden;} #waku { overflow:hidden; margin:0;} #waku img { display:none; position:absolute; } #star { display:none; } #title { float:left; margin:1ex;} #score { float:right; margin:1ex;} #jiki { z-index:4; } #tama { z-index:1; } </style> <body> <div id="waku"> <div id="header"> <div id="title">なんて名前にしようかな～</div> <div id="score">SCORE : <span id="point">0</span></div> </div> <img src="teki.gif" width="40" height="40" alt="敵" id="teki"> <img src="./img/8.gif" width="40" height="40" alt="自" id="jiki"> <img src="./img/1.gif" id="tama" width="10" height="20" alt="玉"> <p id="star">.</p> </div> <script type="text/javascript"> //@cc_on function getInnerView() { var C = document/*@if (1) [document.compatMode=='CSS1Compat' ? 'documentElement': 'body']/*@else@*/ .defaultView /*@end@*/; return { W:/*@if(1) C.clientWidth @else@*/ C.innerWidth /*@end@*/-8, H:/*@if(1) C.clientHeight @else@*/ C.innerHeight /*@end@*/-30 }; } //______ Timer = function () { this.timerID = null; this.interval = 50; } Timer.prototype.stop = function () { return clearInterval(this.timerID) }; Timer.prototype.start = function (f_) { return this.timerID = setInterval((function (t,c) { return function() {c.call(t);}; })(this, f_), this.interval); }; //______ Star = function () { this.init.apply(this, arguments) }; Star.prototype = new Timer; Star.prototype.constructor = Star; Star.prototype.init = function (n, c, color) { var e = document.createElement('P'), s = e.style, i = 0; s.position = 'absolute', s.color = color; e.appendChild(document.createTextNode(c)); this.obj = []; this.v = getInnerView(); while (i<n) this.obj[i++] = { x: this.v.W * Math.random(), y: this.v.H * Math.random(), z: Math.random() * 20 + 2, e: document.body.appendChild(e.cloneNode(true)) }; return this.start(this.fall); } Star.prototype.fall = function () { var c = 0, o , s; while (o = this.obj[c++]) { if (o.y > this.v.H) { o.z = Math.random() * 20 + 2; o.x = Math.random() * this.v.W; o.y = 0; } s = o.e.style, s.top = o.y + 'px', s.left = o.x + 'px', o.y += o.z; } return true; } new Star(100, '.', '#660'); //______ var MBTN = false, MX=200, MY=2000; document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mousedown', function() { MBTN = 1;},false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mouseup', function() { MBTN = 0; }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mousemove', function(evt) { MX = evt.clientX, MY = evt.clientY }, false); Jiki = function () { this.init.apply(this, arguments) }; Jiki.prototype.init = function (id) { var v = getInnerView(); var e = document.getElementById(id), s = e.style;; this.obj = { e:e, s:s, x:v.W / 2, y:v.H - 60, mx:v.W - e.offsetWidth, my:v.H - e.offsetHeight}; s.display = 'inline'; this.move(); this.shot(); }; Jiki.prototype.move = function () { var o = this.obj; o.x += (MX - o.x) /10; if (o.x>o.mx) o.x = o.mx; o.y += (MY - o.y) /10; if (o.y>o.my) o.y = o.my; o.s.left = o.x + 'px'; o.s.top = o.y + 'px'; setTimeout((function(f_){ return function() {f_.move(); }; })(this), 20); } Jiki.prototype.shot = function () { if (MBTN) { var c = document.getElementById('tama').cloneNode(false), s = c.style; document.getElementById('waku').appendChild(c); s.display = 'inline'; var x = this.obj.x+15; var y = this.obj.y; var t = 4; s.left = x + 'px'; var P = function shotloop(){ t*=1.05; s.top = (y -= t)+ 'px'; if( y < 1) return document.getElementById('waku').removeChild(c); setTimeout(shotloop, 10); } P(); } setTimeout((function(f_){ return function() {f_.shot(); }; })(this), 500); } var J = new Jiki('jiki'); Teki = function () { this.init.apply(this, arguments) }; Teki.prototype = new Timer; Teki.prototype.constructor = Teki; Teki.prototype.init = function (e) { this.interval = 10; this.d = Math.PI /180; var v = getInnerView(); var s = e.style; s.display = 'inline'; var x = v.W / 4 + v.W * Math.random() * .5; var k = Math.random() * 360; var n = Math.random() * 15 +4; this.obj = {e: e, x:x, y:0, mx: v.W, my: v.H, k:k, s:e.style, n:n}; }; Teki.prototype.move = (function (j) { return function () { var o = this.obj; o.y += o.n; o.x += Math.sin(o.k*this.d)*8; if ( ((o.x - j.x)/40 | 0)==0 && ((o.y - j.y)/40|0)==0) alert("Game Over!"); if (o.x>o.mx || o.x<0 || o.y > o.my) this.init(o.e); o.k += 5; o.s.top = o.y + 'px'; o.s.left = o.x +'px'; return true; }; })(J.obj); Teki.add = function (id) { var e = document.getElementById(id); var p = e.parentNode; e = e.cloneNode(true); e.id = ''; e.style.position = 'absolute'; var o = new this(p.appendChild(e)); return o.start(o.move); }; Teki.add('teki'); Teki.add('teki'); //_________________ </script>
その他の回答 (10)
- babu_baboo
- ベストアンサー率51% (268/525)
なんだ～。ばぶっ！ いっぱいかけるじゃんかぁ～！^^; あとはかってにやっておくれ～！ いきなりさいしょのぎょうの、xml vresion= のたいぽには びっくりしたけど、・・・・・ e.style.top = playrA.y; みたいなのは、うごくかもしれないけど、やっぱり e.style.top = playrA.y + "px"; かな？ はんていが、これからの、かだいか？・・・・ きゃらが、はんてんされるもんだいは、GAMEDISPLAYのうえに、 とうめいなものを、かぶせればかいけつかな？ javascriptのさんぷるとかで"main()"を、かくひとってすくないよね～ var e = document.getElementById("STAR").cloneNode(true); document.getElementById("GAMEDISPLAY").appendChild(e); は、id="star"のようそが、ふくすうそんざいすることにならない？ ゆにーくでなければならないじょ。 Pのようそは、inlineじゃなくてblockなのでは？ とか、じゅうばこのすみをつつくようで・・・ がんばってね～～～～！ ばぶ～！
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっと、おかしな、かきかたかもしれないね。 Teki.prototype.move = (function (j) { return function () { var o = this.obj; o.y += o.n; o.x += Math.sin(o.k*this.d)*8; if ( ((o.x - j.x)/40 | 0)==0 && ((o.y - j.y)/40|0)==0) alert("Game Over!"); if (o.x>o.mx || o.x<0 || o.y > o.my) this.init(o.e); o.k += 5; Locater.call(o.s, o.x, o.y); return true; }; })(J.obj); の、さいごの J.obj が j としてりようされてるじょ。 はんていも、２つのざひょうをひきざんして、そのさが、４０ぴくせる いないだったら、あたりとしているよ x = 1.23456 |0; びっとえんざんしの"|0"をつかうと、せいすうになっちゃうぞ！ x = Math.floor(1.23456); と、おなじ。 さいごの Teki.add('teki'); Teki.add('teki'); だけど、こうすることで、なんこもついかできるじょ！ いま、じぶんもこれでべんきょうしてるじょ!^^; こーどを、かけばかくほど、おかしなところが、でてくるので、 あすは、がらりとかわるかもしれないじょ。 きながに、がんばろう～！ No7の、おほしさまが、おちてくるのは、ほし１こにつき１たいまー だったので、やめました。あれは、ごみにしてください。 ばぶぅ～。
- babu_baboo
- ベストアンサー率51% (268/525)
てきがいないじょ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>STG</title> <style type="text/css"> body { background-color:#000; color:#fff; margin:0; overflow:hidden;} #waku { overflow:hidden; margin:0;} #title {float:left; margin:1ex;} #score { float:right; margin:1ex;} #jiki { position:absolute; z-index:2; } #tama { display:none; position:absolute;z-index:0; } </style> <body> <div id="waku"> <div id="header"> <div id="title">なんて名前にしようかな～</div> <div id="score">SCORE : <span id="point">0</span></div> <img src="jiki.gif" width="40" height="40" alt="自" id="jiki"> <img src="tama.gif" id="tama" width="10" height="20" alt="玉"> </div> </div> <script type="text/javascript"> //@cc_on var Pmouse = {x:240, y:600}; function getInnerView() { var C = document/*@if (1) [document.compatMode=='CSS1Compat' ? 'documentElement': 'body']/*@else@*/ .defaultView /*@end@*/; return { innerWidth :/*@if(1) C.clientWidth @else@*/ C.innerWidth /*@end@*/-8, innerHeight:/*@if(1) C.clientHeight @else@*/ C.innerHeight /*@end@*/-30 }; } var Star = function (element) { this.element = element; this.timerID = null; this.interval = 40; this.x = 0; this.y = 0; this.z = 0; this.init(1); }; Star.prototype.loop = function (cb_) { this.timerID = (function (o) { return setInterval(function () { return cb_.call(o); }, o.interval); })(this); }; Star.prototype.init = function (n) { var v = getInnerView(); this.x = Math.random() * v.innerWidth; this.y = Math.random() * v.innerHeight * Boolean(n); this.z = Math.random() * 5 + 1; return true; }; Star.prototype.fall = function () { var v = getInnerView(); this.y += this.z; if (this.y > v.innerHeight) this.init(); this.element.style.top = this.y + 'px'; this.element.style.left = this.x + 'px'; }; Star.create = function () { var d = document, e = d.createElement('p'), s = e.style, o; e.appendChild(d.createTextNode('*')); s.color = '#660'; s.position = 'absolute'; o = new this(d.body.appendChild(e)); o.loop(o.fall); return o; }; Star.start = function (n) { for (var i = 0; i < n; i ++) this.create(); }; Star.start(10); //_________________ Jiki = function () { this.init.apply(this, arguments); }; Jiki.prototype.init = function () { var v = getInnerView(); this.element = document.getElementById('jiki'); this.x = v.innerWidth / 2 |0; this.y = v.innerHeight - 60; this.s = this.element.style; this.max_x = v.innerWidth - this.element.offsetWidth; this.max_y = v.innerHeight - this.element.offsetHeight; addEvent( document, 'mousemove', (function (cb_) { return function(evt) { cb_.mouse_move(evt); };})(this), false); addEvent( document, 'mousedown', (function (cb_) { return function(evt) { cb_.mouse_down(evt); };})(this), false); addEvent( document, 'mouseup', (function (cb_) { return function(evt) { cb_.mouse_up(evt); };})(this), false); this.timerId = setInterval( (function(cb_) { return function() { cb_.move(); };})(this), 10); this.timerId2 = setInterval( (function(cb_) { return function() { cb_.shot(); };})(this), 350); }; Jiki.prototype.mouse_move = function (evt) { this.mouse_x = evt.clientX; this.mouse_y = evt.clientY; } Jiki.prototype.move = function (evt) { this.x += (this.mouse_x < this.x -8 ) * -2 + (this.mouse_x > this.x +8) *2; this.y += (this.mouse_y < this.y -8 ) * -2 + (this.mouse_y > this.y +8) *2; if (this.max_x < this.x) this.x = this.max_x; if (this.max_y < this.y) this.y = this.max_y; this.s.left = this.x + 'px'; this.s.top = this.y + 'px'; } Jiki.prototype.mouse_down = function (evt) { return this.shot_f = true; } Jiki.prototype.mouse_up = function (evt) { return this.shot_f = false; } function addEvent(element, evt, eventHandler, flag){ element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag); } Jiki.prototype.shot = function () { if (! this.shot_f) return; var c = document.getElementById('tama').cloneNode(false), s = c.style; document.getElementById('waku').appendChild(c); s.display = 'inline'; var x = this.x+15; var y = this.y; var t = 8; s.left = x + 'px'; var P = function shotloop(){ s.top = (y -= t)+ 'px'; if( y < 1) return document.getElementById('waku').removeChild(c); setTimeout(shotloop, 5); } P(); } Teki = function () { }; var J = new Jiki(); </script>
- babu_baboo
- ベストアンサー率51% (268/525)
なんだか、ばぶぅ～ばっかりなので、きがひけるが・・・ はいけいのすくろーるもよいかもしれないが、こんなのは どうだかな？ばぶっ。 これをるーぷのまえにでもくみこんでちょ！ なんでこんなめんどうくさいかきかたなのかをしらべると べんきょうになるかも！？ いまだに、ばぶぅてきにわからないことあるけどね^^; //@cc_on function getInnerView() { var C = document/*@if (1) [document.compatMode=='CSS1Compat' ? 'documentElement': 'body']/*@else@*/ .defaultView /*@end@*/; return { innerWidth :/*@if(1) C.clientWidth @else@*/ C.innerWidth /*@end@*/-8, innerHeight:/*@if(1) C.clientHeight @else@*/ C.innerHeight /*@end@*/-30 }; } var Star = function (element) { this.element = element; this.timerID = null; this.interval = 40; this.x = 0; this.y = 0; this.z = 0; this.init(1); }; Star.prototype.loop = function (cb_) { this.timerID = (function (o) { return setInterval(function () { return cb_.call(o); }, o.interval); })(this); }; Star.prototype.init = function (n) { var v = getInnerView(); this.x = Math.random() * v.innerWidth; this.y = Math.random() * v.innerHeight * Boolean(n); this.z = Math.random() * 5 + 1; this.element.style.top = this.x + 'px'; this.element.style.left = this.y + 'px'; return true; }; Star.prototype.fall = function () { var v = getInnerView(); this.y += this.z + 1; if (this.y > v.innerHeight) this.init(); this.element.style.top = this.y + 'px'; this.element.style.left = this.x + 'px'; }; Star.create = function () { var d = document, e = d.createElement('p'), s = e.style, o; e.appendChild(d.createTextNode('*')); s.color = '#660'; s.position = 'absolute'; o = new this(d.body.appendChild(e)); o.loop(o.fall); return o; }; Star.start = function (n) { for (var i = 0; i < n; i ++) this.create(); }; Star.start(30);
- babu_baboo
- ベストアンサー率51% (268/525)
れんぞくはっしゃだけど・・・。 だめなみほんで！^^; かんせいしたらというか、せいさくかていでもいいので こうかいして、あそばせてね！ ばぶぅ～！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>STG</title> <style type="text/css"> #WAKU { background: #8c8 URL(backimg.gif) repeat-y; width:400px; height:500px; position:absolute; top:100px; left:100px; border:3px black solid; } #WAKU img{ position:absolute; display:none; } #point { text-align:right; padding-right:1em;} </style> <body oncontextmenu="return false;" onMouseMove="jikimove()" onMouseDown="SHOT=1" onMouseUp="SHOT=0"> <div id="WAKU" width="400" height="500"> <p id="point">SCORE:<span id="score">0</span></p> <img src="jiki.gif" id="JIKI" width="40" height="40" alt="自"> <img src="teki.gif" id="TEKI" width="40" height="40" alt="敵"> <img src="tama.gif" id="TAMA" width="8" height="16" alt="玉"> </div> <script type="text/javascript"> //グローバル変数 var SHOT; var d = document; var waku = { e:d.getElementById("WAKU") } var jiki = { e:d.getElementById("JIKI"), x:180, y:450 }; var teki = { e:d.getElementById("TEKI"), x:150, y:100, v:8 }; var tama = { e:d.getElementById("TAMA"), x:0, y:0, v:16 }; //mainループ function main(){ start_teki(); hitRes(jiki.e, teki.e); hitRes2(tama.e, teki.e); if (SHOT) shot(); setTimeout(main,10) } //画像のサイズの半分を返す関数 function getHalfsize (e){return { w:e.offsetWidth / 2 , h:e.offsetHeight / 2 };} //画像の中心位置を取得する関数(offset値) function getposCenter(e){ return { x:e. offsetLeft + getHalfsize(e).w , y:e.offsetTop + getHalfsize(e).h}; } //衝突判定 function hitJudg(e0,e1){ var AL = getposCenter(e0).x - getHalfsize(e0).w ; //画像Aの左辺 var AR = getposCenter(e0).x + getHalfsize(e0).w ; //画像Aの右辺 var BL = getposCenter(e1).x - getHalfsize(e1).w ; //画像Bの左辺 var BR = getposCenter(e1).x + getHalfsize(e1).w ; //画像Bの右辺 if( (AL < BR) && (AR > BL) ){ var AT = getposCenter(e0).y - getHalfsize(e0).h ; //画像Aの上辺 var AB = getposCenter(e0).y + getHalfsize(e0).h ; //画像Aの下辺 var BT = getposCenter(e1).y - getHalfsize(e1).h ; //画像Bの上辺 var BB = getposCenter(e1).y + getHalfsize(e1).h ; //画像Bの下辺 if( (AT < BB) && (AB > BT) ){ return true; } } return false; } //衝突応答 function hitRes(e0,e1){ if( hitJudg(e0,e1) == true){ document.getElementById("text").innerHTML = "GAME OVER"; } else return false; } function hitRes2(e0,e1){ if( hitJudg(e0,e1) == true){ document.getElementById("text").innerHTML = "HIT!!"; } else return false; } //自機関数 function jikimove(){ if ('WAKU' != event.srcElement.id) return; jiki.e.style.pixelTop = event.clientY -118; jiki.e.style.pixelLeft = event.clientX - 118; if (event.button ==1) shot(); } //弾発射関数 function shot(){ var c = document.getElementById("TAMA").cloneNode(false); waku.e.appendChild(c); c.style.display = "inline"; var jx = getposCenter(jiki.e).x; var jy = jiki.e.offsetTop; var thw = getHalfsize(tama.e).w; var x = jx - thw; var P = function shotloop(){ jy -= tama.v; c.style.left = x + "px"; c.style.top = jy + "px"; if( jy < 1) return waku.e.removeChild(c); setTimeout(shotloop, 20); } P(); } //敵機関数 function start_teki(){ var a = waku.e.offsetWidth - teki.e.offsetWidth - 1; teki.x += teki.v; if( teki.x < 1 || teki.x > a ) teki.v *= -1; teki.e.style.pixelLeft = teki.x; teki.e.style.pixelTop = teki.y; } teki.e.style.display = "inline"; jiki.e.style.display = "inline"; main(); </script>
補足
あと押しどころによって画像とかが反転しちゃうのも直ってないです…^^; ちなみに上のURLを新しいのに更新してあります。
- babu_baboo
- ベストアンサー率51% (268/525)
すごいね～！ はじめてからすうしゅうかんでこんなに！ こまかいしつもんは、あってるじょ！（たぶん） （りかいに、なんねんもついやしている、ばぶぅって^^;） ＞//nodeが"waku"の場合… ＞親要素が枠の時は、wakuの左の座標をxに足し続け、wakuの上の座標をyに足し続ける…？←ここがよくわからないです… wakuのようそのまえに、いろいろなたかさのものがあるばあいに、それもくわえないと、おふせっとのいちがもとめられないから。 ざひょうのあたいをきめうちしているのだから、もっとかんたんになるね。 ＞return evt ? evt.preventDefault(): event.returnValue = false; ＞//これはつまり…return if(evt == undefine){ evt.preventDefault() = event.returnValue = false;}？？？ これね～。いべんとをきゃんせるしようとおもったんだけど、けっきょくごみだ！ ごめんなさい！わすれてください！ ＞あと、Pmouse.xはoffsetXじゃだめなんですか？ IEにげんていしているのだから、それでもいいんじゃない？ もちろん element.style.top = 123 +'px'; なんてやめて elemeny.style.pixelTop = 123; にしてもいいんじゃない？ がぞうのいちをはんだんするために、そのかんすうにidをわたしているけれど えれめんとそのものをわたせばいい！ function getposCenter(img){ var x = document.getElementById(img).offsetLeft; var y = document.getElementById(img).offsetTop; x += getHalfsize(img).w; y += getHalfsize(img).h; return { x:x , y:y }; } を、 function getposCenter(e){ var x = e.offsetLeft; var y = e.offsetTop; x += getHalfsize(e).w; y += getHalfsize(e).h; return { x:x , y:y }; } みたいに。 というか、はばなんてはじめからしっているんだから var tama = { x:0, y:0, v:16, e:document.getElementById("TAMA"), wd:10, wh:5 } とかにしてさんしょうすれば？ たまに、あたったかどうかだけど、ふくすうある、たまのがぞうからざひょうをもとめないで たまそのものがいどうしたとき、teki.xとぶつかってないかしらべたほうがよいのでは？ 「IEげんてい」なんだけど、しらべればしらべるほど、IEのとくしゅせいになかせられる。 たのぶらうざでも、うごくようにべんきょうするとよいよ。 そうそう！ ばぶぅ～に、かんぺきをもとめては、だめだじょ！ 「せんもんか」というひとたちは、「おこちゃまね～」とみてるんだから。 なので、「ばぶ～」なんだし・・・。
補足
最初に教えてもらった書き方でできるところまでやってみました！ とりあえずこれが今の限界です^^; １、自機の弾が敵に当たらない。（cloneの座標をとってないから？） ２、敵の弾をすり抜けることがよくある。当たり判定の範囲を広げると、ちょっとぶつかるにしては遠すぎる位置になってしまう。 ３、爆発の挙動がちょっとおかしい。 ほかにも変なところ沢山あるかもです… なによりも、コードがみられるの恥ずかしいくらいに… 効率よくまとめられるように、回答してもらったコード参照にしつつまた書き直してみます！ 敵はなぜかりんごです笑
- babu_baboo
- ベストアンサー率51% (268/525)
ついき。 あたりはんていで、いちいちたいしょうのがぞうのよこはばを しらべにいくのもむだなようなきがする .style.marginを-1とかにして、ちょっとずらし、はばは2へらすとか・・
補足
ちょ…ちょっと返事まってください…！新しいことがいっぺんにありすぎてパンクしそうです…！>< 落ち着いたらすぐに返事します！
- babu_baboo
- ベストアンサー率51% (268/525)
ばぶっ！ ヒントのだしおしみではないので、かんちがいしないでね。 function main(){ start_teki(); hitRes("JIKI","TEKI"); hitRes2("TAMA","TEKI"); setTimeout(main,10) } のなかのTAMAはふくすうそんざいしているかもしれないのに はんていは、ひとつだけ。 ちょっとかんがえかたをかえて、 このなかにくみこんではどうかな？ばぶ。 var P = function shotloop(){ jy -= tama.v; c.style.left = x + "px"; c.style.top = jy + "px"; if( jy > 1) setTimeout(shotloop,20); else{ waku.e.removeChild(c); } } そうおもって、てきのへんすうはぐろーばるにしておいたじょ！
補足
弾の当たり判定の問題解決しました！ありがとうございます！追加したnode一つ一つに当たり判定をつけないとだめだったんですね！ それで、見てもらいたいものがあるのですが…。前回の質問の時のコードなのですが、解釈は以下であっていますか？ FEND = teki.y < 600; //敵のy座標が600を超えたら、FENDにfalseが代入されるので、mainループがとまる。（ゲームが終了する） FEND && setTimeout(LOOP1, 20); //もしもFENDがtrueならsetTimeoutを実行する。ゲームオーバーになる条件の処理を書くときにFENDにfalseを代入すれば、ループがとまる仕組み。 jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4; //掛け算の場合は、条件式での評価がtrueの場合は1とみなされる。falseの場合は0。つまり条件が満たされない場合は答えは常に0になる。 function (evt){ //引数のevtは、関数内に、var evtと書いても同じで、書き方の違いなだけ evt = evt ? evt: window.event; //IEでは、evtがundefinedになってしまうので、もしもevtがundefinedとして処理されたら、evtにwindow.eventを代入する。それ以外の場合では、evtにevtを代入する。（つまりそのまま）ようするに、ブラウザがIEの時は、window.eventをつかって、それ以外のブラウザのときはevtを使う。 function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return {x: x, y:y}; } ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ function getPosition(node) { var x = 0, y = x; do{ x += node.offsetLeft; y += node.offsetTop; } while(node = node.offsetParent); return {x: x, y:y}; } //nodeが"waku"の場合… 親要素が枠の時は、wakuの左の座標をxに足し続け、wakuの上の座標をyに足し続ける…？←ここがよくわからないです… 最後。 return evt ? evt.preventDefault(): event.returnValue = false; //これはつまり…return if(evt == undefine){ evt.preventDefault() = event.returnValue = false;}？？？ この時点でよくわからないのですが、 preventDefaultを調べると…。 ブラウザのデフォルトのイベント処理をさせないことができます。 とあり、 returnValue を調べると…。 window.showModalDialogで子Windowをオープンします。 子Windowで入力した文字列をwindow.returnValueにセットし、親Windowが受け取ります。 とありました。ますますよくわからなくなりました…そもそも子Windowを開いてもないのに…って思っちゃいます。これはつまりどういうことでしょうか？ あと、Pmouse.xはoffsetXじゃだめなんですか？ いつもいつも長々とすみません。お時間あるときにでもお返事いただけるとうれしいのですが…お願いできますか？><
- babu_baboo
- ベストアンサー率51% (268/525)
ばぶっ！ Q1、たまはかくされているのもをはんていきじゅんにしているじょ！ だからあたらない。 ざひょうはんていで、はばをはんぶんにするひつようある？ Q3、たとえば、みぎはじにいどうして、まうすがわくからはずれて ひだりからしゅつげんしたばあい、いきなりわーぷしてしまいそう だけど、それは、「仕様」なのか？ ほかは、そのうち。
補足
前回はどうもありがとうございました！ とても勉強になりました。 今回もまたお世話になりそうで…感謝します。 それで、Q1ですが、「かくれているものを判定基準にしている」ということで意味がわかりました！でも原因がわかったのですが解決できません…(泣) c.id = "cTAMA"; として、 hitRes2("cTAMA","TEKI"); としたのですが、やはりあたりませんでした…。 "TAMA"指定で、元の要素無理やり当てたらそっちはちゃんと処理されました。 cloneのidを指定するという方法ではないのでしょうか？ c.id = null; としたあとに c.id = "cTAMA"; としたりしてみましたがだめでした… それから、座標判定の幅を半分にしたのは、ある程度ゲームが様になって絵とかをつけたときに、当たり判定の大きさを変えられるようにするためです。 当たり判定を考えたときに、”画像までの距離＋画像の大きさ”で四辺をとる方法と、”画像の中心から画像の半分の大きさを足したり引いたり”で四辺を取る方法の二つが思い浮かんだのですが、前者だと上辺と左辺には倍率を掛けることが面倒だったため、後者を選びました。 中心位置を別のところでも使えるかな？とも思ったので。 ちなみにこんなコードです。 //衝突判定 function hitJudg(imgA,imgB,wm,hm){ var AL = getposCenter(imgA).x - (getHalfsize(imgA).w * wm); //画像Aの左辺 var AR = getposCenter(imgA).x + (getHalfsize(imgA).w * wm); //画像Aの右辺 var BL = getposCenter(imgB).x - getHalfsize(imgB).w; //画像Bの左辺 var BR = getposCenter(imgB).x + getHalfsize(imgB).w; //画像Bの右辺 if( (AL < BR) && (AR > BL) ){ var AT = getposCenter(imgA).y - (getHalfsize(imgA).h * hm); //画像Aの上辺 var AB = getposCenter(imgA).y + (getHalfsize(imgA).h * hm); //画像Aの下辺 var BT = getposCenter(imgB).y - getHalfsize(imgB).h; //画像Bの上辺 var BB = getposCenter(imgB).y + getHalfsize(imgB).h; //画像Bの下辺 if( (AT < BB) && (AB > BT) ){ return true; } } return false; } Q3は…確かにそうですね…でも直感的な操作ができるようにしたい…と思ったので今の感じにしました。でもワープは完全にゲームバランスが崩れてしまいますのでよくないですね…。
- phoenix343
- ベストアンサー率15% (296/1946)
全部説明するのも面倒なのでとりあえず以下のページ参考にしてみたら。 JavaScriptでインベーダーゲームｗ http://plaza.harmonix.ne.jp/~jimmeans/game03w.htm
お礼
回答ありがとうございます。教えていただいたURL参考にしてみます。
補足
回答ありがとうございます。教えていただいたURL参考にしてみます。
関連するQ&A
- 簡単なシューティングゲーム制作
下記の内容を目標に簡単なシューティングゲームを作っているのですが、アドバイスをいただけたら幸いです。 ・敵（ライブラリーからステージに複数配置・移動・スピード・敵同士の間隔に可変性を持たせる・弾にヒットしたら消える） ・自機（・マウスに追従・マウスクリックで弾発射・弾を制限なしで連射可・敵にヒットしたらスコア表示） ・制限時間 ・スコア表示 参考サイトなどありましたら、教えていただけると助かります。 大変申し訳ありませんが、宜しくお願いいたします。
- 締切済み
- Flash
- Flashで、簡単なシューティングゲーム制作
下記の内容を目標に簡単なシューティングゲームを作っているのですが、アドバイスをいただけたら幸いです。 ・敵（ライブラリーからステージに複数配置・移動・スピード・敵同士の間隔に可変性を持たせる・弾にヒットしたら消える） ・自機（・マウスに追従・マウスクリックで弾発射・弾を制限なしで連射可・敵にヒットしたらスコア表示） ・制限時間 ・スコア表示 参考サイトなどありましたら、教えていただけると助かります。 大変申し訳ありませんが、宜しくお願いいたします。
- 締切済み
- Flash
- N88BASICでシューティングゲームを作りたい！！
N88BASICを使って簡単なゲームをつくってみたいんですけど どうもうまくいかないんですよ。 昔なつかしのインベーダーゲームを作ろうとがんばっているのですが 敵と自機を配置したんですけどそれを動かすにはどうしたらいいのでしょうか？ もう敵を動かすのはめんどうなので自機だけキー入力で 左右に動かせるようにしたいんです。 そうするにはどういう命令を書けばいいのでしょうか？ それとシューティングゲームなので弾を発射するとか 当たったらやられるとかそういう肝心なところの プログラムがわかんないんです。 どなたか教えてもらえないでしょうか お願いします。m(-_-)m
- ベストアンサー
- その他（プログラミング・開発）
- Lite1.0でのシューティングゲームですが
いつも大変参考にさせていただいております。 さて、本題ですが、Lite1.0でシューティングゲームを作成しているのですが 動きと当たり判定の連動がうまく行きません。 今現在設定している敵ＭＣのあたり判定は以下の通りです。 //自機（攻撃側）とのあたり判定 if (../pc:_y >= _y - 10 and _y + 10 >= ../pc:_y) { if (../pc:_x == _x) { if (/game:hp <> 0) { if (/game:dmg <> 1) { tellTarget ("../pc") { gotoAndPlay("dmg"); } tellTarget ("../../hp") { nextFrame(); } } } } } //弾とのあたり判定 if (../tama:fire == 1) { if (../tama:_y >= _y - 10 and _y + 10 >= ../tama:_y) { if (../tama:_x >= _x -10 and _x + 10 >= ../tama:_x) { tellTarget ("../tama") { gotoAndStop(1); } gotoAndPlay("baku"); } } } インスタンス名の説明をします。 pcが自機、tamaは自機が発射する弾。 gameがシーン1に置かれている全体のMC。 hpが自機のパワー数、dmgはダメージ。 このＡＳを敵ＭＣの1フレーム目に記載しております。 そして、2フレーム目に gotoAndPlay(_currentframe - 1); ３フレーム目～７フレーム目には /game:score += 10; ラベルはbakuとしています。 そして、８フレーム目に stop(); ラベルをendとしています。 タイムラインは（全てＭＣ） シーン1→game→ステージ(敵や弾・自機)→敵（あたり判定をしているＭＣ） となっております。 そして、以前の質問にあった、こちらの動きを付けたいと考えております。 ↓ http://oshiete1.goo.ne.jp/qa2802247.html あたり判定は問題なく出来ているのですが、 これに動きをつけると動作しなくなってしまう・・・ と言いますか、どのように連動させるべきかうまいこと分かりません。 ゲームのイメージとしてはインベーダーゲームと思って下さい。 また違った方法で動きをつける様になるのでしょうか。 説明が長くなってしまって申し訳ございませんが 宜しくお願いいたします。
- 締切済み
- Flash
- 【JS】マウスでコピペした時にイベントをおこす方法
JavaScriptに関して質問です。 マウスでコピペした時にイベントをおこす方法はありますでしょうか。 単にクリックしただけならonclickでいいのですがマウスでコピペとなると 右クリック ＞ 貼り付け の時点でイベントを起こさなければなりません。 よってoncontextmenuも使えません。 何かいい方法はありますでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 昔プレイしたPCゲームの詳細が知りたいです。
昔プレイしたPCゲーム(Windows95辺り)の詳細や名前が知りたいです。 当時使っていたパソコンに入っていたものなのですが、 最近になってふと思い出し、また触れてみたいなぁと思いつつも、 そのゲームの詳細(ゲーム名等)がどうしても思い出せません。 当時使っていたパソコンも今は手元に無いのでどうしようもできず・・・。 知りたいゲームは二つで、一つは添付している野球拳。 こちらは画像を見た限りフリーウェアのようで、 どこかで公開しているものなのでしょうか？ もう一つは縦スクロールのシューティングゲームなのですが、こちらはゲーム名が思い出せません。 幸い、ゲームの内容等ははっきり記憶にあるので、分かっているものを挙げると、 ・ゲームタイトルは英語 ・全4ステージ ・ステージ1は昼間、ステージ2は夕方、ステージ3は夜、ステージ4はお城？のような場所 ・主人公(自機)は緑や紫色のすこし丸っこい飛行機 ・画面左上に赤いHPゲージ ・ゲームの背景(自機が飛んでいる下の風景)は初代ドラクエ風 ・自機の通常弾は黄色の弾 ・特定のアイテムを取ると、左と右斜めに発射する赤いビーム、ジグザグ飛ぶ青いカッターが打てるようになる ・敵の攻撃はそこそこ激しく、皆白い弾を中心に撃ってくる ・ステージ4のボスは紫色の服を着たメデューサのような外見。拡散する黒い弾を撃ってくる 以上です。 もしこちらの手がかりで「このゲームですか？」等がありましたら、 教えていただけると嬉しいです。 よろしくお願いいたします。
- 締切済み
- その他(ゲーム)
- 右クリック禁止タグについて
右クリック禁止のタグを調べていたら、 <BODY oncontextmenu="alert('ここに文字');return false;"> という短いのと <SCRIPT language=JavaScript>という書き出しで始まる長いのがあるようなのですが、 この二種類は何が違うのでしょうか？
- ベストアンサー
- HTML
- フレームでの右クリック禁止
フレームを使って、画面を分割しているのですが、単体のHTMLを開くと次に示すJavascriptで右クリックが出来なくなりますが、フレームにしてしまうと、出来なくなってしまいます。 フレームにしても右クリックを禁止するには、どうしたらよいでしょうか？ ご教授ください。よろしくお願いします。 <script language="JavaScript" type="text/javascript"> <!-- function contextmenu() { alert("右クリックは、使用できません。"); return false; } document.oncontextmenu = contextmenu(); --> </script>
- ベストアンサー
- JavaScript
- 右クリック禁止が効かないのですが
作成しているHPで右クリック禁止を設定したのですが、一部のPCで効きません。 「右クリック禁止」の表示は出るのですが、「OK」ボタンを押すと、 従来通り、保存などのメニュー画面が出てきます。 OSはWindowsXP。IE6使用です。 何が要因なのでしょうか。 ちなみに<body oncontextmenu="alert('右クリック禁止');return false;">を使いました。 大変困っております。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 画像をクリックしたときに右クリック禁止を発動したい
Bodyタグなどに「oncontextmenu=return false」と書くと、右クリックを禁止できますが、最初から右クリックを禁止するのではなく、ある特定の画像をクリックしたときに発動させたいのですが。 それを例えばダイナミックHTML（？）的に「<img src="xxx.jpg" onmousedown="document.body.background='壁紙'">」のようなやり方を応用して、「oncontextmenu=return false」を発動できないか試してみましたが、（文法を根本的に知らないので）どうも上手く出来ません。 （※<img src="a.jpg" oncontextmenu=return false>と書けば、その画像の右クリックだけは禁止できますが） Javaスクリプトを使えばこのコントロールが可能かと思いますが、もしこの「onmousedown="document.body.background='壁紙'"」レベルの単純な指示で、右クリック禁止が発動できる方法が何かございましたら、お教えいただければ幸いです。 （※右クリック禁止をさせても、結局のところソースを見られたりするのを禁止する事は出来ない、というのは知っています。そういう内容の質問ではありません）
- ベストアンサー
- HTML
お礼
お返事遅くなりました！ 今回も沢山の回答ありがとうございました！ どれも勉強になることばかりでとてもたすかります！ 前回の回答も合わせて教えてもらったこと読み直してさらに勉強したいと思います！そしてシューティングゲームの次はアクションゲームに挑戦します！笑 それではどうもありがとうございました！