質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

310閲覧

JavaScript初心者 ゲームプログラミングが起動しません

bebe

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2018/01/15 10:51

###前提・実現したいこと
当方JavaScript初心者です。
JavaScriptの入門書を購入しました。
本に書いてある通りに、ソースを写してゲームを作りました。しかし、作動しません。

写し間違えは99%ありえないと思ってます。確認作業は何度もやりました。

もしかしたら、本に書いてあるソースが間違っているのでは?と思い、ここで質問させてもらっています。どなたか原因を教えてください。

※ゲームの説明については本から引用します。
「...Canvasを使ったゲームとして、SnakeBite風のゲームを紹介しましょう。上下左右キーで蛇を操作し、餌を食べさせます。餌を食べるたびに体が伸びていきます。四方の壁にぶつかるか自分にぶつかるとゲームオーバーです。ただ、これだけのゲームだけですが、思いのほか夢中で遊んでしまうことでしょう...」

田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript プログラミング』(株式会社インプレスR&D、2013年)

###発生している問題・エラーメッセージ

ゲームプログラミングが起動しない。(ブラウザで背景のみ表示される)

###該当のソースコード

JavaScript

1<!DOCTYPE html> 2<html> 3<head> 4<title>SnakeBite</title> 5<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6<script type="text/javascript"> 7var W, H, S = 20; 8var snake = [], foods = []; 9var keyCode = 0; 10var point = 0; 11var timer = NaN; 12var ctx; 13 14// Pointオブジェクト 15function Point(x, y){ 16this.x = x; 17this.y = y; 18} 19 20//初期化関数 21function init(){ 22var canvas = document.getElementById("field"); 23W = canvas.width / S; 24H = canvas.height / S; 25ctx = canvas.getContext("2d"); 26ctx.font = "20px sans-serif"; 27 28//蛇の初期化 29snake.push(new Point(W / 2, H / 2)); 30 31//餌の初期化 32for(var i = 0; i < 10; i++){ 33addFood(); 34} 35 36timer = setInterval("tick()", 200); 37window.onkeydown = keydown; 38} 39 40//餌の追加 41function addFood(){ 42while(true){ 43var x = Math.floor(Math.random() * W); 44var y = Math.floor(Math.random() * H); 45 46if(isHit(foods, x, y) || isHit(snake, x, y)){ 47continue; 48} 49 50foods.push(new Point(x, y)); 51break; 52} 53} 54 55//衝突判定 56function isHit(data, x, y){ 57for(var i = 0; i < data.length; i++){ 58if(data[i].x == x && data[i].y == y){ 59return true; 60} 61} 62return false; 63} 64 65function moveFood(x, y){ 66foods = foods.filter(function (p) { 67return (p.x != x || p.y != y); 68}); 69addFood(); 70} 71 72function tick(){ 73var x = snake[0].x; 74var y = snake[0].y; 75 76switch(keyCode){ 77case 37: x--; break; //左 78case 38: y--; break; //上 79case 39: x++; break; //右 80case 40: y++; break; //下 81default: paint(); return; 82} 83 84//自分 or 壁に衝突? 85if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H) 86 87clearInterval(timer); 88paint(); 89return; 90} 91 92//頭を先頭に追加 93snake.unshift(new Point(x, y)); 94 95if(isHit(foods, x, y)){ 96point += 10; //餌を食べた 97moveFood(x, y); 98} else { 99snake.pop(); //食べてない→しっぽを削除 100} 101 102paint(); 103} 104 105function paint(){ 106ctx.clearRect(0, 0, W * S, H * S); 107ctx.fillStyle = "rgb(256,0,0)"; 108ctx.fillText(point, S, S * 2); 109ctx.fillStyle = "rgb(0,0,255)"; 110 111foods.forEach(function (p) { 112ctx.fillText("+", p.x * S, (p.y + 1) * S); 113}); 114snake.forEach(function (p) { 115ctx.fillText("*", p.x * S, (p.y + 1) * S); 116}); 117} 118 119function keydown(event){ 120keyCode = event.keyCode; 121} 122</script> 123</head> 124 125<body onload="init()"> 126<canvas id="field" width="400" height="400" style="background:#cccccc"> 127</canvas> 128</body> 129</html> 130

###試したこと
メモ帳に打ち込んだものを印刷して、本と照らし合わせながら、間違っていないか2回確認しました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/01/15 11:04

開発者ツール(F12キーで起動)のコンソールに表示されているであろうエラーメッセージを追記して下さい.
bebe

2018/01/15 11:08

なにも表示されていないです。×マークにマウスを当てたら「0個のエラー」と出ました。
defghi1977

2018/01/15 11:10

調べてみたら, あなた偉い!一箇所しか間違ってない. 机上確認でよくここまで
guest

回答2

0

ベストアンサー

ご提示のコードに一箇所記述ミスがあります.

JavaScript

1//自分 or 壁に衝突? 2if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H) 3 4clearInterval(timer); 5paint(); 6return; 7} 8

の部分のif文に**{が一個足りません.**

//自分 or 壁に衝突? if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H){//←この部分 clearInterval(timer); paint(); return; }

とすることでゲームが動作することを確認しました.


プログラミングを行う場合, 開発者ツール利用の有無でその効率に雲泥の差が出ます. 上記のコードにおいても問題がある部分を一発で指摘してくれます.

ある程度コードを記述することに慣れてきたら, 是非開発者ツールの使い方(最低限エラーの出力)について調べてみて下さい.

投稿2018/01/15 11:17

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bebe

2018/01/15 11:36

回答ありがとうございます。 おかげさまで無事作動しました! 実は、入門書にも開発者ツールの使い方について記述があったのですが、訳が分からなかったので読み飛ばしていました。今回の件で懲りました。使い方を勉強しようと思います。 本当に助かりました。今日は眠れそうです。
guest

0

コメントには開発者ツールでエラーは表示されていないと書かれていますが、こちらの環境で見ると以下のエラーが発生しています。

SyntaxError: expected expression, got '}'

単純に、閉じ括弧に対応した開き括弧が足りないのでおかしくなっているようですね。

問題は、「//自分 or 壁に衝突?」のコメントの次の行にあります。

javascript

1 誤:if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H) 2 正:if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H) {

このような問題を発見するために、インデントを入れるようにしましょう。

またエラーメッセージを読んで、そのエラーが発生している位置から問題を推測しましょう。

投稿2018/01/15 11:12

編集2018/01/15 11:17
ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bebe

2018/01/15 11:41

回答ありがとうございます。無事作動しました。 なるほど、ミスを発見するためにインデントするのですね。初めて知りました。 入門書のほうを見てみると確かにされていました。今までは気にも留めてませんでした。とても参考になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問