css3+javascript实现3D游戏：二阶魔方

最新推荐文章于 2023-01-06 21:53:47 发布

jupeizhong

最新推荐文章于 2023-01-06 21:53:47 发布

阅读量2.3k

点赞数

分类专栏： web 文章标签： 3d html css3 javascript 游戏

本文链接：https://blog.csdn.net/jupeizhong/article/details/38762029

版权

本文介绍了如何利用CSS3和JavaScript技术制作一个3D二阶魔方游戏。通过鼠标操作改变视角，键盘控制魔方六个面的旋转。尽管UI设计简单，但核心在于方块和色块位置的3D变换算法。由于时间紧迫，代码未经优化，呈现较为原始的状态。

摘要由CSDN通过智能技术生成

嗯，之前用css3和javascript实现3D旋转立方体的时候就说过了，要用其做一个3D小游戏。想了想魔方应该挺简单的，于是花了一些时间倒腾出来一个二阶魔方。

效果图如下：

操作：鼠标按下拖动改变视角，AZSXDCFVGBHN十二个键盘按键控制6个面的旋转（好吧我承认我UI设计得很糟糕）。

技术主要是css3和js编程，算法设计主要是方块、色块的位置变换。最近时间紧张，代码未经优化，写得比较乱。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{text-align:center}
			#stage
			{
				background-color: grey;
				margin: auto;
				width: 500px;
				height: 500px;
			}
			#screen
			{
				width: 500px;
				height: 500px;
				-webkit-perspective:550px;
				-webkit-perspective-origin: 100% 60%;
				transform-style: preserve-3d;
			}
			.block
			{
				position:absolute;
				left:200px;
				top: 200px;
				height: 80px;
				width: 80px;
				border: 0px solid red;
				background-color: rgba(255, 0, 0, 0.3);
				line-height: 80px;
				font-size: 60px;
				color: black;
			}
		</style>
	</head>
	<body onselectstart="return false" onkeydown = "key_down(event)" οnmοusemοve="mouse_move(event)" οnmοusedοwn="mouse_down(event)" onmouseup = "mouse_up(event)">
		<div id = "stage">
			<div id = "screen">
				<script>
					for (i = 0;i < 24;++i)
						document.write('<div class = "block"></div>');
				</script>
			</div>
		</div>
	</body>
	<script>
		var face_size = 200;
		var block_size = 80;
		var r_speed = 15;
		var r_x = 0;
		var r_y = 0;
		var r_z = 0;
		function CreateBrick(_x, _y, _z, _face0, _face1, _face2)
		{
			temp = new Object();
			temp.coord = new Array(_x, _y, _z);
			temp.faces = new Array();
			temp.faces[0] = _face0;