第四十五章 无聊的写个小游戏吧

当然了,没有 JS 这种灵活的东东,我们不可能做很复杂的动态游戏。但是如果你肯开发思路的话,确实可以实现一些完整的游戏过程,虽然确实很简单,但是可玩性,以及游戏体验却也未必很差。

那么今天我们来做一个猫咪抓老鼠的小游戏。你看说的好听,其实就是不断把鼠标移动到一个小小的红色方块的过程,你把它当成鼠标走迷宫也可以,总之鼠标要是没有能够准确的移动到下一个预定位置就算失败。如果我们把目标点设置的小一些,那么难度还是很大的。

首先我们给游戏写一个起点,Start:

<div id=“start”>Start</div>

至于 CSS,我就把上节课那只红色按钮简单修改了一下,所以不解释喽~

#start {

width: 64px;

height: 64px;

padding: 4px;

position: relative;

background: #CC0000;

border: 5px solid #CCCCFF;

border-radius: 40px;

font-size: 16px;

color: #FCFCFC;

line-height: 64px;

text-align: center;

}

然后我们在刚才的标签里面写一个 div 当作老鼠,于是就变成了:

<div id=“start”>Start

<div class=“mouse”></div>

</div>

我再给它一个简单的样式:

.mouse {

display: none;

width: 10px;

height: 10px;

background: #CC0000;

position: absolute;

left: 10px;

top:0;

}

写到这里你就发现了,这跟弹出菜单很像啊。对啊,我就是让鼠标放在一个元素上,就会弹出它的内部元素,再放到弹出的元素上,又弹出内部元素……如此玩下去,鼠标一旦位置放错,这些弹出就都隐藏了,于是……游戏失败。

那么显然的我就写下了如下的触发动作:

#start:hover {

background: #CCCCFF;

}

#start>.mouse {

left: 74px;

top: 35px;

}

#start:hover>.mouse {

display: block;

}

.mouse:hover {

background: #CCCCFF;

}

.mouse:hover>.mouse {

display: block;

}

当然其中包含一些为了视觉舒服而做的小变化。另外就是这个 #start>.mouse 是特意规定了一下第一个 .mouse 的位置,因为这个跟别的有点区别。

现在的问题就是 .mouse 里面嵌套 .mouse 了,就像下面这样:

<div id=“start”>Start

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse”></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

你可以试一下,随着你鼠标的滑动,逐渐显示出了一条直线,因为每一只 mouse 都相对于前一只向后偏移了,所以是一条水平的直线,但是这样没有变化就显得毫无趣味了。那么所谓的变化也就是换个偏移的方向而已,实际上就涉及到了两个属性——left 和 top。

于是我再定义几个类,产生一些变化。

.md {

left: 0;

top: 10px;

}

.ml {

left:10px;

top: 0;

}

.mu {

left: 0;

top:10px;

}

.md 是向下偏移,.ml 向左,.mu 向上,至于向右,.mouse 不就是么?然后这么写:

<div id=“start”>Start

<div class=“mouse”>

<div class=“mouse”>

<div class=“mouse md”>

<div class=“mouse md”>

<div class=“mouse md”>

<div class=“mouse ml”>

<div class=“mouse ml”></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

我就不多写了,你可以自由组合着玩,最后在里面再写一个 #end 来作为结束,就算大功告成。我写了一个案例,你可以下载来玩,当然也要认真想想都是为什么,然后你能想出什么有趣的玩法吗?

我的案例玩起来是这个样子的:

本章代码下载:本章代码

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第四十五章 无聊的写个小游戏吧

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