前言
切水果游戲曾經(jīng)是一款風(fēng)靡手機(jī)的休閑游戲,今天要分享的就是一款網(wǎng)頁(yè)版的切水果游戲, 由HTML+CSS+JS實(shí)現(xiàn),雖然功能和原版的相差太大,但基本的功能具備,效果逼真。感興趣的小伙伴可收藏學(xué)習(xí)(完整源碼在文末)
推薦學(xué)習(xí)專(zhuān)欄:
Web前端
JavaWeb學(xué)習(xí)專(zhuān)欄
文章目錄
前言
效果展示
游戲介紹
圖片展示
源碼
HTML源碼
CSS樣式
部分JS源碼
資源下載
彩蛋
總結(jié)
效果展示
游戲介紹
智能手機(jī)剛剛普及時(shí),切水果這款小游戲可謂風(fēng)靡一時(shí)。幾年過(guò)去了,現(xiàn)在,讓我們用純JavaScript來(lái)實(shí)現(xiàn)這個(gè)水果忍者游戲,就算是為了錘煉我們的JavaScript開(kāi)發(fā)技能吧。
《切水果》這款游戲的創(chuàng)意來(lái)源也非常簡(jiǎn)單,就是一位員工在家里看到電視播放銷(xiāo)售水果刀的廣告,為了體現(xiàn)出刀的鋒利,廣告里推銷(xiāo)員把香蕉拋向空中,然后用水果刀在空中把香蕉切開(kāi)。
經(jīng)典模式(圖標(biāo)為西瓜):在經(jīng)典模式中無(wú)時(shí)間限制,水果和炸彈會(huì)不斷浮動(dòng)出現(xiàn)在屏幕上。玩家共有三次因沒(méi)有切到水果而失誤的機(jī)會(huì),而只要一切到炸彈游戲就會(huì)馬上結(jié)束。每積累到100分就會(huì)自動(dòng)補(bǔ)充一次以前失去的機(jī)會(huì)。此模式中會(huì)隨機(jī)出現(xiàn)石榴(連切來(lái)加分,分?jǐn)?shù)高低,取決于玩家切的速度)、火龍果(切掉可以+50分)和楊桃
開(kāi)始游戲:用鼠標(biāo)在網(wǎng)頁(yè)上劃一條橫線(xiàn)切正中的“New Game”的西瓜開(kāi)始新的游戲:
圖片展示
源碼
此處展示部分源碼,完整源碼點(diǎn)擊下載切水果
HTML源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="dron" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>水果忍者網(wǎng)頁(yè)版--程序園</title>
<!--[if lt IE 9]><script>document.createElement("canvas");</script><![endif]-->
<link rel="stylesheet" href="images/index.css" />
</head>
<body>
? ? <div id="extra"></div>
? ? <canvas id="view" width="640" height="480"></canvas>
? ? <div id="desc">
? ? ? ? <div id="browser"></div>
? ? </div>文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-779925.html
? ? <script src="scripts/all.js" type="text/javascript"></script>
?? ?
</body>
</html>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-779925.html
到了這里,關(guān)于切水果游戲曾經(jīng)是一款風(fēng)靡手機(jī)的休閑游戲,今天要分享的就是一款網(wǎng)頁(yè)版的切水果游戲, 由HTML+CSS+JS實(shí)現(xiàn),雖然功能和原版的相差太大,但基本的功能具備,效果逼真。感興趣的小伙伴可收藏學(xué)習(xí)(完整源碼的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!