利用键盘监听事件做的接球小游戏
2019-06-03 本文已影响0人
深漂浪子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.contater{
width: 800px;
height: 600px;
background-color: #000;
margin: 20px auto;
position: relative;
}
.box{
width: 200px;
height: 20px;
background-color: pink;
position: absolute;
left: 300px;
bottom: 0;
}
p{
width: 100%;
height: 80px;
text-align: center;
font-size: 60px;
line-height: 80px;
}
p>span{
color: red;
}
</style>
</head>
<body>
<p class="score">得分:<span>0</span></p>
<div class="contater">
<div class="box"></div>
</div>
<script>
var box=document.querySelector(".box");
var contater=document.querySelector(".contater");
var pScore = document.querySelector(".score>span");
var score = 0;
var speed = 2;
var ball;
var speedX=randomInt(-8,8);
var speedY=randomInt(-8,8);
var timeOutId;
//初始化
init();
function init(){
listenKey(); // 监听用户的按键
// 投放小球
putBall();
//让小球运动起来
move(ball);
}
//键盘监听事件,按方向键移动下面的矩形
function listenKey() {
document.onkeydown = function (event) {
var keyCode = event.keyCode;
switch (keyCode) {
case 37:
case 65:
var Bleft = box.offsetLeft - 10 ; //往左
if(Bleft<=0){
box.style.left=0+"px";
}else{
box.style.left=Bleft+"px";
}
break;
case 38:
case 87:
var Btop = box.offsetTop - 10 ;//往上
if(Btop<=0){
box.style.top=0+"px";
}else{
box.style.top=Btop+"px";
}
break;
case 39:
case 68:
var Bright = box.offsetLeft + 10 ;//往右
if(Bright>=600){
box.style.left=600+"px";
}else{
box.style.left=Bright+ "px";
}
break;
case 40:
case 83:
var Bbottom= box.offsetTop + 10 ;//往下
if(Bbottom>=580){
box.style.top=580+"px";
}else{
box.style.top=Bbottom+"px";
}
break;
}
}
}
/*投放小球*/
function putBall(){
// 创建一个div, 然后把这个地方背景变化
ball = document.createElement("div");
var left;
var top;
while (true){
var flag = true; // 是否找到了正确值
left = randomInt(-1, 19) * 40;
top = randomInt(0,0) * 40;
if (box.offsetLeft == left && box.offsetTop <= top){
flag = false;
break;
}
if (flag) break;
}
ball.style.position="absolute";
ball.style.width=40+"px";
ball.style.height=40+"px";
ball.style.borderRadius="50%";
ball.style.left = left + "px";
ball.style.top = top + "px";
ball.style.backgroundColor = "green";
contater.appendChild(ball);
}
//让小球运动起来
function move(ball) {
var parent=ball.parentNode;
var maxLeft=parent.offsetWidth-ball.offsetWidth;
var maxTop=parent.offsetHeight-ball.offsetHeight;
timeOutId=setTimeout(function step() {
var left=ball.offsetLeft+speedX;
var top=ball.offsetTop+speedY;
left=left<=0 ? 0:left;
left=left>=maxLeft ? maxLeft:left;
top=top<=0 ? 0:top;
top=top>maxTop ? maxTop:top;
speedX=(left==0 || left==maxLeft) ? -speedX:speedX;
speedY=(top==0 || top==maxTop) ? -speedY:speedY;
ball.style.left=left+"px";
ball.style.top=top+"px";
// 判断游戏是否结束
if (isGtBall(ball)||isDead()){
contater.innerHTML = "<h1 style='width: 100%" +
"; height:100%; font-size: 100px; color:red;text-align: center; line-height: 600px'>游戏结束</h1>";
return;
}
timeOutId=setTimeout(step,200/speed);
},0)
}
//是否接住小球
function isGtBall() {
var boxLeft = box.offsetLeft;//矩形的左边距
var boxTop = box.offsetTop;//矩形的上边距
var left=ball.offsetLeft+speedX;
var top=ball.offsetTop+speedY;
if((boxLeft <=left && left<=boxLeft+160)){
if(boxTop-(top+ball.offsetHeight)<=0 && boxTop-(top+ball.offsetHeight)>=-10){
console.log("aaaaa");
contater.removeChild(ball);
clearTimeout(timeOutId);
ball.style.top=top+"px";
ball.style.left=left+"px";
score += 100;
pScore.innerHTML = score;
speed += 0.2;
putBall();
move(ball)
return false;
}
}
}
/*判断小球是否碰到了下边界 (容器的下边缘)*/
function isDead(){
var parent=ball.parentNode;
var top=ball.offsetTop;
var maxTop=parent.offsetHeight-ball.offsetHeight;
return top == maxTop;
}
// 返回随机的 [from, to] 之间的整数(包括from，也包括to)
function randomInt(from, to){
return parseInt(Math.random() * (to - from + 1) + from);
}
</script>
</body>
</html>
