html代码制作小游戏打砖块

如果你对HTML代码了解一些，你也可以使用它来制作小游戏。比如，你可以使用HTML代码来打砖块游戏。

!DOCTYPE html>
    html>
      head>
        title>
    小游戏 - 打砖块/title>
      /head>
      body>
        div id="board">
          div id="paddle">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
          div class="brick">
    /div>
        /div>
        script type="text/javascript">
          var board = document.getElementById("board");
          var paddle = document.getElementById("paddle");
          var bricks = document.getElementsByClassName("brick");
          var ballX = 200;
          var ballY = 300;
          var ballSpeedX = 5;
          var ballSpeedY = 5;
          var paddleX = 300;
          var paddleSpeedX = 0;
          var brickCount = bricks.length;
      setInterval(function() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            if(ballX  0 || ballX >
 700) {
              ballSpeedX = -ballSpeedX;
        }
        if(ballY  0) {
              ballSpeedY = -ballSpeedY;
        }
            if(ballY >
 450) {
              ballX = 200;
              ballY = 300;
              ballSpeedX = 5;
              ballSpeedY = 5;
        }
            if((ballX + 10) >
     paddleX &
    &
     ballX  (paddleX + 100) &
    &
     ballY >
 430) {
              ballSpeedY = -ballSpeedY;
        }
            paddleX += paddleSpeedX;
        if(paddleX  0) {
              paddleX = 0;
        }
            if(paddleX >
 600) {
              paddleX = 600;
        }
            for(var i=0;
     ibrickCount;
 i++) {
          if(bricks[i].style.display != "none") {
                if(ballX >
     bricks[i].offsetLeft &
    &
     ballX  (bricks[i].offsetLeft + 50) &
    &
     ballY >
     bricks[i].offsetTop &
    &
 ballY  (bricks[i].offsetTop + 20)) {
                  bricks[i].style.display = "none";
                  ballSpeedY = -ballSpeedY;
                  brickCount--;
            }
          }
        }
            board.style.backgroundImage = "url('background.jpg')";
            paddle.style.left = paddleX + "px";
            for(var i=0;
     ibrickCount;
 i++) {
              bricks[i].style.left = bricks[i].offsetLeft + "px";
              bricks[i].style.top = bricks[i].offsetTop + "px";
        }
            document.getElementById("ball").style.left = ballX + "px";
            document.getElementById("ball").style.top = ballY + "px";
      }
, 30)      document.onkeydown = function(event) {
        if(event.keyCode == 37) {
              paddleSpeedX = -10;
        }
        if(event.keyCode == 39) {
              paddleSpeedX = 10;
        }
      }
      document.onkeyup = function(event) {
        if(event.keyCode == 37 || event.keyCode == 39) {
              paddleSpeedX = 0;
        }
      }
        /script>
      /body>
    /html>
    

上面展示的就是一个简单的HTML代码去实现的打砖块游戏。使用HTML代码的好处在于，它非常容易学习，并且以最小的代码量创建功能和交互性强的网页和游戏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！