JavaScript實現打磚塊遊戲
阿新 • • 發佈：2020-02-27
本文例項為大家分享了JavaScript實現打磚塊遊戲的具體程式碼，供大家參考，具體內容如下
html+css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打磚塊</title>
<link rel="stylesheet" type="text/css" href="css/break.css" rel="external nofollow" />
<script type="text/javascript" src="js/break.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.content{
position: relative;
width: 800px;
height: 600px;
background-color: #999;
margin: 0 auto;
overflow: hidden;
}
.game{
position: relative;
width: 550px;
height: 500px;
background-color: pink;
margin: 20px auto 0;
}
.brick{
position: absolute;
width: 50px;
height: 20px;
background-color: blueviolet;
}
.flap{
position: absolute;
width: 120px;
height: 30px;
bottom: 0;
left: 0;
background-color: blue;
}
.ball{
position: absolute;
width: 30px;
height: 30px;
bottom: 30px;
left: 0;
border-radius: 50%;
background-color: greenyellow;
}
.btn{
position: absolute;
width: 550px;
height: 50px;
bottom: 0;
left: 125px;
}
.btn button{
width: 120px;
height: 40px;
}
#score{
position: absolute;
width: 80px;
height: 30px;
right: 0;
top: 10%;
background-color: #fff;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="content">
<div class="game">
<!--<div class="brick"></div>-->
<!--<div class="flap"></div>
<div class="ball"></div>-->
</div>
<div class="btn">
<button id="start">開始</button>
<button id="reset">重置</button>
</div>
<div id="score">
</div>
</div>
</body>
</html>js部分
window.onload = init;
function init(){
var gameArea = document.getElementsByClassName("game")[0];
var rows = 5;
var cols = 11;
var b_width = 50;
var b_height = 20;
var bricks = [];
var speedX = 5;
var speedY = -5;
var interId = null;
var lf = 0;
var tp = 0;
var flap
var ball;
var n = 0;
var st = document.getElementById("start");
var rt = document.getElementById("reset");
var score = document.getElementById("score");
score.innerHTML = "得分:" + n;
renderDom();
bindDom();
function renderDom(){
getBrick();
//得到五彩磚塊
function getBrick(){
for (var i = 0; i < rows; i++) {
var tp = i * b_height;
var brick = null;
for (var j = 0; j < cols; j++) {
var lf = j * b_width;
brick = document.createElement("div");
brick.className = "brick";
brick.setAttribute("style","top:" + tp + "px;left:" + lf + "px;");
brick.style.backgroundColor = getColor();
bricks.push(brick);
gameArea.appendChild(brick);
}
}
}
//新增擋板
var flap = document.createElement("div");
flap.className = "flap";
gameArea.appendChild(flap);
//新增擋板小球
var ball = document.createElement("div");
ball.className = "ball";
gameArea.appendChild(ball);
}
function bindDom(){
flap = document.getElementsByClassName("flap")[0];
window.onkeydown = function(e){
var ev = e || window.event;
var lf = null;
if (e.keyCode == 37) { //左鍵往左走
lf = flap.offsetLeft - 10;
if (lf < 0) {
lf = 0;
}
flap.style.left = lf + "px";
}else if (e.keyCode == 39) { //右鍵往右走
lf = flap.offsetLeft + 10;
if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
lf = gameArea.offsetWidth - flap.offsetWidth
}
flap.style.left = lf + "px";
}
}
st.onclick = function(){
ballMove();
st.onclick = null;
}
rt.onclick = function(){
window.location.reload();
}
}
//得到磚塊的隨即顏色
function getColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb(" + r + "," + g + "," + b +")";
}
//實現小球上下左右來回運動
function ballMove(){
ball = document.getElementsByClassName("ball")[0];
interId = setInterval(function(){
lf = ball.offsetLeft + speedX;
tp = ball.offsetTop + speedY;
//實現磚塊消失的效果
for (var i = 0; i < bricks.length; i++) {
var bk = bricks[i];
if ((lf + ball.offsetWidth/2) >= bk.offsetLeft
&& (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth)
&& (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop
) {
bk.style.display = "none";
speedY = 5;
n++;
score.innerHTML = "得分:"+n;
}
}
if (lf < 0) {
speedX = -speedX;
}
if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){
speedX = -speedX;
}
if (tp <= 0) {
speedY = 5;
}else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop
&& (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft
&& (ball.offsetLeft + ball.offsetWidth/2) <= (flap.offsetLeft + flap.offsetWidth)
){
speedY = -5;
}else if(ball.offsetTop >= flap.offsetTop){
gameOver();
}
ball.style.left = lf + 'px';
ball.style.top = tp + "px";
},20)
}
//判斷遊戲是否結束
function gameOver(){
alert("game over" + "\n" + "您的得分是" + score.innerHTML);
clearInterval(interId);
}
}更多關於Js遊戲的精彩文章，請檢視專題： 《JavaScript經典遊戲 玩不停》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。