当前位置: 首页 > article >正文

猜猜我用的是哪个大模型?我的世界游戏界面简单的模拟效果

我的罗里吧嗦的,根据小朋友的要求,边听边写边输入的提示词:

请生成一段完整的在网页中用html5和javascript代码模拟“我的世界”中游戏场景的互动画面,要求提供若干人物选项可以选择,请自行选择需要使用哪些库或框架来实现该功能,但希望能够保存之后,用浏览器打开就能够使用。希望能够实现若干个人物的选择,其中可供选择的人物要具有动作演示的效果,请自己选一些实现动画效果的JavaScript库,可以直接在线使用,无须其它依赖和安装,此功能可以支持两个人同时操作。请提供完整的可以直接在浏览器中打开就能够简单实现的代码

结果打开之后是这样的,真能操控:

在这里插入图片描述
代码也是毫不吝啬,一口气输出这么多:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Minecraft-Style 3D Game</title><link href="https://fastly.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"><link href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet"><style>body {margin: 0;overflow: hidden;font-family: 'Minecraft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #333;}@font-face {font-family: 'Minecraft';src: url('https://fastly.jsdelivr.net/npm/minecraft-font@1.0.0/assets/fonts/minecraft.woff2') format('woff2');font-weight: normal;font-style: normal;}#game-container {position: relative;width: 100vw;height: 100vh;}#render-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.interface {position: absolute;z-index: 10;color: white;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}.character-selection {top: 20px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.6);border: 2px solid #555;padding: 15px;border-radius: 8px;width: 90%;max-width: 800px;}.controls {bottom: 20px;background-color: rgba(0, 0, 0, 0.6);border: 2px solid #555;padding: 10px;border-radius: 8px;width: 250px;}#player1-controls {left: 20px;}#player2-controls {right: 20px;}.status-bar {bottom: 20px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.6);border: 2px solid #555;padding: 10px;border-radius: 8px;width: 90%;max-width: 500px;text-align: center;}.character-option {display: inline-block;margin: 5px;cursor: pointer;transition: all 0.3s;vertical-align: top;text-align: center;}.character-option img {width: 60px;height: 120px;object-fit: cover;border: 3px solid transparent;border-radius: 4px;filter: brightness(0.7);transition: all 0.3s;}.character-option:hover img {border-color: #aaa;filter: brightness(1);}.character-option.selected img {border-color: #5cf;filter: brightness(1);}.key {display: inline-block;background-color: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.4);padding: 5px 8px;margin: 2px;border-radius: 4px;font-weight: bold;}.loading-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #333;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 100;color: white;font-size: 24px;}.progress-bar {width: 300px;height: 20px;background-color: #222;border: 2px solid #555;margin-top: 20px;border-radius: 10px;overflow: hidden;}.progress {height: 100%;background-color: #5cf;width: 0%;transition: width 0.3s;}.dirt-block {display: inline-block;width: 30px;height: 30px;background-image: url('https://images.unsplash.com/photo-1607513746994-51f730a44832?q=80&w=30&auto=format&fit=crop');background-size: cover;margin: 0 5px;border-radius: 2px;vertical-align: middle;}@media (max-width: 768px) {.character-selection {padding: 10px;}.character-option img {width: 40px;height: 80px;}.controls {width: 150px;font-size: 12px;}.status-bar {font-size: 12px;}}</style>
</head>
<body><!-- Loading Screen --><div id="f2305d93-bcef-4e15-b7ce-a63c8d491b52" class="loading-screen"><div id="d40cd4d8-4c0e-48e4-a4d0-05bbfd6fa7db" class="dirt-block"></div><span id="916207e2-1aa4-49bc-b83c-c3eece7a44c2">Loading Minecraft-Style Game...</span><div id="b83699d9-78e5-4708-b801-716a85eef33f" class="progress-bar"><div id="39d52c16-9215-4ebf-a6a0-25c67b5a8de1" class="progress"></div></div></div><!-- Game Container --><div id="a24df7c4-8bb6-4ac3-9e3b-91aa2a63136f" class="game-container"><!-- Canvas for Three.js rendering --><canvas id="render-canvas"></canvas><!-- Character Selection UI --><div id="6c1abfc1-2331-40ab-a1e5-5eeb687d8092" class="interface character-selection"><div id="cf8ae90c-cf05-40b4-af8a-faf0b60c47cb" class="grid grid-cols-2 md:grid-cols-4 gap-2"><div id="b05e2f3c-5dbe-444f-9fa0-0e9a1e637919" class="text-center col-span-2 md:col-span-4 mb-2"><h2 id="c815cc5e-5ff2-46f5-9342-c4118cb0ecd7" class="text-xl font-bold">Select Characters</h2><div id="8268f04e-2325-4c9e-aa64-44bb6acb32c0" class="mt-1"><span id="1cff1ae5-0e54-4f3f-bf0b-ab87bce5408f" class="text-blue-300">Player 1:</span> <span id="player1-character">Steve</span> | <span id="5f21f725-c5c0-4034-bb01-a7f56da3f128" class="text-green-300">Player 2:</span> <span id="player2-character">Alex</span></div></div><div id="character-options"></div></div></div><!-- Player 1 Controls --><div id="player1-controls" class="interface controls"><h3 id="0376da1d-f2a0-4b95-907e-936476a841a1" class="text-blue-300 font-bold">Player 1 Controls:</h3><div id="d2bc2fb3-0502-4f5d-86b3-0f2a5f028a3a"><div id="a0294bc3-bcc8-4f28-b001-e9fc0ea2f56a" class="mb-1"><span id="cd96b41c-00d3-4309-b805-f2befdda40c9" class="key">W</span> Forward</div><div id="369be69d-d537-4bc3-a11e-2411ca8ee159" class="mb-1"><span id="9ae1c1c2-6f71-4575-8dd1-dc0fccd922e3" class="key">A</span><span id="d7053019-0309-433e-be51-603a9a10cb23" class="key">S</span><span id="1f78a456-bc7e-4bb2-9c52-7efc4c2c65c4" class="key">D</span> Move</div><div id="27312d5e-377e-4469-9802-7c3b846846f3" class="mb-1"><span id="0c01c5d2-b55a-4e2c-b21b-bdd32152b755" class="key">Space</span> Jump</div><div id="15cfdb30-6696-4cfd-b61c-6ac80e730ebe"><span id="6a42c7fc-dc00-442c-9478-8c5d295bd8b5" class="key">E</span> Action</div></div></div><!-- Player 2 Controls --><div id="player2-controls" class="interface controls"><h3 id="140c646d-11b9-4ea8-82ad-bf915bd8b8f0" class="text-green-300 font-bold">Player 2 Controls:</h3><div id="9dba0abc-4a53-4299-92b3-2c6319cfe33d"><div id="0c620c17-2910-430a-b0c5-428c2e86fbc8" class="mb-1"><span id="80c340f8-c8d9-41d0-9e71-0d14ea07e90e" class="key"></span> Forward</div><div id="007bccc6-d4fb-4658-98cf-6b5c88d491be" class="mb-1"><span id="086ae8b2-c512-4ad3-8a35-4d60e8a441ae" class="key"></span><span id="e4222974-a876-490d-aa4b-c2f4188ac164" class="key"></span><span id="0a94ad7f-9ef5-440e-a144-a875a790ffb0" class="key"></span> Move</div><div id="fb07362d-4363-40d3-b520-3b56722fbea1" class="mb-1"><span id="9a900166-a068-4c4c-b1a6-59bcc0304d38" class="key">Enter</span> Jump</div><div id="bac976e5-fa44-462a-902e-bf729516482e"><span id="d6c0bf9a-6007-4f5f-a530-a9b64c6f6c11" class="key">/</span> Action</div></div></div><!-- Status Bar --><div id="de6f85ed-466b-4bd7-9e51-5b778908622d" class="interface status-bar"><div id="game-status">Use WASD+Space and Arrow+Enter to move around and explore the world!</div></div></div><!-- Scripts --><script src="https://fastly.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script><script src="https://fastly.jsdelivr.net/npm/three@0.142.0/examples/js/controls/OrbitControls.js"></script><script src="https://fastly.jsdelivr.net/npm/@tweenjs/tween.js@18.6.4/dist/tween.umd.js"></script><script>// Main game classclass MinecraftStyleGame {constructor() {// Core propertiesthis.scene = null;this.camera = null;this.renderer = null;this.clock = new THREE.Clock();// Game statethis.players = [{ id: 1, character: 'Steve', model: null, position: new THREE.Vector3(0, 1, 0), velocity: new THREE.Vector3(), isJumping: false, onGround: true },{ id: 2, character: 'Alex', model: null, position: new THREE.Vector3(3, 1, 0), velocity: new THREE.Vector3(), isJumping: false, onGround: true }];this.keys = {player1: {forward: false,backward: false,left: false,right: false,jump: false,action: false},player2: {forward: false,backward: false,left: false,right: false,jump: false,action: false}};// Game world parametersthis.worldSize = 20;this.blockSize = 1;this.gravity = 0.02;this.jumpForce = 0.2;this.moveSpeed = 0.1;// Character optionsthis.characterOptions = [{ name: 'Steve', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/steve.png', playerID: 1 },{ name: 'Alex', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/alex.png', playerID: 2 },{ name: 'Zombie', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/zombie.png', playerID: null },{ name: 'Skeleton', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/skeleton.png', playerID: null },{ name: 'Creeper', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/creeper.png', playerID: null },{ name: 'Enderman', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/enderman.png', playerID: null },{ name: 'Villager', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/villager.png', playerID: null },{ name: 'Pig', texture: 'https://minecraft-heads.com/media/com_minecraft/skins/original/pig.png', playerID: null }];// Resources to loadthis.textures = {dirt: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1607513746994-51f730a44832?q=80&w=200&auto=format&fit=crop'),grass: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1626269555171-153a1bca85f7?q=80&w=200&auto=format&fit=crop'),stone: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1588371758051-e93a5ce1b5f4?q=80&w=200&auto=format&fit=crop'),wood: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1599751449128-eb7249c3d6b1?q=80&w=200&auto=format&fit=crop'),leaves: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1570822153940-2b3b795f54cf?q=80&w=200&auto=format&fit=crop')};// Loading progressthis.resourcesLoaded = 0;this.totalResources = Object.keys(this.textures).length + this.characterOptions.length;// Initialize the gamethis.init();}init() {// Initialize Three.js scenethis.initScene();// Handle loadingthis.loadResources();// UI setupthis.setupCharacterSelection();// Setup event listenersthis.setupEventListeners();// Start animation loopthis.animate();}initScene() {// Create scenethis.scene = new THREE.Scene();this.scene.background = new THREE.Color(0x87CEEB); // Sky blue// Create camerathis.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.camera.position.set(10, 10, 10);this.camera.lookAt(0, 0, 0);// Create rendererthis.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('render-canvas'),antialias: true });this.renderer.setSize(window.innerWidth, window.innerHeight);this.renderer.shadowMap.enabled = true;// Add lightconst ambientLight = new THREE.AmbientLight(0xffffff, 0.6);this.scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);directionalLight.position.set(10, 20, 10);directionalLight.castShadow = true;directionalLight.shadow.mapSize.width = 2048;directionalLight.shadow.mapSize.height = 2048;this.scene.add(directionalLight);// Add controls for debugging// this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);}loadResources() {// Track texture loadingconst loadingManager = new THREE.LoadingManager();loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {this.resourcesLoaded++;this.updateLoadingProgress();};loadingManager.onLoad = () => {// All textures are loadedthis.createWorld();setTimeout(() => {document.getElementById('f2305d93-bcef-4e15-b7ce-a63c8d491b52').style.display = 'none';}, 500);};// Create texture loader with the loading managerconst textureLoader = new THREE.TextureLoader(loadingManager);// Load all texturesObject.keys(this.textures).forEach(key => {const url = this.textures[key].source?.data?.src;if (url) {this.textures[key] = textureLoader.load(url);this.textures[key].wrapS = THREE.RepeatWrapping;this.textures[key].wrapT = THREE.RepeatWrapping;}});// Load character texturesthis.characterOptions.forEach(char => {textureLoader.load(char.texture, () => {this.resourcesLoaded++;this.updateLoadingProgress();});});}updateLoadingProgress() {const progress = Math.min((this.resourcesLoaded / this.totalResources) * 100, 100);document.getElementById('39d52c16-9215-4ebf-a6a0-25c67b5a8de1').style.width = `${progress}%`;}createWorld() {// Create groundthis.createTerrain();// Create various structuresthis.createStructures();// Create player charactersthis.createPlayerCharacters();}createTerrain() {// Create base terrainconst groundGeometry = new THREE.BoxGeometry(this.worldSize, 1, this.worldSize);const groundMaterial = new THREE.MeshStandardMaterial({ map: this.textures.grass });const ground = new THREE.Mesh(groundGeometry, groundMaterial);ground.position.y = -0.5;ground.receiveShadow = true;this.scene.add(ground);// Create random terrain variationsfor (let x = -this.worldSize/2; x < this.worldSize/2; x += this.blockSize) {for (let z = -this.worldSize/2; z < this.worldSize/2; z += this.blockSize) {// Skip the center area for player spawnif (Math.abs(x) < 4 && Math.abs(z) < 4) continue;if (Math.random() < 0.1) {const height = Math.floor(Math.random() * 3) + 1;for (let y = 0; y < height; y++) {const material = y === height - 1 ? new THREE.MeshStandardMaterial({ map: this.textures.grass }) : new THREE.MeshStandardMaterial({ map: this.textures.dirt });this.createBlock(x, y, z, material);}}// Create treesif (Math.random() < 0.02) {this.createTree(x, 0, z);}}}}createBlock(x, y, z, material) {const geometry = new THREE.BoxGeometry(this.blockSize, this.blockSize, this.blockSize);const block = new THREE.Mesh(geometry, material);block.position.set(x, y, z);block.castShadow = true;block.receiveShadow = true;this.scene.add(block);return block;}createTree(x, y, z) {// Tree trunkconst trunkHeight = 4 + Math.floor(Math.random() * 3);const woodMaterial = new THREE.MeshStandardMaterial({ map: this.textures.wood });for (let i = 0; i < trunkHeight; i++) {this.createBlock(x, y + i, z, woodMaterial);}// Tree leavesconst leavesMaterial = new THREE.MeshStandardMaterial({ map: this.textures.leaves,transparent: true,alphaTest: 0.8});const leavesSize = 3;for (let lx = -leavesSize; lx <= leavesSize; lx++) {for (let ly = 0; ly <= leavesSize + 1; ly++) {for (let lz = -leavesSize; lz <= leavesSize; lz++) {// Create spherical-ish shape for leavesif (lx*lx + (ly-1)*(ly-1) + lz*lz <= leavesSize*leavesSize) {// Don't place leaves where trunk isif (!(lx === 0 && lz === 0 && ly < leavesSize)) {this.createBlock(x + lx, y + trunkHeight - 1 + ly, z + lz, leavesMaterial);}}}}}}createStructures() {// Create a small houseconst housePosX = 8;const housePosZ = 8;const houseSizeX = 5;const houseSizeZ = 4;const wallHeight = 3;const stoneMaterial = new THREE.MeshStandardMaterial({ map: this.textures.stone });const woodMaterial = new THREE.MeshStandardMaterial({ map: this.textures.wood });// Floorfor (let x = 0; x < houseSizeX; x++) {for (let z = 0; z < houseSizeZ; z++) {this.createBlock(housePosX + x, 0, housePosZ + z, stoneMaterial);}}// Wallsfor (let x = 0; x < houseSizeX; x++) {for (let y = 1; y <= wallHeight; y++) {// Front and back wallsif (!(x === 2 && y < 3)) { // Door in front wallthis.createBlock(housePosX + x, y, housePosZ, woodMaterial); // Front wall}this.createBlock(housePosX + x, y, housePosZ + houseSizeZ - 1, woodMaterial); // Back wall}}for (let z = 0; z < houseSizeZ; z++) {for (let y = 1; y <= wallHeight; y++) {// Side wallsthis.createBlock(housePosX, y, housePosZ + z, woodMaterial); // Left wallthis.createBlock(housePosX + houseSizeX - 1, y, housePosZ + z, woodMaterial); // Right wall}}// Rooffor (let x = -1; x <= houseSizeX; x++) {for (let z = -1; z <= houseSizeZ; z++) {this.createBlock(housePosX + x, wallHeight + 1, housePosZ + z, stoneMaterial);}}// Create a small mining areaconst minePosX = -8;const minePosZ = -8;// Create pitfor (let x = 0; x < 4; x++) {for (let z = 0; z < 4; z++) {// Remove blocks to create a pit// but leave some stone blocks at the bottomif (!(x === 1 && z === 1) && !(x === 2 && z === 2)) {this.createBlock(minePosX + x, -3, minePosZ + z, stoneMaterial);}}}// Add some stone around the pitfor (let i = 0; i < 10; i++) {const rx = minePosX + Math.floor(Math.random() * 6) - 1;const rz = minePosZ + Math.floor(Math.random() * 6) - 1;const ry = Math.floor(Math.random() * 2);this.createBlock(rx, ry, rz, stoneMaterial);}}createPlayerCharacters() {// We'll create simple block player models for now// In a real implementation, you would load Minecraft character models// Player 1this.createPlayerModel(this.players[0]);// Player 2this.createPlayerModel(this.players[1]);}createPlayerModel(player) {// Get character info from optionsconst characterInfo = this.characterOptions.find(c => c.name === player.character);if (!characterInfo) return;// Create character groupconst playerModel = new THREE.Group();// Load character textureconst textureLoader = new THREE.TextureLoader();const texture = textureLoader.load(characterInfo.texture);// Create body parts with correct proportions// Headconst headGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);const headMaterial = new THREE.MeshStandardMaterial({ map: texture });const head = new THREE.Mesh(headGeometry, headMaterial);head.position.y = 1.4;head.castShadow = true;playerModel.add(head);// Bodyconst bodyGeometry = new THREE.BoxGeometry(0.6, 1.2, 0.4);const bodyMaterial = new THREE.MeshStandardMaterial({ map: texture,color: player.id === 1 ? 0x3090ff : 0x60d060 });const body = new THREE.Mesh(bodyGeometry, bodyMaterial);body.position.y = 0.6;body.castShadow = true;playerModel.add(body);// Armsconst armGeometry = new THREE.BoxGeometry(0.3, 1.0, 0.3);const armMaterial = new THREE.MeshStandardMaterial({ map: texture,color: player.id === 1 ? 0x2080dd : 0x50c050});const leftArm = new THREE.Mesh(armGeometry, armMaterial);leftArm.position.set(-0.45, 0.5, 0);leftArm.castShadow = true;playerModel.add(leftArm);const rightArm = new THREE.Mesh(armGeometry, armMaterial);rightArm.position.set(0.45, 0.5, 0);rightArm.castShadow = true;playerModel.add(rightArm);// Legsconst legGeometry = new THREE.BoxGeometry(0.3, 1.0, 0.3);const legMaterial = new THREE.MeshStandardMaterial({ map: texture,color: 0x3060b0});const leftLeg = new THREE.Mesh(legGeometry, legMaterial);leftLeg.position.set(-0.2, -0.5, 0);leftLeg.castShadow = true;playerModel.add(leftLeg);const rightLeg = new THREE.Mesh(legGeometry, legMaterial);rightLeg.position.set(0.2, -0.5, 0);rightLeg.castShadow = true;playerModel.add(rightLeg);// Position the player modelplayerModel.position.copy(player.position);// Store limbs for animationplayerModel.userData = {head,leftArm,rightArm,leftLeg,rightLeg,animationTime: 0};// Add to scene and assign to playerthis.scene.add(playerModel);player.model = playerModel;}setupCharacterSelection() {const container = document.getElementById('character-options');this.characterOptions.forEach((char, index) => {const option = document.createElement('div');option.className = 'character-option';if (char.playerID === 1) option.classList.add('selected');const img = document.createElement('img');img.src = char.texture;img.alt = char.name;const name = document.createElement('div');name.textContent = char.name;option.appendChild(img);option.appendChild(name);option.addEventListener('click', () => {// Show character selection dialogthis.selectCharacter(char, index);});container.appendChild(option);});}selectCharacter(character, index) {// Create a simple modal for character selectionconst selection = prompt(`Assign ${character.name} to:\n1: Player 1\n2: Player 2\n0: Cancel`);if (selection === '1' || selection === '2') {const playerIndex = parseInt(selection) - 1;const player = this.players[playerIndex];// Update selectedPlayerID on old characterconst oldCharOption = this.characterOptions.find(c => c.name === player.character);if (oldCharOption) oldCharOption.playerID = null;// Update player characterplayer.character = character.name;character.playerID = parseInt(selection);// Update UIdocument.getElementById(`player${selection}-character`).textContent = character.name;// Remove old player model and create a new oneif (player.model) {this.scene.remove(player.model);}this.createPlayerModel(player);// Update character selection UIconst options = document.querySelectorAll('.character-option');options.forEach((opt, idx) => {if (this.characterOptions[idx].playerID === 1 || this.characterOptions[idx].playerID === 2) {opt.classList.add('selected');} else {opt.classList.remove('selected');}});}}setupEventListeners() {// Keyboard controlsdocument.addEventListener('keydown', (event) => this.handleKeyDown(event));document.addEventListener('keyup', (event) => this.handleKeyUp(event));// Window resizewindow.addEventListener('resize', () => this.handleResize());}handleKeyDown(event) {// Player 1 controls (WASD + Space)switch(event.code) {case 'KeyW': this.keys.player1.forward = true; break;case 'KeyS': this.keys.player1.backward = true; break;case 'KeyA': this.keys.player1.left = true; break;case 'KeyD': this.keys.player1.right = true; break;case 'Space': event.preventDefault();this.keys.player1.jump = true; break;case 'KeyE': this.keys.player1.action = true; break;}// Player 2 controls (Arrow keys + Enter)switch(event.code) {case 'ArrowUp': this.keys.player2.forward = true; break;case 'ArrowDown': this.keys.player2.backward = true; break;case 'ArrowLeft': this.keys.player2.left = true; break;case 'ArrowRight': this.keys.player2.right = true; break;case 'Enter': this.keys.player2.jump = true; break;case 'Slash': this.keys.player2.action = true; break;}}handleKeyUp(event) {// Player 1 controlsswitch(event.code) {case 'KeyW': this.keys.player1.forward = false; break;case 'KeyS': this.keys.player1.backward = false; break;case 'KeyA': this.keys.player1.left = false; break;case 'KeyD': this.keys.player1.right = false; break;case 'Space': this.keys.player1.jump = false; break;case 'KeyE': this.keys.player1.action = false; break;}// Player 2 controlsswitch(event.code) {case 'ArrowUp': this.keys.player2.forward = false; break;case 'ArrowDown': this.keys.player2.backward = false; break;case 'ArrowLeft': this.keys.player2.left = false; break;case 'ArrowRight': this.keys.player2.right = false; break;case 'Enter': this.keys.player2.jump = false; break;case 'Slash': this.keys.player2.action = false; break;}}handleResize() {const width = window.innerWidth;const height = window.innerHeight;this.camera.aspect = width / height;this.camera.updateProjectionMatrix();this.renderer.setSize(width, height);}updatePlayer(player, controls, deltaTime) {if (!player.model) return;// Movement directionconst moveDir = new THREE.Vector3(0, 0, 0);if (controls.forward) moveDir.z -= 1;if (controls.backward) moveDir.z += 1;if (controls.left) moveDir.x -= 1;if (controls.right) moveDir.x += 1;// Normalize movement directionif (moveDir.length() > 0) {moveDir.normalize();// Calculate movementconst movement = moveDir.multiplyScalar(this.moveSpeed * deltaTime * 60);// Update positionplayer.position.x += movement.x;player.position.z += movement.z;// Update animation stateplayer.model.userData.animationTime += deltaTime * 10;// Animate legs and arms while walkingthis.animateWalking(player.model, player.model.userData.animationTime);// Face direction of movementif (movement.x !== 0 || movement.z !== 0) {player.model.rotation.y = Math.atan2(movement.x, movement.z);}} else {// Reset animation when not movingthis.resetAnimation(player.model);}// Jumpingif (controls.jump && player.onGround) {player.velocity.y = this.jumpForce;player.isJumping = true;player.onGround = false;// Update game statusdocument.getElementById('game-status').textContent = `Player ${player.id} jumped!`;}// Apply gravityplayer.velocity.y -= this.gravity;player.position.y += player.velocity.y;// Ground collision detectionif (player.position.y <= 1) {player.position.y = 1;player.velocity.y = 0;player.onGround = true;player.isJumping = false;}// World boundariesconst boundaryLimit = this.worldSize / 2 - 1;player.position.x = Math.max(-boundaryLimit, Math.min(boundaryLimit, player.position.x));player.position.z = Math.max(-boundaryLimit, Math.min(boundaryLimit, player.position.z));// Update model positionplayer.model.position.copy(player.position);// Perform action if requestedif (controls.action) {this.performAction(player);}}performAction(player) {// Simple action feedbackdocument.getElementById('game-status').textContent = `Player ${player.id} is performing an action!`;// Animate action (e.g. arm swing)if (player.model) {const rightArm = player.model.userData.rightArm;// Create a simple animation for the arm swingconst startRotation = { x: 0 };const endRotation = { x: -Math.PI / 2 };// Animate swing downconst swingDown = new TWEEN.Tween(startRotation).to(endRotation, 200).easing(TWEEN.Easing.Quadratic.Out).onUpdate(() => {rightArm.rotation.x = startRotation.x;});// Animate swing backconst swingBack = new TWEEN.Tween(endRotation).to({ x: 0 }, 200).easing(TWEEN.Easing.Quadratic.In).onUpdate(() => {rightArm.rotation.x = endRotation.x;});// Chain the animationsswingDown.chain(swingBack);swingDown.start();}}animateWalking(model, time) {if (!model || !model.userData) return;const { leftLeg, rightLeg, leftArm, rightArm } = model.userData;// Animate legsif (leftLeg && rightLeg) {leftLeg.rotation.x = Math.sin(time) * 0.5;rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.5;}// Animate armsif (leftArm && rightArm) {leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;rightArm.rotation.x = Math.sin(time) * 0.5;}}resetAnimation(model) {if (!model || !model.userData) return;const { leftLeg, rightLeg, leftArm, rightArm } = model.userData;// Reset all rotationsif (leftLeg) leftLeg.rotation.set(0, 0, 0);if (rightLeg) rightLeg.rotation.set(0, 0, 0);if (leftArm) leftArm.rotation.set(0, 0, 0);if (rightArm) rightArm.rotation.set(0, 0, 0);}updateCamera() {// Calculate center position between playersconst center = new THREE.Vector3();this.players.forEach(player => {center.add(player.position);});center.divideScalar(this.players.length);// Calculate distance between playerslet maxDistance = 0;this.players.forEach(player => {const distance = player.position.distanceTo(center);maxDistance = Math.max(maxDistance, distance);});// Adjust camera position based on player positionsconst cameraDistance = Math.max(10, maxDistance * 3);const cameraHeight = Math.max(6, maxDistance * 1.5);// Smoothly move camera to new positionconst targetCameraPos = new THREE.Vector3(center.x + cameraDistance * Math.sin(Date.now() * 0.0001),cameraHeight,center.z + cameraDistance * Math.cos(Date.now() * 0.0001));this.camera.position.lerp(targetCameraPos, 0.02);this.camera.lookAt(center);}animate() {requestAnimationFrame(() => this.animate());const deltaTime = this.clock.getDelta();// Update playersthis.updatePlayer(this.players[0], this.keys.player1, deltaTime);this.updatePlayer(this.players[1], this.keys.player2, deltaTime);// Update camera to follow playersthis.updateCamera();// Update animationsTWEEN.update();// Render scenethis.renderer.render(this.scene, this.camera);}}// Initialize the game when page is loadedwindow.addEventListener('load', () => {const game = new MinecraftStyleGame();});</script>
</body>
</html>

