小黑猫js小游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小黑猫</title>
<script type='text/javascript' src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script type='text/javascript' src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script type='text/javascript' src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#world{
position: absolute;
width:100%;
height: 100%;
background-color: #6ecccc;
overflow:hidden;
}
#credits{
position:absolute;
width:100%;
margin: auto;
bottom:0;
margin-bottom:20px;
font-family:'Open Sans', sans-serif;
color:#328685;
font-size:0.7em;
text-transform: uppercase;
text-align : center;
}
#credits a {
color:#328685;
}
#credits a:hover {
color:#630d15;
}
</style>
</head>
<body>
<div id="world"></div>
</body>
<script>
Cat=function(){this.threeGroup=new THREE.Group();var yellowMat=new THREE.MeshLambertMaterial({color:0xfdd276,shading:THREE.FlatShading});var pinkMat=new THREE.MeshLambertMaterial({color:0xe0877e,shading:THREE.FlatShading});var redMat=new THREE.MeshLambertMaterial({color:0x630d15,shading:THREE.FlatShading});var whiteMat=new THREE.MeshLambertMaterial({color:0xffffff,shading:THREE.FlatShading});var blackMat=new THREE.MeshLambertMaterial({color:0x111111,shading:THREE.FlatShading});var brownMat=new THREE.MeshLambertMaterial({color:0x2e2019,shading:THREE.FlatShading});var lightBrownMat=new THREE.MeshLambertMaterial({color:0x664f4a,shading:THREE.FlatShading});this.handHeight=10;this.bodyHeight=80;this.armHeight=((this.bodyHeight*3/5)-this.handHeight)/2;this.faceHeight=30;this.shouldersPosition=new THREE.Vector3(0,this.armHeight*2+this.handHeight,0);this.isAttacking=false;this.isFootReplacing=false;this.isBlinking=false;this.footUsed="left";this.transferPower={x:0,y:0};this.body=new THREE.Group();var torsoGeom=new THREE.CylinderGeometry(0,26,this.bodyHeight,3,1);this.torso=new THREE.Mesh(torsoGeom,brownMat);this.torso.geometry.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/3));this.torso.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,-this.bodyHeight/2,0));var chestGeom=new THREE.CylinderGeometry(6,0,17,3);chestGeom.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/3));chestGeom.applyMatrix(new THREE.Matrix4().makeScale(1,1,.3));this.chest=new THREE.Mesh(chestGeom,whiteMat);this.chest.position.set(0,-30,1);this.head=new THREE.Group();var faceGeom=new THREE.BoxGeometry(30,this.faceHeight,30);this.face=new THREE.Mesh(faceGeom,brownMat);this.face.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,this.faceHeight/2,0));this.face.geometry.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/4));var scarfGeom=new THREE.CylinderGeometry(10,9,9,10,1);this.scarf1=new THREE.Mesh(scarfGeom,redMat);this.scarf1.material.side=THREE.DoubleSide;this.scarf1.position.y=-2;this.scarf1.position.z=0;this.scarf1.rotation.z=.4;this.scarf1.rotation.y=Math.PI/3;this.scarf2=this.scarf1.clone();this.scarf2.scale.set(.9,.7,.9);this.scarf2.position.y=-17;this.scarf2.rotation.z=-.2;var scarfGeom2=new THREE.BoxGeometry(50,2,10);this.scarf3=new THREE.Mesh(scarfGeom2,redMat);this.scarf3.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(25,0,0));this.scarf3.position.set(3,-15,2);this.scarf3.rotation.y=1.2;this.scarf3.rotation.z=-1;this.head.add(this.scarf1);this.torso.add(this.scarf2);this.torso.add(this.scarf3);this.torso.add(this.chest);var skewMatrixBody=new THREE.Matrix4();skewMatrixBody.set(1,0,0,0,0,1,0,0,0,0.20,1,0,0,0,0,1);this.torso.geometry.applyMatrix(skewMatrixBody);this.chest.geometry.applyMatrix(skewMatrixBody);this.body.add(this.torso);this.body.position.y=this.bodyHeight;var whiskerGeom=new THREE.BoxGeometry(16,.2,.2);this.whisker1=new THREE.Mesh(whiskerGeom,lightBrownMat);this.whisker1.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-7,0,0));this.whisker1.position.set(-6,8,18);this.whisker1.rotation.z=Math.PI/12;this.whisker2=this.whisker1.clone();this.whisker2.position.y=6;this.whisker3=this.whisker1.clone();this.whisker3.position.y=4;this.whisker4=this.whisker1.clone();this.whisker4.rotation.z=Math.PI-Math.PI/12;this.whisker4.position.x=-this.whisker1.position.x;this.whisker5=this.whisker4.clone();this.whisker5.position.y=this.whisker2.position.y;this.whisker6=this.whisker4.clone();this.whisker6.position.y=this.whisker3.position.y;this.head.add(this.whisker1);this.head.add(this.whisker2);this.head.add(this.whisker3);this.head.add(this.whisker4);this.head.add(this.whisker5);this.head.add(this.whisker6);var rightEarGeom=new THREE.CylinderGeometry(0,8,8,3,1);rightEarGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,4,0));var leftEarGeom=rightEarGeom.clone();rightEarGeom.applyMatrix(new THREE.Matrix4().makeRotationY(1));rightEarGeom.applyMatrix(new THREE.Matrix4().makeScale(1,1,.7));leftEarGeom.applyMatrix(new THREE.Matrix4().makeRotationY(-1));leftEarGeom.applyMatrix(new THREE.Matrix4().makeScale(1,1,.7));var skewMatrixRightEar=new THREE.Matrix4().set(1,0.0,0.0,0,0,1,0,0,-0.5,0.0,1,0,0,0,0,1);var skewMatrixLeftEar=new THREE.Matrix4().set(1,-.5,0,0,0,1,0,0,0,0.0,1,0,0,0,0,1);this.rightEar=new THREE.Mesh(rightEarGeom,brownMat);this.rightEar.position.y=this.faceHeight;this.rightEar.position.x=-14;this.rightEar.position.z=-1.7;this.leftEar=new THREE.Mesh(leftEarGeom,brownMat);this.leftEar.position.x=-this.rightEar.position.x;this.leftEar.position.z=this.rightEar.position.z;this.leftEar.position.y=this.rightEar.position.y;var rightEarInsideGeom=rightEarGeom.clone();rightEarInsideGeom.applyMatrix(new THREE.Matrix4().makeScale(.5,.5,.5));this.rightEarInside=new THREE.Mesh(rightEarInsideGeom,pinkMat);this.rightEarInside.position.y=.5;this.rightEarInside.position.x=1;this.rightEarInside.position.z=2;this.rightEar.add(this.rightEarInside);var LeftEarInsideGeom=leftEarGeom.clone();LeftEarInsideGeom.applyMatrix(new THREE.Matrix4().makeScale(.5,.5,.5));this.leftEarInside=new THREE.Mesh(LeftEarInsideGeom,pinkMat);this.leftEarInside.position.y=.5;this.leftEarInside.position.x=-1;this.leftEarInside.position.z=2;this.leftEar.add(this.leftEarInside);var eyeGeom=new THREE.BoxGeometry(12,12,1);this.rightEye=new THREE.Mesh(eyeGeom,whiteMat);this.rightEye.position.set(-12,20,10);this.rightEye.rotation.y=-Math.PI/4;this.leftEye=this.rightEye.clone();this.leftEye.position.x=-this.rightEye.position.x;this.leftEye.rotation.y=Math.PI/4;var irisGeom=new THREE.BoxGeometry(4,4,2);this.rightIris=new THREE.Mesh(irisGeom,brownMat);this.rightIris.position.x=2;this.rightIris.position.y=-2;this.rightIris.position.z=.5;this.leftIris=this.rightIris.clone();this.leftIris.position.x=-this.rightIris.position.x;this.rightEye.add(this.rightIris);this.leftEye.add(this.leftIris);var noseGeom=new THREE.CylinderGeometry(3,0,4,4)
noseGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,-2,-4));var skewMatrixNose=new THREE.Matrix4().set(1,0,0,0,0,1,0,0,0,-.7,1,1.4,0,0,0,1);noseGeom.applyMatrix(skewMatrixNose);this.nose=new THREE.Mesh(noseGeom,pinkMat);this.nose.position.z=24;this.nose.position.y=14.1;var cheeksGeom=new THREE.CylinderGeometry(8,8,14,4);cheeksGeom.applyMatrix(new THREE.Matrix4().makeScale(1,1,1.4));this.cheeks=new THREE.Mesh(cheeksGeom,brownMat);this.cheeks.position.set(0,7,13);var mouthGeom=cheeksGeom.clone();mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,-4,0));mouthGeom.applyMatrix(new THREE.Matrix4().makeScale(.5,.2,.5));this.mouth=new THREE.Mesh(mouthGeom,brownMat);var tongueGeom=mouthGeom.clone();tongueGeom.applyMatrix(new THREE.Matrix4().makeScale(.8,1,.8));this.tongue=new THREE.Mesh(tongueGeom,pinkMat);this.tongue.position.set(0,.5,0);this.mouth.add(this.tongue);this.mouth.rotation.x=Math.PI/4;this.mouth.position.set(0,1.5,18);this.head.add(this.face);this.head.add(this.rightEar);this.head.add(this.leftEar);this.head.add(this.rightEye);this.head.add(this.leftEye);this.head.add(this.nose);this.head.add(this.cheeks);this.head.add(this.mouth);this.head.position.y=this.bodyHeight-15;this.head.position.z=-5;this.rightShoulder=new THREE.Group();this.leftShoulder=new THREE.Group();this.rightShoulder.position.set(-6,this.shouldersPosition.y,0);this.leftShoulder.position.set(6,this.shouldersPosition.y,0);var armGeom=new THREE.CylinderGeometry(4,6,this.armHeight+5,4);armGeom.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/4));armGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,-this.armHeight/2,0));this.rightArm=new THREE.Mesh(armGeom,brownMat);this.rightShoulder.add(this.rightArm);this.leftArm=this.rightArm.clone();this.leftShoulder.add(this.leftArm);var foreArmGeom=new THREE.CylinderGeometry(6,7,this.armHeight,4);foreArmGeom.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/4));foreArmGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,-this.armHeight/2,0));this.rightForeArm=new THREE.Mesh(foreArmGeom,brownMat);this.rightForeArm.position.y=-this.armHeight;this.rightArm.add(this.rightForeArm);this.leftForeArm=this.rightForeArm.clone();this.leftArm.add(this.leftForeArm);var footGeom=new THREE.BoxGeometry(10,10,10);this.rightFoot=new THREE.Mesh(footGeom,whiteMat);this.rightFoot.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,0));this.rightFoot.posit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0