持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
页面布局：
<div id="box">
<img src="./20200428083413880.jpg" alt="" id="img2">
<ul>
<li id="open">开始游戏</li>
<li id="close">退出游戏</li>
<li id="videos">看个电影</li>
</ul>
<!-- <div id="zm">A</div> -->
<img src="../image/248391AD59D7C445067C638F2D1263F5.png" alt="" id="img1">
</div>
页面样式：
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 1000px;
height: 500px;
background-color: pink;
margin: 100px auto;
position: relative;
}
#img2 {
width: 1000px;
height: 500px;
}
.zm {
width: 30px;
line-height: 30px;
border-radius: 15px;
background-color: aqua;
text-align: center;
position: absolute;
text-align: center;
}
li:nth-of-type(1) {
background-color: deepskyblue;
width: 100px;
line-height: 30px;
text-align: center;
}
li:nth-of-type(2) {
background-color: gold;
width: 100px;
line-height: 30px;
text-align: center;
}
li:nth-of-type(3) {
background-color: aqua;
width: 100px;
line-height: 30px;
text-align: center;
}
li:nth-of-type(4) {
background-color: chartreuse;
width: 100px;
line-height: 30px;
text-align: center;
}
li:nth-of-type(5) {
background-color: rgb(255, 98, 0);
width: 100px;
line-height: 30px;
text-align: center;
}
li {
border-radius: 10px;
}
a {
text-decoration: none;
}
p {
width: 100px;
height: 90px;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50px, -40px);
}
#img1 {
z-index: 1;
width: 170px;
height: 350px;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-85px, -165px);
}
ul {
width: 100px;
height: 90px;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50px, -40px);
}
js渲染：
<script>
let img2 = document.querySelector('#img2')
function fa() {
let opens = document.querySelector('#open')
let uls = document.querySelector('ul')
opens.onclick = function () {
img2.style.display = 'none'
uls.style.display = 'none'
fn()
}
let close_closes = document.querySelector('#close')
close_closes.onclick = function () {
window.close()
}
let videos_a = document.querySelector('#videos')
videos_a.onclick = function () {
window.open('http://www.qnkk8.com/mplay/lianxuju/78705.html?78705-1-36')
}
}
function fn() {
let box = document.querySelector('#box')
let zmList = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
let time1 = setInterval(() => {
let zms = document.createElement('div')
zms.className = 'zm'
随机生成，向下取整(floor)
zms.innerHTML = zmList[Math.floor(Math.random() * 26)]
zms.style.left = Math.random() * (1000 - 30) + 'px'
// 调用随机生成的颜色
zms.style.backgroundColor = colorGet()
box.appendChild(zms)
}, 1000)
//定时器下落
// let offsetX=0
// let offsetY=0
let time2 = setInterval(function () {
获取所有的字符
document.querySelectorAll('.zm').forEach(function (a) {
//让我们的字母下落，是让div下落 offsetX,y
a.style.top = a.offsetTop + 1 + 'px'
//判断下落的范围，如果出了显示框，就给提示或停止
if (a.offsetTop >= box.offsetHeight - 30) {
alert('游戏结束了')
clearInterval(time1)
clearInterval(time2)
start()
}
})
}, 10)
定义随机随机生成颜色
function colorGet() {
//十六进制颜色 #333333 #ffffff
let colors = "0123456789ABCDEF"
let colors_logo = '#'
for (i = 0; i <= 5; i++) {
colors_logo += colors[Math.floor(Math.random() * 16)]
}
return colors_logo
}
/绑定键盘事件
window.onkeyup = function (e) {
// 解构(es6中解构赋值法)
// 获取按键字符
let { key } = e
//获取所有字符，遍历
document.querySelectorAll('.zm').forEach(a => {
if (a.innerHTML === key.toUpperCase()) {
a.remove()
}
})
}
}
死亡之后显示操作页面
function start() {
let p = document.createElement('p')
box.appendChild(p)
let li1 = document.createElement('li')
let li2 = document.createElement('li')
let li3 = document.createElement('li')
let li4 = document.createElement('li')
let li5 = document.createElement('li')
li1.innerHTML = '<a href="javascript:;">重新开始</a>'
li2.innerHTML = '<a href="javascript:;">退出游戏</a>'
li3.innerHTML = '<a href="./金山打字通收款码.html">充值变强</a>'
li4.innerHTML = '<a href="javascript:;">原地复活</a>'
li5.innerHTML = '<a href="javascript:;">返回首页</a>'
p.appendChild(li1)
p.appendChild(li2)
p.appendChild(li3)
p.appendChild(li4)
p.appendChild(li5)
let cz = li3.children[0]
点击充值按钮
cz.onclick = function () {
p.style.display = 'none'
}
window.onkeyup = function () {
p.style.display = 'none'
window.open("./金山打字通收款码.html")
// window.close()
}
点击退出
let tuichu = li2.children[0]
tuichu.onclick = function () {
window.close()
}
window.onkeyup = function () {
let zms = document.querySelectorAll('.zm')
for (let i of zms) {
i.remove()
}
p.style.display = 'none'
fn()
}
点击重新开始
let kaishi = li1.children[0]
kaishi.onclick = function () {
let zms = document.querySelectorAll('.zm')
for (let i of zms) {
i.remove()
}
p.style.display = 'none'
fn()
}
/复活
let fuhuo = li4.children[0]
fuhuo.onclick = function () {
let zms1 = document.querySelector('.zm')
zms1.remove()
p.style.display = 'none'
fn()
}
返回首页
let fanhui = li5.children[0]
fanhui.onclick = function () {
window.history.go(0)
}
}
fa()
</script>
首页：
游戏结束给出提示：
