前言
快过年,各大游戏中都陆续添加了打年兽的休闲玩法。之前学习了css的3D相关知识,一直想实践一下,这次就使用css加上js实现3D版打年兽小游戏。
效果演示
游戏玩法说明
- 完全模拟打地鼠游戏的玩法,将地鼠换成年兽,使用锤子敲击得分。
- 每敲中5次速度升级一次,速度提升100毫秒。
- 3次失败后游戏结束。
实现流程
设计3D地面
将main层div作为3D容器,ground层div作为地面,通过X,Y坐标旋转调整地面的默认角度transform: rotateY(30deg) rotateX(60deg);
,同时将ground层设置成3D容器,为后面在地面上添加年兽准备。代码如下。
页面元素:
<div class="main">
<div class="ground">
</div>
</div>
样式布局:
.main{
width:400px;height:400px;
margin:0px auto;
perspective-origin: 50% 200px;
perspective: 2000px;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.main .ground{
width:100%;height:100%;
transform: rotateY(30deg) rotateX(60deg);
background: rgb(7, 255, 138);
position: relative;
perspective-origin: 50% 100px;
perspective: 1000px;
transform-style: preserve-3d;
backface-visibility: hidden;
}
设计3D相机效果
我们知道3D坐标分为X、Y、Z三个方向,X轴为水平方向,Y轴为竖直方向,Z轴为垂直与屏幕方向。要实现上图中的效果,保持Z轴不变,只改变X、Y轴旋转角度即可。
具体操作逻辑为监听鼠标点击后的移动事件,通过计算当前鼠标位置相对于鼠标刚点击时的位置X、Y轴像素偏移量动态调整、Y轴的旋转角度,代码如下。
document.addEventListener("mousedown",function(e){
click = true;
sp = {x:e.clientX,y:e.clientY}
});
document.addEventListener("mousemove",function(e){
if(!click){
return;
}
var ydeg = (deg.y + (e.clientX - sp.x)/10);
var xdeg = (deg.x - (e.clientY - sp.y)/10);
$('.ground').css({transform:'rotateY('+ydeg+'deg) rotateX('+xdeg+'deg)'})
deg = {x:xdeg,y:ydeg};
sp = {x:e.clientX,y:e.clientY}
});
document.addEventListener("mouseup",function(e){
click = false;
})
设计地洞效果
通过白色背景线条在水平和竖直方向将地面分成4X4棋盘,每一片代表一个地洞,代码如下。
var topVal = 100;
for (var i = 0; i < 4; i++) {
var div = document.createElement("div");
div.style.top = topVal + "px";
div.style.left = "0px";
div.style.width = '100%';
div.style.height = '2px';
$('.ground').append(div)
topVal += 100;
}
var leftVal = 100;
for (var i = 0; i < 4; i++) {
var div = d