js简易接小球游戏与运动留言板
接小球游戏和运动留言板核心都是让一个元素在指定盒子内移动，
接小球游戏在线演示： 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;
});
});