在这里插入图片描述

相关文章:

猜猜我用的是哪个大模型?我的世界游戏界面简单的模拟效果

我的罗里吧嗦的&#xff0c;根据小朋友的要求&#xff0c;边听边写边输入的提示词&#xff1a; 请生成一段完整的在网页中用html5和javascript代码模拟“我的世界”中游戏场景的互动画面&#xff0c;要求提供若干人物选项可以选择&#xff0c;请自行选择需要使用哪些库或框架来…...

基于龙芯3A5000处理器,全国产标准6U VPX板卡解决方案

1&#xff0c;产品功能 本产品为一款高可靠性的基于龙芯3A5000处理器以及 7A2000芯片组的标准6U VPX板卡&#xff0c;具有以太网、SATA、PCIE&#xff0c;以及显示等接口&#xff0c;产品功能框图如图1所示&#xff1a; 图1 系统框图 2&#xff0c;技术指标 序号 项目 指标…...

Unity编辑器功能及拓展(3) —[Attribute]特性

在 Unity 中&#xff0c;[Attribute]格式的特性是用于扩展编辑器功能、控制序列化行为和调整 Inspector 显示,进行编辑器拓展的核心工具。 一.基础编辑器拓展 1.基础序列化控制 1.[SerializeField] 强制显示私有变量到Inspector 2.[HideInInspector] 隐藏该字段在Inspect…...

