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

No:2501

212

←

Prev Next

→

The game to become a Super Saiyan
Developer anonymous｜Date and time 23/6/21 18:12:56
Build time 99.553 sec｜Game capacity 7.332KB｜

Script

スーパーサイヤ人になろう！

操作方法：タップしてエネルギーをため、指を離すと強力な光線が出るよ！
敵を倒して、スーパーサイヤ人になろう！

←

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: #191970;
			font-family: Arial, sans-serif;
			text-align: center;
			color: white;
		}

canvas {
			display: block;
			margin: 0 auto;
			border: 2px solid white;
			width: 80%;
			height: 70%;
			max-width: 600px;
			max-height: 600px;
			background: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/facebook/290/dragon_1f409.png');
			background-size: cover;
		}

h1 {
			font-size: 3em;
			margin: 1em 0;
			text-shadow: 3px 3px 2px black;
		}

button {
			background-color: #ff6347;
			color: white;
			padding: .5em 1em;
			border: none;
			border-radius: 20px;
			font-size: 1.2em;
			margin: 1em;
			cursor: pointer;
			box-shadow: 2px 2px 2px black;
			outline: none;
		}

button:hover {
			background-color: #ff4500;
		}

p {
			font-size: 1.2em;
			margin: 1em;
		}
	</style>
</head>
<body>
	<h1>スーパーサイヤ人になろう！</h1>
	<canvas id="canvas"></canvas>
	<button id="btnStart">START</button>
	<p>操作方法：タップしてエネルギーをため、指を離すと強力な光線が出るよ！<br>敵を倒して、スーパーサイヤ人になろう！</p>

// 初期化処理
		function init() {
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext('2d');
			canvas.width = CANVAS_SIZE[0];
			canvas.height = CANVAS_SIZE[1];

energyCharge = ENERGY_CHARGE_TIME;
			energyStored = ENERGY_START;
			energyMax = ENERGY_MAX;
			energySpeed = ENERGY_SPEED;
			enemyList = [];
			enemyRespawnTimer = 0;
			enemyCount = 0;
			defeatedEnemies = 0;
			isSuperSaiyan = false;
			transformCount = 0;
			transformTotal = TRANSFORM_TOTAL;
			transformLevel = 0;

// イベントリスナー登録
			canvas.addEventListener('mousedown', startDraw);
			canvas.addEventListener('touchstart', startDraw);
			canvas.addEventListener('mousemove', draw);
			canvas.addEventListener('touchmove', draw);
			canvas.addEventListener('mouseup', endDraw);
			canvas.addEventListener('touchend', endDraw);

// ゲームループ開始
			gameLoop();
		}

