生活随笔
收集整理的這篇文章主要介紹了
原生JS实现简单打砖块弹球小游戏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用原生JS寫的，還有一點瑕疵。代碼直接復制到html就能使用
速度隨機的 因為設涉及橫向和縱向速度，所以顯示的小球速度值是他們的和速度（立方和開根號）。
按回車或者在滑塊上單機左鍵開始游戲。鼠標滑動或者鍵盤A（左）或者D（右）控制滑塊方向接小球。
這個小demo的意義主要為了鍛煉邏輯能力
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>document
</title
>
<style
>
.container
{width
: 500px
;height
: 500px
;border
:1px solid #
000;margin
:auto
;position
:relative
;
}
.brickBox
{width
: 500px
;height
: 300px
;position
:absolute
;left
: 0;top
: 0;
}
.ball
{width
: 15px
;height
: 15px
;background
-color
:purple
;border
-radius
:50%;position
:absolute
;bottom
:30px
;left
:235px
;
}
.slider
{width
: 150px
;height
: 30px
;background
-color
: #
00f
;position
:absolute
;left
:175px
;bottom
:0;
}
</style
>
</head
>
<body
>
<div
class="container"><div
class="brickBox"></div
><div
class="ball"></div
><div
class="slider"></div
>
</div
>
<div style
="margin-left: 40%;font-size: 25px;">當前速度
: <span id
="speed"></span
> </div
>
<div style
="margin-left: 40% ;font-size: 25px;">當前打掉的方塊數
: <span id
="count"></span
> </div
></body
>
<script
>
var container
= document
.querySelector('.container')
var brickBox
= container
.querySelector('.brickBox')
var ball
= container
.querySelector('.ball')
var slider
= container
.querySelector('.slider')
var brickWidth
= 50;
var brickHeight
= 15;
var brickNum
= brickBox
.clientWidth
* brickBox
.clientHeight
/ (brickWidth
* brickHeight
)
var brickColNum
= brickBox
.clientWidth
/ brickWidth
for(var i
=0;i
<brickNum
;i
++){var div
= document
.createElement('div')setStyle(div
,{width
:brickWidth
+ "px",height
:brickHeight
+ "px",backgroundColor
:getColor(true),position
:'absolute',top
:parseInt(i
/brickColNum
)*brickHeight
+ 'px',left
:(i
%brickColNum
)*brickWidth
+ 'px'})brickBox
.appendChild(div
)
}
var speedX
= getRandom(1,8);
var speedY
= getRandom(1,8);
document
.querySelector("#speed").innerHTML
= Math
.sqrt(Math
.pow(speedX
,2)+Math
.pow(speedY
,2))
var timer
;
slider
.onclick
= move
;
function move(){var count
=0;clearInterval(timer
)timer
= setInterval(function(){let left
= ball
.offsetLeft
;let top
= ball
.offsetTop
;if(boom(slider
,ball
)){speedY
= -speedY
}if(left
<=0 || left
>=container
.clientWidth
- ball
.offsetWidth
){speedX
= -speedX
}if(top
<=0){speedY
= -speedY
}for(let i
=0;i
<brickBox
.children
.length
;i
++){if(boom(brickBox
.children
[i
],ball
)){speedY
= -speedYbrickBox
.removeChild(brickBox
.children
[i
]);count
++;}}console
.log(count
)document
.querySelector("#count").innerHTML
=count
if(top
>=container
.clientHeight
-ball
.offsetHeight
){clearInterval(timer
)if(confirm("GAME OVER,是否重玩")){location
.reload();}else{alert('您最終分數'+count
)}}left
+= speedXtop
+= speedYball
.style
.left
= left
+ "px"ball
.style
.top
= top
+ "px"},20)
}
slider
.onmouseover = function(){document
.onmousemove = function(e){var e
= e
|| window
.event
;var x
= e
.pageX
;var l
= x
- container
.offsetLeft
- 1 - slider
.offsetWidth
/2if(l
<0){l
= 0}if(l
> container
.clientWidth
- slider
.offsetWidth
){l
= container
.clientWidth
- slider
.offsetWidth
}slider
.style
.left
= l
+ "px"}
}
window
.onload= function(){document
.onkeydown = e=>{var e
= e
|| window
.event
;var keycode
= e
.keyCode
|| e
.which
;var keyword
= String
.fromCharCode(keycode
).toLowerCase();if(keycode
==13){move();}if(keyword
=='a'){console
.log("1111")slider
.style
.left
= slider
.offsetLeft
-15+"px"}else if(keyword
=='d'){console
.log("222")slider
.style
.left
=slider
.offsetLeft
+15+"px"}console
.log(slider
.offsetLeft
)}}
function boom(node1,node2){if(node1
.offsetLeft
+node1
.offsetWidth
<node2
.offsetLeft
|| node1
.offsetTop
+node1
.offsetHeight
<node2
.offsetTop
|| node2
.offsetLeft
+node2
.offsetWidth
<node1
.offsetLeft
|| node2
.offsetTop
+node2
.offsetHeight
<node1
.offsetTop
){return false;}else{return true;}
}
function getColor(hex=true){if(hex
){var color
= '#'for(var i
=0;i
<3;i
++){var rgb
= getRandom(256).toString(16);rgb
= rgb
.length
===1?'0'+rgb
:rgb
;color
+= rgb
}return color
;}return `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})`
}
function setStyle(ele,styleObj){for(var attr
in styleObj
){ele
.style
[attr
] = styleObj
[attr
]}
}
function getRandom(a,b=0){var max
= Math
.max(a
,b
);var min
= Math
.min(a
,b
)return Math
.floor(Math
.random() * (max
-min
)) + min
}
</script
>
</html
>
效果圖如圖所示
沒用插件 略微樣式丑了點。
然后還存在的BUG是左右方向鍵沒設置終止值。偶爾會出現位置精度丟失導致小球在滑塊上抽搐。
總結
以上是生活随笔為你收集整理的原生JS实现简单打砖块弹球小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
