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

No:624

309

←

Prev Next

→

Pau!
Developer User3039｜Date and time 23/6/16 15:42:45
Build time 29.282 sec｜Game capacity 2.4KB｜

Script

了解、以下にサンプルのプログラムを記述します。

ゲームタイトル

ゲームの概要を簡単に説明

操作方法：〇〇をタップする

スコア：0

このプログラムは、タイトルやゲームの概要を表示し、画面をクリックするとスコアが加算されるシンプルなゲームです。画像を指定することでキャラクターが表示され、自動的に動きます。絵文字を使用することで、よりスマホ向けのUIになっています。

←

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">
	<title>ゲームタイトル</title>
</head>
<body>
	<h1>ゲームタイトル</h1>
	<p>ゲームの概要を簡単に説明</p>
	<p>操作方法：〇〇をタップする</p>
	<p>スコア：<span id="score">0</span></p>
	<div id="gameArea"></div>
	
	<script>
		var score = 0; //スコアの初期値
		
		//画面クリック時のイベント処理
		document.addEventListener('click', function(e) {
			if (e.target && e.target.id == 'character') {
				//キャラクターをクリックした場合、スコアを加算
				score ++;
				document.getElementById('score').innerText = score;
			}
		});
		
		//ゲームの開始
		function startGame() {
			var gameArea = document.getElementById('gameArea');
			var character = document.createElement('div');
			character.id = 'character';
			character.style.width = '50px';
			character.style.height = '50px';
			character.style.backgroundImage = 'url(キャラクター画像のURL)';
			character.style.backgroundSize = 'contain';
			character.style.backgroundRepeat = 'no-repeat';
			character.style.position = 'absolute';
			character.style.top = 'calc(50% - 25px)';
			character.style.left = 'calc(50% - 25px)';
			gameArea.appendChild(character);
			//キャラクターを動かす処理
			var speedX = 2; //X軸方向の速度
			var speedY = 2; //Y軸方向の速度
			setInterval(function() {
				var characterTop = parseInt(character.style.top, 10);
				var characterLeft = parseInt(character.style.left, 10);
				if (characterTop <= 0 || characterTop >= (gameArea.offsetHeight - character.offsetHeight)) {
					speedY = -speedY;
				}
				if (characterLeft <= 0 || characterLeft >= (gameArea.offsetWidth - character.offsetWidth)) {
					speedX = -speedX;
				}
				character.style.top = (characterTop + speedY) + 'px';
				character.style.left = (characterLeft + speedX) + 'px';
			}, 30);
		}
		
		startGame(); //ゲームの開始
	</script>
</body>
</html>