Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「思うように動きません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
###前提・実現したいこと
javascriptの勉強としてゲームのようなものをつくっています。
###発生している問題・エラーメッセージ
なんとか少し動くようにはなりましたが、シューティングゲームのように弾をだせるようにしようすると、
思うように動きません。
弾を出そうとすると、カクカクします。
###ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> .canvas{ border:5px solid #888; } </style> </head> <body> <canvas class="canvas" id="canvas" width="400" height="200"></canvas> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> window.onload = function(){ draw(); } function draw(){ var canvas = document.getElementById('canvas'); if(!canvas || !canvas.getContext)return false; var ctx = canvas.getContext('2d'); var balls=[],schottBalls=[]; var start,end,direction=['top','right','left','bottom']; function rand(min,max){ return min+Math.floor(Math.random()*(max-min+1)); } Ball = function(name,direction){ this.x=rand(100,300); this.y=rand(100,200); this.r=10; this.name=name; this.direction=direction; if(name==''){ this.name='enemy'; } }; Ball.prototype.draw=function(){ if(this.direction=='top'){ start=290; end=250; }else if(this.direction=='left'){ start=200; end=160; }else if(this.direction=='bottom'){ start=110; end=70; }else if(this.direction=='right'){ start=20; end=340; } ctx.beginPath(); ctx.arc(this.x,this.y,this.r,start/180*Math.PI,end/180*Math.PI); ctx.stroke(); }; function checkPosition(x,y,r,ball){ if(x-r<0){ ball.x=r; }else if(x+r>canvas.width){ ball.x=canvas.width-r; }else if(y-r<0){ ball.y=r; }else if(y+r>canvas.height){ ball.y=canvas.height-r; } } function init(){ balls.push(new Ball('user',direction[rand(0,4)])); for(var i=0;i<3;i++){ balls.push(new Ball('',direction[rand(0,4)])); } for(i = 0;i < balls.length;i++){ balls[i].draw(); } } init(); function moveBall() { k = event.keyCode; var i; if(k == 37){ ctx.clearRect(0,0,canvas.width,canvas.height); for(i = 0;i < balls.length;i++){ if(balls[i].name=='user'){ balls[i].x-=5; balls[i].direction='left'; } checkPosition(balls[i].x,balls[i].y,balls[i].r,balls[i]); balls[i].draw(); } } if(k == 38){ ctx.clearRect(0,0,canvas.width,canvas.height); for(i = 0;i < balls.length;i++){ if(balls[i].name=='user'){ balls[i].y-=5; balls[i].direction='top'; } checkPosition(balls[i].x,balls[i].y,balls[i].r,balls[i]); balls[i].draw(); } } if(k == 39){ ctx.clearRect(0,0,canvas.width,canvas.height); for(i = 0;i < balls.length;i++){ if(balls[i].name=='user'){ balls[i].x+=5; balls[i].direction='right'; } checkPosition(balls[i].x,balls[i].y,balls[i].r,balls[i]); balls[i].draw(); } } if(k == 40){ ctx.clearRect(0,0,canvas.width,canvas.height); for(i = 0;i < balls.length;i++){ if(balls[i].name=='user'){ balls[i].y+=5; balls[i].direction='bottom'; } checkPosition(balls[i].x,balls[i].y,balls[i].r,balls[i]); balls[i].draw(); } } } window.document.onkeydown = moveBall; function stop(a,b,c){ switch (a){ case 1: if(b-c<0){ return 5; }else{ return -5; } break; case 2: if(b+c>canvas.width){ return -5; }else{ return 5; } break; case 3: if(b-c<0){ return 5; }else{ return -5; } break; case 4: if(b+c>canvas.height){ return -5; }else{ return 5; } break; } } function mobMove(){ for(var i = 0;i < balls.length;i++){ if(balls[i].name=='enemy'){ var a = rand(1,4); switch (a){ case 1: balls[i].direction='left'; balls[i].x+=stop(1,balls[i].x,balls[i].r); break; case 2: balls[i].direction='right'; balls[i].x+=stop(2,balls[i].x,balls[i].r); break; case 3: balls[i].direction='top'; balls[i].y+=stop(3,balls[i].y,balls[i].r); break; case 4: balls[i].direction='bottom'; balls[i].y+=stop(4,balls[i].y,balls[i].r); break; } } } ctx.clearRect(0,0,canvas.width,canvas.height); for(var i = 0;i < balls.length;i++){ chackPosition(balls[i].x,balls[i].y,balls[i].r,balls[i]); balls[i].draw(); } setTimeout(function(){ mobMove(); },500); } mobMove(); //弾を出す処理は以下のコードです。---------------------------------------- window.addEventListener('keyup',function(e){ if(e.keyCode==32){ for(var i = 0;i<balls.length;i++){ if(balls[i].name=='user'){ if(balls[i].houkou=='top'){ schottBalls.push(new SchottBall(balls[i].x,balls[i].y-balls[i].r,'top')); }else if(balls[i].houkou=='left'){ schottBalls.push(new SchottBall(balls[i].x-balls[i].r,balls[i].y,'left')); }else if(balls[i].houkou=='bottom'){ schottBalls.push(new SchottBall(balls[i].x,balls[i].y+balls[i].r,'bottom')); }else if(balls[i].houkou=='right'){ schottBalls.push(new SchottBall(balls[i].x+balls[i].r,balls[i].y,'right')); } } } } }); SchottBall = function(x,y,w){ this.x=x; this.y=y; this.w=w; this.draw(); } SchottBall.prototype.draw=function(){ ctx.beginPath(); ctx.arc(this.x,this.y,5,0,2*Math.PI); ctx.stroke(); switch (this.w){ case 'top': this.x-=3; break; case 'right': this.y+=3; break; case 'left': this.y-=3; break; case 'bottom': this.x+=3; break; } setTimeout(function(){ this.draw(); },10); } } </script> </body> </html>
弾は生成されたら直進し、画面から切れたら消えるようにしたいです。
そして、弾の関数をnewされたら自動で呼ばれるようにしたいのですが、initialazeをつけてみてもうまくいきません。
回答2件
0
ベストアンサー
リアルタイムで判定が必要なゲームはjavascriptは向いていないような気がします。
別の手段を検討されてみてはいかがでしょうか？
投稿2017/01/29 05:58
総合スコア114784
0
投稿2017/01/29 08:06
総合スコア4267
あなたの回答
tips
プレビュー
