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

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

ただいまの
回答率

89.10%

JavaScript Canvasでのゲーム開発

解決済

回答 1

投稿 編集

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

jirosian

score 7

JavaScriptのキャンバスを使ってゲーム開発の課題をしているのですが、
プレイヤーがプレイヤーの子供と同じポジションに行くたびにスコアを増やしていく
設定にしたのですが、スコアが更新されずにいます。
コードでは、プレイヤーとその子供のx,yが同じであったら、score++という形でスコアを更新していこうとしたのですが、効果はありませんでした。

プレイヤーが子供のポジションと重なるたびにスコアを増やしていくようにするには
どうしたらいいでしょうか。
HTMLのページとJSのページで分けて添付させていただいてます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Project part1</title>
    <script src="game.js" type="text/javascript"></script>
  </head>
  <body onload="setup()">
    <h1>Project part1</h1>
    <canvas id="gameCanvas" width="500" height="500" style="border:solid black"></canvas>
    <br>
    <p id="scoreOutput"></p>

    <button id="reset" type="button" name="button">Reset</button>
  </body>
</html>

````````````````````````````````````````````````````````````````

"use strict";
let ctx;
let sx;
let sy;
let gx;
let gy;
let ex;
let ey;
let wx;
let wy;
let count;

function setup() {
ctx = document.getElementById("gameCanvas").getContext("2d");
    sx = 31.25;
    sy = 31.25;
    gx = randomNumber();
    gy = randomNumber();
    ex = randomNumber();
    ey = randomNumber();
    count = 0;
    //wx = randomNumber();
    //wy = randomNumber();
    draw();

}

function drawWall(x,y){

    ctx.save();
    ctx.translate(0,0);
    ctx.fillStyle = "black";
    ctx.rect(x,y,125,62.5);
    ctx.fill();
  ctx.restore();

}

function randomNumber() {
    let locNum=31.25;
    let locArray = []
    for(let i=0;locNum<500;i++) {
     locArray[i] = locNum;
     locNum+=62.5;
    }
return locArray[Math.floor(Math.random()*locArray.length)];

}

function draw() {
    ctx.clearRect(0, 0, 500, 500);
    drawGoal(gx,gy);
        drawPlayer(sx,sy);
        drawEnemy(ex,ey);
        makeGrid();
        let x=187.5;
        let y=62.5;
    //for(let i=0;i<5;i++){
            //drawWall(x,y);
            //y+=62.5
        //}

}

function makeGrid() {
    ctx.save();
    ctx.translate(0,0);

    let    x = 62.5;
    let y = 0;
    for (let j = 0;j < 8;j++) {
          ctx.beginPath();
          ctx.strokeStyle = "DarkSalmon";
            ctx.moveTo(x,y);
            ctx.lineTo(x,y+500);
          ctx.stroke();
            x+=62.5;
        }
 x = 0;
 y = 62.5;
for (let i =0;i<8;i++) {
    ctx.beginPath();
    ctx.strokeStyle = "DarkSalmon";
    ctx.moveTo(x,y);
    ctx.lineTo(x+500,y);
    ctx.stroke();
    y+=62.5;
}
ctx.restore();
}

function drawGoal(x,y) {
   ctx.save();
     //drawing arms and legs
     ctx.beginPath();
     ctx.strokeStyle = "black"
     ctx.moveTo(x-10,y+10);
     ctx.lineTo(x-20,y-5);
     ctx.moveTo(x+10,y+10);
     ctx.lineTo(x+20,y-5);
     /*
     ctx.moveTo(x-10,y+30);
     ctx.lineTo(x-20,y+35);
     ctx.moveTo(x+10,y+30);
     ctx.lineTo(x+20,y+35);
     */
     ctx.stroke();

  //face
    ctx.beginPath();
    ctx.fillStyle= "yellow";
    ctx.arc(x,y, 10,0, 2*Math.PI)
    ctx.fill();
  //left eye
    ctx.beginPath();
 ctx.fillStyle = "black"
 ctx.arc(x-10,y, 2,0, 2*Math.PI)
 ctx.fill();

 //right eye
 ctx.beginPath();
 ctx.fillStyle = "black"
 ctx.arc(x+10,y, 2,0, 2*Math.PI)
 ctx.fill();

 //mouth
 ctx.beginPath();
 ctx.fillStyle = "brown"
 ctx.arc(x,y+8, 6,0, 2*Math.PI)
 ctx.fill();

 //mouth line
 ctx.beginPath();
 ctx.lineTo(x-6,y+8);
 ctx.lineTo(x+6,y+8);
 ctx.stroke();

 //body
 ctx.beginPath();
 ctx.lineWidth = "20";
 ctx.strokeStyle = "yellow"
 ctx.lineTo(x,y+15);
 ctx.lineTo(x,y+20);
 ctx.stroke();
 ctx.restore();


}

