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

No:1096

155

←

Prev Next

→

Easy, Nail Peeling
Developer User3245｜Date and time 23/6/18 3:05:24
Build time 43.471 sec｜Game capacity 3.585KB｜

Script

爪剥がしゲーム

残り時間:

【爪剥がしゲームの概要】画面上に表示される爪を、指でタッチして剥がすゲームです。制限時間内に爪を何本剥がせるかを競うゲームで、タッチ成功で+1ポイント、失敗で-1ポイントとなります。画面上のスタートボタンを押すとゲームが開始されます。

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>爪剥がしゲーム</title>
	<style type="text/css">
		body {
			background-color: #83CFEA;
		}

h1 {
			text-align: center;
			font-size: 2rem;
			margin-top: 2rem;
			color: #FFFFFF;
		}

#timer {
			font-size: 1.5rem;
			color: #FFFFFF;
			margin-bottom: 1rem;
		}

#score {
			text-align: center;
			font-size: 2rem;
			color: #FFFFFF;
			margin-top: 1rem;
		}

#canvas {
			display: block;
			margin: 0 auto;
			border: 5px solid #FFFFFF;
			background-color: #FFD3B6;
			border-radius: 5px;
			margin-top: 2rem;
		}

#button {
			display: block;
			margin: 1rem auto;
			background-color: #FFFFFF;
			color: #000000;
			font-size: 1.5rem;
			padding: 0.5rem 1rem;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

#button:hover {
			background-color: #A3F7B5;
			color: #FFFFFF;
		}

</style>
</head>

<body>
	<h1>爪剥がしゲーム</h1>

<canvas id="canvas" width="300" height="300">Canvas not supported.</canvas>

var timer = document.getElementById("timer");
		var score = document.getElementById("score");

var maxTime = 30;
		var currentTime = maxTime;
		var interval;
		var currentScore = 0;
		var gameOver = false;

var nail = {
			x: 150,
			y: 150,
			radius: 30
		};

function drawNail() {
			ctx.beginPath();
			ctx.arc(nail.x, nail.y, nail.radius, 0, 2 * Math.PI);
			ctx.fillStyle = "#FFFFFF";
			ctx.fill();
			ctx.closePath();
		}

function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}

function draw() {
			clearCanvas();
			drawNail();
		}

function updateTime() {
			timer.innerHTML = "残り時間: " + currentTime + "秒";
			currentTime--;

if(currentTime < 0) {
				clearInterval(interval);
				gameOver = true;
				ctx.clearRect(0, 0, canvas.width, canvas.height);

score.innerHTML = "あなたのスコアは " + currentScore + " 点です！";
			}
		}

function startGame() {
			currentTime = maxTime;
			currentScore = 0;

score.innerHTML = "";

interval = setInterval(updateTime, 1000);

canvas.addEventListener("click", function(event) {
				if(!gameOver) {
					var mouseX = event.clientX - canvas.offsetLeft;
					var mouseY = event.clientY - canvas.offsetTop;

var distance = Math.sqrt((mouseX - nail.x) * (mouseX - nail.x) + (mouseY - nail.y) * (mouseY - nail.y));

if(distance <= nail.radius) {
						currentScore++;
					} else {
						currentScore--;
					}

score.innerHTML = "スコア: " + currentScore;
				}
			});

draw();

var animate = function() {
				if(!gameOver) {
					requestAnimationFrame(animate);
					nail.x = Math.floor(Math.random() * (canvas.width - 2 * nail.radius + 1) + nail.radius);
					nail.y = Math.floor(Math.random() * (canvas.height - 2 * nail.radius + 1) + nail.radius);
					draw();
				}
			};

requestAnimationFrame(animate);
		}
	</script>

</body>
</html>

【爪剥がしゲームの概要】
画面上に表示される爪を、指でタッチして剥がすゲームです。
制限時間内に爪を何本剥がせるかを競うゲームで、タッチ成功で+1ポイント、失敗で-1ポイントとなります。
画面上のスタートボタンを押すとゲームが開始されます。