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

No:3523

4246

←

Prev Next

→

When you go to the dog image you will die
Developer User3710｜Date and time 23/6/25 11:46:41
Build time 51.027 sec｜Game capacity 5.132KB｜

Script

Here is a simple game that meets the requirements:

Dog Avoidance Game

Use your finger to move the ball. Avoid the dog or you'll die!

In this game, the player controls a ball using their finger on a touch screen. The goal is to avoid the dog's image in the center of the screen while hitting all the bricks at the top of the screen with the ball. The player loses a life each time the ball falls out of bounds and runs out of lives if they reach 0. The game ends when the player wins by hitting all the bricks or loses by running out of lives. The score is displayed at the top left corner and the lives remaining are displayed at the top right corner.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Here is a simple game that meets the requirements:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Dog Avoidance Game</title>
</head>
<body>
	<h1>Dog Avoidance Game</h1>
	<p>Use your finger to move the ball. Avoid the dog or you'll die!</p>
	<canvas id="canvas" width="300" height="300"></canvas>

var bricks = [];
		for(var c=0; c<brickColumnCount; c++) {
			bricks[c] = [];
			for(var r=0; r<brickRowCount; r++) {
				bricks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}

document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = true;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = true;
			}
		}

function keyUpHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = false;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = false;
			}
		}

function mouseMoveHandler(e) {
			var relativeX = e.clientX - canvas.offsetLeft;
			if(relativeX > 0 && relativeX < canvas.width) {
				paddleX = relativeX - paddleWidth/2;
			}
		}

function drawBall() {
			ctx.beginPath();
			ctx.arc(x, y, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();
		}

function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Score: "+score, 8, 20);
		}

function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Lives: "+lives, canvas.width-65, 20);
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBricks();
			drawBall();
			drawPaddle();
			drawScore();
			drawLives();
			collisionDetection();

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
				dx = -dx;
			}
			if(y + dy < ballRadius) {
				dy = -dy;
			}
			else if(y + dy > canvas.height-ballRadius) {
				if(x > paddleX && x < paddleX + paddleWidth) {
					dy = -dy;
				}
				else {
					lives--;
					if(!lives) {
						alert("GAME OVER");
						document.location.reload();
					}
					else {
						x = canvas.width/2;
						y = canvas.height-30;
						dx = 2;
						dy = -2;
						paddleX = (canvas.width-paddleWidth)/2;
					}
				}
			}

if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += 7;
			}
			else if(leftPressed && paddleX > 0) {
				paddleX -= 7;
			}

x += dx;
			y += dy;

ctx.drawImage(dogImage, canvas.width/2-15, canvas.height/2-15, 30, 30);

requestAnimationFrame(draw);
		}

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