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 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
简单的渐变轮播插件
Jan 12 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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 socket方式提交的post详解
2008/07/19 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP文件上传类实例详解
2016/04/08 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
List Installed Hot Fixes
2007/06/12 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
webpack3之loader全解析
2017/10/26 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
超简单的Python HTTP服务
2019/07/22 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
移交协议书
2014/08/19 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
应急管理工作总结2015
2015/05/04 职场文书
会议新闻稿
2015/07/17 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python