AI game creator

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

No:3165

4714

←

Prev Next

→

shader
Developer User3671｜Date and time 23/6/24 0:54:12
Build time 42.11 sec｜Game capacity 3.224KB｜

Script

を使ってカラフルな背景を実装し、タップやスワイプでプレイヤーを動かし、敵や障害物を回避しながらスコアを稼ぐ、シンプルなアクションゲームを作りました！🚀🌈🎉

←

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;
			background-color: black;
			color: white;
			font-size: 20px;
		}
		canvas {
			width: 100%;
			height: 100vh;
			display: block;
			position: fixed;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas></canvas>

// プレイヤーの初期設定
		let playerX = canvas.width / 2;
		let playerY = canvas.height / 2;
		const playerSize = 50;

// 敵の初期設定
		let enemyX = canvas.width * Math.random();
		let enemyY = canvas.height * Math.random();
		const enemySize = 30;

// スコアの初期設定
		let score = 0;

// ゲームループ
		function gameLoop() {
			// 背景の描画
			const time = new Date().getTime() * 0.001;
			const r1 = Math.sin(time * 0.5) * 0.5 + 0.5;
			const g1 = Math.sin(time * 0.7) * 0.5 + 0.5;
			const b1 = Math.sin(time * 0.9) * 0.5 + 0.5;
			const r2 = Math.sin(time * 1.1) * 0.5 + 0.5;
			const g2 = Math.sin(time * 1.3) * 0.5 + 0.5;
			const b2 = Math.sin(time * 1.5) * 0.5 + 0.5;
			ctx.fillStyle = `rgb(${Math.floor(r1*255)}, ${Math.floor(g1*255)}, ${Math.floor(b1*255)})`;
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = `rgb(${Math.floor(r2*255)}, ${Math.floor(g2*255)}, ${Math.floor(b2*255)})`;
			ctx.beginPath();
			ctx.moveTo(canvas.width * Math.sin(time*0.3), 0);
			ctx.lineTo(canvas.width * Math.sin(time*0.3+1), 0);
			ctx.lineTo(canvas.width * Math.sin(time*0.3+0.5), canvas.height);
			ctx.lineTo(canvas.width * Math.sin(time*0.3-0.5), canvas.height);
			ctx.closePath();
			ctx.fill();

// プレイヤーの描画
			ctx.fillStyle = 'white';
			ctx.fillRect(playerX - playerSize/2, playerY - playerSize/2, playerSize, playerSize);

// 敵の描画
			ctx.fillStyle = 'red';
			ctx.fillRect(enemyX - enemySize/2, enemyY - enemySize/2, enemySize, enemySize);

// スコアの描画
			ctx.font = 'bold 30px sans-serif';
			ctx.textAlign = 'left';
			ctx.fillText(`Score: ${score}`, 20, 50);

// プレイヤーと敵の当たり判定
			const distance = Math.sqrt((playerX-enemyX)**2 + (playerY-enemyY)**2);
			if (distance < playerSize/2 + enemySize/2) {
				score -= 10;
				enemyX = canvas.width * Math.random();
				enemyY = canvas.height * Math.random();
			}

// スコアの更新
			score += 1;

// プレイヤーの操作
			canvas.addEventListener('touchstart', function(e) {
				playerX = e.touches[0].clientX;
				playerY = e.touches[0].clientY;
			});
			canvas.addEventListener('touchmove', function(e) {
				playerX = e.touches[0].clientX;
				playerY = e.touches[0].clientY;
			});

// 再描画
			requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		gameLoop();
	</script>
</body>
</html>