主页 / 网络编程 /

JavaScript实现打砖块游戏

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了JavaScript实现打砖块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
 : 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",":" + 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. = tp + "px";
 },20)
 }
 
 //判断游戏是否结束
 function gameOver(){
 alert("game over" + "\n" + "您的得分是" + score.innerHTML);
 clearInterval(interId);
 }
 
}

更多关于Js游戏的精彩文章，请查看专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：jquery实现直播视频弹幕效果 下一篇：深入理解Antd-Select组件的用法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by