SOURCE

var w = 40;
var num = 0;
var ctx;
var c;
var px,py;
var angle = 0.25 * Math.PI;
var deep = 0.6;
var box = [];
var size;
function init(){
	size = $('.box').width();
	c = document.getElementById("maze");
	ctx = c.getContext("2d");
	c.width = size;
	c.height = size;
	var vx = Math.cos(angle) * deep;
	var vy = Math.sin(angle) * deep;
	px = size * vx / (vx + 1);
	py = size / (vy + 1);
}
function reset(){
	var level = parseInt($('#level').val());
	ctx.clearRect(0,0,size,size);
	grid();
	box = [];
	var max = [];
	for (var i = 0;i < level;i++){
		max.push(level);
	}
	for (var l = 1;l < level + 1;l++){
		for (var h = 1;h < level + 1;h++){
			if (l > 1 || h > 1){
				if (Math.floor(Math.random() * (level + 1)) == 0){
					for (i = 0;i < level;i++){
						if (i >= h - 2){
							max[i]--;
						}
					}
				}
			}
			if (max[h - 1] > 0){
				for (i = 1;i <= max[h - 1];i++){
					box.push({'x': i,'y':h,'z':l});
				}
			}
		}
	}
	//console.log(box);
	for (var i = 0;i < box.length;i++){
		draw(box[i].x,box[i].y,box[i].z);
	}
    $('#sum').val('').focus();
}
function grid(){
//	ctx.beginPath();
//	ctx.arc(px,py,r,0,2*Math.PI);
//	ctx.stroke();
	var r = w * 10;
	for (var i = 0;i < 10;i++){
		ctx.beginPath();
		ctx.moveTo(px,py - i * w);
		ctx.lineTo(px + r,py - i * w);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(px + i * w,py);
		ctx.lineTo(px + i * w,py - r);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(px,py - i * w);
		ctx.lineTo(px - r * Math.cos(angle) * deep,py - i * w + r * Math.sin(angle) * deep);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(px - i * w * Math.cos(angle) * deep,py + i * w * Math.sin(angle) * deep);
		ctx.lineTo(px - i * w * Math.cos(angle) * deep,py - r + i * w * Math.sin(angle) * deep);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(px - i * w * Math.cos(angle) * deep,py + i * w * Math.sin(angle) * deep);
		ctx.lineTo(px - i * w * Math.cos(angle) * deep + r,py + i * w * Math.sin(angle) * deep);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(px + i * w,py);
		ctx.lineTo(px + i * w - r * Math.cos(angle) * deep,py + r * Math.sin(angle) * deep);
		ctx.stroke();
	}
}
function draw(x,y,z){
	//var dx,dy;
	//dx = px + (x - 1) * w - (y - 1) * w * Math.cos(angle);
	//dy = py + (y - 1) * w * Math.sin(angle) - (z - 1) * w;
	//front
	ctx.beginPath();
	ctx.rect(px + (x - 1) * w - y * w * Math.cos(angle) * deep,py + y * w * Math.sin(angle) * deep - z * w,w,w);
	ctx.stroke();
	ctx.closePath();
	ctx.fillStyle="yellow";
	ctx.fill();
	//top
	ctx.beginPath();
	ctx.moveTo(px + (x - 1) * w - y * w * Math.cos(angle) * deep,py + y * w * Math.sin(angle) * deep - z * w);
	ctx.lineTo(px + x * w - y * w * Math.cos(angle) * deep,py + y * w * Math.sin(angle) * deep - z * w);
	ctx.lineTo(px + x * w - (y - 1) * w * Math.cos(angle) * deep,py + (y - 1) * w * Math.sin(angle) * deep - z * w);
	ctx.lineTo(px + (x - 1) * w - (y - 1) * w * Math.cos(angle) * deep,py + (y - 1) * w * Math.sin(angle) * deep - z * w);
	ctx.closePath();
	ctx.stroke();
	ctx.fillStyle="red";
	ctx.fill();
	//right
	ctx.beginPath();
	ctx.moveTo(px + x * w - y * w * Math.cos(angle) * deep,py + y * w * Math.sin(angle) * deep - z * w);
	ctx.lineTo(px + x * w - (y - 1) * w * Math.cos(angle) * deep,py + (y - 1) * w * Math.sin(angle) * deep - z * w);
	ctx.lineTo(px + x * w - (y - 1) * w * Math.cos(angle) * deep,py + (y - 1) * w * Math.sin(angle) * deep - (z - 1) * w);
	ctx.lineTo(px + x * w - y * w * Math.cos(angle) * deep,py + y * w * Math.sin(angle) * deep - (z - 1) * w);
	ctx.closePath();
	ctx.stroke();
	ctx.fillStyle="blue";
	ctx.fill();
}
$(function(){
	init();
	reset();
});
function check(){
	if (parseInt($('#sum').val()) == box.length){
		alert('正确！');
	}else{
		alert('错误！');
	}
	$('#sum').val('').focus();
}

<div class="box">
	<div class="ctrl">
		难度
		<select id="level"><option value="3">低</option><option value="4">中</option><option value="5">高</option></select>
		<button onclick="reset();">刷新</button>
		&nbsp;数量
		<input type="text" id="sum" size="2" maxlength="2">
		<button onclick="check();">提交</button>
	</div>
	<canvas id="maze"></canvas>
</div>

* {margin:0 auto; padding:0;list-style:none;text-decoration:none;}
body {background:#0e7142;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
body:after {content:'v1.0_1111';position:fixed;left:0;bottom:0;color:#0C6138;line-height:16px;font-size:12px;}
.box {width: 677px;}

.ctrl {width:100%;height:auto;padding:10px 0;background:#084428;border-radius:10px;color:#FFF;text-align:center;line-height:30px;margin-top:10px;}
.ctrl:after {content: '';display: block;height: 0;clear: both;}
.ctrl button {display:inline-block;width:60px;height:30px;text-align:center;background:#C32641;color:#FFF;border-radius:3px;vertical-align: top;}

@media (max-width: 677px){
	.box {width: 100%;height: auto;border: none;}
	
}