当前位置：首页 > news >正文

广州化妆品网站建设/今日全国最新疫情通报

news 2025/7/23 6:12:07

广州化妆品网站建设,今日全国最新疫情通报,做网站的结论与心得,广州网站建设设计公司信息jquery 表单记忆本教程将向您展示如何使用jQuery和HTML创建简单的游戏。最终的游戏旨在帮助您提高记忆力。我们将有一个86的正方形网格作为游戏窗口。开始游戏后，鸟类图像将出现在六个正方形中，几秒钟后消失。您的目标是记住显示图像的位置&#xff…

jquery 表单记忆

本教程将向您展示如何使用jQuery和HTML创建简单的游戏。最终的游戏旨在帮助您提高记忆力。我们将有一个8×6的正方形网格作为游戏窗口。开始游戏后，鸟类图像将出现在六个正方形中，几秒钟后消失。您的目标是记住显示图像的位置，然后单击那些正方形。

单击六个正方形后，将根据您的准确性为您提供分数，并且鸟类将再次在随机位置显示。该过程将一直持续到分配的时间到期为止。每次准确点击，您将获得1分；如果正确点击所有六只鸟，您将获得100分的奖励。现在已经确定了游戏规则，我们可以继续创建开始屏幕了。

设计屏幕布局

首先，游戏HTML文件如下所示。游戏的所有统计信息都放在game_results元素内。您可以在此区域中看到单个级别的“剩余时间”，“得分”和“剩余点击次数”。与游戏相关的所有窗口都放置在game_window元素内。这包括初始启动屏幕，该屏幕包含在start_window元素中。一旦游戏开始，就隐藏开始屏幕，并在play_window元素中玩游戏。最后，结果显示在end_window元素中。您可以在样式部分中找到必要CSS代码。

<html>
<head><title>Simple jQuery Memory Game</title><script src='jquery-latest.js'></script>
</head>
<body><div id="game_results"><ul><li><div class="field_label">Time Left</div><div class="field_value"><div id="timer">40</div></div></li><li><div class="field_label">Your Score</div><div class="field_value"><div id="score">0</div></div></li><li><div class="field_label">Clicks Left</div><div class="field_value"><div id="clicks"></div></div></li><li><div id="bonus" class="bonus">100 Bonus</div></li></ul></div><div id='game_window'><div id='start_window'><div id='msg_game'>jQuery Memory Checker Game</div><div id='start_game'>Start</div></div><div id='end_window'><div id='complete_game'></div></div><div id='play_window'></div></div>
</body>
</html>

创建游戏窗口

首先，我们必须在进入任何功能之前为游戏窗口创建元素。如前所述， play_window将用于游戏。在本部分中，我们必须在八列六行上创建48个正方形。下面显示了一些正方形的代码。

<div id="game_0_0" data-x="0" data-y="0" class="game_box"></div>
<div id="game_0_1" data-x="0" data-y="1" class="game_box"></div>
<div id="game_0_2" data-x="0" data-y="2" class="game_box"></div>
<div id="game_0_3" data-x="0" data-y="3" class="game_box"></div>
<div id="game_0_4" data-x="0" data-y="4" class="game_box"></div>
<div id="game_0_5" data-x="0" data-y="5" class="game_box"></div>
<div id="game_0_6" data-x="0" data-y="6" class="game_box"></div>
<div id="game_0_7" data-x="0" data-y="7" class="game_box"></div>

上面的代码代表播放窗口的第一行。我已经为id ， data-x和data-y属性使用了命名约定，这将在后面的部分中使用。现在我们已经设计了游戏窗口，让我们继续创建用于启动游戏的功能。

开始游戏

一旦单击开始按钮，所有其他窗口都需要关闭，以便显示游戏窗口。考虑下面的代码。

var game_interval;
var activeBirds = [];
var activeCount = 0;
var activeStatus = 1;$("#start_game").click(function(){game_interval = setInterval(updateTimer,1000);$("#play_window").show();$("#start_window").hide();displayBirds();
});