每日一题之既约分数

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 如果一个分数的分子和分母的最大公约数是 1&#xff0c;这个分数称为既约分数。 例如 3/4,1/8,7/1​&#xff0c; 都是既约分数。 请问&#xff0c;有多少个既约分…...

C++作用域辨识详解

在 C 中&#xff0c;作用域&#xff08;Scope&#xff09;定义了变量、函数、类等标识符的可见性和生命周期。理解作用域对于编写清晰、高效的代码至关重要。以下是 C 中作用域的详细分类和说明。 1. 全局作用域&#xff08;Global Scope&#xff09; 全局作用域是指在所有函…...

wait的概念和使用方法

在C语言中&#xff0c;wait 函数主要用于进程管理&#xff0c;它是一个系统调用&#xff0c;定义在 <sys/wait.h> 头文件中&#xff0c;用于让父进程等待其子进程结束&#xff0c;并获取子进程的终止状态。下面为你详细介绍其概念和使用方法。 概念 wait 函数的原型如下…...

HarmonyOS NEXT——鸿蒙神策埋点(二)

在上一章我分享了鸿蒙客户端集成神策埋点sdk的过程&#xff0c;现在我们需要服务端的小伙伴配置集成服务端sdk接收处理数据信息&#xff0c;以下是集成的过程。 Java服务端sdk集成 1、获取神策数据平台url地址 1、导入集成&#xff1a; dependencies {compile com.sensorsda…...

