- ベストアンサー
シューティングゲームの作り方
- シューティングゲーム作成の問題点と解決方法
- 背景画像のスクロール効率の向上方法
- 自機の移動制限や弾の発射方法について
- 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参考にしてみます。
お礼
お返事遅くなりました！ 今回も沢山の回答ありがとうございました！ どれも勉強になることばかりでとてもたすかります！ 前回の回答も合わせて教えてもらったこと読み直してさらに勉強したいと思います！そしてシューティングゲームの次はアクションゲームに挑戦します！笑 それではどうもありがとうございました！