AI game creator

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

No:738

156

←

Prev Next

→

Simple Games
Developer User3113｜Date and time 23/6/17 15:39:38
Build time 33.224 sec｜Game capacity 2.785KB｜

Script

の例：

Score: 0

👦

👹

このゲームでは、プレイヤーのアバターである人形をマウスで動かし、敵のアバターである鬼を避けながらスコアを集めるというシンプルなルールです。スコアは画面右上に表示され、プレイヤーが敵に当たるとスコアが1点加算されます。また、敵は自動的に左から右へと移動し、画面外に出ると再び左側から出現します。絵文字を多用し、ビジュアル的に分かりやすいデザインにしました。

←

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: #333;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		#score {
			position: absolute;
			top: 5px;
			right: 5px;
			font-size: 30px;
			font-weight: bold;
			text-shadow: 2px 2px #000;
		}
		#game-area {
			position: relative;
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#player {
			position: absolute;
			bottom: 20px;
			left: calc(50% - 25px);
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #fff;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		#player:hover {
			transform: scale(1.2);
		}
		#enemy {
			position: absolute;
			top: 20px;
			left: calc(50% - 25px);
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #f00;
			animation: enemy-move 3s ease-in-out infinite alternate;
		}
		@keyframes enemy-move {
			from {
				left: 20px;
			}
			to {
				left: calc(100% - 70px);
			}
		}
	</style>
	<script>
		let score = 0;
		let player = document.getElementById("player");
		let enemy = document.getElementById("enemy");

function updateScore() {
			document.getElementById("score").innerHTML = `Score: ${score}`;
		}

function movePlayer(event) {
			let x = event.clientX;
			let y = event.clientY;
			player.style.left = `${x - 25}px`;
			player.style.top = `${y - 25}px`;
		}

setInterval(checkCollision, 100);

document.addEventListener("mousemove", movePlayer);
	</script>
</head>
<body>
	<div id="score">Score: 0</div>
	<div id="game-area">
		<div id="player">👦</div>
		<div id="enemy">👹</div>
	</div>
</body>
</html>