こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

シューティングゲームの作り方

また行き詰ってしまったので質問させてください。
趣味のプログラミングでシューティングゲームを作ろうと思っていて、下記URLのコードまでは完成しました。
しかし、色々と問題があります。

(1)自機が敵機に当たったときには、衝突応答の関数が実行されるのに、弾が敵に当たった時には実行されないのがなぜだかわからない。
(2)背景の画像をスクロールさせるのに効率のいい方法(できるだけ重くない処理)
(3)自機を枠の外に行かないようにするには…
(4)”マウスのボタンをクリックするたびに弾を発射”ではなく、”押している間は常に弾を発射する”という処理にするにはどうすればいいのか…
(5)マウスを押したままでも、自機の移動を可能にするには…(画像を表示させると、クリック状態で自機の移動ができなくなる)
(6)右クリックの禁止ができません。どのサイトを見ても同じようなコードしか書いてなく、そのコードでは右クリックの禁止ができません…(divにoncontextmenu="return false;")
(7)その他、下記URLのコードの無駄や、ゲームを作るならもっとこういう書き方の方がいい!などありましたら教えていただけるとうれしいです。(何より動作の軽いゲームを作りたい(javascriptで。今回他の言語等は考えていません。))
(8)それから、注文が多くて申し訳ありませんが、(7)以外は下記のコードをベースに解決方法を教えていただければ幸いです。


http://www7b.biglobe.ne.jp/~k326/javascript/STG.html


8つも一度に質問するのも気が引けましたが、何度も投稿するよりは…と思ったのでまとめさせていただきました。自分なりにグーグルで10サイト以上は見て回ったのですが、解決できませんでした。(検索の仕方が悪いのかもしれません…)どうかご教授お願いします。

※趣味の範囲なので、できれば「センスない」などの中傷はしないでください。お願いします。
※動作チェックはIEです。とりあえずはIEでできるように…と考えています。
※2000文字に入りきらなかったので、直接コードを記述せずにURLを載せる事にしました。

投稿日時 - 2009-06-02 01:58:30

QNo.5009882

すぐに回答ほしいです

質問者が選んだベストアンサー

返事なんていらないよ!なんか楽しい!
<!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>

投稿日時 - 2009-06-05 14:53:49

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(11)

ANo.11

なんだ~。ばぶっ!
いっぱいかけるじゃんかぁ~!^^;
あとはかってにやっておくれ~!

いきなりさいしょのぎょうの、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なのでは?
とか、じゅうばこのすみをつつくようで・・・
がんばってね~~~~!
ばぶ~!

投稿日時 - 2009-06-07 12:02:23

お礼

お返事遅くなりました!
今回も沢山の回答ありがとうございました!
どれも勉強になることばかりでとてもたすかります!

前回の回答も合わせて教えてもらったこと読み直してさらに勉強したいと思います!そしてシューティングゲームの次はアクションゲームに挑戦します!笑

それではどうもありがとうございました!

投稿日時 - 2009-06-09 15:22:21

ANo.10

ちょっと、おかしな、かきかたかもしれないね。
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 としてりようされてるじょ。
はんていも、2つのざひょうをひきざんして、そのさが、40ぴくせる
いないだったら、あたりとしているよ
x = 1.23456 |0;
びっとえんざんしの"|0"をつかうと、せいすうになっちゃうぞ!
x = Math.floor(1.23456);
と、おなじ。

さいごの
Teki.add('teki');
Teki.add('teki');
だけど、こうすることで、なんこもついかできるじょ!
いま、じぶんもこれでべんきょうしてるじょ!^^;
こーどを、かけばかくほど、おかしなところが、でてくるので、
あすは、がらりとかわるかもしれないじょ。
きながに、がんばろう~!

No7の、おほしさまが、おちてくるのは、ほし1こにつき1たいまー
だったので、やめました。あれは、ごみにしてください。

ばぶぅ~。

投稿日時 - 2009-06-05 15:31:33

ANo.8

てきがいないじょ!
<!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>

投稿日時 - 2009-06-03 23:57:34

ANo.7

なんだか、ばぶぅ~ばっかりなので、きがひけるが・・・
はいけいのすくろーるもよいかもしれないが、こんなのは
どうだかな?ばぶっ。
これをるーぷのまえにでもくみこんでちょ!
なんでこんなめんどうくさいかきかたなのかをしらべると
べんきょうになるかも!?
いまだに、ばぶぅてきにわからないことあるけどね^^;

