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

No:1548

909

←

Prev Next

→

picross
Developer AI絵師｜Date and time 23/6/18 18:27:39
Build time 47.076 sec｜Game capacity 3.745KB｜

Script

ピクロス

概要：ピクロスと呼ばれる、セルを着色して隠された絵を作り出す謎解きゲームです。画面には、ピクロスの問題が表示され、プレーヤーはセルをクリックして着色していきます。セルは何度でもクリックでき、選択済みのセルは着色が変わり、解答チェックを行い、正解かどうかを判断することができます。問題は3種類用意されており、ランダムに表示されます。スマートフォンでも遊びやすいようにレイアウトが最適化されています。

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ピクロス</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			text-align: center;
		}

h1 {
			color: #1a0dab;
			margin-top: 30px;
		}

#puzzle {
			background-color: #fff;
			border: 1px solid #ccc;
			margin: 30px auto;
			padding: 10px;
			max-width: 90%;
		}

.row {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10px;
		}

.col {
			height: 50px;
			width: 50px;
			border: 1px solid #999;
			background-color: #eee;
			margin: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			cursor: pointer;
		}

.col:hover {
			background-color: #ddd;
		}

.col.selected {
			background-color: #8bc34a;
			color: #fff;
		}

.check {
			margin-top: 20px;
			background-color: #8bc34a;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 6px;
			cursor: pointer;
		}

.check:hover {
			background-color: #689f38;
		}
	</style>
</head>
<body>
	<h1>ピクロス</h1>
	<div id="puzzle"></div>
	<button id="check-btn" class="check">解答チェック</button>
	<script>
		const PUZZLES = [
			[[1, 0, 1], [1, 1, 0], [0, 1, 1]],
			[[1, 0, 1, 0], [1, 0, 1, 0], [1, 1, 1, 0], [0, 0, 1, 1]],
			[[0, 0, 1, 1, 1], [1, 1, 1, 0, 1], [1, 1, 1, 0, 1], [0, 0, 1, 1, 0], [1, 1, 1, 0, 0]]
		];

const puzzleContainer = document.querySelector("#puzzle");
		const checkButton = document.querySelector("#check-btn");
		let selectedCols = [];

init();
	</script>
</body>
</html>