使用html+css+js實(shí)現(xiàn)彈球游戲
?代碼如下偶惠，復(fù)制即可使用：
.panel{
position:?relative;
z-index:?0;
top:0px;
left:?400px;
width:?300px;
height:?500px;
}
.console{
position:?absolute;
z-index:?1;
top:0;
left:0;
width:100%;
height:?40px;
background-color:?#bbb;
}
.message{
position:?absolute;
z-index:?1;
top:40px;
left:0;
width:100%;
height:?460px;
color:?white;
font-size:?50px;
text-align:?center;
line-height:?460px;
background-color:?#999;
}
.start,.score,.pause{
position:?absolute;
z-index:?2;
top:?0;
width:?100px;
height:?100%;
font-size:?large;
color:?white;
text-align:?center;
line-height:?40px;
background:?-webkit-linear-gradient(top,#4ca8ff,yellow);
}
.start{
left:?0px;
}
.score{
left:100px;
background-color:?red;
}
.pause{
left:200px;
}
.start:after,.pause:before{
content:?"";
position:?absolute;
z-index:?2;
top:?0;
width:?3px;
height:?100%;
background:?-webkit-linear-gradient(top,#666,#999);
}
.start:after{
left:?97px;
}
.pause:before{
left:?0px;
}
.start:hover,.pause:hover{
cursor:?pointer;
background:?-webkit-linear-gradient(top,#4ca8ff,red);
}
.panel?span{
position:?absolute;
z-index:?0;
top:50%;
left:?50%;
font-size:?50px;
color:?blue;
}
.ball,.secondBall{
position:absolute;
z-index:?2;
border-radius:50%;
width:?20px;
height:?20px;
}
.ball{
top:?460px;
left:140px;
background-color:?red;
}
.secondBall{
top:?40px;
left:140px;
background-color:?red;
}
.plate{
position:?absolute;
top:480px;
left:?100px;
z-index:?2;
width:?100px;
height:?20px;
background-color:?#e5e5e5;
}
.promte{
margin-top:?20px;
text-align:?center;
}
開始
0
暫停
提示：鍵盤左右箭頭控制滑板
(function(){
document.onkeydown?=?function(e){
var?e?=?e?||?window.event;
if(e.keyCode?==?37){
//鍵盤向左鍵
plateMove("left");
}else?if(e.keyCode?==?39){
//鍵盤向右鍵
plateMove("right");
}
}
})();
var?panel?=?document.getElementById("panel"),
message?=?document.getElementById("message"),
plate?=?document.getElementById("plate"),
ball?=?document.getElementById("ball"),
start?=?document.getElementById("start"),
score?=?document.getElementById("score"),
pause?=?document.getElementById("pause"),
secondBall;
var?startGame,?x?=?x2?=?-1,?y?=?y2?=?-1,?speed?=?1,?positionArr?=?[],?pauseActive?=?false,
//一個(gè)標(biāo)志：表示難度是否還能增加
flag?=?true,
//球的起始位置
ballX,?ballY,?secondBallX,?secondBallY,
//邊界
minX?=?0,
maxX?=?panel.offsetWidth?-?ball.offsetWidth,
minY?=?40;
maxY?=?panel.offsetHeight?-?ball.offsetHeight?-?plate.offsetHeight;
window.onload?=?function(){
if(window.addEventListener){
start.addEventListener("click",startClick,false);
pause.addEventListener("click",pauseClick,false);
}else?if(window.attachEvent){
start.attachEvent("onclik",startClick);
pause.attachEvent("onclik",pauseClick);
}else{
start.onclik?=?startClick;
pause.onclik?=?pauseClick;
}
}
function?plateMove(direction){
if(direction?==?"left"){
if(plate.offsetLeft?>?0){
plate.style.left?=?(plate.offsetLeft-30?<?0??0?:?plate.offsetLeft-30)+"px";
}
}
if(direction?==?"right"){
if(plate.offsetLeft?<?200){
plate.style.left?=?(plate.offsetLeft+30?>?200??200?:?plate.offsetLeft+30)+"px";
}
}
}
function?startClick(){
if(!pauseActive){
resetGame();
}else{
pauseActive?=?!pauseActive;
}
startGame?=?setInterval(function(){
//console.log(ballX+"======"+ballY);
positionArr?=?setPosition(ballX,ballY,true);
if(positionArr?==?"GAMEOVER"){
return;
}
ballX?=?positionArr[0];
ballY?=?positionArr[1];
//設(shè)置球的位置
ball.style.left?=?ballX+"px";
ball.style.top?=?ballY+"px";
if(!flag){
positionArr?=?setPosition(secondBallX,secondBallY,false);
secondBallX?=?positionArr[0];
secondBallY?=?positionArr[1];
secondBall.style.left?=?secondBallX+"px";
secondBall.style.top?=?secondBallY+"px";
}else{
addDifficulty();
}
},30);
}
function?pauseClick(){
pauseActive?=?true;
clearInterval(startGame);
}
function?resetGame(){
clearInterval(startGame);
message.innerHTML="";
score.innerHTML="0";
ball.style.left?=?"140px";
ball.style.top?=?"460px";
plate.style.left?=?"100px";
plate.style.top?=?"480px";
ballX?=?ball.offsetLeft;
ballY?=?ball.offsetTop;
speed?=?1;
flag?=?true;
//第二個(gè)球設(shè)置隱藏
if(secondBall){
secondBall.style.display="none";
secondBall.style.left?=?"140px";
secondBall.style.top?=?"40px";
}
}
function?addDifficulty(){
if(parseInt(score.innerHTML)?>?500?&&?parseInt(score.innerHTML)?<?2000){
speed?=?1.2;
}else?if(parseInt(score.innerHTML)?>?2000?&&?parseInt(score.innerHTML)?<?5000){
speed?=?1.5;
}else?if(parseInt(score.innerHTML)?>?5000){
if(typeof?secondBall?!=?"undefined"){
secondBall.style.display="";
}else{
secondBall?=?document.createElement('div');
}
secondBall.className?=?'secondBall';
panel.appendChild(secondBall);
secondBallX?=?secondBall.offsetLeft;
secondBallY?=?secondBall.offsetTop;
flag?=?false;
}
}
function?setPosition(_x,_y,firstball){
if(_x?==?minX?||?_x?==?maxX){
//x*=-1;
firstball??x*=-1?:?x2*=-1;
}
if(_y?==?minY?||?_y?==?maxY){
//y*=-1;
firstball??y*=-1?:?y2*=-1;
}
if(_y?==?maxY){
//判斷擋板的位置是不是在球的范圍內(nèi)
if(plate.offsetLeft?>?_x?||?(plate.offsetLeft?+?plate.offsetWidth)?<?_x){
clearInterval(startGame);
message.innerHTML="GAMEOVER";
return?"GAMEOVER";
}
}
if(firstball){
_x+=4*x*speed;
_y+=5*y*speed;
}else{
_x+=4*x2*speed;
_y+=5*y2*speed;
}
//邊界處理
_x?=?_x?<?minX??minX?:?_x;
_x?=?_x?>?maxX??maxX?:?_x;
_y?=?_y?<?minY??minY?:?_y;
_y?=?_y?>?maxY??maxY?:?_y;
//設(shè)置分?jǐn)?shù)
score.innerHTML=parseInt(score.innerHTML)+10*speed;
return?[_x,_y];
}
如果您有更好的方法或更多的功能绑嘹，可以和我們大家一起分享哦，如有錯(cuò)誤，歡迎聯(lián)系我改正，非常感謝！！廊佩！
本文來自PHP中文網(wǎng)，原文地址:https://www.php.cn/div-tutorial-443290.html?推薦視頻教程：《js基礎(chǔ)教程》