//@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);

投稿日時 - 2009-06-03 22:06:12

ANo.6

れんぞくはっしゃだけど・・・。
だめなみほんで!^^;
かんせいしたらというか、せいさくかていでもいいので
こうかいして、あそばせてね!
ばぶぅ~!

<!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>

投稿日時 - 2009-06-03 16:56:13

補足

あと押しどころによって画像とかが反転しちゃうのも直ってないです…^^;
ちなみに上のURLを新しいのに更新してあります。

投稿日時 - 2009-06-06 22:07:02

ANo.5

すごいね~!
はじめてからすうしゅうかんでこんなに!
こまかいしつもんは、あってるじょ!(たぶん)
(りかいに、なんねんもついやしている、ばぶぅって^^;)

>//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のとくしゅせいになかせられる。
たのぶらうざでも、うごくようにべんきょうするとよいよ。

そうそう! ばぶぅ~に、かんぺきをもとめては、だめだじょ!
「せんもんか」というひとたちは、「おこちゃまね~」とみてるんだから。
なので、「ばぶ~」なんだし・・・。

投稿日時 - 2009-06-03 16:51:58

補足

最初に教えてもらった書き方でできるところまでやってみました!
とりあえずこれが今の限界です^^;

1、自機の弾が敵に当たらない。(cloneの座標をとってないから?)
2、敵の弾をすり抜けることがよくある。当たり判定の範囲を広げると、ちょっとぶつかるにしては遠すぎる位置になってしまう。
3、爆発の挙動がちょっとおかしい。

ほかにも変なところ沢山あるかもです…
なによりも、コードがみられるの恥ずかしいくらいに…
効率よくまとめられるように、回答してもらったコード参照にしつつまた書き直してみます!

敵はなぜかりんごです笑

投稿日時 - 2009-06-06 20:53:42

ANo.4

ついき。

あたりはんていで、いちいちたいしょうのがぞうのよこはばを
しらべにいくのもむだなようなきがする
.style.marginを-1とかにして、ちょっとずらし、はばは2へらすとか・・

投稿日時 - 2009-06-02 20:08:52

補足

ちょ…ちょっと返事まってください…!新しいことがいっぺんにありすぎてパンクしそうです…!><
落ち着いたらすぐに返事します!

投稿日時 - 2009-06-04 01:17:34

ANo.3

ばぶっ!

ヒントのだしおしみではないので、かんちがいしないでね。

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);
}
}
そうおもって、てきのへんすうはぐろーばるにしておいたじょ!

投稿日時 - 2009-06-02 18:41:51

補足

弾の当たり判定の問題解決しました!ありがとうございます!追加した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じゃだめなんですか?



いつもいつも長々とすみません。お時間あるときにでもお返事いただけるとうれしいのですが…お願いできますか?><

投稿日時 - 2009-06-03 15:39:32

ANo.2

ばぶっ!
Q1、たまはかくされているのもをはんていきじゅんにしているじょ!
 だからあたらない。
 ざひょうはんていで、はばをはんぶんにするひつようある?

Q3、たとえば、みぎはじにいどうして、まうすがわくからはずれて
 ひだりからしゅつげんしたばあい、いきなりわーぷしてしまいそう
 だけど、それは、「仕様」なのか?

ほかは、そのうち。

投稿日時 - 2009-06-02 14:51:42

補足

前回はどうもありがとうございました!
とても勉強になりました。
今回もまたお世話になりそうで…感謝します。

それで、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は…確かにそうですね…でも直感的な操作ができるようにしたい…と思ったので今の感じにしました。でもワープは完全にゲームバランスが崩れてしまいますのでよくないですね…。

投稿日時 - 2009-06-02 17:41:38

ANo.1

全部説明するのも面倒なのでとりあえず以下のページ参考にしてみたら。

JavaScriptでインベーダーゲームw
http://plaza.harmonix.ne.jp/~jimmeans/game03w.htm

投稿日時 - 2009-06-02 07:20:34

補足

回答ありがとうございます。教えていただいたURL参考にしてみます。

投稿日時 - 2009-06-02 17:03:17

お礼

回答ありがとうございます。教えていただいたURL参考にしてみます。

投稿日時 - 2009-06-02 17:04:21

あなたにオススメの質問