编程考古-Borland JBuilder:一场关于Java灵魂的战争与救赎

本文也是填之前一位网友让谈谈JBuilder的一个坑&#xff0c;感谢各位技术爱好者的支持。感谢关注小编&#xff0c;你的关注&#xff0c;是我更新的动力。 本篇章节如下&#xff1a; 序章&#xff1a;JBuilder的黄金时代 Borland的JBuilder&#xff1a;纯技术主义的胜利 生死…...

【day4】数据结构刷题 树

6-1 二叉树的遍历 函数接口定义&#xff1a; void InorderTraversal( BinTree BT ); void PreorderTraversal( BinTree BT ); void PostorderTraversal( BinTree BT ); void LevelorderTraversal( BinTree BT ); 其中BinTree结构定义如下&#xff1a; typedef struct TNode *Po…...

Elea AI:以人工智能之力推动病理实验室革新的技术突破与实践探索

Elea AI:以人工智能之力推动病理实验室革新的技术分析 一、病理实验室现状与 Elea AI 的革新契机 (一)传统病理实验室的痛点剖析 在医疗体系中,病理实验室扮演着至关重要的角色,其诊断结果是疾病确诊与后续治疗方案制定的关键依据。然而,当前传统病理实验室在实际运作过…...

相似度计算 ccf-csp 2024-2-2

