javascript+css實現(xiàn)俄羅斯方塊小游戲
更新時間：2020年06月28日 14:07:02 作者：YUN♛
這篇文章主要為大家詳細介紹了javascript+css實現(xiàn)俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
俄羅斯方塊，一個很有趣的一個小游戲，此次基于html+css+javaScript實現(xiàn)，包含在一個方塊落地后自動生成方塊、操控方塊的移動以及方塊變形等。
部分代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>俄羅斯方塊 — 經(jīng)典版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俄羅斯方塊
更多有趣的經(jīng)典小游戲實現(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
切換不同圖片的方法有很多，在本文為大家介紹下使用jquery是如何做到的2013-12-12
js對文字編碼有3個函數(shù)： escape,encodeURI,encodeURIComponent， 對應的解碼函數(shù)：unescape,decodeURI,decodeURIComponent2011-12-12
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)...2007-08-08
這篇文章主要介紹了JS定義函數(shù)的幾種常用方法,結合實例形式總結分析了javascript函數(shù)表達式、Lambda 表達式、對象方法等常見函數(shù)定義操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了超實用的javascript圖片滑動效果實現(xiàn)方法,實例分析了javascript通過對頁面元素與相關屬性的操作實現(xiàn)滑動菜單效果的相關技巧，具有一定參考借鑒價值，需要的朋友可以參考下2015-11-11
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了詳解Document.Cookie的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下2022-02-02
Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能代碼
這篇文章主要介紹了使用Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能的代碼，感興趣的朋友一起看看吧2016-06-06
JavaScript與ActionScript3兩者的同性與差異性
接觸JavaScript和ActionScript3也有近5年的時間了，它們都是應用比較廣泛的腳本語言.接下來通過本文給大家介紹JavaScript與ActionScript3兩者的同性與差異性，感興趣的朋友一起學習吧2016-09-09