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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 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
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
javascript常用功能汇总
2015/07/05 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
python3 logging日志封装实例
2020/04/08 Python
python不同系统中打开方法
2020/06/23 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
师德学习感言
2014/01/31 职场文书
少儿节目主持串词
2014/04/02 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers