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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
JavaScript实现无限轮播效果
Nov 19 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
浅析vue深复制
2018/01/29 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
进一步理解Python中的函数编程
2015/04/13 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
金融专业应届生求职信
2013/11/02 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
城管年度个人总结
2015/02/28 职场文书
初中毕业感言300字
2015/07/31 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server