Games after 10 years's game | AI game creator

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

No:1564

2045

Games after 10 years
Developer User3025｜Date and time 23/6/18 18:38:03
Build time 53.37 sec｜Game capacity 4.409KB｜

「未来の新聞配達！」というゲームです。ゲームの概要：プレーヤーは10年後の未来の新聞配達員となり、自転車に乗りながら未来の街を巡り、新聞を配達します。ただし、未来の街は危険な場所が多く、配達時に様々な障害が立ちはだかります。プレーヤーは、障害を回避しながら配達を完了するために、自転車の操作やアイテムの使用をうまくして勝利を目指します。実際のプログラム：

このプログラムで、`index.html`というファイル名で保存します。次に、JavaScriptでゲームを実装します。以下は、ゲーム内の要素を定義するためのコードです。
このコードでは、自転車と障害物の座標を管理し、それらの描画を行います。また、スコアとゲームオーバーの表示、クリックイベントの処理なども含まれています。最後に、ゲームのルールを説明する文言を追加します。

これで、「未来の新聞配達！」という1枚のHTMLファイルで実装された、JavaScriptを使用したスマホ向けのゲームが完成します。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

「未来の新聞配達！」というゲームです。

ゲームの概要：プレーヤーは10年後の未来の新聞配達員となり、自転車に乗りながら未来の街を巡り、新聞を配達します。ただし、未来の街は危険な場所が多く、配達時に様々な障害が立ちはだかります。プレーヤーは、障害を回避しながら配達を完了するために、自転車の操作やアイテムの使用をうまくして勝利を目指します。

実際のプログラム：
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>未来の新聞配達！</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
			background: #ccc;
			margin: auto;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id='gameCanvas' width='600' height='400'></canvas>
	<script>
	// JavaScriptを記述します
	</script>
</body>
</html>
```

このプログラムで、`index.html`というファイル名で保存します。

次に、JavaScriptでゲームを実装します。以下は、ゲーム内の要素を定義するためのコードです。

```javascript
// ゲーム内の要素
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var bike = {x: 50, y: 200};
var obstacles = [];
var score = 0;
var gameStarted = false;
var gameOver = false;

// 障害の生成
setInterval(function(){
	if(gameStarted){
		var obstacle = {x: canvas.width, y: Math.random()*canvas.height};
		obstacles.push(obstacle);
	}
}, 1000);

// プレーヤーの自転車の描画
function drawBike(){
	ctx.fillStyle = 'yellow';
	ctx.fillRect(bike.x-15, bike.y-15, 30, 30);
}

// 障害の描画
function drawObstacles(){
	ctx.fillStyle = 'red';
	for(var i=0; i<obstacles.length; i++){
		ctx.fillRect(obstacles[i].x-10, obstacles[i].y-10, 20, 20);
	}
}

// スコアの描画
function drawScore(){
	ctx.fillStyle = 'black';
	ctx.font = '20px Arial';
	ctx.fillText('Score: '+score, 10, 30);
}

// ゲームオーバーの描画
function drawGameOver(){
	ctx.fillStyle = 'black';
	ctx.font = '40px Arial';
	ctx.fillText('GAME OVER', 100, canvas.height/2);
}

// ゲームのメイン処理
function gameLoop(){
	if(!gameOver){
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		drawBike();
		drawObstacles();
		drawScore();
		if(gameStarted){
			// 自転車の移動
			bike.x += 5;
			if(bike.x > canvas.width){
				bike.x = 50;
				score++;
			}
			// 障害物の移動
			for(var i=0; i<obstacles.length; i++){
				obstacles[i].x -= 10;
				if(obstacles[i].x < 0){
					obstacles.splice(i, 1);
					i--;
				}
				else if(Math.abs(obstacles[i].x-bike.x) < 20 && Math.abs(obstacles[i].y-bike.y) < 20){
					gameOver = true;
				}
			}
		}
		else{
			ctx.fillStyle = 'black';
			ctx.font = '40px Arial';
			ctx.fillText('Click to Start', 100, canvas.height/2);
		}
	}
	else{
		drawGameOver();
	}
}

// ゲーム開始
canvas.addEventListener('click', function(){
	gameStarted = true;
});

// ゲームループの実行
setInterval(gameLoop, 1000/60);
```

このコードでは、自転車と障害物の座標を管理し、それらの描画を行います。また、スコアとゲームオーバーの表示、クリックイベントの処理なども含まれています。

最後に、ゲームのルールを説明する文言を追加します。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>未来の新聞配達！</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
			background: #ccc;
			margin: auto;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id='gameCanvas' width='600' height='400'></canvas>
	<script>
	// JavaScriptを記述します
	// ゲームのルール
	alert('未来の新聞配達！\n\nプレーヤーは10年後の未来の新聞配達員となり、自転車に乗りながら未来の街を巡り、新聞を配達します。ただし、未来の街は危険な場所が多く、配達時に様々な障害が立ちはだかります。プレーヤーは、障害を回避しながら配達を完了するために、自転車の操作やアイテムの使用をうまくして勝利を目指します。');
	</script>
</body>
</html>
```

これで、「未来の新聞配達！」という1枚のHTMLファイルで実装された、JavaScriptを使用したスマホ向けのゲームが完成します。