ChatGPTがじゃんけんゲームを作ってくれました
わたしにJavascriptでプログラムを書くスキルはありませんが、ChatGPTにお願いするとじゃんけんゲームを作ってくれました。
基本機能だけをお願いしていますので、興味のある方はプロンプトを追加していいものを作ってください。
「勝敗を一覧表にしてください」と頼みました。選択肢はグー、チョキ、パーですが、勝敗一覧表は英語になっています。気になる人は「一覧表も日本語で表記してください」と頼んでみてください。
ChatGPTでWebアプリを作る方法
- ChatGPTにお願いします。「電卓アプリをhtml、Javascriptで作ってください」
- ChatGPTが作ったコードをメモ帳などのエディタに張り付けます。
- そのファイルをテキストではなく、html形式で保存します。
- そのアイコンを開くとストップウォッチの画面が開きます。
以上で完成です。簡単なので挑戦してみてください。
ChatGPTの画面
ChatGPTからのコメント
上記のコードをHTMLファイルに保存し、ブラウザで開くとじゃんけんゲームが表示されます。ユーザーは「グー」「パー」「チョキ」のいずれかのボタンをクリックして選択し、その後、勝敗結果が一覧表に表示されます。ゲームが5回終了すると、ゲーム終了メッセージが表示されます。
このコードでは、playGame()関数がゲームの進行を制御し、getComputerChoice()関数でコンピューターの選択をランダムに決定します。determineWinner()関数は、ユーザーとコンピューターの選択に基づいて勝敗を決定し、getResultText()関数は勝敗結果に対応するテキストを返します。また、checkGameOver()関数は、ゲームが5回終了したかどうかを確認し、終了メッセージを表示します。
このコードは単純な例であり、より多くの機能やデザインのカスタマイズが可能です。必要に応じてコードを変更して、じゃんけんゲームを拡張してください。
ChatGPTが書いたコード
<!DOCTYPE html>
<html>
<head>
<title>じゃんけんゲーム</title>
</head>
<body>
<h1>じゃんけんゲーム</h1>
<div id=”game”>
<h2>選択してください：</h2>
<button onclick=”playGame(‘rock’)”>グー</button>
<button onclick=”playGame(‘paper’)”>パー</button>
<button onclick=”playGame(‘scissors’)”>チョキ</button>
</div>
<h2>勝敗一覧表：</h2>
<table id=”resultsTable”>
<tr>
<th>ユーザー</th>
<th>コンピューター</th>
<th>結果</th>
</tr>
</table>
<script>
var resultsTable = document.getElementById(‘resultsTable’);
var results = [];
function playGame(userChoice) {
var computerChoice = getComputerChoice();
var result = determineWinner(userChoice, computerChoice);
var resultText = getResultText(result);
var newRow = resultsTable.insertRow();
newRow.innerHTML = ‘<td>’ + userChoice + ‘</td><td>’ + computerChoice + ‘</td><td>’ + resultText + ‘</td>’;
results.push(result);
var gameDiv = document.getElementById(‘game’);
gameDiv.innerHTML = ‘<h2>選択してください：</h2>’ +
‘<button onclick=”playGame(\’rock\’)”>グー</button>’ +
‘<button onclick=”playGame(\’paper\’)”>パー</button>’ +
‘<button onclick=”playGame(\’scissors\’)”>チョキ</button>’;
checkGameOver();
}
function getComputerChoice() {
var choices = [‘rock’, ‘paper’, ‘scissors’];
var randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return ‘draw’;
} else if (
(userChoice === ‘rock’ && computerChoice === ‘scissors’) ||
(userChoice === ‘paper’ && computerChoice === ‘rock’) ||
(userChoice === ‘scissors’ && computerChoice === ‘paper’)
) {
return ‘win’;
} else {
return ‘lose’;
}
}
function getResultText(result) {
if (result === ‘draw’) {
return ‘引き分け’;
} else if (result === ‘win’) {
return ‘勝ち’;
} else {
return ‘負け’;
}
}
function checkGameOver() {
if (results.length === 5) {
var gameDiv = document.getElementById(‘game’);
gameDiv.innerHTML = ‘<h2>ゲーム終了</h2><p>お疲れ様でした！</p>’;
}
}
</script>
</body>
</html>
まとめ
はじめてChatGPTにプログラムを書いてもらった時にはびっくりしたというより、あっけにとられてしまいました。これまでJavascriptの本も見たことがありますが、難しそうで自分でやろうとは思いませんでしたが、ChatGPTに作ってもらって感動しています。
コメント