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

No:922

172

←

Prev Next

→

A game in which you aim for your destination while..ALL
Developer User3194｜Date and time 23/6/17 22:38:52
Build time 70.469 sec｜Game capacity 5.242KB｜

Script

対向車を避けよう！

Score: 0

タップしてスタート！

このゲームは、プレイヤーが車を操作し、対向車を避けながらできるだけ長い距離を移動することを目的としたゲームです。プレイヤーは左右キーを使用して車を動かします。対向車は画面上から下へ動き、プレイヤーが避けなければならない障害物として機能します。対向車に当たるとゲームオーバーになります。プレイヤーのスコアは、避けた対向車の数に基づいて計算されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>対向車を避けよう！</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
			text-align: center;
		}

#canvas {
			display: block;
			margin: 20px auto;
			border: 2px solid #444;
		}

h1 {
			margin: 20px auto;
			font-size: 30px;
			color: #444;
		}

#score {
			margin: 10px auto;
			color: #444;
			font-weight: bold;
			font-size: 20px;
		}

#message {
			margin: 10px auto;
			color: #444;
			font-weight: bold;
			font-size: 20px;
		}

.button {
			display: inline-block;
			padding: 10px 20px;
			background-color: #1abc9c;
			color: #fff;
			font-size: 20px;
			border-radius: 5px;
			cursor: pointer;
			margin: 20px;
			transition: all 0.3s ease-in-out;
		}

.button:hover {
			background-color: #148f77;
		}
	</style>
</head>
<body>
	<h1>対向車を避けよう！</h1>
	<canvas id="canvas" width="400" height="600"></canvas>
	<div id="score">Score: 0</div>
	<div id="message">タップしてスタート！</div>

// 車を描く関数
		function drawCar(x, y) {
			ctx.fillStyle = "#c0392b";
			ctx.fillRect(x, y, car.width, car.height);
			ctx.fillStyle = "#ffffff";
			ctx.fillRect(x + 10, y + 10, 10, 10);
			ctx.fillRect(x + 25, y + 10, 10, 10);
			ctx.fillRect(x + 10, y + 30, 25, 40);
			ctx.beginPath();
			ctx.arc(x + 15, y + 70, 10, 0, Math.PI * 2, false);
			ctx.arc(x + 35, y + 70, 10, 0, Math.PI * 2, false);
			ctx.fill();
		}

// 車を動かす関数
		function moveCar() {
			if (leftPressed) {
				car.x -= car.speed;
			} else if (rightPressed) {
				car.x += car.speed;
			}

if (car.x < 0) {
				car.x = 0;
			} else if (car.x + car.width > canvas.width) {
				car.x = canvas.width - car.width;
			}
		}

// 車を描画する関数
		function render() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < cars.length; i++) {
				ctx.fillStyle = "#2980b9";
				ctx.fillRect(cars[i].x, cars[i].y, cars[i].width, cars[i].height);
				ctx.fillStyle = "#ffffff"
				ctx.fillRect(cars[i].x + 5, cars[i].y + 5, 10, 10);
				ctx.fillRect(cars[i].x + 25, cars[i].y + 5, 10, 10);
				ctx.fillRect(cars[i].x + 5, cars[i].y + 25, 30, 40);
				ctx.beginPath();
				ctx.arc(cars[i].x + 15, cars[i].y + 70, 10, 0, Math.PI * 2, false);
				ctx.arc(cars[i].x + 35, cars[i].y + 70, 10, 0, Math.PI * 2, false);
				ctx.fill();

cars[i].y += cars[i].speed;

if (cars[i].y > canvas.height) {
					cars.splice(i, 1);
					score++;
					i--;
				}

if (cars[i].x < car.x + car.width && cars[i].x + cars[i].width > car.x &&
					cars[i].y < car.y + car.height && cars[i].y + cars[i].height > car.y) {
					clearInterval(intervalId);
					document.getElementById("message").innerHTML = "ゲームオーバー！";
					document.getElementById("score").innerHTML = "Score: " + score;
					document.getElementById("start-button").style.display = "inline-block";
				}
			}

drawCar(car.x, car.y);
			document.getElementById("score").innerHTML = "Score: " + score;
		}

// 車を生成する関数
		function createCar() {
			var x = Math.floor(Math.random() * canvas.width);
			var width = 40;
			var height = 80;
			var speed = 3;
			var car = {x, y: -height, width, height, speed};
			cars.push(car);
		}

// キーボードが押された時の処理
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 37) {
				leftPressed = true;
			} else if (event.keyCode == 39) {
				rightPressed = true;
			}
		});

// キーボードが離された時の処理
		document.addEventListener("keyup", function(event) {
			if (event.keyCode == 37) {
				leftPressed = false;
			} else if (event.keyCode == 39) {
				rightPressed = false;
			}
		});

// スタートボタンが押された時の処理
		document.getElementById("start-button").addEventListener("click", function() {
			score = 0;
			cars = [];
			car.x = 180;
			document.getElementById("message").innerHTML = "";
			document.getElementById("start-button").style.display = "none";
			intervalId = setInterval(function() {
				createCar();
			}, 1000);
			intervalId = setInterval(function() {
				moveCar();
				render();
			}, 20);
		});
	</script>