Click here for free DL of the app version that can save data.

No:930

374

←

Prev Next

→

Introduce a randomly existing book.
Developer User3193｜Date and time 23/6/17 22:45:37
Build time 38.327 sec｜Game capacity 3.099KB｜

Script

以下は、ランダムに存在する本を紹介するゲームの例です。

本の紹介

このゲームは、ランダムな本を紹介するシンプルなものです。最初にHTML、CSS、JavaScriptの基礎を記述しました。次に、booksという配列に、いくつかの本のタイトル、著者、およびエモジを追加しました。 getRandomBook関数を使用して、booksからランダムな本を取得します。 onclickイベントを使用して、紹介される本のタイトル、著者、およびエモジを表示するボタンを追加しました。最後に、CSSスタイルを少しカスタマイズして、ボタンが大きく、読みやすくなるようにしました。このゲームは、スマートフォンでも簡単に遊べます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

以下は、ランダムに存在する本を紹介するゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>ランダムな本を紹介するゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
			margin: 0;
			padding: 0;
			background-color: #eee;
			font-family: sans-serif;
		}
		
		h1 {
			font-size: 4em;
			margin-top: 1em;
		}
		
		.button {
			margin-top: 1em;
			padding: 0.5em 1em;
			background-color: #37B8AF;
			color: #fff;
			border: none;
			border-radius: 0.2em;
			font-size: 1.5em;
			cursor: pointer;
		}
	</style>
	<script>
		const books = [
			{ title: 'ノルウェイの森', author: '村上春樹', img: '📕' },
			{ title: '君たちはどう生きるか', author: '吉野源三郎', img: '📗' },
			{ title: '悪人', author: '重松清', img: '📘' },
			{ title: '容疑者Xの献身', author: '東野圭吾', img: '📙' },
			{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', img: '📓' },
			{ title: 'Les Miserables', author: 'Victor Hugo', img: '📒' },
			{ title: 'Pride and Prejudice', author: 'Jane Austen', img: '📔' },
			{ title: 'To Kill a Mockingbird', author: 'Harper Lee', img: '📑' },
			{ title: 'The Catcher in the Rye', author: 'J.D. Salinger', img: '📚' },
			{ title: 'Harry Potter and the Philosopher\'s Stone', author: 'J.K. Rowling', img: '📖' }
		];
		
		function getRandomBook() {
			const randomIndex = Math.floor(Math.random() * books.length);
			return books[randomIndex];
		}
		
		window.onload = function() {
			const button = document.getElementById('button');
			button.onclick = function() {
				const result = getRandomBook();
				const title = document.createElement('h1');
				const author = document.createElement('p');
				const img = document.createElement('p');
				
				title.textContent = result.title;
				author.textContent = 'by ' + result.author;
				img.textContent = result.img;
				
				const container = document.getElementById('container');
				container.innerHTML = '';
				container.appendChild(title);
				container.appendChild(author);
				container.appendChild(img);
			};
		};
	</script>
</head>
<body>
	<div id="container">
		<h1>本の紹介</h1>
		<button id="button" class="button">本を紹介する</button>
	</div>
</body>
</html>