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使用prototype定义对象类型(转)[
Dec 22 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
详解小程序横屏方案对比
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
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
js重写方法的简单实现
2016/07/10 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
详解Django admin高级用法
2019/11/06 Python
python输入中文的实例方法
2020/09/14 Python
python 绘制正态曲线的示例
2020/09/24 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
个人自我鉴定写法
2013/11/30 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
合作意向协议书范本
2014/03/31 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
纪委立案决定书
2015/06/24 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
java版 联机五子棋游戏
2022/05/04 Java/Android