js+css实现3D打年兽小游戏,老好玩了

前言

快过年，各大游戏中都陆续添加了打年兽的休闲玩法。之前学习了css的3D相关知识，一直想实践一下，这次就使用css加上js实现3D版打年兽小游戏。

效果演示

游戏玩法说明

1. 完全模拟打地鼠游戏的玩法，将地鼠换成年兽，使用锤子敲击得分。
2. 每敲中5次速度升级一次，速度提升100毫秒。
3. 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&#