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

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

ただいまの
回答率

90.11%

高1です。ゲームのコードを書きましたが、おかしなことになりました。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 699

Kirito

score 11

前提・実現したいこと

HTMLでゲームのコードを書いたのですが、こんな風になりました

該当のソースコード

<!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;
// Pointオブジェクト
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.length ; 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; // 下
default: paint(); return;
}
// 自分 or 壁に衝突?
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>

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

Google Chromeです

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2017/05/08 17:10

    複数のユーザーから「問題・課題が含まれていない質問」という意見がありました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

  • can110

    2017/05/08 17:28

    動きますね。おかしな(funny)ゲームができました。みんなもやってみてね、ということでしょうか?

    キャンセル

  • 退会済みユーザー

    2017/05/08 17:46

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

+13

プログラムは「書かれた通り」に動きます。
プログラムの動きがおかしいというのは、一般的には「作った側が想定した挙動を示さない」なので、まず 想定した挙動 が示されないと、プログラムのどこがおかしいのか、誰にも分かりません。

-- プログラムは間違わない。プログラマが間違うのである。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

プログラム版おっさんホイホイですかね。
「ちゃんと動くぞ(゚Д゚)ゴルァ!! 」 -> ゲームができる=おっさん
釣られました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

すいませんちゃんとマニュアル読んでませんでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる