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

No:2504

133

←

Prev Next

→

Dot Picture Games
Developer User3512｜Date and time 23/6/21 18:58:06
Build time 22.981 sec｜Game capacity 2.125KB｜

Script

では、以下のようなドット絵ゲームの実装例を示します。

ドット絵ゲーム

このゲームは、赤い四角形を画面内で左から右へ動かし、クリックした位置に移動するシンプルな内容です。スマホでも問題なく遊ぶことができます。また、スタートボタン、プレイボタン、リセットボタンを用意して、ユーザーが操作を行えるようにしています。

←

Prev　Next

→ 　

Back　

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

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

では、以下のようなドット絵ゲームの実装例を示します。

<!DOCTYPE html>
<html>
<head>
	<title>ドット絵ゲーム</title>
	<style>
		canvas {
			border: solid 1px #000000;
		}
	</style>
</head>
<body>
	<h1>ドット絵ゲーム</h1>
	<canvas id="game" width="400" height="400"></canvas>
	<button id="start" onclick="startGame()">スタート</button>
	<button id="play" style="display:none" onclick="playGame()">プレイ</button>
	<button id="reset" style="display:none" onclick="resetGame()">リセット</button>

let player = {
			x: 10,
			y: 10,
			width: 10,
			height: 10,
			color: "#FF0000"
		};

function drawPlayer() {
			context.fillStyle = player.color;
			context.fillRect(player.x, player.y, player.width, player.height);
		}

function updatePlayer() {
			player.x += 10;
		}

function gameLoop() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawPlayer();
			updatePlayer();
		}

function startGame() {
			document.getElementById("start").style.display = "none";
			document.getElementById("play").style.display = "block";
			document.getElementById("reset").style.display = "block";
			setInterval(gameLoop, 1000/60);
		}

function playGame() {
			canvas.onclick = function(event) {
				player.x = event.pageX - canvas.offsetLeft - player.width/2;
				player.y = event.pageY - canvas.offsetTop - player.height/2;
			}
		}

function resetGame() {
			player.x = 10;
			player.y = 10;
			document.getElementById("play").style.display = "none";
			document.getElementById("reset").style.display = "none";
			document.getElementById("start").style.display = "block";
		}
	</script>
</body>
</html>