Posted in Javascript onFebruary 25, 2020
本文实例为大家分享了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经典游戏 玩不停》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
JavaScript实现打砖块游戏
- Author -
蒲小若声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@