function drawPlayer(x,y) {
  ctx.save();
    ctx.beginPath();
    ctx.fillStyle= "yellow";
    ctx.arc(x,y, 25,0, 2*Math.PI)
    ctx.fill();

    ctx.beginPath();
 ctx.fillStyle = "black"
 ctx.arc(x-15,y-5, 4,0, 2*Math.PI)
 ctx.fill();

 ctx.beginPath();
 ctx.fillStyle = "black"
 ctx.arc(x+15,y-5, 4,0, 2*Math.PI)
 ctx.fill();

 ctx.beginPath();
 ctx.fillStyle = "brown"
 ctx.arc(x,y+8, 10,0, 2*Math.PI)
 ctx.fill();

 ctx.beginPath();
 ctx.moveTo(x-10,y+8);
 ctx.lineTo(x+10,y+8);
 ctx.stroke();
 ctx.restore();


}

function drawEnemy(x,y) {
    ctx.save();
    ctx.translate(x,y);

    //body
    ctx.beginPath();
    ctx.fillStyle = "CadetBlue"
    ctx.rect(-20,-24,40,50);
    ctx.fill();

  //eyes
    ctx.beginPath();
    ctx.fillStyle = "AliceBlue"
    ctx.rect(-15,-10,9,5);
    ctx.rect(7,-10,9,5);
    ctx.fill();

  //mouth
    ctx.beginPath();
    ctx.fillStyle = "DarkRed"
    ctx.arc(0, 3, 20, 0, Math.PI, false);
    ctx.fill();

    //ctx.strokeText("Mr.Enemy",-20,-15);

    ctx.restore();
}

addEventListener("keydown",function(event) {
  if(event.key == "ArrowUp") {
    sy-=62.5;
  }else if(event.key =="ArrowDown") {
    sy+=62.5;
  }else if(event.key == "ArrowLeft") {
    sx-=62.5;
  }else if(event.key == "ArrowRight") {
    sx+=62.5;
  }

    let count =0;
     while(sx==gx&&sy==gy) {
      gx=undefined;
      gy=undefined;
      gx=randomNumber();
      gy=randomNumber();
      count++;
     }

  draw();
});

```````````````````````````````````````````````````````````````` 問題のjsのファンクション

addEventListener("keydown",function(event) {
  if(event.key == "ArrowUp") {
    sy-=62.5;
  }else if(event.key =="ArrowDown") {
    sy+=62.5;
  }else if(event.key == "ArrowLeft") {
    sx-=62.5;
  }else if(event.key == "ArrowRight") {
    sx+=62.5;
  }

    let count =0;
     while(sx==gx&&sy==gy) {
      gx=undefined;
      gy=undefined;
      gx=randomNumber();
      gy=randomNumber();
      count++;
     }

  draw();
});

````````````````````````````````````````````````````````````````

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • asuchi0819

    2020/03/24 10:39 編集

    m.ts10806さん、別に良いのでは?
    自ら、
    「利用規約とかガイドを読みませ〜ん!」
    と威張っているのですから。

    そんなお方に時間を割く必要はないと思います。

    キャンセル

  • m.ts10806

    2020/03/24 10:41

    asuchi0819さん
    そうですね。低評価だけで伝わればいいんですけど。

    キャンセル

  • 退会済みユーザー

    2020/03/24 12:35

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

回答 1

checkベストアンサー

+3

何点か。

  • addEventListener("keydown")がどのオブジェクトにも割り当てられておらず、機能していない。
    window.addEventListenerというように、windowオブジェクトに割り当てれば、キーを押した時のイベントとなります。
  • let count =0;としているため、ローカル変数のため、そこでいくら更新しても、どこにも反映されない。
    つまり、addEventListener("keydown", function(event){内で、let countを宣言しなければ、グローバルで宣言しているcount変数にアクセスできます。現在は、count変数が、そのfunction内のローカル変数として宣言されてしまっているため、そのfunctionの領域外では使うことができません。
    ここら辺は、スコープ(参照)に関しての知識が必要不可欠なので、よくよく勉強されるといいかと。
  • <p id="scoreOutput"></p>に出力に関しては、HTML JavaScript テキスト変更とかのキーワードで再度調査されるといいかと。
    また、そのHTMLの更新の構文を、addEventListener("keydown", function(event){内で(window.を先頭に必ずつける)実行するといいかと。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/03/24 10:41

    解決できてよかったです。
    変数のスコープに関しては、基本中の基本であるうえ、規模が大きくなればなるほど、ぶつかる壁になるので、
    今のうちに、よくよく勉強して、いっぱい書いて、動きや仕様の把握をしていかれるといいかと。

    キャンセル

  • 2020/03/24 10:46

    jirosianさん >
    asuchi0819さんの仰る通り、質問する上で、非常に重要な指摘を、m.ts10806さんはされていますので、
    どうか、ジャケにせず、次質問する時のポイントとしていってください。
    (また、teratailに限らず誰かに質問する時に生かせると思う)

    キャンセル

  • 2020/03/24 10:47

    miyabi_takatsuk様
    そうですか、外国の学校の為変数のスコープという言葉は初めて聞きましたのでよく調べてみます。

    suchi0819様
    誰よりも生産性のない投稿をするのは控えてください。

    キャンセル

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

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

同じタグがついた質問を見る