<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screeps Game</title>
<style>
/* 基本样式重置 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 容器样式 */
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
/* 响应式设计 */
@media screen and (max-width: 600px) {
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* 小屏幕下的阴影效果 */
}
}
/* 游戏按钮样式 */
button {
background-color: #007bff; /* 小屏幕下为 #333 */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
/* 鼠标悬停时的效果 */
&:hover {
background-color: #0056b3; /* 小屏幕下为 #1e4463 */
}
/* 响应式颜色变化 */
@media screen and (max-width: 600px) {
background-color: #333; /* 小屏幕下的背景色 */
&:hover { background-color: #1e4463; } /* 小屏幕下鼠标悬停时的背景色 */
}
}
</style>
</head>
<body>
<div class="container">
<h1>Screeps Game</h1> <!-- 游戏标题 -->
<!-- 游戏开始按钮 -->
<button onclick="startGame()">Play Now!</button> <!-- 点击后调用JavaScript函数 -->
</div> <!-- 容器结束 -->
<!-- 这里可以引入其他必要的 *** 库或脚本 -->
</body>
</html>JavaScript部分（位于<script>标签内）：
<script> // JavaScript代码开始位置，用于实现游戏逻辑或交互功能等。
function startGame() { // 当点击“Play Now!”按钮时，会调用此函数。
const container = document.querySelector('.container'); // 获取容器元素。
const creep = document.createElement('div'); // 创建一个新的div元素作为“Creep”。
creep.classList.add('Creep'); // 为新元素添加类名。
container.appendChild(creep); // 将新元素添加到容器中。
creep.addEventListener('click', function() { // 为“Creep”元素添加点击事件监听器。
console.log('Creep clicked!'); // 当点击时，在控制台输出消息。
}); // 点击事件监听器结束。
} // startGame函数结束。
</script> <!-- JavaScript代码结束位置 -->此代码中，我增加了对小屏幕设备的响应式设计，并优化了按钮的样式和交互效果，我也添加了一个startGame函数来模拟游戏开始时的行为（在控制台打印消息），你可以根据实际需求进一步扩展和修改这个基础模板。
0
神圣骑士
沙发
SCREEPS游戏采用的是基于JavaScript的游戏脚本编程语言。
传说11个月前 (07-26 10:05)00