html写一个游戏的前端,玩家是一个点,能移动和发世界聊天
时间: 2024-02-20 10:02:06 浏览: 24
好的,下面是一个简单的游戏前端HTML代码,可以让玩家移动和聊天:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游戏前端</title>
<style>
#game-container {
position: relative;
width: 500px;
height: 500px;
background-color: #eee;
}
#player {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
#chat-container {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: #fff;
border-left: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
#chat-messages {
height: 80%;
overflow-y: scroll;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
}
#chat-input {
width: 100%;
height: 20%;
border: 1px solid #ccc;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="game-container">
<div id="player"></div>
</div>
<div id="chat-container">
<div id="chat-messages"></div>
<input type="text" id="chat-input" placeholder="在这里输入聊天内容">
</div>
<script>
var player = document.getElementById("player");
var chatMessages = document.getElementById("chat-messages");
var chatInput = document.getElementById("chat-input");
// 移动玩家的函数
function movePlayer(x, y) {
var newX = parseInt(player.style.left) + x;
var newY = parseInt(player.style.top) + y;
if (newX >= 0 && newX <= 480 && newY >= 0 && newY <= 480) {
player.style.left = newX + "px";
player.style.top = newY + "px";
}
}
// 监听键盘按下事件
document.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 37: // 左
movePlayer(-10, 0);
break;
case 38: // 上
movePlayer(0, -10);
break;
case 39: // 右
movePlayer(10, 0);
break;
case 40: // 下
movePlayer(0, 10);
break;
}
});
// 监听聊天输入框的回车事件,发送聊天信息
chatInput.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
var message = chatInput.value;
chatInput.value = "";
var p = document.createElement("p");
p.textContent = "我: " + message;
chatMessages.appendChild(p);
}
});
</script>
</body>
</html>
```
这段代码中,用一个 `div` 元素作为游戏容器,用一个 `div` 元素作为玩家,玩家可以通过键盘控制移动。用一个 `div` 元素作为聊天框,其中包含一个显示聊天信息的 `div` 元素和一个输入框,玩家可以在输入框中输入聊天内容并发送,聊天信息会显示在聊天框中。