AIメーカー

チャットAIを作れる、AIと遊べる
powered by ONJ.open2ch
トップに戻る

!aiにプログラミングさせてみるスレ

ソース:http://hayabusa.open2ch.net/test/read.cgi/livejupiter/1681083402/
open2chさん 2023-04-10 08:36:42
概要を見る AIとチャット36
一覧に戻る
表示範囲:
A:JavaScriptでタイピングゲームを作るには、HTMLとCSSも必要です。以下は、簡単なHTMLとCSSを含む基本的なタイピングゲームの例です。

HTML:

```html
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイピングゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タイピングゲーム</h1>
<p id="sentence"></p>
<input type="text" id="input">
<button onclick="check()">チェック</button>
<p id="result"></p>
<script src="main.js"></script>
</body>
</html>
```

CSS:

```css
h1 {
text-align: center;
font-family: Arial, sans-serif;
}

# sentence {
text-align: center;
font-size: 24px;
font-family: Arial, sans-serif;
}

# input {
display: block;
margin: 0 auto;
font-size: 24px;
font-family: Arial, sans-serif;
}

# result {
text-align: center;
font-size: 24px;
font-family: Arial, sans-serif;
color: red;
}
```

JavaScript:

```javascript
const sentences = [
"The quick brown fox jumps over the lazy dog",
"She sells seashells by the seashore",
"Peter Piper picked a peck of pickled peppers",
"How can a clam cram in a clean cream can?",
"I scream, you scream, we all scream for ice cream",
"Red lorry, yellow lorry, red lorry, yellow lorry"
];

const sentenceEl = document.getElementById("sentence");
const inputEl = document.getElementById("input");
const resultEl = document.getElementById("result");
let currentSentenceIndex = 0;

function displaySentence() {
sentenceEl.textContent = sentences[currentSentenceIndex];
}

function check() {
const currentSentence = sentences[currentSentenceIndex];
const currentInput = inputEl.value;
if (currentInput === currentSentence) {
resultEl.textContent = "正解!";
currentSentenceIndex++;
if (currentSentenceIndex === sentences.length) {
currentSentenceIndex = 0;
}
inputEl.value = "";
displaySentence();
} else {
resultEl.textContent = "間違い!もう一度試してください。";
}
}

displaySentence();
```

このコードでは、sentences配列にいくつかの文を定義し、displaySentence関数でランダムに文を選択して表示します。check関数では、入力された文字列が正しいかどうかを確認し、結果を表示します。正解の場合は次の文を表示し、間違いの場合はもう一度試すように促します。

このコードをHTMLファイル(`index.html`)、CSSファイル(`style.css`)およびJavaScriptファイル(`main.js`)に分け、それぞれのファイルを適切にリンクして、ブラウザで開いてください。タイピングゲームが動作するはずです。
2023-04-15 06:55:57 10カ月前