Drawing board It is a game to draw on the screen. When you touch the screen, a circle is generated where you are touching and you can draw a picture. The circle appears on a layer above the background. The circle will continue to be generated while you are touching. You can select (change) the color of the rectangle by selecting a color from the "Palette" below. You can also select the background color by selecting a color from "Background color". Colors can be freely created by selecting hue, saturation, and brightness. The screen on which you can draw is huge. By pressing "Reset", all circles will be deleted.'s game

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

No:2514

484

←

Prev Next

→

Drawing board It is a game to draw on the screen. ..ALL
Developer もちきなこ｜Date and time 23/6/21 20:33:59
Build time 38.811 sec｜Game capacity 3.286KB｜

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">
		#board {
			width: 100%;
			height: 100vh;
			background-color: #ffffff; /*default background color*/
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.button {
			padding: 10px;
			border-radius: 5px;
			border: none;
			color: #ffffff;
			font-size: 1.2rem;
			font-weight: bold;
			background-color: #00bfff; /*default button color*/
			cursor: pointer;
		}
		#palette {
			width: 80%;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 10px;
			z-index: 2;
		}
		#palette div {
			width: 25%;
			height: 2rem;
			background-color: #000000;
			border-radius: 5px;
			cursor: pointer;
		}
		#bg-color {
			width: 80%;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 10px;
			z-index: 2;
		}
		#bg-color div {
			width: 25%;
			height: 2rem;
			background-color: #ffffff;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="board"></div>
	<div id="palette">
		<div id="black" class="color"></div>
		<div id="red" class="color"></div>
		<div id="blue" class="color"></div>
		<div id="green" class="color"></div>
	</div>
	<div id="bg-color">
		<div id="white" class="color"></div>
		<div id="gray" class="color"></div>
		<div id="yellow" class="color"></div>
		<div id="pink" class="color"></div>
	</div>
	<button id="reset-btn" class="button">リセット</button>
	<script type="text/javascript">
		var board = document.getElementById("board");
		var palette = document.querySelectorAll(".color");
		var resetBtn = document.getElementById("reset-btn");
		var bgColors = document.querySelectorAll("#bg-color .color");

var color = "#000000"; //default color
		var bgColor = "#ffffff"; //default background color

//set background color
		board.style.backgroundColor = bgColor;

//draw circles on touch
		board.addEventListener("touchmove", function(event) {
			event.preventDefault();
			var touches = event.changedTouches;
			for (var i = 0; i < touches.length; i++) {
				var circle = document.createElement("div");
				circle.style.width = "30px";
				circle.style.height = "30px";
				circle.style.backgroundColor = color;
				circle.style.borderRadius = "50%";
				circle.style.position = "absolute";
				circle.style.left = (touches[i].pageX - 15) + "px";
				circle.style.top = (touches[i].pageY - 15) + "px";
				circle.style.zIndex = "2";
				board.appendChild(circle);
			}
		});

//select color from palette
		palette.forEach(function(element) {
			element.addEventListener("touchstart", function() {
				color = this.id;
				palette.forEach(function(element) {
					element.style.border = "none";
				});
				this.style.border = "3px solid #ffffff";
			});
		});

//select background color
		bgColors.forEach(function(element) {
			element.addEventListener("touchstart", function() {
				bgColor = this.id;
				board.style.backgroundColor = bgColor;
				bgColors.forEach(function(element) {
					element.style.border = "none";
				});
				this.style.border = "3px solid #ffffff";
			});
		});

//reset board
		resetBtn.addEventListener("touchstart", function() {
			board.innerHTML = "";
		});
	</script>
</body>
</html>