#include<bits/stdc.h> using namespace std;int main() {// 定义两个变量 n 和 m&#xff0c;分别用于存储两篇文章的单词个数int n, m;// 从标准输入读取 n 和 m 的值cin >> n >> m;// 定义三个 map 容器&#xff0c;A 用于存储并集&#xff0c;T 用于标记…...

多省发布!第27届中国机器人及人工智能大赛各赛区比赛通知

01 大赛介绍 中国机器人及人工智能大赛是由中国人工智能学会主办的极具影响力的全国性学科竞赛&#xff0c;旨在推动我国机器人及人工智能技术的创新与应用&#xff0c;促进相关专业的人才培养。作为全国高校学科竞赛A类赛事&#xff0c;该比赛吸引了众多高校和科研机构的积极…...

【Kafka】从理论到实践的深度解析

在当今数字化转型的时代&#xff0c;企业面临着数据量呈指数级增长、业务系统愈发复杂的挑战。在这样的背景下&#xff0c;高效的数据传输与处理技术成为了关键。Kafka&#xff0c;作为一款分布式消息队列系统&#xff0c;凭借其卓越的性能和丰富的特性&#xff0c;在众多企业的…...

对锁进行封装

目录 锁的封装 makefile编写 测试运行 RAII式封装 我们今天学习对锁进行封装。 我们在命名空间里面&#xff0c;在自己构建的类mutex里面完成对锁的封装。 锁的封装 我们要进行动态初始化锁&#xff0c;首先要有一个锁对象&#xff0c;所以mutex类里面的私有成员就是锁对…...

