javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
俄羅斯方塊,一個(gè)很有趣的一個(gè)小游戲,此次基于html+css+javaScript實(shí)現(xiàn),包含在一個(gè)方塊落地后自動(dòng)生成方塊、操控方塊的移動(dòng)以及方塊變形等。
部分代碼:
<!DOCTYPE html><html> <head> <meta charset='UTF-8' /> <title>俄羅斯方塊 — 經(jīng)典版V10</title> <link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/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='http://www.cgvv.com.cn/bcjs/js/shape.js'></script> <script src='http://www.cgvv.com.cn/bcjs/js/tetris.js'></script> </body></html>
游戲截圖:
源碼可參考:js俄羅斯方塊
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題,分享給大家:
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. idea設(shè)置提示不區(qū)分大小寫的方法2. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法3. HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說(shuō)明(學(xué)習(xí))4. VMware中如何安裝Ubuntu5. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)6. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法7. docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法8. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建( Dovecot )9. ASP.NET MVC通過(guò)勾選checkbox更改select的內(nèi)容10. 原生JS實(shí)現(xiàn)記憶翻牌游戲
