网络编程
位置：首页>> 网络编程>> JavaScript>> javascript+css实现俄罗斯方块小游戏

javascript+css实现俄罗斯方块小游戏

作者：YUN♛　　发布时间：2024-04-23 09:28:06　

标签：js,俄罗斯方块

俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。

部分代码：


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>俄罗斯方块 — 经典版V10</title>
 <link rel="stylesheet" href="css/tetris.css" />
 <style>
  .playground{
   width: 525px; height: 550px;
   margin: 20px auto 0 auto;
   position: relative;
   background-image:url(../img/tetris.png);
  }
  .pause{width: 525px; height: 550px;
   position: absolute;
   top:0;left:0;
   background-image:url(../img/pause.png);
   z-index:100;
   display:none;
  }
  .playground img{
   position:absolute;z-index:10;width:26px;
  }
  .playground p{
   font-size: 30px;
   font-family: 'SimHei';
   font-weight: bold;
   color: #667799;
   position: absolute;
   left:305px;
   top:120px;
  }
  .playground p+p{top:176px;}
  .playground p+p+p{top:232px;}  
 </style>
</head>
<body>
 <div class="playground">
  <p>SCORE:<span>0</span></p>
  <p>LINES:<span>0</span></p>
  <p>LEVEL:<span>1</span></p>
 </div>
<script src="js/shape.js"></script>
<script src="js/tetris.js"></script>
</body>
</html>

游戏截图：

javascript+css实现俄罗斯方块小游戏

源码可参考：js俄罗斯方块

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

javascript经典小游戏汇总

来源：https://blog.csdn.net/qq_44731369/article/details/106970992

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com