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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
vue引入静态js文件的方法
Jun 20 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
微信小程序实现登录注册功能
Dec 29 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
一些常用的php函数
2006/12/06 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python 将md5转为16字节的方法
2018/05/29 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
PyTorch-GPU加速实例
2020/06/23 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
《金色的脚印》教后反思
2014/04/23 职场文书
镇创先争优活动总结
2014/08/28 职场文书
群众路线专项整治方案
2014/10/27 职场文书
租车协议书范本2014
2014/11/17 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
python 提取html文本的方法
2021/05/20 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android