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

No:2063

1508

←

Prev Next

→

Shakashaka Shakashaka Potato🍟
Developer anonymous｜Date and time 23/6/19 23:36:22
Build time 42.688 sec｜Game capacity 2.561KB｜

Script

The following is a list of、This program implements the game Shakashaka Potato as a single HTML file.、Assumes operation with a smartphone. Use more pictograms and、A brief overview of the game is also included.

Shakashaka Potato🍟

🍟

SCORE: 0

TIME LEFT: 30s

This game is、Click on the potato displayed in the center of the screen and、This is a game to raise your score. Timer runs for 30 seconds.、Scores are alerted when time is up. For easy operation even when displayed on a smartphone、Increase the movement when you click on a potato.、Font size is adjusted. Also、In shades of yellow and brown.、The design is tailored to the potato as an ingredient.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

以下は、シャカシャカポテトというゲームを1枚のHTMLファイルとして実装したプログラムです。JavaScriptを含んでおり、スマートフォンでの操作を前提としています。絵文字を多めに使用し、簡単なゲームの概要も記載しています。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>シャカシャカポテト🍟</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #ffc107;
		}
		
		#game-board {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px;
		}
		
		#potato-container {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200px;
			width: 200px;
			border: 5px solid #795548;
			border-radius: 10px;
		}
		
		#potato {
			height: 150px;
			width: 150px;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60px;
		}
		
		#potato:hover {
			background-color: #ff9800;
		}
		
		#score {
			font-size: 36px;
			color: #795548;
			margin-top: 20px;
		}
		
		#timer {
			font-size: 36px;
			color: #795548;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div id="game-board">
		<h1>シャカシャカポテト🍟</h1>
		<div id="potato-container">
			<div id="potato" onclick="increaseScore()">🍟</div>
		</div>
		<div id="score">SCORE: 0</div>
		<div id="timer">TIME LEFT: 30s</div>
	</div>
	
	<script>
		let score = 0;
		let timer = 30;
		let timerId;
		
		function increaseScore() {
			score++;
			document.getElementById("score").innerHTML = "SCORE: " + score;
		}
		
		function updateTimer() {
			timer--;
			document.getElementById("timer").innerHTML = "TIME LEFT: " + timer + "s";
			if (timer == 0) {
				clearInterval(timerId);
				alert("TIME'S UP! Your score is " + score);
			}
		}
		
		timerId = setInterval(updateTimer, 1000);
	</script>
</body>
</html>

このゲームは、画面中央に表示されたポテトをクリックし、スコアを上げるゲームです。タイマーが30秒間動き、時間切れが来た時にスコアがアラートで表示されます。スマートフォンで表示した場合でも操作しやすいよう、ポテトをクリックした時の動きを大きくし、フォントサイズを調整しています。また、黄色と茶色系の色合いで、ポテトという食材に合わせたデザインにしています。