剪刀石头布游戏

这个例子展示了一个web应用程序的代码，石头剪刀布游戏与图形界面实现使用HTML和JavaScript。 让我们把它一块一块地拆开.

HTML结构

代码以标准HTML标记开头。:

``'html

<html朗="ru">
<头>
<元字符集="UTF-8">

样式(CSS)

在该部分 <style> 定义了几种CSS规则:

``'css
#重置-btn：悬停{
变换:比例(1.2);
过渡：变换0.2s;
}
.选择-btn:悬停:不(:禁用){
变换:比例(1.1);
过渡：变换0.2s;
}
.选择-btn:禁用{
不透明度:0.5;
光标：不允许;
}

这些样式添加:
*悬停时重置按钮缩放的动画;
*悬停时选择按钮的放大倍数动画（如果它们未被禁用）;
*禁用选择按钮的样式（半透明，光标为"不允许"）。

页面的基本结构

文档的主体包含一个包含游戏的容器:

``'html

JavaScript逻辑

初始化变量

``'javascript的
让playerScore=0;
让computerScore=0;
让gameActive=true;

const选择= ['✊', '✋', '✌️'];
const节拍={
'✊': '✌️',
'✋': '✊',
'✌️': '✋'
};

辅助功能

1. updateScoreEmoji 使用emojis更新帐户:
   ``'javascript的
   函数updatescoremoji(scoreElement,score){
   [医]情商= ['0️⃣', '1️⃣', '2️⃣', '3️⃣'];
   记分。textContent=emojiScores[score]//score;
   }

2. `animateComputerChoice` 动画计算机选择:
``'javascript的
函数animateComputerChoice(finalChoice,回调){
	让迭代=0;
	const animationInterval=setInterval(()=>{
		文件。getElementById('computer-choice')。textContent=选择[迭代%3];
		迭代++;
		如果(迭代>10){
			clearInterval（animationInterval）;
			文件。getElementById('computer-choice')。textContent='🤖';
			文件。getElementById('computer-mini-choice')。textContent=finalChoice;
			如果（回调）回调（）;
		}
	}, 100);
}

游戏的主要功能

1. makeChoice -玩家选择处理程序:
   ``'javascript的
   函数makeChoice(chiceidx){
   如果（！游戏活动){
   alert('游戏结束了。 点击🔄一个新的。');
   回来吧;
   }
   const playerEmoji=选择[choiceIdx];
   const computerEmoji=选择[数学。地板（数学。随机()*3)];

   //更新界面
   文件。getElementById('player-mini-choice')。textContent=playerEmoji;
   文件。getElementById('玩家选择')。textContent='🤠';
   文件。querySelectorAll('.选择-btn')。forEach（btn=>btn。禁用=true）;
   //确定获胜者
   功能getWinner(播放器,计算机){
   if(player===computer)返回'draw';
   返回节拍[播放器]===电脑？ '播放器':'电脑';
   }
   const winner=getWinner（playerEmoji，computerEmoji）;

   //更新分数
   如果(胜利者==='玩家'){
   PlayerScore++;
   }else if(winner==='computer'){
   计算机++;
   }
   //检查游戏结束
   如果(PlayerScore=3||computerScore=3){
   游戏活动=错误;
   }

   //动画电脑选择和更新界面
   animateComputerChoice(computerEmoji,()=>{
   updateScoreEmoji（文档。getElementById('player-score'),playerScore);
   updateScoreEmoji（文档。getElementById('computer-score'),computerScore);

    //显示结果
    让resultText=";
    如果（！游戏活动){
    	如果(playerScore===3){
    		resultText='🏆玩家赢了！';
    	 其他{
    		resultText='🤖机器人赢了！';
    	}
     其他{
    	如果(胜利者==='抽签'){
   

resultText='画！';
}else if(winner==='player'){
resultText='你已经赢得了这一轮！';
其他{
resultText='机器人赢得了这一轮！';
}
}
文件。getElementById('result-text')。textContent=resultText;

	//根据游戏状态打开/关闭按钮
	文件。querySelectorAll('.选择-btn')。forEach(btn=>{
		顺便说一句。禁用=！游戏活动;
	});
});

}

2. `resetGame` -重置游戏:
``'javascript的
函数resetGame(){
	玩家分数=0;
	计算机分数=0;
	游戏活动=真;
	updateScoreEmoji（文档。getElementById('player-score'),playerScore);
	updateScoreEmoji（文档。getElementById('computer-score'),computerScore);
	文件。getElementById('玩家选择')。textContent='🤠';
	文件。getElementById('computer-choice')。textContent='🤖';
	文件。getElementById('player-mini-choice')。textContent=";
	文件。getElementById('computer-mini-choice')。textContent=";
	文件。getElementById('result-text')。textContent=";
	文件。querySelectorAll('.选择-btn')。forEach（btn=>btn。禁用=错误）;
}

此代码是一个完整的应用程序，具有界面和石头剪刀布游戏的所有必要功能。

现在让我们继续将我们的应用程序连接到Engee。 最简单的选择是直接在中调用并显示HTML文件。ngscript。

或者，我们可以通过调用应用程序使用GenieFramework提升服务器。jl文件。

``'茱莉亚
使用GenieFramework

路线("/")做
html(read(joinpath(@DIR,"GUI.html"），字符串））
结束

根据服务器启动的结果，我们可以通过URL连接到服务器，并在iframe中显示应用程序，而无需离开Engee。

Iframe（内联框架）是一个HTML元素，允许您在当前页面中嵌入另一个HTML文档或网页。 这会在页面内创建一个"窗口"，可以在其中显示独立内容。

``'茱莉亚
html_content=""<iframe src="$url"宽度="750"高度="500"风格="边框:无;">""

显示(MIME("text/html"),html_content)

结论

石头剪刀布游戏的代码是一个完整的web应用程序。 分析调用方法及其特性，可以进行以下观察。

1. 直接HTML输出:
   没有后端的简单演示;
   在本地环境中工作工程师;
   *与其他组件的集成有限。

2. 通过GenieFramework:
   *运行一个完整的web服务器,
   *允许您在iframe中嵌入游戏,
   *适合整合到更大的项目中,
   *需要更多的时间来启动,
   *提供执行上下文的隔离。