カセキホリダー画面をタップして、岩を崩していきます。岩の中にある化石を綺麗に取り出しましょう！'s game

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

No:3104

1867

←

Prev Next

→

カセキホリダー画面をタップして、岩を崩していきます。岩の中にある化石を綺麗に取り出しましょう！
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 4098 sec｜Game capacity 4.098KB｜

Script

Score: 0

←

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;
			background-color: #ade0ff;
			font-family: Arial;
		}
		#canvas {
			display: block;
			margin: 0 auto;
			background-color: #f5f5f5;
			width: 80%;
			height: 80vh;
			border-radius: 20px;
			box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
			touch-action: none;
		}
		#score {
			position: absolute;
			top: 10px;
			right: 10px;
			padding: 10px;
			font-size: 24px;
			background-color: #ffffff;
			border-radius: 20px;
			box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.25);
			z-index: 1;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">Score: 0</div>

canvas.width = window.innerWidth * 0.8;
		canvas.height = window.innerHeight * 0.8;

// Variables for the game
		var score = 0;
		var rockCount = 10;
		var rockSize = 50;
		var rockColor = "#5c3c00";
		var fossilColor = "#e6b800";
		var hammerColor = "#054d6f";
		var rockArray = [];
		var hammerX = canvas.width / 2;
		var hammerY = canvas.height - 100;
		var hammerMaxDist = rockSize * 2;
		var hammerRadius = 10;
		var isHammering = false;

// Functions for rendering the game
		function drawScore() {
			ctx.fillStyle = "#333333";
			ctx.fillText("Score: " + score, canvas.width - 150, 50);
		}

function drawHammer() {
			ctx.fillStyle = hammerColor;
			ctx.beginPath();
			ctx.arc(hammerX, hammerY, hammerRadius, 0, Math.PI * 2);
			ctx.fill();
		}

function drawRock(x, y) {
			ctx.fillStyle = rockColor;
			ctx.fillRect(x, y, rockSize, rockSize);
		}

function drawFossil(x, y) {
			ctx.fillStyle = fossilColor;
			ctx.fillRect(x + 10, y + 10, rockSize - 20, rockSize - 20);

ctx.fillStyle = rockColor;
			ctx.beginPath();
			ctx.arc(x + (rockSize / 2), y + (rockSize / 2), rockSize / 4, 0, Math.PI * 2);
			ctx.fill();
		}

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

for (var i = 0; i < rockArray.length; i++) {
				drawRock(rockArray[i].x, rockArray[i].y);

if (rockArray[i].hasFossil) {
					drawFossil(rockArray[i].x, rockArray[i].y);
				}
			}

drawHammer();
			drawScore();
		}

// Functions for game logic
		function addRock() {
			var randomX = Math.floor(Math.random() * (canvas.width - rockSize));
			var randomY = Math.floor(Math.random() * ((canvas.height / 2) - rockSize));

rockArray.push({ x: randomX, y: randomY, hasFossil: false });
		}

function addFossil(index) {
			rockArray[index].hasFossil = true;
		}

function checkCollision(index) {
			var rockX = rockArray[index].x;
			var rockY = rockArray[index].y;
			var dist = Math.sqrt(Math.pow(hammerX - (rockX + (rockSize / 2)), 2) + Math.pow(hammerY - (rockY + (rockSize / 2)), 2));

if (dist <= hammerMaxDist) {
				if (rockArray[index].hasFossil) {
					score += 100;
				} else {
					score -= 50;
				}

rockArray.splice(index, 1);
				isHammering = false;
			}
		}

// Event listeners for hammer movement
		canvas.addEventListener("touchstart", function(event) {
			event.preventDefault();
			isHammering = true;
		});

canvas.addEventListener("touchmove", function(event) {
			event.preventDefault();
			var touchX = event.touches[0].clientX - canvas.offsetLeft;
			var touchY = event.touches[0].clientY - canvas.offsetTop;

if (touchX > hammerRadius && touchX < canvas.width - hammerRadius) {
				hammerX = touchX;
			}

if (touchY > canvas.height / 2 && touchY < canvas.height - hammerRadius) {
				hammerY = touchY;
			}
		});

canvas.addEventListener("touchend", function(event) {
			event.preventDefault();
			isHammering = false;
		});

// Main game loop
		setInterval(function() {
			if (rockArray.length < rockCount) {
				addRock();
			}

if (isHammering) {
				for (var i = 0; i < rockArray.length; i++) {
					checkCollision(i);
				}
			}

render();
		}, 1000 / 60);
	</script>
</body>
</html>