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实现flash8类似的连接效果
May 03 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
详解javascript中的事件处理
Nov 06 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
克隆一个新项目的快捷方式
2013/04/10 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
2015年安全保卫工作总结
2015/05/14 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2016新年感言
2015/08/03 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书