AI game creator

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

No:100

590

←

Prev Next

→

seesaw
Developer User1851｜Date and time 23/5/16 1:25:29
Build time 117.289 sec｜Game capacity 5.083KB｜

Script

👶VS🤓

もう一度プレイ 🎮

This application is a seesaw game. The player hits the red ball back using two paddles that move left and right. When the ball hits the edge、The opponent scores more points. The player with the most points is the winner. Can be played on smart phones. To replay the app from the beginning、Click on the Play Again button. (Emojis are heavily used)

←

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">
	<style>
		body {
			margin: 0;
			padding: 0;
		}

canvas {
			display: block;
			background-color: #eaeae1;
			margin: auto;
		}

#score {
			font-size: 24px;
			text-align: center;
		}

.emoji {
			font-size: 50px;
		}

#play-again {
			display: none;
			font-size: 24px;
			text-align: center;
			margin-top: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div id="score"><span id="left-score" class="emoji">👶</span>VS<span id="right-score" class="emoji">🤓</span></div>
	<div id="play-again">もう一度プレイ 🎮</div>
	<script>
		window.onload = function() {
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			var ball = {x: canvas.width / 2, y: canvas.height / 2, radius: 10, dx: 5, dy: 5};
			var leftPaddle = {x: 0, y: canvas.height / 2 - 50, width: 10, height: 100, score: 0};
			var rightPaddle = {x: canvas.width - 10, y: canvas.height / 2 - 50, width: 10, height: 100, score: 0};
			var upPressed = false;
			var downPressed = false;
			var wPressed = false;
			var sPressed = false;

document.addEventListener('keydown', keyDownHandler);
			document.addEventListener('keyup', keyUpHandler);
			document.getElementById('play-again').addEventListener('click', resetGame);

function drawBall() {
				context.beginPath();
				context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
				context.fillStyle = '#f44336';
				context.fill();
				context.closePath();
			}

function drawPaddle(paddle) {
				context.beginPath();
				context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
				context.fillStyle = '#4caf50';
				context.fill();
				context.closePath();
			}

function drawScore() {
				context.font = '24px Arial';
				context.fillStyle = '#444';
				context.fillText(leftPaddle.score + ' - ' + rightPaddle.score, canvas.width / 2 - 30, 30);
			}

function movePaddle() {
				if (upPressed && leftPaddle.y > 0) {
					leftPaddle.y -= 7;
				} else if (downPressed && leftPaddle.y + leftPaddle.height < canvas.height) {
					leftPaddle.y += 7;
				}

if (wPressed && rightPaddle.y > 0) {
					rightPaddle.y -= 7;
				} else if (sPressed && rightPaddle.y + rightPaddle.height < canvas.height) {
					rightPaddle.y += 7;
				}
			}

function checkCollision() {
				if (ball.y + ball.dy < ball.radius || ball.y + ball.dy > canvas.height - ball.radius) {
					ball.dy = -ball.dy;
				}

if (ball.x + ball.dx < leftPaddle.width + ball.radius && ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {
					ball.dx = -ball.dx;
					leftPaddle.score++;
				} else if (ball.x + ball.dx > canvas.width - ball.radius - rightPaddle.width && ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {
					ball.dx = -ball.dx;
					rightPaddle.score++;
				}

if (ball.x + ball.dx < -ball.radius || ball.x + ball.dx > canvas.width + ball.radius) {
					showGameOver();
				}
			}

function moveBall() {
				ball.x += ball.dx;
				ball.y += ball.dy;
			}

function resetBall() {
				ball.x = canvas.width / 2;
				ball.y = canvas.height / 2;
				ball.dx = -ball.dx;
				ball.dy = -ball.dy;
			}

function resetGame() {
				leftPaddle.score = 0;
				rightPaddle.score = 0;
				resetBall();
				hideGameOver();
			}

function showGameOver() {
				document.getElementById('play-again').style.display = 'block';
			}

function hideGameOver() {
				document.getElementById('play-again').style.display = 'none';
			}

function draw() {
				context.clearRect(0, 0, canvas.width, canvas.height);
				drawBall();
				drawPaddle(leftPaddle);
				drawPaddle(rightPaddle);
				drawScore();
				movePaddle();
				checkCollision();
				moveBall();
				requestAnimationFrame(draw);
			}

draw();
		};
	</script>
</body>
</html>

このアプリはシーソーゲームです。プレイヤーは赤色のボールを左右に移動する2本のパドルを使用して打ち返します。ボールが端に当たると、相手の得点が増えます。最も得点を獲得したプレーヤーが勝者となります。スマートフォンでプレイ可能です。アプリを最初から再プレイするには、「もう一度プレイ」ボタンをクリックしてください。（絵文字は多用）