JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
$$demo <img id="hammer" class="hammer" src="/examples/assets/锤头.png" alt="" />
<div class="info"> <p id="label">倒计时:<span id="counter"></span> 秒</p> <p id="finished" hidden>游戏结束</p> <p>得分:<span id="score"></span> 分</p> </div> <div id="container" class="container"></div> <div id="startBtn" class="start" onclick="start()">开始游戏</div> <script> document.body.addEventListener("mousedown", function () { hammer.style.transform = "rotate(-90deg)" const hit = new Audio("/examples/assets/捶打.mp3") hit.play() })
document.body.addEventListener("mouseup", function () {
hammer.style.transform = null
})
document.body.addEventListener("mousemove", function (event) {
hammer.style.top = event.clientY - 150 + "px"
hammer.style.left = event.clientX + 50 + "px"
})
let holeList = []
for (var i = 0; i < 9; i++) {
const hole = document.createElement("img")
hole.src = "/examples/assets/宝贝球.png"
hole.classList.add("hole")
holeList.push(hole)
container.append(hole)
}
let counterValue = 10
counter.textContent = counterValue
let scoreValue = 0
score.textContent = scoreValue
const background = new Audio("/examples/assets/背景.mp3")
function start() {
counterValue = 10
counter.textContent = counterValue
scoreValue = 0
score.textContent = scoreValue
label.hidden = false
finished.hidden = true
startBtn.hidden = true
background.loop = true
background.volume = 0.5
background.play()
const running = setInterval(function () {
if (counterValue == 0) {
clearInterval(running)
label.hidden = true
finished.hidden = false
startBtn.hidden = false
background.currentTime = 0
background.pause()
return
}
counterValue--
counter.textContent = counterValue
// 随机地鼠
let idx = Math.floor(Math.random() * holeList.length)
if (Math.floor(Math.random() * 4) == 0) {
// 1/4的概率出皮卡丘
// 击中皮卡丘扣分
holeList[idx].src = "/examples/assets/皮卡丘.png"
holeList[idx].onmousedown = function () {
scoreValue--
holeList[idx].src = "/examples/assets/错.png"
score.textContent = scoreValue
holeList[idx].onmousedown = null
}
} else {
// 3/4的概率出地鼠
// 击中地鼠得分
holeList[idx].src = "/examples/assets/地鼠.png"
holeList[idx].onmousedown = function () {
scoreValue++
holeList[idx].src = "/examples/assets/对.png"
score.textContent = scoreValue
holeList[idx].onmousedown = null
}
}
setTimeout(function () {
// 1 秒后消失
holeList[idx].onmousedown = null
holeList[idx].src = "/examples/assets/宝贝球.png"
}, 1000)
}, 1000)
}
</script> <style> body { /* 隐藏鼠标 */ cursor: none;
/* 禁止选择元素 */
user-select: none;
/* 禁止拖拽元素 */
-webkit-user-drag: none;
}
* {
/* 所有元素继承禁止拖拽 */
-webkit-user-drag: inherit;
}
.info {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
font-size: 36px;
}
.hammer {
transform-origin: bottom;
transform: rotate(-30deg);
transition: transform 0.1s;
position: fixed;
top: 0;
left: 0;
z-index: 99;
pointer-events: none;
}
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 600px;
height: 600px;
margin: 0 auto;
}
.hole {
width: 30%;
height: 30%;
}
.start {
margin: 0 auto;
width: max-content;
color: white;
font-size: 20px;
font-weight: bold;
background-color: #fe0032;
padding: 10px 20px;
border: 6px solid #080405;
border-radius: 6px;
}
.start:hover {
background-color: #c40027;
}
</style>
$$