⼀个有趣的前端⼩项⽬----新⼿练⼿⼩游戏
对于学前端的⼩伙伴们来说，最难的应该就是Javascript的理解与运⽤了，很重要，很有⽤，也很难真的掌握，但是对于这种难啃的⾻头，多去啃⼀啃的话还是很有意思的~~不好意思，⼀不⼩⼼暴露了我吃货的本质，今天给⼤家分享的是⼀个⼩游戏，之前有在github上看见有⼤神做过⼀个类似的游戏，然后⾃⼰就花了⼀天的时间写了这个⼩游戏，废话不多说，先给⼤家看⼀下这个游戏的效果图：
1、⼤家看到的实在点击开始游戏后，会随机⽣成不同的⽔果，这个是将图⽚放在⼀个数组⾥⾯的，然后获取随机的图⽚就⾏
2、在点击图⽚之后，图⽚会左右晃动⼀下，然后变成衰的表情，这个不设置的话也挺好的
3、接下来给⼤家展⽰⼀下未点中的效果：
4、当未点击中图⽚的时候，图⽚会掉落下去，分数会扣⼀分，屏幕会震动⼀下，这个效果是参考了⼤神的，毕竟这个游戏很单⼀，这个效果会⽐较明显。
5、接下来给⼤家介绍⼀个封装好的js-----简易运动框架，这个很适合⽤来做这些简单的运动动画，这个⼩游戏就是我直接在⽹上到的这个框架，然后直接调⽤的，封装不易，膜拜⼤佬，请⼤佬收下我的膝盖~
6、代码部分：
6.1⼤神做的：（此处表⽩⼤神死循环），但这个⼩游戏只⽤到了前三个封装的，hide和out没有⽤上
6.2 看我写的，先叉会⼉腰，可把我⽜逼坏了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®"> <meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>收获⽔果⼤赛</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background: pink;
}
#box {
height: 600px;
margin: 0px auto;
position: relative;
color: #f2f2f2;
}
#top {
width: 100%;
height: 145px;
}
#top .title {
width: 100%;
height: 50px;
text-align: center;
line-height: 70px;
font-size: 25px;
font-weight: 900;
}
#top .sm {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
}
#top .but {
width: 140px;
height: 40px;
outline: 0;
border: 1px solid #241d13;
background: #a73f2d;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px #7a2a1d;  font-size: 16px;
margin-left: 390px;
cursor: pointer;
}
#middle {
width: 100%;
height: 455px;
background: #fff;
position: absolute;
left: 0px;
top: 165px;
color: #333;
}
#middle .left {
width: 125px;
height: 55px;
float: left;
padding: 10px;
}
#middle .left p {
width: 145px;
line-height: 25px;
网页游戏小游戏}
#middle .right {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。