反应中的随机图片位置 - Javascript(1)

📌 相关文章

📜 反应中的随机图片位置 - Javascript(1)

📅 最后修改于: 2023-12-03 15:37:05.935000 🧑 作者: Mango

反应中的随机图片位置 - Javascript

简介

此程序通过Javascript随机生成图片位置，并在用户点击图片时显示该图片的位置坐标，以测试用户对不同位置的反应时间。

实现

HTML部分

<!DOCTYPE html>
<html>
<head>
	<title>反应中的随机图片位置</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>反应中的随机图片位置</h1>
	<div id="game-container">
		<img id="game-img">
	</div>
	<p id="game-text"></p>

	<script src="script.js"></script>
</body>
</html>

在HTML文件中，我们使用了一个<div>容器用于包含游戏的图片，以及一个<p>标签用于显示图片位置的坐标。同时，我们在HTML文件中引入了CSS和Javascript文件。

CSS部分

#game-container {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	background-color: #eee;
}

#game-img {
	position: absolute;
}

#game-text {
	text-align: center;
	font-size: 24px;
}

在CSS文件中，我们设置了游戏图片容器的宽度、高度、居中、背景颜色等属性，同时设置了游戏图片的位置属性和游戏位置坐标的文字样式。

Javascript部分

var gameContainer = document.getElementById("game-container");
var gameImg = document.getElementById("game-img");
var gameText = document.getElementById("game-text");
var imgWidth = 100;
var imgHeight = 100;

function setRandomPosition() {
	var containerWidth = gameContainer.clientWidth;
	var containerHeight = gameContainer.clientHeight;
	var randomX = Math.floor(Math.random() * (containerWidth - imgWidth));
	var randomY = Math.floor(Math.random() * (containerHeight - imgHeight));
	gameImg.style.left = randomX + "px";
	gameImg.style.top = randomY + "px";
	gameImg.addEventListener("click", function(e) {
		gameText.innerHTML = "X坐标: " + e.clientX + ", Y坐标: " + e.clientY;
	});
}

setRandomPosition();

在Javascript文件中，我们首先获取了游戏图片容器、游戏图片和游戏位置坐标的元素，并设置了游戏图片的宽度和高度。然后，我们定义了一个setRandomPosition函数，用于生成随机位置，并将游戏图片设置在该位置。在函数中，我们首先获取游戏图片容器的宽度和高度，然后生成一个随机X和Y坐标，最后将游戏图片的位置设置为这个随机位置。同时，我们使用addEventListener方法，为游戏图片绑定了一个click事件，当用户点击游戏图片时将显示该图片的X和Y坐标。最后，我们调用了setRandomPosition函数，以在页面加载后生成随机位置的游戏图片。

运行

完成以上代码后，只需在浏览器中打开HTML文件，即可运行游戏。每次刷新页面，游戏图片都将生成不同的随机位置，测试用户对不同位置的反应时间。