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


Posted in Javascript onJune 28, 2020

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
如何在Vue.JS中使用图标组件
Aug 04 Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 #Javascript
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue引入静态js文件的方法
2020/06/20 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python地震数据可视化详解
2019/06/18 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
工程服务质量承诺书
2015/04/29 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Redis命令处理过程源码解析
2022/02/12 Redis
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript