javascript+css实现俄罗斯方块小游戏
更新时间：2020年06月28日 14:07:02 作者：YUN♛
这篇文章主要为大家详细介绍了javascript+css实现俄罗斯方块小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
俄罗斯方块，一个很有趣的一个小游戏，此次基于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>
游戏截图：
源码可参考：js俄罗斯方块
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
切换不同图片的方法有很多，在本文为大家介绍下使用jquery是如何做到的2013-12-12
js对文字编码有3个函数： escape,encodeURI,encodeURIComponent， 对应的解码函数：unescape,decodeURI,decodeURIComponent2011-12-12
用js实现的一个根据内容自动生成表格的函数...2007-08-08
这篇文章主要介绍了JS定义函数的几种常用方法,结合实例形式总结分析了javascript函数表达式、Lambda 表达式、对象方法等常见函数定义操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下2015-11-11
ES6和CommonJS都有自己的一套处理模块化代码的措施，这篇文章主要介绍了ES6与CommonJS中的模块处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了详解Document.Cookie的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JavaScript几种弹窗事件的使用,弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏,下文介绍需要的朋友可以参考一下2022-02-02
Ionic实现页面下拉刷新(ion-refresher）功能代码
这篇文章主要介绍了使用Ionic实现页面下拉刷新(ion-refresher）功能的代码，感兴趣的朋友一起看看吧2016-06-06
JavaScript与ActionScript3两者的同性与差异性
接触JavaScript和ActionScript3也有近5年的时间了，它们都是应用比较广泛的脚本语言.接下来通过本文给大家介绍JavaScript与ActionScript3两者的同性与差异性，感兴趣的朋友一起学习吧2016-09-09
最新评论