HTML接球反弹的游戏,小球碰撞反弹游戏（并不完善）

.main {

width: 400px;

height: 610px;

/*border: 1px solid black;*/

background: #ccc;

position: relative;

}

.wrap {

position: absolute;

font-size: 2rem;

right: 10px;

top: 10px;

color: blueviolet;

z-index: 22;

width: 150px;

text-shadow: 3px 3px 5px darkslategray;

}

.box1 {

position: absolute;

bottom: 0px;

width: 100px;

height: 10px;

background: black;

}

.box2 {

position: absolute;

width: 50px;

height: 50px;

background: red;

}

.zz {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0px;

top: 0px;

text-align: center;

display: none;

}

.restart {

width: 300px;

background: #f00;

font-size: 3rem;

box-shadow: 3px 3px 5px brown;

color: white;

padding: 10px 20px;

border-radius: 10px;

margin: auto;

cursor: pointer;

}

.text1 {

font-size: 2rem;

color: white;

margin-top: 100px;

padding: 50px 0px;

text-shadow: 3px 3px 5px royalblue;

}

得分：0

Game Over ! !

重新开始

var main = document.querySelector(".main");

var wrap = document.querySelector(".wrap");

//木板

var box1 = document.querySelector(".box1");

//小方块

var box2 = document.querySelector(".box2");

//小方块落地时弹出

var zz = document.querySelector(".zz");

var text1 = document.querySelector(".text1");

var restart = document.querySelector(".restart");

//在“重新开始”上绑定点击事件

restart.onclick = jj;

//小方块的移动量

var disL = 60;

var disa = main.offsetWidth - box1.offsetWidth;

var disb = main.offsetHeight - box1.offsetHeight;

//绑定键盘事件 按下键盘上的任意键时触发

document.onkeydown = jfy;

function jfy() {

var event = window.event;

switch(event.keyCode) {

//键盘左键

case 37:

if(box1.offsetLeft > 0) {

//木板向左移动

box1.style.left = box1.offsetLeft - disL + "px";

}

break;

//键盘上键

case 38:

if(box1.offsetTop > 0) {

box1.style.top = box1.offsetTop - disL + "px";

}

break;

//键盘右键

case 39:

if(box1.offsetLeft + disL <= disa) {

box1.style.left = box1.offsetLeft + disL + "px";

}

break;

//键盘下键

case 40:

if(box1.offsetTop + disL <= disb) {

box1.style.top = box1.offsetTop + disL + "px";

}

break;

}

}

var a = main.offsetHeight - box2.offsetHeight;

var b = main.offsetWidth - box2.offsetWidth;

var top_ = 0;

//上下移动速度

var i = 2;

var left_ = 0;

//左右移动速度

var j = 1;

var flag = 0;

//定时器

timer = setInterval(jfj, 10);

//小方块的碰壁反弹

function jfj() {

top_ += i;

left_ += j;

//上碰壁

if(top_ <= 0) {

i = -i;

}

//小方块落地停下

if(top_ >= a) {

i = 0;

j = 0;

zz.style.display = "block";

//清定时器

clearInterval(timer);

document.onkeydown = null;

}

//与木板相遇反弹

if(top_ + box2.offsetHeight == box1.offsetTop && (left_ < box1.offsetLeft + box1.offsetWidth) && (left_ + box2.offsetWidth > box1.offsetLeft)) {

i = -i;

flag++;

wrap.innerHTML = "得分：" + flag;

}

//左右碰壁

if(left_ >= b left_ <= 0) {

j = -j;

}

box2.style.top = top_ + "px";

box2.style.left = left_ + "px";

}

//小方块落地后，弹出“重新开始”，所有数据还原

function jj() {

flag = 0;

wrap.innerHTML = "得分：" + flag;

zz.style.display = "none";

box1.style.left = "0px";

box1.style.top = disb + "px";

box2.style.top = "0px";

box2.style.left = "0px";

document.onkeydown = jfy;

i = 2;

j = 1;

top_ = 0;

left_ = 0;

timer = setInterval(jfj, 10);

jfj();

}