[JavaScript知识库]《你来画，我来猜》游戏简单实现（html、css、jquery）

本文主要采用 css html jquery 实现《你来画，我来猜》简单小游戏，运用了 css 的基本常用样式，html基本标签，jquery 的部分语法和部分知识。主要是实现了 css html jquery 三者的紧密结合！

菜鸟教程（学习基础知识）： 菜鸟教程

1.JQuery基本知识

可以参考我的另一篇博客： 链接: jQuery 详解！！！
链接: jQuery DOM操作

1. jquery 文件引入

<!--引入js代码-->
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

2. js代码加载顺序

<!--书写js代码-->
		<script type="text/javascript">
			
			//保证加载完html页面元素后再执行下面js代码(因为前端页面是顺序加载，js代码往往写在html标签的前面)
			$(document).ready(function(){
					//js代码书写在这里面
			)};
	  </script>

3. js定时器

//setInterval(每段时间执行的代码操作，间隔时间(单位毫秒))
					var myTime=setInterval(function(){
						time=time-1;
						$("#text_game_time").html(time+"");
						
						if(time<=0){
							//关闭计时器
							clearInterval(myTime);
							
							alert("游戏结束！您的得分是："+num_score+"分");
							
						}
					},1000);

4. js定义点击事件

//下面代码，也可以将 function(){}封装成方法进行引入
$("#btn_start").click(function(){
		//书写js代码
});

5. js自定义封装方法

//封装随机数函数,注意语法格式
				function text_change(){
					//定义整形
					var num=0;
					//获取随机词语下标
					num=Math.random();
					num=num*num_c.length;
					num=Math.floor(num);
					
					//改变标签值
					$("#text_info").html(num_c[num]);
					
				}

6. 使用js代码操作网页元素标签的样式、内容

制作游戏:你来比划我来猜

使用jquery需要引入jquery文件
	方案1,使用script标签引入本地的jquery文件
	方案2,使用script标签引入网上的jquery文件
	
如何使用JQuery寻找html标签
	$("选择器") 
	如:$("#id的属性值") $(".class的属性值") $("标签名")

如何使用Jquery修改标签的css属性值
	$("选择器").css("css属性名","css属性值");
如何使用Jquery获取标签的css属性值
	var 名称 = $("选择器").css("css属性名");
	
如何使用Jquery获取标签中的内容
	var 名称 = $("选择器").html();
如何使用Jquery设置标签中的内容
	$("选择器").html("新内容");

2.《你来画，我来猜》游戏实现

1. 实现页面效果

2. 代码实现

源码下载链接： 《你来画，我来猜》