ChatGPTによるプログラミング学習０７：Javascriptに触ってみた

2023年5月15日 00:35

はじめに

プログラミングがわかりやすいということでPythonのいくつかのモジュールを触ってみた。それなりにぼんやりと特徴みたいなこともわかってきた。こういう感じ簡単なテストをしながらいろんなプログラミング言語に触っていけるのはChatGPTの最初のメリットであると思われる。

Unityのようなゲーム開発用の言語これもC＃を使っての言語であり、pygame、Arcadeのようなゲーム用モジュールを使ってのPython言語があり、また、Javaも近く触ってみたいし、もう一つ,
ブラウザでゲームができるというjavascriptを今回触ってみた。

数当てゲーム

「Javascript の簡単なゲームを教えてください」と聞いた時の最初の答えがこれだった

回答例１

プレイヤーが 1 から 100 の数字を推測して、正解の数字を当てるゲームです。プレイヤーが数字を入力すると、正解よりも大きいか小さいかに応じて、"too high" や "too low" といったメッセージが表示されます。正解を当てた場合には、"You win!" と表示されます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>数当てゲーム</title>
</head>
<body>
	<h1>数当てゲーム</h1>
	<p>1 から 100 の数字を入力してください。</p>
	<input type="text" id="guess">
	<button onclick="checkGuess()">推測する</button>
	<p id="message"></p>

	<script>
		// 正解の数字を生成
		var answer = Math.floor(Math.random() * 100) + 1;

		// 推測をチェックする関数
		function checkGuess() {
			// 入力された数字を取得
			var guess = document.getElementById("guess").value;

			// 入力された数字が正解かどうかをチェック
			if (guess == answer) {
				document.getElementById("message").innerHTML = "You win!";
			} else if (guess < answer) {
				document.getElementById("message").innerHTML = "too low";
			} else {
				document.getElementById("message").innerHTML = "too high";
			}
		}
	</script>
</body>
</html>

このコードを保存してブラウザで開くと、数当てゲームがプレイできます。

コードも簡単ですが、結果は下記の通りでした。

回答例２：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>数当てゲーム</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f4f4f4 ;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff ;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}
		h1 {
			text-align: center;
			color: #333 ;
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20px 0;
		}
		input[type=text] {
			padding: 10px;
			border: none;
			border-radius: 5px;
			margin-right: 10px;
			font-size: 1.2rem;
			text-align: center;
			background-color: #f4f4f4 ;
			color: #333 ;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}
		button {
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #333 ;
			color: #fff ;
			font-size: 1.2rem;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			transition: background-color 0.3s ease;
		}
		button:hover {
			background-color: #555 ;
		}
		p {
			text-align: center;
			font-size: 1.2rem;
			color: #333 ;
			margin: 20px 0;
		}
		.footer {
			text-align: center;
			color: #999 ;
			font-size: 0.8rem;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>数当てゲーム</h1>
		<form>
			<label for="guess">1 から 100 の数字を入力してください。</label>
			<input type="text" id="guess">
			<button onclick="checkGuess()">推測する</button>
		</form>
		<p id="message"></p>
	</div>

	<div class="footer">
		<p>作成者: ChatGPT</p>
	</div>

	<script>
		// 正解の数字を生成
		var answer = Math.floor(Math.random() * 100) + 1;

		// 推測をチェックする関数
		function checkGuess() {
			// 入力された数字を取得
			var guess = document.getElementById("guess").value;

			// 入力された数字が正解かどうかをチェック
			if (guess == answer) {
				document.getElementById("message").innerHTML = "正解！
　　　　　} else if (guess > answer) {
				document.getElementById("message").innerHTML = "もっと小さい数です。";
            }
        }
    </script>
</body>

最後の数行が５回以上も出てこなく困りましたが、前と同じなので自分で埋めました。こんかいはCSSで体裁を整えてくれています。

さらにカラーでとも思いましたがこれでここはおしまいです。何にもしないでここまでやってくれるのは素晴らしいと思います。

動くゲーム

回答例１

古典的なゲームを紹介してくれました。やはり、名前を聞いたことがあるようなライブラリが準備されているのですね。

// html のコードです

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>シンプルなゲーム</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="game.js"></script>
  </body>
</html>

// javascriptのコードです

// ゲームの初期化
function init() {
  // ゲーム画面のキャンバスを取得
  var canvas = document.getElementById('gameCanvas');
  // キャンバスの描画コンテキストを取得
  var context = canvas.getContext('2d');
  // ゲームループを開始
  setInterval(gameLoop, 1000 / 60);

  // ゲームの状態を表す変数
  var gameState = {
    playerX: 0,
    playerY: 0,
    playerSpeed: 5
  };

  // ゲームループ
  function gameLoop() {
    // ゲーム画面をクリア
    context.clearRect(0, 0, canvas.width, canvas.height);

    // プレイヤーを描画
    context.fillStyle = 'blue';
    context.fillRect(gameState.playerX, gameState.playerY, 50, 50);

    // プレイヤーの移動
    if (keys.ArrowLeft) {
      gameState.playerX -= gameState.playerSpeed;
    }
    if (keys.ArrowRight) {
      gameState.playerX += gameState.playerSpeed;
    }
    if (keys.ArrowUp) {
      gameState.playerY -= gameState.playerSpeed;
    }
    if (keys.ArrowDown) {
      gameState.playerY += gameState.playerSpeed;
    }
  }

  // キーボードの状態を表すオブジェクト
  var keys = {};

  // キーボードが押された時の処理
  window.addEventListener('keydown', function(event) {
    keys[event.code] = true;
  });

  // キーボードが離された時の処理
  window.addEventListener('keyup', function(event) {
    keys[event.code] = false;
  });
}

// ゲームの開始
init();

Posted by Fumio Matsunari on Sunday, May 14, 2023

コードもわかりやすくていい情報と思いますがいかんせん、簡単すぎました。

回答例２

Pythonである程度いったので次のようなゲームを頼みました。

結果はごしゃごしゃになって、ここでは整理して出せません

公式チュートリアル

とりあえず、今後の勉強として公式チュートリアルを聞きました。

さらっと眺めましたが、ちょっと難しいかじっくり取り組まないとといった感じでした。やはりじっくりとある程度はやらないといけないのかな。

functionalpgさんのテトリス作成

現役プログラマーのfunctionalpgさんが初心者用のために「１０分間プログラミング日記」というタイトルで２０回でjavascriptでテトリスを作るという記事を発表されていたのでこれに取り組みました。

全部はわかりませんでしたが、VS　Codeの使い方の勉強になったり、ChatGPTでエラー探しをしたり、ちょっと実務的な力もついたかなと。。。お世話になりました。

感想

最初、javascriptのいい結果が出たのでこれはいいかなと思ったけど、ある程度に行くと、こちらの力も必要で、ChatGPTとどう付き合あうか、まだまだ難しいですが、僕もちらちらといろんなプログラミングも知ることができて、またまた、頑張ろうかなと思っています。

　　　　　　　　　　　　　　　　　　　　　　20230515　作成

コメントをいただきました。

koteiouさんからコメントをいただきました。有難うございました。
どういう形で返信すればいいかわからないのですが、とりあえずは、ChatGPTに聞いてみました。

さらっと眺めてみましたが、文法的な説明が多く、まだ、ぼくには難しいかなという気持ちに変わりはありませんでした。努力目標の一つです。
改めて、有難うございました。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　20230516

この記事が気に入ったらサポートをしてみませんか？