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使用技巧精萃[代码非常实用]
Nov 21 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
js正则相关知识点专题
May 10 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 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的socket通信原理
2016/12/03 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
微信跳一跳小游戏python脚本
2018/01/05 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
给导游的表扬信
2014/01/10 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
租车协议书范本2014
2014/11/17 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
企业员工辞职信范文
2015/05/12 职场文书
新娘婚礼致辞
2015/07/27 职场文书
餐馆开业致辞
2015/08/01 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Python基础之pandas数据合并
2021/04/27 Python
python前后端自定义分页器
2022/04/13 Python