A game combining rock-paper-scissors and shooting's game | AI game creator

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

No:1052

1386

A game combining rock-paper-scissors and shooting
Developer User3225｜Date and time 23/6/18 0:55:43
Build time 64.488 sec｜Game capacity 5.99KB｜

Janken Shooting Game

Score: 0

✊

✋

✌

Press a button to start

このゲームは、じゃんけんの手と撃つボタンを押すことで、シューティングで落ちてくる手を倒していくゲームです。じゃんけんに勝てば、点数が1点加算します。点数が10点に到達すると、ゲームクリアとなります。

→ 　

1　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>Janken Shooting Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2rem;
			text-align: center;
			background-color: #f9dc5c;
		}
		.game-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20vh;
			margin-bottom: 10vh;
		}
		.game-title {
			font-size: 3rem;
			font-weight: bold;
			margin-bottom: 3rem;
		}
		.game-score {
			font-weight: bold;
			margin-bottom: 1rem;
		}
		.game-buttons {
			display: flex;
			flex-wrap: wrap;
			max-width: 500px;
			justify-content: space-evenly;
			margin-bottom: 3rem;
		}
		.game-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
			background-color: #ffffff;
			border-radius: 50%;
			width: 100px;
			height: 100px;
			margin-bottom: 1rem;
			font-size: 4rem;
			font-weight: bold;
			box-shadow: 0 0 10px #444;
		}
		.game-button:hover {
			transform: scale(1.2);
			box-shadow: 0 0 20px #444;
		}
		.game-button:active {
			transform: scale(0.9);
			box-shadow: 0 0 5px #444;
		}
		.game-message {
			font-weight: bold;
			font-size: 2rem;
			margin-bottom: 2rem;
		}
	</style>
</head>
<body>
	<div class="game-container">
		<div class="game-title">Janken Shooting Game</div>
		<div class="game-score">Score: 0</div>
		<div class="game-buttons">
			<div class="game-button" onclick="janken('rock')">✊</div>
			<div class="game-button" onclick="janken('paper')">✋</div>
			<div class="game-button" onclick="janken('scissors')">✌</div>
		</div>
		<div class="game-message">Press a button to start</div>
	</div>

<script>
		let score = 0;
		let jankenResult = '';

function janken(player) {
			const computer = Math.floor(Math.random() * 3);
			const jankenArr = ['rock', 'paper', 'scissors'];
			const computerJanken = jankenArr[computer];
			console.log(`Player: ${player}, Computer: ${computerJanken}`);
			switch(player) {
				case 'rock':
					switch(computerJanken) {
						case 'rock':
							jankenResult = 'Draw';
							break;
						case 'paper':
							jankenResult = 'Lose';
							break;
						case 'scissors':
							jankenResult = 'Win';
							break;
					}
					break;
				case 'paper':
					switch(computerJanken) {
						case 'rock':
							jankenResult = 'Win';
							break;
						case 'paper':
							jankenResult = 'Draw';
							break;
						case 'scissors':
							jankenResult = 'Lose';
							break;
					}
					break;
				case 'scissors':
					switch(computerJanken) {
						case 'rock':
							jankenResult = 'Lose';
							break;
						case 'paper':
							jankenResult = 'Win';
							break;
						case 'scissors':
							jankenResult = 'Draw';
							break;
					}
					break;
			}
			console.log(`Result: ${jankenResult}`);
			shoot();
		}

function shoot() {
			const shooter = document.createElement('div');
			shooter.setAttribute('class', 'shooter');
			document.body.appendChild(shooter);
			let shooterPos = window.innerWidth / 2;
			shooter.style.left = `${shooterPos}px`;
			let shooterInterval = setInterval(() => {
				shooterPos += 10;
				shooter.style.left = `${shooterPos}px`;
				if (shooterPos + shooter.clientWidth > window.innerWidth) {
					clearInterval(shooterInterval);
					document.body.removeChild(shooter);
					showResult();
				} else {
					checkCollision(shooter);
				}
			}, 10);
		}

function checkCollision(shooter) {
			const rock = document.querySelector('.rock');
			const paper = document.querySelector('.paper');
			const scissors = document.querySelector('.scissors');
			const shooterPos = shooter.getBoundingClientRect();
			if (rock != null) {
				const rockPos = rock.getBoundingClientRect();
				if (isCollide(shooterPos, rockPos)) {
					document.body.removeChild(shooter);
					document.body.removeChild(rock);
					if (jankenResult == 'Win') {
						score++;
						showResult();
					} else {
						showResult();
					}
				}
			}
			if (paper != null) {
				const paperPos = paper.getBoundingClientRect();
				if (isCollide(shooterPos, paperPos)) {
					document.body.removeChild(shooter);
					document.body.removeChild(paper);
					if (jankenResult == 'Win') {
						score++;
						showResult();
					} else {
						showResult();
					}
				}
			}
			if (scissors != null) {
				const scissorsPos = scissors.getBoundingClientRect();
				if (isCollide(shooterPos, scissorsPos)) {
					document.body.removeChild(shooter);
					document.body.removeChild(scissors);
					if (jankenResult == 'Win') {
						score++;
						showResult();
					} else {
						showResult();
					}
				}
			}
		}

function isCollide(a, b) {
			return !(a.bottom < b.top || a.top > b.bottom || a.right < b.left || a.left > b.right);
		}

function showResult() {
			const message = document.querySelector('.game-message');
			switch(jankenResult) {
				case 'Win':
					message.textContent = 'You Win!';
					break;
				case 'Lose':
					message.textContent = 'You Lose!';
					break;
				case 'Draw':
					message.textContent = 'Draw!';
					break;
			}
			const scoreDisplay = document.querySelector('.game-score');
			scoreDisplay.innerHTML = `Score: ${score}`;
			setTimeout(() => {
				message.textContent = 'Press a button to play again';
				jankenResult = '';
			}, 2000);
			if (score >= 10) {
				message.innerHTML = 'Game Over!<br>You Win!';
				const buttons = document.querySelectorAll('.game-button');
				buttons.forEach(button => {
					button.removeEventListener('click', janken);
				});
			}
		}

const buttons = document.querySelectorAll('.game-button');
		buttons.forEach(button => {
			button.addEventListener('click', janken);
		});
	</script>
</body>
</html>

このゲームは、じゃんけんの手と撃つボタンを押すことで、シューティングで落ちてくる手を倒していくゲームです。じゃんけんに勝てば、点数が1点加算します。点数が10点に到達すると、ゲームクリアとなります。