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

No:2394

507

←

Prev Next

→

Mixed Martial Arts.
Developer User3559｜Date and time 23/6/21 10:12:38
Build time 105.277 sec｜Game capacity 4.429KB｜

Script

を目指すゲームを作りました。以下がそのプログラムです。

総合格闘技アクションストラテジー

このプログラムは、総合格闘技の技を覚えるゲームです。画面上部に「総合格闘技アクションストラテジー」というタイトルがあり、その下に技を覚えるためのフォームがあります。覚える技とそのレベルを選択すると、「技を覚える」ボタンをクリックすることでその技を記録します。記録された技は、下部に表示されます。このゲームは、スマホでも操作可能であることを意識して、フォームやボタンのデザインをシンプルにしました。また、Emojiを多用して、ゲームにアクセスしやすく、楽しんでいただけるようにしています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

を目指すゲームを作りました。

以下がそのプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>総合格闘技アクションストラテジー</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background: #eeeeee;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
			color: #333333;
			padding: 20px 0;
		}
		.container {
			max-width: 500px;
			margin: 0 auto;
			padding: 20px;
			background: #ffffff;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		}
		.button {
			display: inline-block;
			padding: 10px 20px;
			margin-right: 10px;
			margin-bottom: 10px;
			background: #333333;
			color: #ffffff;
			border-radius: 5px;
			text-decoration: none;
			text-align: center;
			cursor: pointer;
		}
		.button:hover {
			background: #666666;
		}
		.textbox {
			display: inline-block;
			margin-bottom: 10px;
			padding: 5px;
			border-radius: 5px;
			border: none;
			font-size: 16px;
			width: 100%;
		}
		.message {
			color: #333333;
			padding: 10px;
			background: #ffffff;
			border-radius: 5px;
			margin-bottom: 10px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		}
		.message.success {
			background: #66cc66;
			color: #ffffff;
		}
		.message.error {
			background: #cc6666;
			color: #ffffff;
		}
	</style>
</head>
<body>
	<h1>総合格闘技アクションストラテジー</h1>
	<div class="container">
		<div class="message success" id="success-message" style="display: none;">技を覚えました！</div>
		<div class="message error" id="error-message" style="display: none;">技の覚え方が間違っています。</div>
		<form id="learn-form">
			<label for="technique">覚える技：</label>
			<select class="textbox" id="technique" name="technique">
				<option value="パンチ">パンチ</option>
				<option value="キック">キック</option>
				<option value="投げ技">投げ技</option>
				<option value="関節技">関節技</option>
				<option value="絞め技">絞め技</option>
			</select><br>
			<label for="level">レベル：</label>
			<input class="textbox" type="number" id="level" name="level" min="1" max="5"><br>
			<button class="button" type="submit">技を覚える</button>
		</form>
		<div id="technique-list"></div>
	</div>
	<script>
		var techniques = [];

var findTechniqueIndex = function(technique) {
			for (var i = 0; i < techniques.length; i++) {
				if (techniques[i].technique === technique) {
					return i;
				}
			}
			return -1;
		};

var updateTechniqueList = function() {
			var techniqueList = document.getElementById('technique-list');
			techniqueList.innerHTML = '';
			for (var i = 0; i < techniques.length; i++) {
				var techniqueItem = document.createElement('div');
				techniqueItem.innerHTML = techniques[i].technique + '：' + techniques[i].level;
				techniqueList.appendChild(techniqueItem);
			}
		};
	</script>
</body>
</html>

このプログラムは、総合格闘技の技を覚えるゲームです。画面上部に「総合格闘技アクションストラテジー」というタイトルがあり、その下に技を覚えるためのフォームがあります。覚える技とそのレベルを選択すると、「技を覚える」ボタンをクリックすることでその技を記録します。記録された技は、下部に表示されます。

このゲームは、スマホでも操作可能であることを意識して、フォームやボタンのデザインをシンプルにしました。また、Emojiを多用して、ゲームにアクセスしやすく、楽しんでいただけるようにしています。