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

No:2311

3160

←

Prev Next

→

me
Developer sayaensm｜Date and time 23/6/20 22:08:08
Build time 24.995 sec｜Game capacity 2.163KB｜

Script

はい、了解しました。以下が実際のプログラムになります。

Emoji Game

スマホの画面をタップして、Emojiを動かしてください。

以上が、スマホで遊べるEmoji Gameのプログラムになります。スタートボタンを押すと、Emojiが動き出し、Arrowキーで動かせます。ストップボタンで停止できます。Emojiは、黄色い丸に変更し、中にEmojiの顔文字が表示されたものとなっています。

←

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>Emoji Game</title>
	<style>
		body {
			font-size: 50px;
			text-align: center;
			margin-top: 50px;
		}
		button {
			font-size: 30px;
			padding: 10px;
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>Emoji Game</h1>
	<p>スマホの画面をタップして、Emojiを動かしてください。</p>
	<canvas id="game" width="400" height="400"></canvas>
	<button id="start">スタート</button>
	<button id="stop">ストップ</button>
	<script>
		var canvas = document.getElementById('game');
		var context = canvas.getContext('2d');

var emoji = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			radius: 30,
			speed: 5,
			color: '😃'
		};

function drawEmoji() {
			context.beginPath();
			context.arc(emoji.x, emoji.y, emoji.radius, 0, 2 * Math.PI);
			context.fillStyle = 'yellow';
			context.fill();
			context.font = '50px Arial';
			context.fillStyle = 'black';
			context.fillText(emoji.color, emoji.x - 20, emoji.y + 20);
			context.closePath();
		}

function moveEmoji() {
			switch(event.key) {
				case 'ArrowUp':
					emoji.y -= emoji.speed;
					break;
				case 'ArrowDown':
					emoji.y += emoji.speed;
					break;
				case 'ArrowLeft':
					emoji.x -= emoji.speed;
					break;
				case 'ArrowRight':
					emoji.x += emoji.speed;
					break;
			}
		}

function updateGame() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawEmoji();
		}

document.addEventListener('keydown', moveEmoji);

document.getElementById('start').addEventListener('click', function() {
			setInterval(updateGame, 20);
		});

document.getElementById('stop').addEventListener('click', function() {
			clearInterval(updateGame);
		});
	</script>
</body>
</html>