<!DOCTYPE html><html><head><meta charset="utf-8"><title>单机版弹球游戏</title><link rel="stylesheet" type="text/css" href="css/util.css" /><script type="text/javascript">var step = 20;var qiuXFlag = true;var qiuYFlag = true;var intervalId = 0;function qiuMove() {intervalId = window.setInterval(function() {//根据按键的值移动板var ban = document.getElementById("showBan");var banX = parseInt(ban.style.left);var banH3 = document.getElementById("banH3");//接球的范围是banH3.innerHTML = "板的接球范围[min=" + banX + "][max=" + (banX + 100) + "]";//获取小球var qiu = document.getElementById("showQiu");var ban = document.getElementById("showBan");var qiuH3 = document.getElementById("qiuH3");//获取板的left的值var banX = parseInt(ban.style.left);//改变坐标var x = parseInt(qiu.style.left);var y = parseInt(qiu.style.top);//实现坐标信息qiuH3.innerHTML = "球的坐标为[x=" + x + "][y=" + y + "]";//判断X的大小if (qiuXFlag) {qiu.style.left = x + step + "px";if (x >= 380) {qiuXFlag = false;}} else {qiu.style.left = x - step + "px";if (x <= 20) {qiuXFlag = true;}}//判断Y的大小if (qiuYFlag) {qiu.style.top = y + step + "px";if (y == 420 && (x >= banX && x <= banX + 100)) {qiuYFlag = false;}if (y > 440) {window.clearInterval(intervalId);alert("Game Over");}} else {qiu.style.top = y - step + "px";if (y <= 20) {qiuYFlag = true;}}}, 100);}window.onkeydown = function(event) {//根据按键的值移动板var ban = document.getElementById("showBan");var banX = parseInt(ban.style.left);var banH3 = document.getElementById("banH3");//接球的范围是banH3.innerHTML = "板的接球范围[min=" + banX + "][max=" + (banX + 100) + "]";//获取事件var eve = event || window.event;//获取按键的值var code = eve.keyCode;//判断左右if (code == 37) {if (banX > 20) {ban.style.left = banX - step + "px";}} else if (code == 39) {if (banX < 300) {ban.style.left = banX + step + "px";}}}</script></head><body οnlοad="qiuMove();"><div id="showDiv"><img id="showQiu" src="img/shz.gif" style="height: 20px;position: absolute;left: 200px;top: 0px;" /><input type="button" id="showBan" value="" style="width: 100px;position: absolute;top: 460px;left: 150px;" /></div><div id=""><h3 id="qiuH3"></h3><h3 id="banH3"></h3></div></body></html>
如果觉得《javascript 弹弹球小游戏》对你有帮助，请点赞、收藏，并留下你的观点哦！
