demo练习
编辑器制作效果展示:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {font-size: 100px}
body {overflow: hidden;font-size: 16px}
.d {transition: all 5s;width: 1rem;height: 1rem;box-sizing: border-box;font-size: 0.5rem;text-align: center;color: white;position: absolute;line-height: 0.8rem}
#bt {cursor: pointer;transition: all 0.5s;font-size: 0.3rem;color: white;position: absolute;bottom: 0.05rem;left: 67%;outline: 0;width: 3rem;height: 0.5rem;background-color: deeppink;border-radius: 0.5rem}
#bt:hover {background-color: yellow;color: red;transform: scale(1.2)}
#i {border: 0;position: absolute;left: 35%;width: 4rem;bottom: 0.05rem;height: 0.5rem;font-size: 0.5rem;text-align: center;outline: 0.05rem solid blue;color: white;background-color: deepskyblue}
#d {transition: all 0.5s;width: 4rem;height: 0.5rem;background-color: saddlebrown;position: absolute;left: 35%;bottom: 0.7rem}
#d1 {display: none;width: 0.2rem;background-color: gold;bottom: 0px;position: absolute}
</style>
</head>
<body>
<input type="text" id="i">
<button id="bt">重新开始</button>
<div id="d"></div>
<script>
var str;
var num = 0;
var timer;
var obt = document.querySelector("#bt");
var oi = document.querySelector("#i");
var od1 = document.querySelector("#d");
oi.addEventListener("input", runn1);
// 对输入的内容进行判断/优化
function runn1() {
var ov = oi.value;
if (oi.value.trim() != "") {
setTimeout(() => {
oi.value = ""
}, 100);
}
var odd = document.querySelectorAll(".d");
// 跳板接收方块
for (var i = 0; i < odd.length; i++) {
if (odd[i].innerText == ov.toUpperCase()) {
od1.style.left = odd[i].offsetLeft - (od1.offsetWidth - odd[i].offsetWidth) / 2 + "px";
odd[i].remove();
}
}
num--;
}
obt.addEventListener("click", run);
// 实现消除方块
function run() {
num = 0;
runing();
var odd = document.querySelectorAll(".d");
for (var i = 0; i < odd.length; i++) {
odd[i].remove();
}
}
runing();
function runing() {
timer = setInterval(crdiv, 1000);
}
// 游戏逻辑实现
function crdiv() {
num++;
var od = document.createElement("div");
document.body.appendChild(od);
od.className = "d";
crcolor();
var str = str;
od.style.backgroundColor = str;
crcolor();
var str1 = str;
od.style.border = "5px solid " + str1;
od.innerText = String.fromCharCode(parseInt(Math.random() * 25) + 65)
var ovx = parseInt(Math.random() * (document.documentElement.clientWidth - od.offsetWidth)) / 100;
var ovy = -parseInt(Math.random() * document.documentElement.clientHeight / 8) / 100;
od.style.left = ovx + "rem";
od.style.top = ovy + "rem";
function crcolor() {
var r = Math.random() * 256;
var g = Math.random() * 256;
var b = Math.random() * 256;
str = "rgba(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ",1)";
return str;
}
if (num > 20) {
clearInterval(timer);
}
runn(od);
if (num > 10) {
alert("你输了!!!");
clearInterval(timer);
var odd = document.querySelectorAll(".d");
for (var i = 0; i < odd.length; i++) {
odd[i].remove();
}
}
}
function runn(obj) {
obj.style.top = (document.documentElement.clientHeight) / 100 + "rem";
}
screen();
// 实现响应式
function screen() {
window.addEventListener("resize", run);
function run() {
var scale = document.documentElement.clientWidth / 1366;
document.documentElement.style.fontSize = 100 * scale + "px";
}
}
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了,么么哒!