JavaScriptで蛇を操作するゲームのタイプミスの修正方法

2014/11/11 07:25

このQ&Aのポイント

JavaScriptで作成した蛇を操作するゲームで、タイプミスがあるため正常に動作しない問題が発生しています。
ゲームは参考書の通りに作成されており、蛇を上下左右キーで動かし、餌を食べさせるというルールですが、実際には灰色のイメージのみ表示され蛇は表示されません。
タイプミスの場所がわからず動作しない問題の解決方法を教えていただきたいです。

javascriptの打ちミスしてる所を知りたい。

参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>

nomnom20
お礼率17% (7/39)

JavaScript
回答数6
ありがとう数6

みんなの回答 （6）
専門家の回答

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

ベストアンサー

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/11/11 11:18 回答No.4

>回答してくださった所を直してみたのですが、それでもだめでした。。。どんな仕様なのかわからないから、ダメだったダメだった言われても何がダメなんだかわからない。こういうところでプログラムの質問するときは、こうこうこうなるはずなんだけど、こうなってしまっている。って書くようにしたほうがいいよ。何を持ってF12でうんぬん言っているかわからないけど、提示されたソースをコピーして実行したらエラー出てるじゃん。(Chromeで実行) まず初期状態。(行数は見やすくしたりしてるからちょっと違うかも。) ncaught SyntaxError: Unexpected end of input t.html:1 Uncaught ReferenceError: init is not defined t.html:112 SyntaxErrorとかinitが定義されて無いとか出たら大体かっこの相違。ってことでインデントをつけてみていけばaddFoodの閉じかっこが無いことが見える。なので}を入れる。そうすると次に Uncaught TypeError: Cannot read property 'lenght' of undefined 　t.html:47 47行目でエラー。 for(var i=0;i<data.lenght;i++){ dataにlengthなんてプロパティは無いって言われてる。なみせんとxが表示されている。んじゃあそれが何かというとisHitの引数にdataがあるので呼び出し元を見てみる。そうすると4か所から呼ばれているけど、その中のaddFoodで呼び出しているところの if(isHit(foods,x,y)|| isHit(snake.x,y)){ がおかしいことがわかる。 snakeを渡すはずなのにsnake.xを渡している。なのでここをisHit(snake,x,y)に修正。そうすると次は Uncaught TypeError: number is not a function t.html:41 41行目でエラーが表示される。そこを見てみるとPointっていう関数名なのにpointでnewしようとしていることがわかるので foods.push(new Point(x,y)); とする。そうすればエラーが出なくなるんだけど、それ以降、どういった動きになれば正解なのかは前途したように俺にはわからない。同じ動きでエラー表示がどうなるか試してみて。違うエラーが出たりするなら、何か修正を間違えている。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

DoubtOwl
ベストアンサー率50% (63/124)

2014/11/11 13:03 回答No.6

No.4の回答の通りに修正し、 tick()のswitch文のdefauleをdefaultに修正すれば想定通りの動きになるかと。

ログインすると、全ての回答が全文表示されます。

tracer
ベストアンサー率41% (255/621)

2014/11/11 11:20 回答No.5

一口にエラーといっても、それにはいろいろな種類があります。開発者ツールの設定によって、どういうエラーを表示するかが決まっているため、中には非表示にしているエラーもあるでしょう。まずは、開発者ツールの設定を確認してみてください。また、「期待通りに動かない」 = 「エラー」ではありませんよ。ブラウザの開発ツールは、あくまで構文エラーや通信エラーなど、エラーに属するものしか表示しません。たとえば、ある変数に1を設定しなければならない状況において、誤って2を設定してしまった場合は、それはエラーではないため、「エラー」は当然検出されません。構文的には正しいからです。どんなIDE(エディタ)を使っても、最終的には開発者ツールでの確認が必要になるため、どうあっても開発者ツールは必須ですが、単純なタイポや構文エラーレベルであれば、市販のIDEの方が使いやすいかもしれません。たとえば、webstormには、独自でフォーマットを指定して、それを自動で実行するオートフォーマット機能や、使っていない変数や初めて登場する変数へのカラーリファレンスなどが充実しています。英語のメニューですが、機能はかなり洗練されています。 http://news.mynavi.jp/column/ide/094/

参考URL：: https://www.jetbrains.com/webstorm/

ログインすると、全ての回答が全文表示されます。

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/11/11 09:44 回答No.3

開発者ツールってあれよ、JavaScriptのデバッグとかできればいいだけだから使っているブラウザについてくるやつで十分だよ。例えばfirefoxはいろんな機能をaddできる。開発するのにはおすすめ。別にchromeのでもいいし、IEのでもいい。というか、動かしたい環境で一通りデバッグしながら動かすのがおすすめ。大体のブラウザはF12押せば起動する。使い方は別途学んで。

質問者

補足 2014/11/11 10:35

さきほど回答ありがとうございます。回答してくださった所を直してみたのですが、それでもだめでした。。。クロームを使っておりまして、それでＦ１２を押せば起動するのはわかるのですが、今回直してからＦ１２を押してもエラーが出ません。でも間違ってないわけがない。と思ってて、ちゃんと参考書の使用通り動いてくれないので、、、市販か、また別な何かじゃないとやっぱりだめなのかな～と思って質問しました。

ログインすると、全ての回答が全文表示されます。

kawais070
ベストアンサー率52% (2242/4283)

2014/11/11 09:32 回答No.2

> お勧めの開発ツールはありますか？ Webブラウザに開発者ツールがオマケで付いているのを知らないのですか？ IE、Firefox だったらF12キーを押すと出てきます。 Chrome、Operaなら Ctrl + Shift + I で。個人的には、Chrome、Operaの開発者ツールが好みかな。

質問者

補足 2014/11/11 10:33

それなんですが、クロームを使っててF12を押せばデバックできるってのは知ってるですが、いざ、使ってもエラー出てこないのに、それでもできないってことが何度もありました。今回もです。やっぱり市販のじゃないとだめなのかな～って思って質問しました。

ログインすると、全ての回答が全文表示されます。

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/11/11 07:58 回答No.1

とりあえず開発者ツールとか使ってくれ。 function addFood()の閉じかっこが無い。 }をisHitの前に。これはきちんとインデントしてればわかる。 addFood内の if(isHit(foods,x,y)|| isHit(snake.x,y)){ は if(isHit(foods,x,y)|| isHit(snake,x,y)){ でしょ。snakeは配列。同じくaddFood内の foods.push(new point(x,y)); は foods.push(new Point(x,y)); 大文字と小文字を注意。それでエラーは無くなると思うけど動作するかまでは見てない。

質問者