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或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
vue-cli+webpack记事本项目创建
Apr 01 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
JavaScript仿京东轮播图效果
Feb 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
php分页函数
2006/07/08 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
windows下python和pip安装教程
2018/05/25 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python中open函数的基本用法示例
2019/09/07 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
Java软件工程师综合面试题笔试题
2013/09/08 面试题
应届生法律求职信
2013/10/22 职场文书
数控技术专业推荐信
2013/11/01 职场文书
岗位职责的构建方法
2014/02/01 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
团日活动总结书格式
2014/05/08 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
党员自我评价2015
2015/03/03 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
python 中yaml文件用法大全
2021/07/04 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS