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

No:3307

1620

←

Prev Next

→

Wont you do it?
Developer User3655｜Date and time 23/6/24 12:39:56
Build time 25.585 sec｜Game capacity 2.716KB｜

Script

はい、チャレンジしてみます！

スマホで遊べるゲーム！

タップで操作するよ。

SCORE: 0

このゲームは、画面内をランダムに移動する魚のアイテムを猫のキャラクターが取るとスコアが増えるというものです。猫のキャラクターは、矢印キーを使って上下左右に動かすことができます。ただし、キャラクターが画面外に出てしまうとゲームオーバーです。ランダムな配置や、絵文字を使ったキャラクターやアイテムなど、スマホで気軽にプレイできるような要素を取り入れました。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

はい、チャレンジしてみます！

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>スマホゲーム</title>
</head>
<body>
	<h1>スマホで遊べるゲーム！</h1>
	<p>タップで操作するよ。</p>
	<div id="game-area">
		<p id="score">SCORE: 0</p>
		<img id="character" src="🐱" alt="キャラクター">
		<img id="item" src="🐟" alt="アイテム">
	</div>

character.style.position = 'absolute';
		character.style.top = '50%';
		character.style.left = '50%';

item.style.position = 'absolute';
		item.style.top = Math.floor(Math.random() * 80) + '%';
		item.style.left = Math.floor(Math.random() * 80) + '%';

function moveCharacter(event) {
			const key = event.key;
			switch(key) {
				case 'ArrowUp':
					character.style.top = parseInt(character.style.top) - 10 + 'px';
					break;
				case 'ArrowDown':
					character.style.top = parseInt(character.style.top) + 10 + 'px';
					break;
				case 'ArrowLeft':
					character.style.left = parseInt(character.style.left) - 10 + 'px';
					break;
				case 'ArrowRight':
					character.style.left = parseInt(character.style.left) + 10 + 'px';
					break;
				default:
					break;
			}

if(Math.abs(parseInt(character.style.top) - parseInt(item.style.top)) < 30 && Math.abs(parseInt(character.style.left) - parseInt(item.style.left)) < 30) {
				score++;
				document.getElementById('score').textContent = 'SCORE: ' + score;
				item.style.top = Math.floor(Math.random() * 80) + '%';
				item.style.left = Math.floor(Math.random() * 80) + '%';
			}

if(parseInt(character.style.top) < 0 || parseInt(character.style.top) > gameArea.clientHeight || parseInt(character.style.left) < 0 || parseInt(character.style.left) > gameArea.clientWidth) {
				alert('ゲームオーバー！\nSCORE: ' + score);
				location.reload();
			}
		}

document.addEventListener('keydown', moveCharacter);
	</script>
</body>
</html>