AI game creator

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

No:3409

1817

←

Prev Next

→

Z Buffer
Developer User3694｜Date and time 23/6/25 0:54:24
Build time 35.106 sec｜Game capacity 3.115KB｜

Script

アプリを作りました！Zバッファゲームです！以下がプログラムのコードです。

このゲームのルールは、赤い四角形であるプレイヤーを操作し、青い四角形である敵を避けることです。プレイヤーが青い四角形に接触すると、スコアが1加算され、敵は別のランダムな位置に再配置されます。操作は、スマホのタッチで行われます。プレイヤーを動かすには、画面上をスワイプしてください。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

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

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

アプリを作りました！Zバッファゲームです！

以下がプログラムのコードです。

<!DOCTYPE html>
<html>
<head>
	<title>Zバッファゲーム</title>
	<style>
	canvas {
		width: 100%;
		height: 100%;
	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

var screenWidth = window.innerWidth;
		var screenHeight = window.innerHeight;

canvas.width = screenWidth;
		canvas.height = screenHeight;

var playerX = screenWidth / 2;
		var playerY = screenHeight / 2;

var playerSize = 50;

var enemyX = Math.floor(Math.random() * screenWidth);
		var enemyY = Math.floor(Math.random() * screenHeight);

var enemySize = 20;

var score = 0;

var zBuffer = [];

for (var i = 0; i < screenWidth; i++) {
			zBuffer[i] = [];
			for (var j = 0; j < screenHeight; j++) {
				zBuffer[i][j] = -Infinity;
			}
		}

function update() {
			movePlayer();
			draw();
		}

function movePlayer() {
			var touchX = null;
			var touchY = null;

canvas.addEventListener("touchstart", function(e) {
				touchX = e.touches[0].clientX;
				touchY = e.touches[0].clientY;
			});

canvas.addEventListener("touchmove", function(e) {
				playerX = e.touches[0].clientX;
				playerY = e.touches[0].clientY;
			});

canvas.addEventListener("touchend", function(e) {
				touchX = null;
				touchY = null;
			});

if (touchX !== null && touchY !== null) {
				playerX = touchX;
				playerY = touchY;
			}
		}

function draw() {
			ctx.clearRect(0, 0, screenWidth, screenHeight);

ctx.fillStyle = "red";
			ctx.fillRect(playerX - playerSize / 2, playerY - playerSize / 2, playerSize, playerSize);

ctx.fillStyle = "blue";
			ctx.fillRect(enemyX - enemySize / 2, enemyY - enemySize / 2, enemySize, enemySize);

var imageData = ctx.getImageData(0, 0, screenWidth, screenHeight);
			var pixels = imageData.data;

for (var x = 0; x < screenWidth; x++) {
				for (var y = 0; y < screenHeight; y++) {
					var index = (y * screenWidth + x) * 4;

if (pixels[index] === 255 && pixels[index + 1] === 0 && pixels[index + 2] === 0) {
						zBuffer[x][y] = 1;
					} else if (pixels[index] === 0 && pixels[index + 1] === 0 && pixels[index + 2] === 255) {
						if (zBuffer[x][y] > -Infinity) {
							enemyX = Math.floor(Math.random() * screenWidth);
							enemyY = Math.floor(Math.random() * screenHeight);
							score++;
						}
					}
				}
			}

ctx.fillStyle = "black";
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, 50, 50);
		}

setInterval(update, 1000 / 60);
	</script>
</body>
</html>

このゲームのルールは、赤い四角形であるプレイヤーを操作し、青い四角形である敵を避けることです。プレイヤーが青い四角形に接触すると、スコアが1加算され、敵は別のランダムな位置に再配置されます。

操作は、スマホのタッチで行われます。プレイヤーを動かすには、画面上をスワイプしてください。

楽しんでプレイしてください！