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

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

俄罗斯方块,一个很有趣的一个小游戏,此次基于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

标签:js,俄罗斯方块
0
投稿

猜你喜欢

  • Python脚本利用adb进行手机控制的方法

    2023-01-31 20:49:47
  • 科讯CMS 5.0 模板标签清单列表

    2008-12-04 13:18:00
  • session的存储方式和配置方法介绍

    2022-04-28 05:48:59
  • Flask蓝图学习教程

    2023-03-02 04:19:15
  • python批量生成本地ip地址的方法

    2021-10-25 16:20:38
  • MYSQL配置参数优化详解

    2024-01-21 08:17:44
  • python通过pillow识别动态验证码的示例代码

    2023-08-27 02:29:21
  • Python JWT 介绍和使用详解

    2023-01-03 12:57:24
  • 详解Python中的变量及其命名和打印

    2023-07-23 11:31:45
  • ASP 多关键词查询实例代码

    2011-04-11 11:14:00
  • 20个解决日常编程问题的Python代码分享

    2021-02-14 03:57:41
  • chatgpt 1020 错误码成功解决的三种方案(推荐)

    2023-02-03 17:33:28
  • python冒泡排序算法的实现代码

    2021-09-08 03:48:27
  • javaScript合并对象的几个常见方式

    2024-04-16 08:58:26
  • jmeter正则表达式实例详解

    2023-05-20 09:12:12
  • Python实现对比两个Excel数据内容并标记出不同

    2022-01-26 09:42:50
  • Python 爬虫模拟登陆知乎

    2023-11-28 14:32:08
  • python if not in 多条件判断代码

    2023-06-29 17:40:57
  • SQL Server AlwaysOn读写分离配置图文教程

    2024-01-19 10:20:20
  • PyQt5实现QLineEdit添加clicked信号的方法

    2021-02-08 18:24:02
  • asp之家 网络编程 m.aspxhome.com