社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
对于学前端的小伙伴们来说，最难的应该就是Javascript的理解与运用了，很重要，很有用，也很难真的掌握，但是对于这种难啃的骨头，多去啃一啃的话还是很有意思的~~不好意思，一不小心暴露了我吃货的本质，今天给大家分享的是一个小游戏，之前有在github上看见有大神做过一个类似的游戏，然后自己就花了一天的时间写了这个小游戏，废话不多说，先给大家看一下这个游戏的效果图：
1、大家看到的实在点击开始游戏后，会随机生成不同的水果，这个是将图片放在一个数组里面的，然后获取随机的图片就行
2、在点击图片之后，图片会左右晃动一下，然后变成衰的表情，这个不设置的话也挺好的
3、接下来给大家展示一下未点中的效果：
4、当未点击中图片的时候，图片会掉落下去，分数会扣一分，屏幕会震动一下，这个效果是参考了大神的，毕竟这个游戏很单一，这个效果会比较明显。
5、接下来给大家介绍一个封装好的js-----简易运动框架，这个很适合用来做这些简单的运动动画，这个小游戏就是我直接在网上找到的这个框架，然后直接调用的，封装不易，膜拜大佬，请大佬收下我的膝盖~
6、代码部分：
6.1大神做的：（此处表白大神死循环），但这个小游戏只用到了前三个封装的，hide和out没有用上
由于封装格式有问题，不能直接放上来，我就截图给大家看，大家可以看一下这个js下载网址：网址http://www.mamicode.com/info-detail-1612909.html
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 {
width: 920px;
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 {
width: 771px;
height: 455px;
border-left: 2px solid #333;
float: left;
position: relative;
overflow: hidden;
}
#middle .right img {
width: 34px;
height: 34px;
cursor: pointer;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
#middle p{
font-size: 20px;
}
#middle span{
color:#f10215;
}
</style>
<script src="index.js"></script>
<script>
$(function () {
var input = $('top').getElementsByTagName('input')[0]; //开始游戏模块
var Span = $('middle').getElementsByTagName('span'); //左边计分模块
var Div = $('middle').getElementsByTagName('div')[1]; //右边大模块
var Img = $('middle').getElementsByTagName('img')[0]; //掉下来的图片
var arrImg = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png', 'img/6.png', 'img/7.png','img/8.png', 'img/9.png', 'img/10.png'];
var sdNum = 1; //图片运行速度
var onOff = true; //假设一个开关，后面要用来判断
for (var i = 0; i < Span.length; i++) {
Span[i].num = 0; //一开始就把所有的得分和失分都归0
}
//给开始游戏注册一个点击事件
input.onclick = function () {
this.value = '游戏进行中…'; //点击后，游戏开始变成游戏进行中……
this.disabled = true; //游戏进行中的时候让开始按钮无法再次点击
var width = parseInt(getStyle(Div, 'width')); //获取图片活动的宽度
var height = parseInt(getStyle(Div, 'height')) - 50; //获取图片活动的高度，并且减去本身的高度
Img.style.display = 'block'; //让水果能够显示出来
auto(); //开始执行代码
function auto() {
onOff = true; //假设为true就表示水果落到最下面时会被扣分
var n = Math.round(Math.random() * (arrImg.length - 1)); //获取数组里面随机的水果
var positions = Math.round(Math.random() * (width - 50)); //随机获取水果的位置
Img.src = arrImg[n]; //赋值
Img.style.left = positions + 'px'; //赋值
doMove(Img, 'top', sdNum, height, function () { //落下去的时候
if (onOff == true) { //假设为true就表示水果落到最下面时会扣分
shake($('middle'), 'top', function () { //掉下去后就会开始抖动窗口
Img.style.top = '0px'; //让水果回到0px的位置
Span[1].num++; //失分上面+1
Span[1].innerHTML = Span[1].num; //显示在失分上面
if (Span[1].num == 10) { //如果失去分大于了10
//Img.style.display = 'none'; //如果游戏结束，将水果清除
input.value = '开始游戏'; //可以重新点击开始游戏
input.disabled = false; //让开始游戏显示出来
alert('游戏结束，你共获得' + Span[0].num + '分'); //弹出游戏结束，并且显示得分
for (var i = 0; i < Span.length; i++) {
Span[i].num = 0; //得分和失分归零
}
} else {
auto();
}
});
}
});
}
Img.onclick = function () {
onOff = false; //如果为false，哪怕水果掉在最下面，也不会获得失分
Img.src = 'img/qq.png'; //点击最后，水果变成哭的样子
//这是一个Bug,直线增长会造成用户的体验感差，修改如下，引入对数函数
// sdNum = sdNum + 0.2; //每一次点击，水果下降的速度增加0,
// console.log(sdNum);
shake(Img, 'left', function () { //点击之后开始抖
Img.style.top = '0px'; //然后水果恢复到0px的位置
Span[0].num++; //获得得分+1
Span[0].innerHTML = Span[0].num; //获得得分一枚
sdNum=sdNum+0.2*Math.LOG10E;
console.log(sdNum);
auto(); //继续执行代码
});
}
}
})
</script>
</head>
<body>
<div id="box">
<div id="top">
<p class="title">你的鼠标有多快？</p>
<p class="sm">游戏说明：点击“开始游戏”，随机掉下水果，点中它，千万别让他掉下来！！</p>
<input class="but" type="button" value="开始游戏">
</div>
<div id="middle">
<div class="left">
<p>得分：
<span>0</span>分</p>
<p>失分：
<span>0</span>分</p>
</div>
<!-- 禁止选取 -->
<div class="right" onselectstart="return false">
<!-- 禁止鼠标在网页上拖动 -->
<img οndragstart="return false" />
</div>
</div>
</div>
</body>
</html>6.3总结：
a.大家对于封装的函数如果想深入了解的话，可以参考该网址http://www.mamicode.com/info-detail-1612909.html
b.我在写这个游戏的时候遇到的bug，这个对于一个前端来说，每个bug都将是我们走向人生巅峰的垫脚石，好了，废话不多说，
//这是一个Bug,直线增长会造成用户的体验感差，修改如下，引入对数函数
sdNum = sdNum + 0.2; //每一次点击，水果下降的速度增加0.2,
console.log(sdNum);在最初，我设想的是让每张图片掉落后速度就增加0.2s，但是对于一个理科生来说，理想很丰满，现实很骨感哈~~~，这个的速度是呈直线增加的，我们会在慢速的时候突然加速，也就是我们常吐槽的，用户体验极差，在做了一系列深刻的反省之后，我跟我的数学老师说：我已经把知识全还给你了，你什么时候把学费还给我？数学老师反手就给了我一个对数函数，然后我的游戏就瞬间得到了升华，哈哈哈哈哈哈哈哈哈哈，都让开，我要膨胀了~~~~
sdNum=sdNum+0.2*Math.LOG10E;
console.log(sdNum);
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
