AI game creator

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

No:3164

3481

←

Prev Next

→

texture mapping
Developer User3671｜Date and time 23/6/24 0:52:37
Build time 61.134 sec｜Game capacity 5.114KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>テクスチャマッピングゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>

// テクスチャのロード
		const texture = new Image();
		texture.src = "texture.png";

// ゲーム用変数
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		const ball = {
			posX: canvas.width / 2,
			posY: canvas.height - 30,
			radius: 10,
			speedX: 2,
			speedY: -2,
			color: "😀"
		};
		const paddle = {
			posX: (canvas.width - 75) / 2,
			height: 10,
			width: 75,
			speed: 5,
			color: "🎮"
		};
		let rightPressed = false;
		let leftPressed = false;
		let score = 0;
		let lives = 3;

// キー操作のイベントリスナー
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, 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 collisionDetection() {
			for(let i=0; i<brickColumnCount; i++) {
				for(let j=0; j<brickRowCount; j++) {
					const b = bricks[i][j];
					if(b.status == 1) {
						if(ball.posX > b.posX && ball.posX < b.posX+brickWidth && ball.posY > b.posY && ball.posY < b.posY+brickHeight) {
							ball.speedY = -ball.speedY;
							b.status = 0;
							score++;
							if(score == brickRowCount*brickColumnCount) {
								alert("YOU WIN, CONGRATS!");
								document.location.reload();
							}
						}
					}
				}
			}
		}

// 描画の処理
		function draw() {

// ボールの描画
			ctx.beginPath();
			ctx.arc(ball.posX, ball.posY, ball.radius, 0, Math.PI*2);
			ctx.fillStyle = ball.color;
			ctx.fill();
			ctx.closePath();

// パドルの描画
			ctx.beginPath();
			ctx.rect(paddle.posX, canvas.height - paddle.height, paddle.width, paddle.height);
			ctx.fillStyle = paddle.color;
			ctx.fill();
			ctx.closePath();

// ブロックの描画
			for(let i=0; i<brickColumnCount; i++) {
				for(let j=0; j<brickRowCount; j++) {
					if(bricks[i][j].status == 1) {
						const brickX = (i * (brickWidth + brickPadding)) + brickOffsetLeft;
						const brickY = (j * (brickHeight + brickPadding)) + brickOffsetTop;
						bricks[i][j].posX = brickX;
						bricks[i][j].posY = brickY;
						ctx.beginPath();
						ctx.drawImage(texture, brickX, brickY, brickWidth, brickHeight);
						ctx.closePath();
					}
				}
			}

// スコアの描画
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Score: "+score, 8, 20);

// 残機の描画
			ctx.font = "16px Arial";
			ctx.fillStyle = "#0095DD";
			ctx.fillText("Lives: "+lives, canvas.width-65, 20);

// ボールとパドルの当たり判定
			if(ball.posX > paddle.posX && ball.posX < paddle.posX + paddle.width && ball.posY > canvas.height - paddle.height - ball.radius) {
				ball.speedY = -ball.speedY;
				ball.color = "🔴";
			}

// 右左のキー操作によるパドルの移動
			if(rightPressed && paddle.posX < canvas.width-paddle.width) {
				paddle.posX += paddle.speed;
			}
			else if(leftPressed && paddle.posX > 0) {
				paddle.posX -= paddle.speed;
			}

// ボールの移動
			ball.posX += ball.speedX;
			ball.posY += ball.speedY;
			if(ball.posX + ball.speedX > canvas.width-ball.radius || ball.posX + ball.speedX < ball.radius) {
				ball.speedX = -ball.speedX;
			}
			if(ball.posY + ball.speedY < ball.radius) {
				ball.speedY = -ball.speedY;
			}
			else if(ball.posY + ball.speedY > canvas.height-ball.radius) {
				if(ball.posX > paddle.posX && ball.posX < paddle.posX + paddle.width) {
					ball.speedY = -ball.speedY;
				}
				else {
					lives--;
					if(!lives) {
						alert("GAME OVER");
						document.location.reload();
					}
					else {
						ball.posX = canvas.width/2;
						ball.posY = canvas.height-30;
						ball.speedX = 2;
						ball.speedY = -2;
						ball.color = "😀";
						paddle.posX = (canvas.width-paddle.width)/2;
					}
				}
			}

// ボールとブロックの当たり判定
			collisionDetection();

requestAnimationFrame(draw);
		}

// ブロックの設定
		const brickRowCount = 3;
		const brickColumnCount = 5;
		const brickWidth = 75;
		const brickHeight = 20;
		const brickPadding = 10;
		const brickOffsetTop = 30;
		const brickOffsetLeft = (canvas.width - (brickWidth + brickPadding) * brickColumnCount) / 2;
		const bricks = [];
		for(let i=0; i<brickColumnCount; i++) {
			bricks[i] = [];
			for(let j=0; j<brickRowCount; j++) {
				bricks[i][j] = { pos: 0, status: 1 };
			}
		}

// ゲーム開始
		draw();

</script>

</body>
</html>