html+css+js實(shí)現(xiàn)彈球游戲

使用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ǔ)教程

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末靖榕,一起剝皮案震驚了整個(gè)濱河市标锄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌茁计,老刑警劉巖料皇,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異星压,居然都是意外死亡践剂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門娜膘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逊脯,“玉大人,你說我怎么就攤上這事竣贪【荩” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵演怎,是天一觀的道長匕争。 經(jīng)常有香客問我,道長爷耀,這世上最難降的妖魔是什么甘桑? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上跑杭,老公的妹妹穿的比我還像新娘铆帽。我一直安慰自己,他們只是感情好艘蹋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布锄贼。 她就那樣靜靜地躺著,像睡著了一般女阀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屑迂,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天浸策,我揣著相機(jī)與錄音,去河邊找鬼惹盼。 笑死庸汗,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的手报。 我是一名探鬼主播蚯舱,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼掩蛤!你這毒婦竟也來了枉昏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對情侶失蹤揍鸟,失蹤者是張志新(化名)和其女友劉穎兄裂,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體阳藻,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡晰奖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腥泥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匾南。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蛔外,靈堂內(nèi)的尸體忽然破棺而出蛆楞,到底是詐尸還是另有隱情,我是刑警寧澤冒萄,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布臊岸,位于F島的核電站,受9級(jí)特大地震影響尊流,放射性物質(zhì)發(fā)生泄漏帅戒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逻住。 院中可真熱鬧钟哥,春花似錦、人聲如沸瞎访。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽扒秸。三九已至播演,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間伴奥,已是汗流浹背写烤。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拾徙,地道東北人洲炊。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像尼啡,于是被迫代替她去往敵國和親暂衡。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容