前四行定义全局变量。 game_interval将保存setInterval()返回的值，而activeBirds是一个数组，将保留鸟类在当前关卡中的位置。 activeCount是单个级别内的点击次数， activeStatus用于检查点击状态。在“开始”按钮的单击处理程序函数中，我们每隔一秒钟调用一次updateTimer()函数以更新剩余播放时间。 updateTimer()函数的代码如下所示。

function updateTimer(){var time_remaining = parseInt($("#timer").html());if(time_remaining == 0){window.clearInterval(game_interval);$("#play_window").hide();$("#start_window").hide();$("#end_window").show();$("#complete_game").html("You Have Scored "+$("#score").html());}else{$("#timer").html(--time_remaining);}
}

上面显示的功能将每秒减少时间计数。当剩余时间变为零时，它将通过调用JavaScript clearInterval()函数来停止计时器。然后，隐藏播放窗口，并显示结果窗口。现在，让我们转到启动功能的其余部分。

$("#start_game").click(function(){game_interval = setInterval(updateTimer,1000);$("#play_window").show();$("#start_window").hide();displayBirds();
});

接下来，我们需要隐藏开始窗口并显示播放窗口。最后，我们调用displayBirds()函数以显示鸟类并开始游戏。 displayBirds()将讨论displayBirds()函数。

显示要单击的鸟

游戏开始后，将在每个级别的六个随机位置显示鸟类。让我们考虑以下displayBirds()函数。该函数将循环执行，直到将适当数量的鸟添加到activeBirds数组中activeBirds 。在循环内部，将生成随机的X和Y值以选择行号和列号。然后，我们检查生成的位置是否已被鸟占据。如果有空缺，我们接受。然后将鸟的图像添加到生成的位置。

function displayBirds(){while (activeBirds.length < 6){var random_X = Math.floor(Math.random()*6);var random_Y = Math.floor(Math.random()*8);var array_index = $.inArray(random_X+""+random_Y, activeBirds);if(array_index == -1){activeBirds.push(random_X+""+random_Y);}$("#game_"+random_X+"_"+random_Y).html("<img src='bird.png' class='game_bird' />");level_interval = setTimeout(function(){$(".game_bird").remove();activeStatus = 1;},2000);}
}

最后， setTimeout()用于调用隐藏鸟的匿名函数。鸟类会出现，然后在两秒钟后消失。用户必须记住显示鸟类的地方并开始单击以获取分数。下一节将重点介绍如何处理用户的点击并保持得分。

捕获用户点击并生成积分

用户通过单击先前显示的鸟类的正方形来得分。用户完成对当前关卡的点击后，我们还必须为下一个关卡生成鸟类。处理点击事件的代码如下所示。

$(".game_box").click(function(){if(activeStatus == 1){// Section 1activeCount++;$("#clicks").html(6-activeCount);var clicked_x = $(this).attr("data-x");var clicked_y = $(this).attr("data-y");var clicked_box = clicked_x+""+clicked_y;// Section 2var array_index = $.inArray(clicked_box, activeBirds);if(array_index != -1){activeBirds.splice(array_index,1);}// Section 3if(activeCount == 6){var score = parseInt($("#score").html());score = score + (6-activeBirds.length);if(activeBirds.length == 0){score = score + 100;$("#bonus").slideDown("slow");$("#bonus").slideUp("slow");}$("#score").html(score);//Reset VariablesactiveCount = 0;activeBirds = [];displayBirds();}else{return;}}
});

首先，我使用game_box类选择器为每个方块的click事件分配了一个函数。变量activeCount ，保存每个级别中的用户点击次数。每次用户单击正方形时，我们都会增加它。然后，我们通过从6中减去activeCount来显示剩余的点击次数。对于每次点击，我们还使用data-x和data-y属性获得平方的X和Y值。

接下来，我们使用jQuery的inArray()函数检查被单击的框是否在activeBirds数组中。根据每个正确的猜测，用户得到1分，并且将元素从activeBirds移除。一旦用户没有点击，我们将使用activeBirds数组中的其余条目来计算得分。如果所有鸟都匹配，则为用户提供100奖励积分。当所有的鸟都匹配时，我们将显示一个奖励标签，该标签默认情况下在顶部使用jQuery的slideDown()和slideUp()函数slideUp() 。最后，我们重置所有变量并调用displayBirds()以显示下一级的鸟类。