JS实现羊了个羊小游戏实例

想要实现“羊了个羊”小游戏，我们需要进行以下几个步骤：

1.定义游戏规则

首先，我们需要定义“羊了个羊”的游戏规则，以便于我们能够根据规则进行编程实现。根据规则，游戏会在屏幕上出现一遍叠放的羊，当用户点击右侧的羊时，程序会向下一页切换。如果用户点击错误的羊，游戏会重新开始。根据这些规则，我们就可以着手进行游戏的编写了。

2.编写HTML元素

接下来，我们需要编写HTML元素，以便于将游戏展示在用户的浏览器上。通过HTML的骨架结构，我们可以定义游戏需要的元素、内容和样式，并通过CSS进行样式的调整。

例如，我们可以先定义一个包含羊的容器元素，样式为绝对定位，宽高为游戏画面大小，“好羊”和“坏羊”的图片用img标签添加到容器内：

<div class="container">
  <img src="good.png" class="good-sheep">
  <img src="bad.png" class="bad-sheep">
</div>

通过CSS样式表，我们可以为这些元素设置背景、大小和边距等属性：

.container {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #eee;
  border: 2px solid #444;
}
.good-sheep {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
}
.bad-sheep {
  position: absolute;
  top: 200px;
  left: 250px;
  width: 100px;
  height: 100px;
}

3.添加JavaScript代码实现交互

最后，我们需要添加JavaScript代码，以实现用户与游戏之间的交互功能。我们对羊添加点击事件，当用户点击正确的羊时，游戏进入下一关，如果点击错误的羊则游戏重新开始。

示例一：点击“好羊”后进入下一关

首先，我们需要获取到好羊和坏羊的元素节点：

var goodSheep = document.querySelector('.good-sheep');
var badSheep = document.querySelector('.bad-sheep');

接下来，我们需要为好羊添加点击事件：

goodSheep.addEventListener('click', function() {
  alert('恭喜你，进入下一关！');
});

点击“好羊”时，程序会弹出一个包含“恭喜你，进入下一关！”字符串的弹框。

示例二：点击“坏羊”后重新开始游戏

接下来，我们需要为坏羊添加点击事件：

badSheep.addEventListener('click', function() {
  alert('很遗憾，游戏结束！');
  location.reload(); // 刷新页面，重新开始游戏
});

点击“坏羊”时，程序会弹出一个包含“很遗憾，游戏结束！”字符串的弹框，并且使用 location.reload() 方法重新加载页面，使得游戏重新开始。

最终的JavaScript代码如下所示：

var goodSheep = document.querySelector('.good-sheep');
var badSheep = document.querySelector('.bad-sheep');

goodSheep.addEventListener('click', function() {
  alert('恭喜你，进入下一关！');
});

badSheep.addEventListener('click', function() {
  alert('很遗憾，游戏结束！');
  location.reload(); // 刷新页面，重新开始游戏
});

通过上述示例，我们可以实现“羊了个羊”的小游戏，为用户提供有趣的互动体验。