小球运动（原创）

Html

Css

 #box {
	width:400px;
	height:400px;
	border:1px solid #000000;
	margin:50px auto;
	position:relative;
}
#ball {
	height:30px;
	width:30px;
	border-radius:50%;
	background-color:red;
	position:absolute;
	left:0;
	top:0;
}
#block {
	width:100px;
	height:20px;
	position:absolute;
	left:150px;
	bottom:0;
	background-color:black;
}
#count {
	color:#ff0000;
	font-size:18px;
	position:absolute;
	width:20px;
	height:20px;
	left:-20px;
	top:0;
}

var oBox = document.querySelector('#box');
 var oBall = document.querySelector('#ball');
 var oBlock = document.querySelector('#block');
 var oCount = document.querySelector('#count');

var speedBlock = 5;
 var speedX = 5;
 var speedY = 4;

var maxLeft = oBox.clientWidth - oBall.offsetWidth;
 var maxTop = oBox.clientHeight - oBall.offsetHeight;
 var max = oBox.clientWidth - oBlock.offsetWidth;

setInterval(function() {
     // 初始位置
     var left = oBall.offsetLeft;
     var top = oBall.offsetTop;

// 偏移量
     left += speedX;
     top += speedY;

// 边界判断
     if (left < 0) {
         speedX = Math.abs(speedX);
     }

if (left > maxLeft) {
         speedX = -Math.abs(speedX);
     }

var ballR = oBall.offsetWidth / 2;

var leftLine = oBlock.offsetLeft - ballR;
     var rightLine = leftLine + oBlock.offsetWidth;

var bottomLine = oBox.clientHeight - oBlock.offsetHeight - 2 * ballR;

if (left >= leftLine && left <= rightLine && top >= bottomLine) { // 转向
         console.log(666);
         speedY = -Math.abs(speedY);
         oCount.innerHTML++;
     }

if (top > maxTop) { // 死亡条件
         // speedY = -Math.abs(speedY);
         left = 0;
         top = 0;
         oCount.innerHTML = 0;
     }

if (top < 0) {
         speedY = Math.abs(speedY);
     }

// 赋新值

oBall.style.left = left + 'px';
     oBall.style.top = top + 'px';

}, 50);

document.onkeydown = document.onkeypress = function(e) {
     var ev = event || e;
     var keyCode = ev.keyCode || ev.which;

var left = oBlock.offsetLeft;

if (keyCode == 37) {
         left -= speedBlock;
     } else if (keyCode == 39) {
         left += speedBlock;
     }
     // 边界
     if (left <= 0) {
         left = 0;
     }

if (left >= max) {
         left = max;
     }

oBlock.style.left = left + 'px';
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

小球运动（原创）

代码描述：模仿打乒乓球小游戏

更新时间：2020-06-24 00:42:09

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?

相关代码

小球运动（原创）

最新