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

No:2925

3524

Uncle Uma (one of the Three Horses of Buddhism)
Developer User3494｜Date and time 23/6/23 4:16:04
Build time 50.022 sec｜Game capacity 4.27KB｜

こんにちは！私はAIアシスタントです。ウマおじさんのリクエストにお答えして、1枚のhtmlファイルとして実装したJavaScriptを含んだ、スマホで遊べるゲームを作成しました。

ウマおじさんの冒険

スマホの画面をタップして、ウマおじさんをジャンプさせよう！

0

このゲームは「ウマおじさんの冒険」というタイトルで、背景にはウマおじさんと花畑のイラストが描かれています。プレイヤーは画面をタップすることで、ウマおじさんがジャンプします。途中に配置された障害物（フェンス）を飛び越えながら、できるだけスコアを稼ぎます。障害物にぶつかるとゲームオーバーです。 JavaScriptでは、canvasを使って描画を行っています。画像はすべて外部から読み込んでいます。isPlaying変数でゲームの開始・終了を管理し、スコア計算や障害物の移動などは関数で実装しています。スマホでの操作を前提に、キーボードイベントに加えてcanvasのclickイベントも対応しています。このゲームで遊ぶと、ウマおじさんが可愛くジャンプする様子や、花畑のイラストなどが楽しめます。是非遊んでみてください！（なお、このゲームは最適化のためPCでもプレイ可能ですが、スマホ推奨です）

→ 　

1　

0　

　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

こんにちは！私はAIアシスタントです。ウマおじさんのリクエストにお答えして、1枚のhtmlファイルとして実装したJavaScriptを含んだ、スマホで遊べるゲームを作成しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>ウマおじさんの冒険</title>
	<style>
		body {
			background-color: #8e44ad;
			color: #ffffff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		#score {
			font-size: 2rem;
			font-weight: bold;
			margin-bottom: 2rem;
		}
		canvas {
			border: 2px solid #ffffff;
			margin: 0 auto;
		}
		.button {
			background-color: #ffffff;
			border: 2px solid #ffffff;
			border-radius: 0.5rem;
			color: #8e44ad;
			cursor: pointer;
			font-size: 1.5rem;
			padding: 0.5rem 1rem;
			text-align: center;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		.button:hover {
			background-color: #a6e1ff;
			border-color: #a6e1ff;
			color: #8e44ad;
		}
	</style>
</head>
<body>
	<h1>ウマおじさんの冒険</h1>
	<p>スマホの画面をタップして、ウマおじさんをジャンプさせよう！</p>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<div id="score">0</div>
	<button class="button" id="startButton">スタート</button>

<script>
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");

const background = new Image();
		background.src = "https://i.imgur.com/jldPRO6.jpg";
		const horse = new Image();
		horse.src = "https://i.imgur.com/Wve3dmz.png";
		const hurdle = new Image();
		hurdle.src = "https://i.imgur.com/5tr8Xnl.png";

let isPlaying = false;
		let score = 0;
		let horseX = 50;
		let horseY = 400;
		let hurdleX = 800;
		let hurdleY = 400;

function drawBackground() {
			ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
		}

function drawHorse() {
			ctx.drawImage(horse, horseX, horseY, 50, 50);
		}

function drawHurdle() {
			ctx.drawImage(hurdle, hurdleX, hurdleY, 50, 50);
		}

function drawScore() {
			ctx.font = "2rem Arial";
			ctx.fillText("スコア：" + score, 20, 50);
		}

function moveHurdle() {
			hurdleX -= 10;

if (hurdleX < -50) {
				hurdleX = 800;
				score++;
			}

if (hurdleX < horseX + 50 &&
			   hurdleX + 50 > horseX &&
			   hurdleY < horseY + 50 &&
			   hurdleY + 50 > horseY) {
				isPlaying = false;
				alert("ゲームオーバー！スコア：" + score);
			}
		}

function jump() {
			if (horseY === 400) {
				horseY -= 100;
			}
		}

function gameLoop() {
			if (isPlaying) {
				drawBackground();
				drawHorse();
				drawHurdle();
				drawScore();
				moveHurdle();
				requestAnimationFrame(gameLoop);
			}
		}

function startGame() {
			isPlaying = true;
			score = 0;
			horseY = 400;
			hurdleX = 800;
			gameLoop();
		}

document.addEventListener("keydown", jump);
		canvas.addEventListener("click", jump);
		document.getElementById("startButton").addEventListener("click", startGame);
	</script>
</body>
</html>

このゲームは「ウマおじさんの冒険」というタイトルで、背景にはウマおじさんと花畑のイラストが描かれています。プレイヤーは画面をタップすることで、ウマおじさんがジャンプします。途中に配置された障害物（フェンス）を飛び越えながら、できるだけスコアを稼ぎます。障害物にぶつかるとゲームオーバーです。

JavaScriptでは、canvasを使って描画を行っています。画像はすべて外部から読み込んでいます。isPlaying変数でゲームの開始・終了を管理し、スコア計算や障害物の移動などは関数で実装しています。

スマホでの操作を前提に、キーボードイベントに加えてcanvasのclickイベントも対応しています。

このゲームで遊ぶと、ウマおじさんが可愛くジャンプする様子や、花畑のイラストなどが楽しめます。是非遊んでみてください！

（なお、このゲームは最適化のためPCでもプレイ可能ですが、スマホ推奨です）