AI game creator

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

No:4272

1621

←

Prev Next

→

Iki Dolphin Park
Developer sayaensm｜Date and time 23/6/27 18:35:51
Build time 26.002 sec｜Game capacity 2.419KB｜

Script

大丈夫です。ゲームを作成します。

これは「イルカジャンプ」というゲームです。プレイヤーがイルカを操作し、 obstaclesを避けながらできるだけ遠くに行くようにします。スペースバーを押すとイルカがジャンプし、 obstaclesを避けやすくなります。あなたは役割を果たすことができますか？

←

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>イルカジャンプ</title>
<style>
	body {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	canvas {
		display: block;
	}
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const img = new Image();
img.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/230/dolphin_1f42c.png';

const dolphin = {
	x: 50,
	y: canvas.height - 200,
	width: 150,
	height: 100,
	velocity: 0,
	gravity: 0.5,
	jump: 12
};

const obstacles = [];

function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(img, dolphin.x, dolphin.y, dolphin.width, dolphin.height);

dolphin.velocity += dolphin.gravity;
	dolphin.y += dolphin.velocity;

if (dolphin.y > canvas.height - dolphin.height) {
		dolphin.y = canvas.height - dolphin.height;
		dolphin.velocity = 0;
	}

if (obstacles.length > 0 && obstacles[0].x < -obstacles[0].width) {
		obstacles.shift();
	}

if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - 400) {
		obstacles.push({
			x: canvas.width,
			width: Math.floor(Math.random() * (canvas.width * 0.2)) + 50,
			height: Math.floor(Math.random() * 200) + 50,
			color: '#' + Math.random().toString(16).substr(-6)
		});
	}

obstacles.forEach(obstacle => {
		ctx.fillStyle = obstacle.color;
		ctx.fillRect(obstacle.x, canvas.height - obstacle.height, obstacle.width, obstacle.height);

if (dolphin.x + dolphin.width > obstacle.x && dolphin.x < obstacle.x + obstacle.width && dolphin.y + dolphin.height > canvas.height - obstacle.height) {
			alert('失敗！再挑戦してください！');
			location.reload();
		}

obstacle.x -= 5;
	});

requestAnimationFrame(draw);
}

draw();

document.addEventListener('keydown', e => {
	if (e.code === 'Space') {
		dolphin.velocity = -dolphin.jump;
	}
});
</script>
</body>
</html>