【学Rust写CAD】18 定点数2D仿射变换矩阵结构体(MatrixFixedPoint结构别名)

源码 // matrix/fixed.rs use crate::fixed::Fixed; use super::generic::Matrix;/// 定点数矩阵类型别名 pub type MatrixFixedPoint Matrix<Fixed, Fixed, Fixed, Fixed, Fixed, Fixed>;代码解析 这段代码定义了一个定点数矩阵的类型别名 MatrixFixedPoint&#xff…...

C++Primer学习(14.1 基本概念)

当运算符作用于类类型的运算对象时&#xff0c;可以通过运算符重载重新定义该运算符的含义。明智地使用运算符重载能令我们的程序更易于编写和阅读。举个例子&#xff0c;因为在Sales_item类中定义了输入、输出和加法运算符&#xff0c;所以可以通过下述形式输出两个Sales_item…...

接龙数列(最长上升 动规)

问题描述 对于一个长度为 KK 的整数数列&#xff1a;A1,A2,…,AKA1​,A2​,…,AK​&#xff0c;我们称之为接龙数列当且仅当 AiAi​ 的首位数字恰好等于 Ai−1Ai−1​ 的末位数字 (2≤i≤K)(2≤i≤K)。例如 12,23,35,56,61,1112,23,35,56,61,11 是接龙数列&#xff1b;12,23,34…...

