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

No:65

340

←

Prev Next

→

A game in which the dots on the canvas change
Developer anonymous｜Date and time 23/5/10 2:48:14
Build time 42.905 sec｜Game capacity 1.851KB｜

Script

ドット絵ゲーム

キャンバスのドット絵を変化させよう！

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ドット絵ゲーム</title>
	<style type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>ドット絵ゲーム</h1>
	<p>キャンバスのドット絵を変化させよう！</p>
	<canvas id="canvas" width="400" height="400"></canvas>
	<br>
	<button type="button" id="changeBtn">変化させる</button>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

drawInitialImage();

document.getElementById("changeBtn").addEventListener("click", function(){
			var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			var data = imageData.data;

for(var i = 0; i < data.length; i += 4){
				var red = data[i];
				var green = data[i+1];
				var blue = data[i+2];

if(red === 0 && green === 0 && blue === 0){ // 黒
					data[i] = 255; // 赤
				} else if(red === 255 && green === 0 && blue === 0){ // 赤
					data[i+1] = 255; // 緑
				} else if(red === 255 && green === 255 && blue === 0){ // 黄色
					data[i+2] = 255; // 青
				} else if(red === 255 && green === 255 && blue === 255){ // 白
					data[i] = 0; // 黒
					data[i+1] = 0; // 黒
					data[i+2] = 255; // 青
				}
			}

ctx.putImageData(imageData, 0, 0);
		});

function drawInitialImage(){
			ctx.fillStyle = "#000000";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#ff0000";
			ctx.fillRect(0, 0, canvas.width/2, canvas.height/2);

ctx.fillStyle = "#00ff00";
			ctx.fillRect(canvas.width/2, 0, canvas.width/2, canvas.height/2);

ctx.fillStyle = "#ffff00";
			ctx.fillRect(0, canvas.height/2, canvas.width/2, canvas.height/2);

ctx.fillStyle = "#ffffff";
			ctx.fillRect(canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
		}
	</script>
</body>
</html>