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

No:2765

6462

←

Prev Next

→

Dot Picture Creation Tool
Developer もちきなこ｜Date and time 23/6/22 15:50:28
Build time 26.684 sec｜Game capacity 2.231KB｜

Script

を使用して、モンスターを作成するゲームを作りました。

モンスターメーカー

スライダーを操作してモンスターを作成してね！

目の色:

体の色:

口の形:

👹

←

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{
			text-align: center;
			background-color: #b3d9ff;
			font-size: 20px;
		}
		h1{
			color: #1a75ff;
		}
		input[type="range"]{
			-webkit-appearance: none;
			appearance: none;
			width: 80%;
			height: 10px;
			background-color: #e6e6e6;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		input[type="range"]::-webkit-slider-thumb{
			-webkit-appearance: none;
			appearance: none;
			width: 30px;
			height: 30px;
			background-color: #4d79ff;
			cursor: pointer;
			border-radius: 50%;
		}
		#monster{
			font-size: 50px;
			margin: 50px;
		}
	</style>
</head>
<body>
	<h1>モンスターメーカー</h1>
	<p>スライダーを操作してモンスターを作成してね！</p>
	<p>目の色:</p>
	<input type="range" min="1" max="3" value="2" id="eyeColor" oninput="makeMonster()">
	<p>体の色:</p>
	<input type="range" min="1" max="3" value="2" id="bodyColor" oninput="makeMonster()">
	<p>口の形:</p>
	<input type="range" min="1" max="3" value="2" id="mouthShape" oninput="makeMonster()">
	<div id="monster">👹</div>

switch(eyeColor){
				case "1":
					monster.innerHTML = "😡";
					break;
				case "2":
					monster.innerHTML = "👹";
					break;
				case "3":
					monster.innerHTML = "😈";
					break;
			}

switch(bodyColor){
				case "1":
					monster.innerHTML += "🟢";
					break;
				case "2":
					monster.innerHTML += "🟠";
					break;
				case "3":
					monster.innerHTML += "🟣";
					break;
			}

switch(mouthShape){
				case "1":
					monster.innerHTML += "😱";
					break;
				case "2":
					monster.innerHTML += "😋";
					break;
				case "3":
					monster.innerHTML += "😧";
					break;
			}
		}
	</script>
</body>
</html>