HTML跑酷

先看效果 再上代码 <!DOCTYPE html> <html> <head><title>火柴人跑酷</title><style>body {margin: 0;overflow: hidden;background: #87CEEB;}#gameCanvas {background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 50%, #228B22 …...

ChemBioServer: 一个在线“药物发现/再利用”的平台

ChemBioServer 是一个提供高级化学化合物过滤、聚类和网络分析的服务器&#xff0c;旨在支持药物发现和药物再利用&#xff08;drug repurposing&#xff09;。它集成了多种工具和网络服务&#xff0c;以便更高效地筛选、分析和可视化化学化合物。 网站地址&#xff1a; https:…...

数据结构(4)——带哨兵位循环双向链表

目录 前言 一、带哨兵的循环双向链表是什么 二、链表的实现 2.1规定结构体 2.2创建节点 2.3初始化 2.4打印 2.5检验是否为空 2.6销毁链表 2.7尾插 2.8尾删 2.9头插 2.10头删 2.11寻找特定节点 2.12任意位置插入&#xff08;pos前&#xff09; 2.13删除任意节点 …...

【MyBatis】MyBatis 操作数据库(入门)

文章目录 前言一、什么是MyBatis&#xff1f;二、MyBatis入门2.1、准备工作2.1.1 创建工程2.1.2、数据准备 2.2、配置数据库连接字符串2.3、写持久层代码2.4 单元测试 三、MyBatis的基础操作3.1 打印日志3.2、参数传递3.3、增(Insert)3.4、 删(Delete)3.5、改(Update)3.6、查(S…...

Numpy进行数组函数操作

在编程语言中,数组(Array)是最常用的数据结构之一,它可以存储一系列相同类型的元素,并且通过索引来访问或修改这些元素。在Python中,数组不仅可以通过内置的list数据类型实现,还可以借助第三方库,如NumPy来操作多维数组。掌握数组的内置函数和常用方法是成为熟练程序员…...

高速电路中的存储器应用与设计四

5 SRAM介绍及其应用要点 DRAM的性能在很大程度上受到刷新操作的影响&#xff0c;而SRAM则不涉及刷新&#xff0c;因此在相同时钟频率的条件下&#xff0c;SRAM的性能远高于DRAM。 SRAM的缺点是集成度低、容量小、功耗大、价格高。 在应用的场合上&#xff0c;SRAM毫不逊色于…...

Vue2 项目将网页内容转换为图片并保存到本地

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

汽车加气站操作工证书报考条件是什么?

关于汽车加气站操作工的资格证书&#xff1a; 一、核心证书要求 CNG充装人员上岗证 这是加气站加气工的核心资质证书&#xff0c;需通过专业培训并考核。该证书由相关部门颁发&#xff0c;证明持证人具备从事CNG&#xff08;压缩天然气&#xff09;充装操作的专业技能&#xf…...

动态规划--线性规划

一、https://www.lanqiao.cn/problems/3512/learning/ 解题步骤&#xff1a;1.dp[i]表示以i结尾最长接龙数列长度 2.每读入一个数字x...y&#xff0c;关注头尾的x,y来更新dp[y] 3.dp【y】 max&#xff08;dp【y】&#xff0c;dp【x】1&#xff09;&#xff1a;如果当前数字接…...

HT81697——30W内置升压单声道D类/AB类音频功放

1 特性 ● 防削顶失真功能(防破音,Anti-Clipping Function,ACF) ● 扩频技术 ● 输出功率 28W (VBAT7.2V, RL4Ω, THDN10%, PVDD 15.5V, fiN 1kHz) 22W (VBAT7.2V,RL4Ω, THDN1%, PVDD 15.5V, fin 1kHz) 16.5W (VBAT3.7V, RL4Ω, THDN10%, PVDD 12V, fiN 1kHz) 12.8W (VBAT…...

关于ArcGIS中加载影像数据,符号系统中渲染参数的解析

今天遇到一个很有意思的问题&#xff0c;故记录下来&#xff0c;以作参考和后续的研究。欢迎随时沟通交流。如果表达错误或误导&#xff0c;请各位指正。 正文 当我们拿到一幅成果影像数据的时候&#xff0c;在不同的GIS软件中会有不同效果呈现&#xff0c;但这其实是影像是…...

GAMMA数据处理(十)

今天向别人请教了一个问题&#xff0c;刚无意中搜索到了一模一样的问题 不知道这个怎么解决... ok 解决了 有一个GAMMA的命令可转换 但是很奇怪 完全对不上 转换出来的行列号 不知道为啥 再试试 是因为经纬度坐标的小数点位数 de as...

Spring Boot属性设置方法及优先级完整说明+表格对比

Spring Boot属性设置方法及优先级完整说明 官网参考&#xff1a; https://docs.spring.io/spring-boot/3.4-SNAPSHOT/reference/features/external-config.html#features.external-config.files 属性设置方法优先级顺序&#xff08;从高到低&#xff09; 命令行参数&#xf…...