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

No:2533

1521

←

Prev Next

→

when it comes to the crunch
Developer User3544｜Date and time 23/6/21 22:09:05
Build time 49.846 sec｜Game capacity 4.164KB｜

Script

にて、スマホでプレイ可能な簡単な絵文字ゲームを作りました。

いざ鎌倉！

このゲームでは、3つの問題があります。各問題には4つの選択肢があり、その中から1つを選んで回答します。正解するとスコアが加算され、最後にスコアに応じて結果が表示されます。なるべく絵文字を使って見やすくしました。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

にて、スマホでプレイ可能な簡単な絵文字ゲームを作りました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>いざ鎌倉！</title>
	<style>
		body {
			background-color: #F7DC6F;
		}
		button {
			background-color: #145A32;
			color: #FFFFFF;
			padding: 8px 16px;
			border-radius: 8px;
			border: none;
			font-weight: bold;
			cursor: pointer;
			margin: 16px;
		}
		button:hover {
			background-color: #186A3B;
			color: #FFFFFF;
		}
        #title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 32px;
        }
        #question {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-top: 64px;
        }
        #answers {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 16px;
        }
        .answer-button {
            font-size: 16px;
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            margin: 8px;
            cursor: pointer;
            background-color: #FFFFFF;
        }
        .answer-button:hover {
            background-color: #F2F3F4;
        }
        #result {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 64px;
        }
	</style>
</head>
<body>
	<h1 id="title">いざ鎌倉！</h1>
	<div id="question"></div>
	<div id="answers"></div>
	<div id="result"></div>

let currentQuestion = 0;
		let score = 0;

let questionElement = document.getElementById('question');
		let answersElement = document.getElementById('answers');
		let resultElement = document.getElementById('result');

function showQuestion() {
			questionElement.textContent = questions[currentQuestion].question;
			answersElement.innerHTML = '';
			for (let i = 0; i < questions[currentQuestion].answers.length; i++) {
				let button = document.createElement('button');
				button.className = 'answer-button';
				button.textContent = questions[currentQuestion].answers[i];
				button.addEventListener('click', checkAnswer);
				answersElement.appendChild(button);
			}
		}

showQuestion();
	</script>
</body>
</html>