Estoy participando en la competencia individual del Concurso creativo de juegos comunitarios de los Nuggets. Para obtener más información, consulte:Concurso creativo de juegos
Dirección del juego: no lo haré (así que no lo puse) dirección de git:gitee.com/fwjzzz/Jump
prefacio
salta salta sísubprograma WeChatde un pequeño juego. Mantenga presionada la pantalla para que el villano salte con poder y juegue. Las puntuaciones se calculan según el número de casillas que salta el villano y los puntos de bonificación de las casillas especiales.
reglas del juego
Es muy simple: mantenga presionado el mouse para cargar, suéltelo y el bloque saltará de una caja a otra. Sin embargo, es esta pequeña acción la que te hace mágicamente incapaz de detenerte una vez que comienzas.
tres.js
Three.js es un motor 3D que se ejecuta en el navegador, puede usarlo para crear una variedad de escenas 3D, incluidas cámaras, luces, materiales y otros objetos.
- Crea una escena
- Establecer la fuente de luz
- Cree una cámara, configure la posición de la cámara y la orientación de la lente de la cámara
- Cree un renderizador 3D y use el renderizador para renderizar la escena creada
estructura de todo el programa
realizar
El archivo html presenta el motor three.js
<script src="/js/three.min.js"></script>
复制代码estructura de la página
<div class="mask">
<div class="content">
<div class="score-container">
<p class="title">本次得分</p>
<h1 class="score">0</h1>
</div>
<button class="restart">
重新开始
</button>
</div>
</div>
<div class="info">
<audio loop="loop" autoplay controls src="https://m801.music.126.net/20220413225245/3060206bc37e3226b7f45fa1
49b0fb2b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/13866197954/e351/984c/1f8b/f6d3165d6b04dc78ec0d3c273ce02ff2.mp3">
</audio>
<div class="gaming-score">
得分：<span class="current-score">0</span>
</div>
</div>
复制代码
Escenas
let scene=new THREE.Scene();
//创建一个场景
复制代码cámara
Hay dos cámaras de uso común:
- cámara de perspectivaPerspectivaCámara
De acuerdo con los hábitos psicológicos de las personas, casi grandes y muy pequeños.
- enfrentar la cámaraCámara Ortográfica
lejos tan grande como cerca
let camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
//创建一个透视相机 4个参数（视觉范围，宽高比例，近距离，远距离）
camera.position.z=10;
camera.position.y=3;
camera.position.x=8;
//相机的xyz场景方向
复制代码geometría
Úselo para CubeGeometrycrear una geometría de cubo, use un MeshLambertMaterialmaterial para configurar el cubo para representar una superficie que se vea opaca y aburrida, el material reaccionará a la luz en la escena, este material se puede configurar con algunas otras propiedades como el color, etc.
let geometry=new THREE.CubeGeometry(4,2,4);
//创建一个几何体对象 （宽，高，深度）
let material=new THREE.MeshLambertMaterial({color:0xbebebe});
//创建了一个可以用于立方体的材质,对象包含了颜色、透明度等属性，
let cube=new THREE.Mesh(geometry,material);
//结合在一起
cube.position.x=16;
scene.add(cube);
//添加到场景中
复制代码fuente de luz
La escena Scenese compone principalmente de modelos geométricos y luces Light. En el proceso de desarrollo real, la mayoría de las escenas 3D a menudo necesitan establecer fuentes de luz y simular los efectos de iluminación en la vida de los modelos a través de diferentes fuentes de luz. Especialmente para mejorar el efecto de renderizado. de Threejs, es necesario establecer una buena fuente de luz, al igual que un fotógrafo que toma una foto para encender la luz.
let directionalLight=new THREE.DirectionalLight(0xffffff,1.1);
//平行光 （颜色，强度)
directionalLight.position.set(3,10,5);
//平行光位置
scene.add(directionalLight);
//在场景中加入平行光
let light=new THREE.AmbientLight(0xffffff,0.4);
//光的材质
scene.add(light);
//把光添加到场景
复制代码prestar
Directamente a través del renderizador WebGLWebGLRendererEl .setSize()método establece el tamaño de representación en el ancho y alto del área del cuerpo del navegador.
let renderer=new THREE.WebGLRenderer({antialias:true});
//创建一个渲染器 （让边缘动画没有锯齿感）
renderer.setSize(window.innerWidth,window.innerHeight);
// 画布宽高
renderer.setClearColor(0x282828);
//修改画布颜色
renderer.render(scene,camera);
//渲染场景相机 （后续更新也是这里）
document.body.appendChild(renderer.domElement);
//把当前渲染的画布放到body里面
let x=8;
function render() {
//递归
x-=0.1;
camera.position.x=x;
renderer.render(scene,camera);
//更新重新渲染
if(x>=-8){
//满足当前条件
requestAnimationFrame(render)
//循环渲染
}
}
复制代码Hasta ahora se ha realizado un prototipo.
añadir segundo bloque
_createCube() {
let geometry = new THREE.CubeGeometry(this.config.cubeWidth, this.config.cubeHeight, this.config.cubeDeep);
//创建一个几何体对象 （宽，高，深度）
let material = new THREE.MeshLambertMaterial({
color: this.config.cubeColor
});
//材质,对象包含了颜色、透明度等属性，
let cube = new THREE.Mesh(geometry, material); //合并在一起
if (this.cubes.length) {
//从第二块开始随机左右方向出现
cube.position.x = this.cubes[this.cubes.length - 1].position.x;
cube.position.y = this.cubes[this.cubes.length - 1].position.y;
cube.position.z = this.cubes[this.cubes.length - 1].position.z;
this.cubeStat.nextDir = Math.random() > 0.5 ? "left" : "right"; //要不左边要不右边
if (this.cubeStat.nextDir == "left") {
//左边改变x轴否则y轴
cube.position.x = cube.position.x - Math.round(Math.random() * 4 + 6);
} else {
cube.position.z = cube.position.z - Math.round(Math.random() * 4 + 6);
}
}
this.cubes.push(cube); //统一添加块
if (this.cubes.length > 5) {
//页面最多看到5个块
this.scene.remove(this.cubes.shift()); //超过就移除
}
this.scene.add(cube); //添加到场景中
if (this.cubes.length > 1) {
//更新镜头位置
this._updateCameraPros();
}
};
复制代码Defina una matriz de cuadrados y juzgue que aparezcan aleatoriamente desde el segundo bloque hacia los lados izquierdo y derecho. this.cubeStat.nextDir = Math.random() > 0.5 ? "left" : "right"Como se muestra arriba: (esto se compone de dos imágenes)
bloque de salto
_createJumper() {
let geometry = new THREE.CubeGeometry(this.config.jumperWidth, this.config.jumperHeight, this.config
.jumperDeep); // （宽，高，深度）
let material = new THREE.MeshLambertMaterial({
color: this.config.jumperColor
}); //材质,颜色、透明度
this.jumper = new THREE.Mesh(geometry, material); //合并在一起
this.jumper.position.y = 1; //显示跳块
geometry.translate(0, 1, 0); //平移
this.scene.add(this.jumper); //添加到场景中
}
复制代码Hay una serie de atributos de vértice y métodos para usar el Geometryobjeto de geometría , y la geometría en sí se puede escalar, trasladar, rotar y otras transformaciones geométricas a través de métodos como .scale(), , etc. Tenga en cuenta que esencialmente está cambiando los datos de coordenadas de la posición del vértice del cuerpo combinado..translate().rotateX()
estado del mouse presionado
this.jumperStat = {
//鼠标按下速度
ready: false,
xSpeed: 0,
ySpeed: 0
};
复制代码 _handleMouseDown() {
if (!this.jumperStat.ready && this.jumper.scale.y > 0.02) {
this.jumper.scale.y -= 0.01; //压缩块
this.jumperStat.xSpeed += 0.004;
this.jumperStat.ySpeed += 0.008;
this._render();
requestAnimationFrame(() => {
this._handleMouseDown()
})
}
};
复制代码El ratón se suelta y aparece
¿No es así como es la vida? ¡Mientras saltes en la posición correcta, puedes "contraatacar"!
//鼠标松开谈起状态
_handleMouseUp() {
this.jumperStat.ready = true;
if (this.jumper.position.y >= 1) {
if (this.jumper.scale.y < 1) {
this.jumper.scale.y += 0.1; //压缩状态小于1就+
}
if (this.cubeStat.nextDir == "left") {
//挑起盒子落在哪里
this.jumper.position.x -= this.jumperStat.xSpeed;
} else {
this.jumper.position.z -= this.jumperStat.xSpeed;
}
this.jumper.position.y += this.jumperStat.ySpeed;
this.jumperStat.ySpeed -= 0.01; //上升落下状态
this._render();
requestAnimationFrame(() => {
//循环执行
this._handleMouseUp();
})
} else {
//落下状态
this.jumperStat.ready = false;
this.jumperStat.xSpeed = 0;
this.jumperStat.ySpeed = 0;
this.jumper.position.y = 1;
this.jumper.scale.y = 1;
this._checkInCube(); //检测落在哪里
if (this.falledStat.location == 1) {
//下落后等于1，+分数
this.score++;
this._createCube();
this._updateCamera();
if (this.successCallback) {
//否则失败
this.successCallback(this.score);
}
} else {
this._falling()
}
}
};
复制代码donde caer
Aprender a controlar el sentido de la velocidad es algo maravilloso. Cuando reduzca la velocidad, aprenda a controlar la velocidad. Porque en todo proceso, hay cosas en tu vida que vale la pena detenerse a hojear, apreciar y sentir. En nuestra cognición, siempre sentimos que cuanto más rápido, más tiempo tenemos, mayor es la eficiencia y mayor la productividad. En realidad no. Si tu mente siempre está en un estado de pensamiento de alta velocidad, definitivamente te sentirás ocupado y despistado; si siempre estás preocupado por el futuro o extrañas el pasado, no podrás concentrarte en lo que estás haciendo en el presente. , y definitivamente sentirá que se está quedando sin tiempo.La eficiencia se reduce considerablemente.
this.falledStat = {
location: -1, //落在哪里 当前块块上
distance: 0, //距离是否倒下
};
this.fallingStat = {
//有没有落到点
end: false,
speed: 0.2
}
复制代码//检测落在哪里
//-1 -10从当前盒子掉落
//1 下一个盒子上 10从下一个盒子上掉落
//0没有落在盒子上
_checkInCube() {
let distanceCur, distanceNext;
//当前盒子距离 下一个盒子距离
let should = (this.config.jumperWidth + this.config.cubeWidth) / 2;
//
if (this.cubeStat.nextDir == "left") {
//往左走了
distanceCur = Math.abs(this.jumper.position.x - this.cubes[this.cubes.length - 2].position.x);
distanceNext = Math.abs(this.jumper.position.x - this.cubes[this.cubes.length - 1].position.x);
} else {
//往右走了
distanceCur = Math.abs(this.jumper.position.z - this.cubes[this.cubes.length - 2].position.z);
distanceNext = Math.abs(this.jumper.position.z - this.cubes[this.cubes.length - 1].position.z);
}
if (distanceCur < should) {
//落在当前块
this.falledStat.distance = distanceCur;
this.falledStat.location = distanceCur < this.config.cubeWidth / 2 ? -1 : -10;
} else if (distanceNext < should) {
//落在下一个块上
this.falledStat.distance = distanceNext;
this.falledStat.location = distanceNext < this.config.cubeWidth / 2 ? 1 : 10;
} else {
//落在中间
this.falledStat.location = 0;
}
};
复制代码Aterriza en el bloque, detente por un momento, relájate y habrá muchas recompensas adicionales. En el camino de la vida, cuando tengas prisa, no olvides descansar y ajustarte adecuadamente, tendrás cosechas inesperadas y el cubo mágico del destino te dará sorpresas únicas. La vida es corta, ¿por qué apresurarse a terminarla?
//下落过程
_falling() {
if (this.falledStat.location == 10) {
//从下一个盒子落下
if (this.cubeStat.nextDir == "left") {
//判断左方向
if (this.jumper.position.x > this.cubes[this.cubes.length - 1].position.x) {
this._fallingRotate("leftBottom")
} else {
this._fallingRotate("leftTop")
}
} else {
//判断右方向
if (this.jumper.position.z > this.cubes[this.cubes.length - 1].position.z) {
this._fallingRotate("rightBottom")
} else {
this._fallingRotate("rightTop")
}
}
} else if (this.falledStat.location == -10) {
//从当前盒子落下
if (this.cubeStat.nextDir == "left") {
this._fallingRotate("leftTop")
} else {
this._fallingRotate("rightTop")
}
} else if (this.falledStat.location == 0) {
this._fallingRotate("none")
}
};
复制代码fin
赢也好，输也罢，人生就是一个起起伏伏的过程，处在巅峰不骄，跌落低谷不馁。Esta es la forma correcta de vida. Por supuesto, esto no se trata solo de juegos. Puede que seas tú quien esté inmerso en los juegos , o puede que te hayas dado cuenta de que la imagen del jugador de ese pequeño cuadrado es el " yo " en la vida. Este mundo es como un juego de "saltar y saltar" : un juego intelectual con reglas y objetivos claros, los jugadores pueden moverse libremente y pueden sumar puntos cuando están en la posición correcta.时时轻拂拭，勿使惹尘埃. ¡Puedes cosechar, disfrutar de la vida y amar los fuegos artificiales en el mundo! ! !