前言
切水果游戏曾经是一款风靡手机的休闲游戏，今天要分享的就是一款网页版的切水果游戏， 由HTML+CSS+JS实现，虽然功能和原版的相差太大，但基本的功能具备，效果逼真。感兴趣的小伙伴可收藏学习（完整源码在文末）
推荐学习专栏：
Web前端
JavaWeb学习专栏
文章目录
前言
效果展示
游戏介绍
图片展示
源码
HTML源码
CSS样式
部分JS源码
资源下载
彩蛋
总结
效果展示
游戏介绍
智能手机刚刚普及时，切水果这款小游戏可谓风靡一时。几年过去了，现在，让我们用纯JavaScript来实现这个水果忍者游戏，就算是为了锤炼我们的JavaScript开发技能吧。
《切水果》这款游戏的创意来源也非常简单，就是一位员工在家里看到电视播放销售水果刀的广告，为了体现出刀的锋利，广告里推销员把香蕉抛向空中，然后用水果刀在空中把香蕉切开。
经典模式（图标为西瓜）：在经典模式中无时间限制，水果和炸弹会不断浮动出现在屏幕上。玩家共有三次因没有切到水果而失误的机会，而只要一切到炸弹游戏就会马上结束。每积累到100分就会自动补充一次以前失去的机会。此模式中会随机出现石榴（连切来加分，分数高低，取决于玩家切的速度）、火龙果（切掉可以+50分）和杨桃
开始游戏：用鼠标在网页上划一条横线切正中的“New Game”的西瓜开始新的游戏：
图片展示
源码
此处展示部分源码，完整源码点击下载切水果
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>水果忍者网页版--程序园</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>文章来源：https://www.toymoban.com/news/detail-779925.html
<script src="scripts/all.js" type="text/javascript"></script>
</body>
</html>文章来源地址https://www.toymoban.com/news/detail-779925.html
到了这里，关于切水果游戏曾经是一款风靡手机的休闲游戏，今天要分享的就是一款网页版的切水果游戏， 由HTML+CSS+JS实现，虽然功能和原版的相差太大，但基本的功能具备，效果逼真。感兴趣的小伙伴可收藏学习（完整源码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
