js簡易接小球遊戲與運動留言板
阿新 • • 發佈:2020-12-31
接小球遊戲和運動留言板核心都是讓一個元素在指定盒子內移動,
接小球遊戲線上演示: http://hymhub.gitee.io/ball-game-demo
運動留言板線上演示:http://hymhub.gitee.io/comment-demo
接小球原始碼:
<!-- html --> <body> <article> <main> <h3>0分</h3> <div></div> <section id="ctrl"></section> </main> </article> </body>
// css body{ margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; background-color: #000000; } article{ padding: 8px; box-sizing: border-box; height: 100vh; >main{ width: 1200px; height: 96%; min-height: 500px; margin: 0 auto; position: relative; box-shadow: 0 0 10px yellowgreen; border: 2px solid yellowgreen; >div { width: 40px; height: 40px; background-color: #f0ffef; position: absolute; border-radius: 40px; } >section#ctrl{ width: 200px; height: 10px; position: absolute; bottom: 10px; background-color: yellowgreen; } >h3{ position: absolute; top: 20px; left: 20px; color: #f0ffef; font-size: 26px; margin: 0; } } }
// js window.addEventListener('load', () => { const mainBox = document.querySelector('main'); const h3 = mainBox.querySelector('h3'); const qiu = mainBox.querySelector('div'); const ctrl = document.getElementById('ctrl'); const viewPortWidth = mainBox.clientWidth; const viewPortHeight = mainBox.clientHeight; let x = 0; //橫座標 let y = 0; //縱座標 let tempX = 6; let tempY = 6; let ctrlMove = 0; let speed = 20; let intervleCt; let fenShu = 0, beiShu = 1; function run() { intervleCt = setInterval(() => { x += tempX; y += tempY; qiu.style.left = x + 'px'; qiu.style.top = y + 'px'; //碰到上邊界 if (y < 0 || y > viewPortHeight - 60) { tempY = -tempY; } //碰到左右邊界 if (x < 0 || x > viewPortWidth - 40) { tempX = -tempX; } if(y > viewPortHeight - 60) { if (x > ctrlMove + 200 || x < ctrlMove - 40) { clearInterval(intervleCt); alert('遊戲結束'); tempX = 6; tempY = 6; speed = 20; x = 0; y = 0; beiShu = 1; fenShu = 0; h3.innerHTML = `0分`; run(); }else { if (--speed == 1) { speed = 2; if (tempX > 0) { tempX++; }else { tempX--; } if (tempY > 0) { tempY++; }else { tempY--; } } h3.innerHTML = `${fenShu += 10 * beiShu++}分`; clearInterval(intervleCt); run(); } } }, speed); } run(); mainBox.addEventListener('mousemove', e => { if (e.target.localName == 'main') { if (e.layerX < 100) { ctrl.style.left = '0px'; }else if (e.layerX > viewPortWidth - 100) { ctrl.style.left = viewPortWidth - 200 + 'px'; }else { ctrl.style.left = e.layerX - 100 + 'px'; } ctrlMove = ctrl.offsetLeft; } }); });
運動留言板原始碼:
<!-- html -->
<body>
<article>
<main>
<!-- 等待建立 -->
</main>
</article>
<footer>
<input type="text" name="" id="" maxlength="20">
<input type="button" value="留言">
<input type="button" value="批量生產toggle">
</footer>
</body>
// css
body{
margin: 0;
padding: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background-color: #000000;
}
article{
padding: 8px;
box-sizing: border-box;
height: 80vh;
>main{
position: relative;
height: 100%;
box-shadow: 0 0 10px yellowgreen;
border: 2px solid yellowgreen;
>div {
width: 200px;
height: 80px;
background-color: #f0ffef;
position: absolute;
text-align: center;
line-height: 80px;
border-radius: 40px;
font-size: 20px;
font-weight: bolder;
}
}
}
footer{
height: 20vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
>input[type="text"]{
box-sizing: border-box;
width: 400px;
height: 40px;
border: 1px solid yellowgreen;
}
>input[type="button"]{
box-sizing: border-box;
width: 80px;
height: 40px;
border: 1px solid yellowgreen;
color: #006d2d;
background-color: #f0ffef;
}
>input:focus{
outline: 1px solid green;
}
>input:last-of-type{
width: 120px;
}
}
// js
window.addEventListener('load', () => {
const mainBox = document.querySelector('main');
const viewPortWidth = mainBox.clientWidth;
const viewPortHeight = mainBox.clientHeight;
function add(el, width) {
let x = parseInt(Math.random() * (viewPortWidth - width)); //橫座標
let y = parseInt(Math.random() * (viewPortHeight - 80)); //縱座標
let tempX = 1;
let tempY = 1;
el.style.left = x + 'px';
el.style.top = y + 'px';
setInterval(() => {
x += tempX;
y += tempY;
el.style.left = x + 'px';
el.style.top = y + 'px';
//碰到上下邊界
if (y > viewPortHeight - 80 || y < 0) {
tempY = -tempY;
}
//碰到左右邊界
if (x < 0 || x > viewPortWidth - width) {
tempX = -tempX;
}
}, 10);
}
function createOne(str) {
if (mainBox.children.length > 80) {
clearInterval(timer);
alert('數量已達上限');
return;
}
const div = document.createElement('div');
let color1 = parseInt(Math.random() * 256), color2 = parseInt(Math.random() * 256), color3 = parseInt(Math.random() * 256);
if (str) {
inputs[0].value = str.substring(parseInt(Math.random() * str.length), parseInt(Math.random() * str.length));
}
if (inputs[0].value.length == 0) {
return;
}
div.innerHTML = `<span>${inputs[0].value}</span>`;
div.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
div.style.color = `rgb(${255 - color1},${255- color2},${255 - color3})`;
div.style.width = `${inputs[0].value.length * 20 + 40}px`;
mainBox.appendChild(div);
add(div, inputs[0].value.length * 20 + 40);
}
const inputs = document.querySelectorAll('footer > input');
inputs[1].addEventListener('click', () => {
createOne();
});
let timer, flag = true;
const strs = 'aKjpjfHjojJHf';
inputs[2].addEventListener('click', () => {
clearInterval(timer);
if (flag) {
timer = setInterval(() => {
createOne(strs);
},200);
}
flag = !flag;
});
});