游戏选择人物的简单实现

最新推荐文章于 2022-03-18 16:33:22 发布

HelloCode97

最新推荐文章于 2022-03-18 16:33:22 发布

阅读量3.3k

点赞数

分类专栏： jQuery 文章标签： jQuery JavaScript HTML 前端

本文链接：https://blog.csdn.net/weixin_44013609/article/details/88379783

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2019.03.10 //没有最好的程序，只有更好的程序

每当玩游戏时，第一次总是让我们选择角色信息，我开始很好奇它们是如何实现的，我在想用jQuery应该如何实现，所以我做了下列测试，测试结果表明可以使用。

jQuery实现人物选择更换角色

个人思路：

1.布局，在开始之前我们应该构思一下接下来的内容都各自是放在什么位置的，应该如何布局较好。

2.既然是人物选择，应当有人物选择标记，因此建立一些需要用的元素，比如radio，CheckBox等。

3.还有一点不要忘记，就是素材，这一般是最先准备好的。现在页面中的区域划分好元素添加好，接下来就是JavaScript了。

4.这里使用jQuery，因为本穷学生正在学习此处。。。

5.我们假设首先选择的是性别，那么我们应该先从性别下手，就是说选择性别完毕后会不会有什么效果。

6.当然有效果，接下得层层递进，选完性别，假设选角色形象了，那此时应该从角色形象下手。

7.每一个选择都应该对应着一个或多个事件，然后把事件细化，弄清楚该事件到底要干嘛，然后写下对应的代码。

8.这里主要用的事件是change()，当元素发生改变时触发事件，还有关于this关键字的巧妙运用，它直接指向了它的调用者。

9.这只是无数方法中的一种方法，重点是思路，欢迎有不同见解的人前来讨论。部分代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<style type="text/css">
		.bg {
			width: 30em;
			height: 15em;
			
			}
		.left {
			float: left;
			width: 40%;
			height: 100%;
		
		}
		.right {
			float: right;
			width: 50%;
			height: 100%;
		
		}
		.right img {
			width: 100%;
			height: 15em;
		}
	</style>
	<body>
		<div class="bg">
			<div class="left">
				<form>
					<div>
						<input type="radio" name="sex" id="man" />男性角色
						<input type="radio" name="sex" id="women" />女性角色
					</div>
					选择人物：
					<select>
					</select>
				</form>
			</div>
			<div class="right">
				
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){
//			男性角色
			$("#man").change(function(){
				$("select").empty()
				$("select").append("<option value='img/game/1.jpg'>一号人物</option><option value='img/game/2.jpg'>二号人物</option>");
				$(".right").html("<img src='img/game/1.jpg'/>");
				$("select").change(function(){
					$(".right").html("<img src="+$(this).val()+"/>");
				})
			})
			
//			女性角色
           $("#women").change(function(){
             	$("select").empty();
				$("select").append("<option value='img/game/3.jpg'>一号人物</option><option value='img/game/2.jpg'>二号人物</option>");
				$(".right").html("<img src='img/game/3.jpg'/>");
				$("select").change(function(){
					$(".right").html("<img src="+$(this).val()+"/>");
				})
			})
		})
	</script>
</html>

HelloCode97

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
游戏选择人物的简单实现

2019.03.10 //没有最好的程序，只有更好的程序每当玩游戏时，第一次总是让我们选择角色信息，我开始很好奇它们是如何实现的，我在想用jQuery应该如何实现，所以我做了下列测试，测试结果表明可以使用。jQuery实现人物选择更换角色个人思路：1.布局，在开始之前我们应该构思一下接下来的内容都各自是放在什么位置的，应该如何布局较好。2.既然是人物选择，应当有人物选择标...
复制链接

扫一扫

专栏目录