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="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)典小游戲?qū)崿F(xiàn)專題,分享給大家:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
- jQuery修改CSS偽元素屬性的方法
- django創(chuàng)建css文件夾的具體方法
- Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果的代碼
- Vue3新特性之在Composition API中使用CSS Modules
- js+css實(shí)現(xiàn)全屏側(cè)邊欄
- 詳解VScode自動(dòng)補(bǔ)全CSS3前綴插件以及配置無(wú)效的解決辦法
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
- 詳解CSS偽元素的妙用單標(biāo)簽之美
相關(guān)文章
js入門之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法,應(yīng)該對(duì)初學(xué)Js的朋友們會(huì)有所幫助,下面就隨小編一起來(lái)看下吧2016-11-11微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件,滾動(dòng)選項(xiàng)卡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
這篇文章主要介紹了js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下2015-06-06JavaScript中的ParseInt("08")和“09”返回0的原因分析及解決辦法
這篇文章主要介紹了JavaScript中ParseInt("08")和“09”返回0的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05JS通過(guò)位運(yùn)算實(shí)現(xiàn)權(quán)限加解密
這篇文章主要介紹了JS通過(guò)位運(yùn)算實(shí)現(xiàn)權(quán)限加解密的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08JS散列表碰撞處理、開(kāi)鏈法、HashTable散列示例
這篇文章主要介紹了JS散列表碰撞處理、開(kāi)鏈法、HashTable散列,結(jié)合實(shí)例形式分析了散列表碰撞處理、開(kāi)鏈法、HashTable散列的定義及簡(jiǎn)單使用操作技巧,需要的朋友可以參考下2019-02-02Json對(duì)象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細(xì)介紹(小結(jié))
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式.這篇文章主要介紹了Json對(duì)象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細(xì)介紹(小結(jié))的相關(guān)資料,需要的朋友可以參考下2016-10-10javascript中兼容主流瀏覽器的動(dòng)態(tài)生成iframe方法
這篇文章主要介紹了javascript中兼容主流瀏覽器的動(dòng)態(tài)生成iframe方法,需要的朋友可以參考下2014-05-05