jQuery實(shí)現(xiàn)彈彈球小游戲
更新時(shí)間：2022年01月14日 13:36:20 作者：zzzcy_
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)彈彈球小游戲的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
CSS樣式：
#box {
width: 600px;
height: 650px;
border: 5px solid rgb(245, 164, 96);
position: relative;
left: 500px;
top: 50px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0, 0, 255, 0.5)));
}
/*小球的設(shè)置*/
#ball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
position: absolute;
top: 560px;
box-shadow: 0px 0px 3px 3px aqua;
}
/*開始游戲按鈕設(shè)置*/
#btn {
width: 150px;
height: 90px;
position: fixed;
left: 730px;
top: 400px;
border-radius: 10px;
box-shadow: #BBBBBB;
font-size: 24px;
cursor: pointer;
}
/*滑塊的設(shè)置*/
#slider {
width: 120px;
height: 20px;
background-color: lightpink;
position: absolute;
top: 585px;
border-radius: 10px;
box-shadow: 0px 0px 2px 2px white;
cursor: pointer;
}
/*每個(gè)方塊的邊框*/
#brick div {
width: 98px;
height: 20px;
float: left;
border: 1px solid black;
}
/*游戲規(guī)則邊框*/
#tip {
width: 280px;
position: fixed;
top: 200px;
left: 100px;
border: 1px solid black;
text-indent: 2em;
padding: 10px;
border-radius: 20px;
}
/*難度得分邊框*/
#grade {
width: 180px;
position: fixed;
top: 100px;
left: 1150px;
border: 1px solid black;
text-indent: 2em;
padding: 10px;
border-radius: 20px;
}
/*h3字體設(shè)置*/
#grade h3 {
font-weight: 500;
}
#phb{
width: 180px;
position: fixed;
top: 50px;
left: 1150px;
border: 1px solid black;
text-indent: 2em;
padding: 10px;
border-radius: 10px;
}js代碼：
js完整代碼：
<script type="text/javascript">
var box = document.getElementById("box");
var ball = document.getElementById("ball");
var btn = document.getElementById("btn");
var slider = document.getElementById("slider");
var obrick = document.getElementById("brick");
var brickArr = obrick.getElementsByTagName("div");
var grade = document.getElementById("grade");
var rank = grade.children[1]
var score = grade.children[3]
var sco = 0; //分?jǐn)?shù)
var timer; //小球運(yùn)行
var isRunning = false;
var speedX = rand(3, 12);
var speedY = -rand(3, 12);
var num = speedX - speedY;
//隨機(jī)選擇難度
var num = Math.ceil((Math.random() * 9));
console.log("num為:" + num);
switch (num) {
case 1:
case 2:
case 3:
rank.innerHTML = "簡(jiǎn)單";
break;
case 4:
case 5:
case 6:
rank.innerHTML = "中等";
slider.style.width = 80 + "px";
break;
case 7:
case 8:
case 9:
rank.innerHTML = "困難";
slider.style.width = 60 + "px";
break;
}
//隨機(jī)生成小球與滑塊的初始位置
var beginGo = rand(100, 500);
ball.style.left = beginGo + 40 + "px";
slider.style.left = beginGo + "px";
//開始按鈕點(diǎn)擊事件
btn.onclick = function() {
btn.style.display = "none"; //隱藏按鈕
isRunning = true;
clearInterval(timer);
timer = setInterval(function() {
//獲取小球初始位置
var ballLeft = ball.offsetLeft;
var ballTop = ball.offsetTop;
//獲取小球運(yùn)動(dòng)之后位置
var nextleft = ballLeft + speedX;
var nexttop = ballTop + speedY;
//水平邊界判斷，當(dāng)小球的left值小于容器左邊界或者大于容器右邊界時(shí)，將水平方向速度取反
if (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
speedX = -speedX;
}
//垂直邊界判斷，當(dāng)小球的top值小于容器上邊界時(shí)，將垂直方向速度取反
if (nexttop <= 0) {
speedY = -speedY;
}
//當(dāng)小球觸碰到下邊界時(shí)，提示“游戲失敗”,重新刷新頁(yè)面
if (nexttop > box.offsetHeight - ball.offsetHeight) {
location.reload();
alert("Game Over!");
}
//將運(yùn)動(dòng)后的位置重新賦值給小球
ball.style.left = nextleft + "px";
ball.style.top = nexttop + "px";
//小球與滑塊的碰撞
if (knock(ball, slider)) {
speedY = -speedY;
}
//小球與方塊的碰撞
for (var j = 0; j < brickArr.length; j++) {
if (knock(brickArr[j], ball)) {
speedY = -speedY
obrick.removeChild(brickArr[j]);
sco++;
score.innerHTML = sco;
break;
}
}
//當(dāng)容器中方塊數(shù)量為0時(shí)，宣布“游戲勝利”，刷新頁(yè)面
if (brickArr.length <= 0) {
location.reload();
alert("You win!");
}
}, 20)
}
//鼠標(biāo)控制滑塊
slider.onmousedown = function(e) {
var e = e || window.event;
//獲取滑塊初始位置
var offsetX = e.clientX - slider.offsetLeft;
if (isRunning) {
document.onmousemove = function(e) {
var e = e || window.event;
var l = e.clientX - offsetX;
if (l <= 0) {
l = 0;
}
if (l >= box.offsetWidth - slider.offsetWidth - 10) {
l = box.offsetWidth - slider.offsetWidth - 10;
}
slider.style.left = l + "px";
}
}
}
document.onmouseup = function() {
document.onmousemove = null; //鼠標(biāo)移動(dòng)時(shí)
}
//按鍵控制滑塊
document.onkeydown = function(e) {
var e = e || window.event;
var code = e.keyCode || e.which;
var offsetX = slider.offsetLeft;
if (isRunning) {
switch (code) {
case 37: //左
if (offsetX <= 0) {
slider.style.left = 0
break;
}
slider.style.left = offsetX * 4 / 5 + "px";
break;
case 39: //右
if (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
slider.style.left = box.offsetWidth - slider.offsetWidth;
break;
}
slider.style.left = (box.offsetWidth - slider.offsetWidth - offsetX) / 5 + offsetX + "px";
break;
}
}
}
//一共有66塊方塊
createBrick(66);
//容器內(nèi)創(chuàng)建方塊
function createBrick(n) {
var oBrick = document.getElementById("brick");
//在大盒子brick中插入n個(gè)div方塊，并給予隨機(jī)顏色
for (var i = 0; i < n; i++) {
var node = document.createElement("div");
node.style.backgroundColor = color();
oBrick.appendChild(node);
}
//獲取所有的方塊
var brickArr = obrick.getElementsByTagName("div")
//根據(jù)每個(gè)方塊當(dāng)前所在位置，將left與top值賦給方塊
for (var i = 0; i < brickArr.length; i++) {
brickArr[i].style.left = brickArr[i].offsetLeft + "px";
brickArr[i].style.top = brickArr[i].offsetTop + "px";
}
//將所有方塊設(shè)置成絕對(duì)定位，注意這一步與上一步順序不能調(diào)換
for (var i = 0; i < brickArr.length; i++) {
brickArr[i].style.position = "absolute";
}
}
//隨機(jī)生成顏色
function color() {
var result = "#";
for (var i = 0; i < 6; i++) {
result += rand(0, 15).toString(16)
}
return result;
}
//隨機(jī)數(shù)生成
function rand(n, m) {
return n + parseInt(Math.random() * (m - n + 1));
}
//碰撞檢測(cè)函數(shù)
function knock(node1, node2) {
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop + node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop + node2.offsetHeight;
if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
return false;
} else {
return true;
}
}
</script>以上代碼不是很完美，有需要的還可以進(jìn)一步的改進(jìn)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)用小技巧_輸入框文字獲取和失去焦點(diǎn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)用小技巧_輸入框文字獲取和失去焦點(diǎn)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jquery ztree實(shí)現(xiàn)模糊搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)模糊搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
jquery將一個(gè)表單序列化為一個(gè)對(duì)象的方法
將一個(gè)表單序列化為一個(gè)對(duì)象的方法有很多，感興趣的朋友可以了解下本文所介紹的這個(gè)，希望對(duì)大家有所幫助2013-12-12
jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)凍結(jié)表頭的方法,實(shí)例分析了jQuery擴(kuò)展方法的實(shí)現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03
如何選擇input框，方法貌似有很多，而在jquery中有個(gè)相當(dāng)簡(jiǎn)單不錯(cuò)的方法，在下面為大家介紹下詳細(xì)的實(shí)現(xiàn)，希望大家可以練練手哦2013-09-09
JQuery設(shè)置和去除disabled屬性的5種方法總結(jié)
下面與大家分享下兩種方法設(shè)置disabled屬性以及三種方法移除disabled屬性，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁(yè)所需的一切，幫助您輕松建立站點(diǎn)。本文給大家介紹JQuery EasyUI的一些常用組件，感興趣的的朋友一起學(xué)習(xí)吧2017-07-07
jQuery為DOM動(dòng)態(tài)追加事件的方法
下面小編就為大家?guī)?lái)一篇jQuery為DOM動(dòng)態(tài)追加事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jQuery UI AutoComplete 自動(dòng)完成使用小記
jQuery UI AutoComplete 自動(dòng)完成使用小記，使用jquery的朋友實(shí)現(xiàn)搜索自動(dòng)完成等功能的朋友可以參考下。2010-08-08
用jquery的方法制作一個(gè)簡(jiǎn)單的導(dǎo)航欄
用jquery制作一個(gè)簡(jiǎn)單的導(dǎo)航欄，使用到了addClass及removeClass等方法，需要的朋友可以參考下2014-06-06