对对碰（网页版单机小游戏）

最新推荐文章于 2021-12-21 22:37:47 发布

老手er

最新推荐文章于 2021-12-21 22:37:47 发布

阅读量2.1k

点赞数 1

分类专栏：游戏文章标签：对对碰小游戏（基于js点击事件处理实现）

本文链接：https://blog.csdn.net/qq_43608549/article/details/101099440

版权

简易的对对碰的实现（基于js的事件处理机制）

原理：要想制作这个游戏很简单，先画一张表格，在其中添加照片，通过鼠标点击事件调用在js里编写的让图片隐藏功能的函数即可达到预期效果。

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			i = 0
			last = null
			function clickDisappear(obj){
				if(i == 0 && last == null){
					last = obj
					i = 1
				}else{
					if(obj != last){
						if(obj.src == last.src){
							obj.style.display = 'none'
							last.style.display = 'none'
						}
						i = 0
						last = null
					}
				}
			}
		</script>
		<style type="text/css">
			img{
				margin: 9px;float: left; width: 32px;height: 32px;
			}
			caption{
				font-size: 20px;
			}
		</style>
		
	</head>
	<body>
		<!--cellpadding="1" cellspacing="10"-->
		<table style="border: solid 1px black;background-image: url(img/xinshang.jpg);" align="center">
			<caption>连连看小游戏</caption>
			<thead>
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
					<th>4</th>
					<th>5</th>
					<th>6</th>
					<th>7</th>
					<th>8</th>
					<th>9</th>
					<th>10</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0884.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0092.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0704.gif" onclick="clickDisappear(this)"></td>
					<td><img src="img/bg-0092.gif" onclick="clickDisappe