// ゲームループ
		function gameLoop() {
			// 画面初期化
			ctx.clearRect(0,0,CANVAS_SIZE[0],CANVAS_SIZE[1]);

// 自動エネルギー補充
			if (!isDrawing) {
				if (energyStored < energyMax) {
					energyStored += energySpeed;
				} else {
					energyStored = energyMax;
				}
			}

// 敵出現
			enemyRespawnTimer += 16;
			if (enemyRespawnTimer >= ENEMY_RESPAWN_TIME) {
				enemyRespawnTimer = 0;
				enemyCount++;
				enemyList.push(createEnemy());
			}

// 敵移動
			ctx.beginPath();
			ctx.fillStyle = 'white';
			for (var i = 0; i < enemyList.length; i++) {
				var enemy = enemyList[i];
				ctx.arc(enemy.x, enemy.y, ENEMY_HITBOX, 0, Math.PI*2);
				ctx.fill();
				enemy.x -= ENEMY_SPEED * 0.016;
				if (enemy.x < -ENEMY_HITBOX) {
					enemyList.splice(i,1);
				}
			}

// スーパーサイヤ人の状態（変身）
			if (defeatedEnemies >= TRANSFORM_ENERGY[transformLevel] && transformCount < TRANSFORM_TOTAL && !isSuperSaiyan) {
				transformCount++;
				transformLevel++;
				energyMax += 20;
				energyStored += 20;
				isSuperSaiyan = true;
				alert('変身！ ' + TRANSFORM_NAMES[transformLevel-1] + ' になった！');
			}

// スーパーサイヤ人の状態（解除）
			if (energyStored < TRANSFORM_ENERGY[transformLevel-1] && isSuperSaiyan) {
				transformCount--;
				transformLevel--;
				energyMax -= 20;
				energyStored -= 20;
				isSuperSaiyan = false;
				alert('変身解除');
			}

// スーパーサイヤ人の描画
			if (isSuperSaiyan) {
				ctx.beginPath();
				ctx.fillStyle = TRANSFORM_COLORS[transformLevel-1];
				ctx.arc(CANVAS_SIZE[0]/2, CANVAS_SIZE[1]/2, TRANSFORM_HITBOX, 0, Math.PI*2);
				ctx.fill();
			}

// エネルギーバー
			ctx.beginPath();
			ctx.fillStyle = 'white';
			ctx.rect(10, CANVAS_SIZE[1]-30, (energyStored/energyMax)*(CANVAS_SIZE[0]-20), 20);
			ctx.fill();

// 敵との衝突判定
			for (var i = 0; i < enemyList.length; i++) {
				var enemy = enemyList[i];
				if (distance(CANVAS_SIZE[0]/2, CANVAS_SIZE[1]/2, enemy.x, enemy.y) < ENEMY_HITBOX+TRANSFORM_HITBOX) {
					endGame();
				}
			}

// 再描画
			requestAnimationFrame(gameLoop);
		}

// エネルギーチャージ
		function startDraw(e) {
			isDrawing = true;
		}

function endDraw(e) {
			if (!isSuperSaiyan && isDrawing && energyStored > 0) {
				isDrawing = false;
				var energyPower = (CANVAS_SIZE[1] - e.clientY - canvas.offsetTop - TRANSFORM_HITBOX) / CANVAS_SIZE[1];
				var energyX = CANVAS_SIZE[0] / 2 + TRANSFORM_HITBOX * Math.cos(Math.PI * energyPower - Math.PI / 2);
				var energyY = CANVAS_SIZE[1] - TRANSFORM_HITBOX * Math.sin(Math.PI * energyPower - Math.PI / 2);
				ctx.beginPath();
				ctx.fillStyle = 'white';
				ctx.arc(energyX, energyY, 10, 0, Math.PI*2);
				ctx.fill();

// 敵との攻撃判定
				for (var i = 0; i < enemyList.length; i++) {
					var enemy = enemyList[i];
					if (distance(energyX, energyY, enemy.x, enemy.y) < 30) {
						defeatedEnemies++;
						enemyList.splice(i,1);
						break;
					}
				}
			}
		}

// 敵の生成
		function createEnemy() {
			var enemyX = CANVAS_SIZE[0] + ENEMY_HITBOX;
			var enemyY = ENEMY_HITBOX + Math.random() * (CANVAS_SIZE[1] - ENEMY_HITBOX * 2);
			var enemyColor = ENEMY_COLORS[Math.floor(Math.random() * ENEMY_COLORS.length)];
			var enemyName = ENEMY_NAMES[Math.floor(Math.random() * ENEMY_NAMES.length)];
			var enemy = {
				x: enemyX,
				y: enemyY,
				color: enemyColor,
				name: enemyName
			};
			return enemy;
		}

// 距離の計算
		function distance(x1,y1,x2,y2) {
			var dx = x1 - x2;
			var dy = y1 - y2;
			return Math.sqrt(dx*dx + dy*dy);
		}

// ゲーム終了
		function endGame() {
			alert('GAME OVER\n敵に当たってしまった！');
			location.reload();
		}

// 初期化
		init();
	</script>
</body>
</html>