文章目錄
- 效果圖
- 實作程序（主要部分，不包含全部代碼）
- 搭建畫布
- 規則與難度
- 隨機生成球與滑塊的位置
- 點擊按鈕開始游戲
- 滑鼠控制滑塊
- 左右鍵控制滑塊
- 創建方塊
- 判斷求是否彈到其他東東了
- 全部代碼（無套路，免費）
- 對于新手
效果圖
實作程序（主要部分，不包含全部代碼）
搭建畫布
<style>
#box {
width: 600px;
height: 650px;
border: 5px solid rgb(168, 139, 8);
position: relative;
left: 500px;
background: linear-gradient(rgb(19, 192, 120), rgb(47, 32, 114));
}
#ball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
position: absolute;
top: 560px;
box-shadow: 0px 0px 3px 3px aqua;
}
#btn {
width: 150px;
height: 90px;
position: fixed;
left: 730px;
top: 350px;
border-radius: 10px;
font-size: 24px;
cursor: pointer;
}
#slide {
width: 120px;
height: 20px;
background-color: rgb(168, 139, 8);
position: absolute;
top: 585px;
border-radius: 10px;
box-shadow: 0px 0px 2px 2px red;
cursor: pointer;
}
#brick div {
width: 98px;
height: 20px;
float: left;
border: 1px solid black;
}
#tip {
width: 280px;
position: fixed;
top: 100px;
left: 150px;
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;
}
#grade h3 {
font-weight: 500;
}
</style>
規則與難度
<div id = "box">
<div id = "ball"></div>
<div id = "slide"></div>
<div id = "brick"></div>
</div>
<div id = "tip">
<h1>游戲規則：</h1>
<p>方法1：使用滑鼠按住滑塊左右拖動</p>
<p>方法2：使用鍵盤“左”“右”方向鍵控制滑塊移動</p>
<p>小球碰到底就 KO 了</p>
<p>打完所有方塊就贏了</p>
<p>每局游戲難度隨機生成，不喜歡可以F5重繪一下</p>
</div>
<div id = "grade">
<h3>難度：</h3>
<h2>XXX</h2>
<h3>得分：</h3>
<h1>0</h1>
</div>
<button id = "btn">開始游戲</button>
<script>
var box = document.getElementById("box");
var ball = document.getElementById("ball");
var btn = document.getElementById("btn");
var slide = document.getElementById("slide")
var obrick = document.getElementById("brick")
var brick_ = obrick.getElementsByTagName("div")
var grade = document.getElementById("grade")
var rk = grade.children[1]
var sc = grade.children[3]
var sco = 0;
var timer;
var isRunning = false;
var vx = rand(3, 12);
var vy = -rand(3, 12);
var num = vx - vy;
console.log(num)
switch(num) {
case 6: case 7: case 8:
rk.innerHTML = "簡單";
break;
case 9: case 10: case 11:
rk.innerHTML = "一般";
break;
case 12: case 13: case 14:
rk.innerHTML = "中等";
break;
case 15: case 16: case 17:
rk.innerHTML = "難"
break;
case 18: case 19: case 20:
rk.innerHTML = "很難"
slide.style.width = 100 + "px";
break;
case 21: case 22:
rk.innerHTML = "特別難"
slide.style.width = 80 + "px";
break;
case 23: case 24:
rk.innerHTML = "難哭了"
slide.style.width = 60 + "px";
break;
}
隨機生成球與滑塊的位置
var beginGo = rand(100, 500)
ball.style.left = beginGo + 40 + "px"
slide.style.left = beginGo + "px"
點擊按鈕開始游戲
btn.onclick = function() {
btn.style.display = "none";
isRunning = true;
clearInterval(timer);
timer = setInterval(function() {
// 獲取小球位置
var l = ball.offsetLeft;
var T = ball.offsetTop;
// 獲取小球運動后的位置
var _l = l + vx;
var _T = T + vy;
// 彈到左右框框上的話
if (_l <= 0 || _l >= box.offsetWidth - ball.offsetWidth - 10) {
vx = -vx;
}
// 彈到上框框的話
if (_T <= 0) {
vy = -vy;
}
// 彈到下框框的話就KO了，提示一下然后重新開始
if (_T > box.offsetHeight - ball.offsetHeight){
location.reload();
alert("很遺憾，你被KO了");
}
// 球球改變位置
ball.style.left = _l + "px";
ball.style.top= _T + "px";
// 彈到滑塊
if (knock(ball,slide)){
vy = -vy;
}
// 彈到方塊
for (var j = 0; j < brick_.length; ++j) {
if (knock(brick_[j], ball)){
vy = -vy
obrick.removeChild(brick_[j]);
++sco;
sc.innerHTML = sco;
break;
}
}
// 沒有方塊了，你贏了！！重新開始
if (brick_.length <= 0) {
location.reload();
alert("你贏了！恭喜！！")
}
}, 20)
}
滑鼠控制滑塊
slide.onmousedown = function(e) {
// 獲取滑塊初始位置
var e = e || window.event;
var offsetX = e.clientX - slide.offsetLeft;
if (isRunning == true) {
document.onmousemove = function(e) {
var e = e || window.event;
var l = e.clientX - offsetX;
if (l <= 0) {
l = 0;
}
if (l >= box.offsetWidth - slide.offsetWidth - 10) {
l = box.offsetWidth - slide.offsetWidth - 10;
}
slide.style.left = l + "px";
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
左右鍵控制滑塊
document.onkeydown = function(e) {
var e = e || window.event;
var code = e.keyCode || e.which;
var offsetX = slide.offsetLeft;
if (isRunning == true) {
switch(code) {
case 37:
if (offsetX <= 0) {
slide.style.left = 0
break;
}
slide.style.left = offsetX * 4 / 5 + "px";
break;
case 39:
if (offsetX >= box.offsetWidth - slide.offsetWidth - 10) {
slide.style.left = box.offsetWidth - slide.offsetWidth;
break;
}
slide.style.left = (box.offsetWidth - slide.offsetWidth - offsetX) / 5 +offsetX + "px";
break;
}
}
}
創建方塊
createBrick(72)
function createBrick(n){
var oBrick = document.getElementById("brick")
// 搞出n個方塊
for (var i = 0; i < n; ++i) {
var tmp = document.createElement("div");
tmp.style.backgroundColor = color();
oBrick.appendChild(tmp);
}
// 獲取所有方塊
var brick_ = obrick.getElementsByTagName("div")
// 獲取所有方塊左上角坐標
for (var i = 0; i < brick_.length; ++i) {
brick_[i].style.left = brick_[i].offsetLeft + "px";
brick_[i].style.top = brick_[i].offsetTop + "px";
}
// 所有方塊絕對值定位
for (var i = 0; i < brick_.length; ++i) {
brick_[i].style.position = "absolute";
}
}
判斷求是否彈到其他東東了
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;
}
return true;
}
全部代碼（無套路，免費）
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>打磚塊游戲</title>
// 搭建畫布
<style>
#box {
width: 600px;
height: 650px;
border: 5px solid rgb(168, 139, 8);
position: relative;
left: 500px;
background: linear-gradient(rgb(19, 192, 120), rgb(47, 32, 114));
}
#ball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
position: absolute;
top: 560px;
box-shadow: 0px 0px 3px 3px aqua;
}
#btn {
width: 150px;
height: 90px;
position: fixed;
left: 730px;
top: 350px;
border-radius: 10px;
font-size: 24px;
cursor: pointer;
}
#slide {
width: 120px;
height: 20px;
background-color: rgb(168, 139, 8);
position: absolute;
top: 585px;
border-radius: 10px;
box-shadow: 0px 0px 2px 2px red;
cursor: pointer;
}
#brick div {
width: 98px;
height: 20px;
float: left;
border: 1px solid black;
}
#tip {
width: 280px;
position: fixed;
top: 100px;
left: 150px;
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;
}
#grade h3 {
font-weight: 500;
}
</style>
</head>
<body>
// 規則與難度
<div id = "box">
<div id = "ball"></div>
<div id = "slide"></div>
<div id = "brick"></div>
</div>
<div id = "tip">
<h1>游戲規則：</h1>
<p>方法1：使用滑鼠按住滑塊左右拖動</p>
<p>方法2：使用鍵盤“左”“右”方向鍵控制滑塊移動</p>
<p>小球碰到底就 KO 了</p>
<p>打完所有方塊就贏了</p>
<p>每局游戲難度隨機生成，不喜歡可以F5重繪一下</p>
</div>
<div id = "grade">
<h3>難度：</h3>
<h2>XXX</h2>
<h3>得分：</h3>
<h1>0</h1>
</div>
<button id = "btn">開始游戲</button>
<script>
var box = document.getElementById("box");
var ball = document.getElementById("ball");
var btn = document.getElementById("btn");
var slide = document.getElementById("slide")
var obrick = document.getElementById("brick")
var brick_ = obrick.getElementsByTagName("div")
var grade = document.getElementById("grade")
var rk = grade.children[1]
var sc = grade.children[3]
var sco = 0;
var timer;
var isRunning = false;
var vx = rand(3, 12);
var vy = -rand(3, 12);
var num = vx - vy;
console.log(num)
switch(num) {
case 6: case 7: case 8:
rk.innerHTML = "簡單";
break;
case 9: case 10: case 11:
rk.innerHTML = "一般";
break;
case 12: case 13: case 14:
rk.innerHTML = "中等";
break;
case 15: case 16: case 17:
rk.innerHTML = "難"
break;
case 18: case 19: case 20:
rk.innerHTML = "很難"
slide.style.width = 100 + "px";
break;
case 21: case 22:
rk.innerHTML = "特別難"
slide.style.width = 80 + "px";
break;
case 23: case 24:
rk.innerHTML = "難哭了"
slide.style.width = 60 + "px";
break;
}
// 隨機生成球與滑塊的位置
var beginGo = rand(100, 500)
ball.style.left = beginGo + 40 + "px"
slide.style.left = beginGo + "px"
// 點擊按鈕開始游戲
btn.onclick = function(){
btn.style.display = "none";
isRunning = true;
clearInterval(timer);
timer = setInterval(function() {
// 獲取小球位置
var l = ball.offsetLeft;
var T = ball.offsetTop;
// 獲取小球運動后的位置
var _l = l + vx;
var _T = T + vy;
// 彈到左右框框上的話
if (_l <= 0 || _l >= box.offsetWidth - ball.offsetWidth - 10) {
vx = -vx;
}
// 彈到上框框的話
if (_T <= 0) {
vy = -vy;
}
// 彈到下框框的話就KO了，提示一下然后重新開始
if (_T > box.offsetHeight - ball.offsetHeight){
location.reload();
alert("很遺憾，你被KO了");
}
// 球球改變位置
ball.style.left = _l + "px";
ball.style.top= _T + "px";
// 彈到滑塊
if (knock(ball,slide)){
vy = -vy;
}
// 彈到方塊
for (var j = 0; j < brick_.length; ++j) {
if (knock(brick_[j], ball)){
vy = -vy
obrick.removeChild(brick_[j]);
++sco;
sc.innerHTML = sco;
break;
}
}
// 沒有方塊了，你贏了！！重新開始
if (brick_.length <= 0) {
location.reload();
alert("你贏了！恭喜！！")
}
}, 20)
}
// 滑鼠拖動滑塊
slide.onmousedown = function(e) {
// 獲取滑塊初始位置
var e = e || window.event;
var offsetX = e.clientX - slide.offsetLeft;
if (isRunning == true) {
document.onmousemove = function(e) {
var e = e || window.event;
var l = e.clientX - offsetX;
if (l <= 0) {
l = 0;
}
if (l >= box.offsetWidth - slide.offsetWidth - 10) {
l = box.offsetWidth - slide.offsetWidth - 10;
}
slide.style.left = l + "px";
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
// 左右鍵控制滑塊
document.onkeydown = function(e) {
var e = e || window.event;
var code = e.keyCode || e.which;
var offsetX = slide.offsetLeft;
if (isRunning == true) {
switch(code) {
case 37:
if (offsetX <= 0) {
slide.style.left = 0
break;
}
slide.style.left = offsetX * 4 / 5 + "px";
break;
case 39:
if (offsetX >= box.offsetWidth - slide.offsetWidth - 10) {
slide.style.left = box.offsetWidth - slide.offsetWidth;
break;
}
slide.style.left = (box.offsetWidth - slide.offsetWidth - offsetX) / 5 +offsetX + "px";
break;
}
}
}
createBrick(72)
// 創建方塊
function createBrick(n){
var oBrick = document.getElementById("brick")
// 搞出n個方塊
for (var i = 0; i < n; ++i) {
var tmp = document.createElement("div");
tmp.style.backgroundColor = color();
oBrick.appendChild(tmp);
}
// 獲取所有方塊
var brick_ = obrick.getElementsByTagName("div")
// 獲取所有方塊左上角坐標
for (var i = 0; i < brick_.length; ++i) {
brick_[i].style.left = brick_[i].offsetLeft + "px";
brick_[i].style.top = brick_[i].offsetTop + "px";
}
// 所有方塊絕對值定位
for (var i = 0; i < brick_.length; ++i) {
brick_[i].style.position = "absolute";
}
}
// 方塊隨機顏色
function color() {
var res = "#";
for (var i = 0; i < 6; ++i) {
// 十進制 to 十六進制
res += rand(0, 15).toString(16)
}
return res;
}
// 生成n和m之間的亂數
function rand(n, m){
return n + parseInt(Math.random() * (m - n + 1));
}
// 球球是否彈到別的東東了
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;
}
return true;
}
</script>
</body>
</html>
對于新手
如果你沒學過html，又想運行，可以按一下步驟操作：
step1：打開桌面
step2：右鍵新建文本檔案
step3：Copy代碼
step4：重命名
step5：運行
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/295279.html
標籤：其他
上一篇：猜數字游戲
下一篇：RM裝甲識別程式再分析（一）