web前端项目-3D台球游戏【附源码】

时间:2024-01-21 12:20:24

3D台球

3D台球】这款游戏的操作简洁明了,玩家只需要简单的练习两分钟便能够掌握。玩家需要用鼠标控制击球的方向和力度,将白球打进洞中。每次进球后,玩家需要选择下一个要击打的球,直到所有的球都打进洞中。但要注意避免黑球进洞。

运行效果:
在这里插入图片描述
在这里插入图片描述

HTML源码:
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<title>ball</title>
	<style type="text/css">
		body{margin:0;padding:0;font-size:12px;background:url(res/wood.jpg)}
	</style>
</head>
<body>
	<div id = "container"></div>
	<div id = "fps" style = "position:absolute"></div>
	<script src = "src/quark.base-1.0.0.alpha.min.js"></script>
	<script src = "Taiqiu.js"></script>
</body>
</html>
Taiqiu.js源码:
function Vector(a,b){this.x=a||0;this.y=b||0}Vector.prototype.reset=function(a,b){this.x=a;this.y=b};Vector.prototype.getClone=function(){return new Vector(this.x,this.y)};Vector.prototype.cut=function(a){this.setLength(Math.min(a,this.getLength()))};Vector.prototype.cutNew=function(a){var a=Math.min(a,this.getLength()),b=this.getClone();b.setLength(a);return b};Vector.prototype.equals=function(a){return this.x==a.x&&this.y==a.y};Vector.prototype.plus=function(a){this.x+=a.x;this.y+=a.y};
Vector.prototype.plusNew=function(a){return new Vector(this.x+a.x,this.y+a.y)};Vector.prototype.minus=function(a){this.x-=a.x;this.y-=a.y};Vector.prototype.minusNew=function(a){return new Vector(this.x-a.x,this.y-a.y)};Vector.prototype.negate=function(){this.x=-this.x;this.y=-this.y};Vector.prototype.negateNew=function(){return new Vector(-this.x,-this.y)};Vector.prototype.scale=function(a){this.x*=a;this.y*=a};Vector.prototype.scaleNew=function(a){return new Vector(this.x*a,this.y*a)};
Vector.prototype.getLength=function(){return Math.sqrt(this.x*this.x+this.y*this.y)};Vector.prototype.setLength=function(a){var b=this.getLength();b?this.scale(a/b):this.x=a};Vector.prototype.getAngle=function(){return Math.atan2(this.y,this.x)};Vector.prototype.setAngle=function(a){var b=this.getLength();this.x=b*Math.cos(a);this.y=b*Math.sin(a)};
Vector.prototype.rotate=function(){var a,b;b=arguments;b.length==1?(a=Math.cos(b[0]),b=Math.sin(b[0])):(a=b[0],b=b[1]);var d=this.x*b+this.y*a;this.x=this.x*a-this.y*b;this.y=d};Vector.prototype.rotateNew=function(a){var b=new Vector(this.x,this.y);b.rotate(a);return b};Vector.prototype.dot=function(a){return this.x*a.x+this.y*a.y};Vector.prototype.getNormal=function(){return new Vector(-this.y,this.x)};Vector.prototype.isPerpTo=function(a){return this.dot(a)==0};
Vector.prototype.angleBetween=function(a){a=this.dot(a)/(this.getLength()*a.getLength());return Math.acos(a)};(function(){function a(){for(var a in q)f[a]=new Quark.Bitmap({image:q[a],x:c.offset.x,y:c.offset.y,eventEnabled:!1})}function b(){a();d();e();c.ui.init();g();c.initEvent();c.initCue();c.initLine();c.initShotTxt();c.initScore();c.initWin();c.initLose();c.loop=c.shoot;l.update=function(){c.frames++;c.loop()}}function d(){var a=Quark.getDOM("container"),e=new Quark.DOMContext({canvas:a});canvas=Quark.createDOM("canvas",{width:h,height:i,style:{position:"absolute"}});canvasContext=new Quark.CanvasContext({canvas:canvas});
a.appendChild(canvas);l=c.stage=new Quark.Stage({container:a,width:h,height:i,context:e});o=new Quark.Timer(1E3/k);o.addListener(l);o.addListener(Q.Tween);o.start();l.addChild(f.table);c.initPlayers()}function g(){c.Ball.createBalls();var a=c.point=new Quark.Bitmap({image:c.Ball.images[0],rect:[0,0,c.r*2,c.r*2],regX:c.r,regY:c.r});l.addChild(c.point);a.alpha=0.3;l.step();for(var a=0,e=c.Ball.balls.length;a<e;a++){var n=c.Ball.balls[a];n.bitmap.drawable.domDrawable.style.borderRadius=j+"px";n.light.drawable.domDrawable.style.borderRadius=
j+"px"}c.point.drawable.domDrawable.style.borderRadius=c.r+"px";l.addChild(f.ballRoad);l.addChild(f.cue);f.ballRoad.y=p.y-60;f.ballRoad.x=p.x+180;c.xx=f.ballRoad.x+f.ballRoad.width-j-6}function e(){c.frames=0;fpsContainer=Quark.getDOM("fps");setInterval(function(){fpsContainer.innerHTML="FPS:"+c.frames;c.frames=0},1E3)}var c=Q.use("BallGame"),j=c.r=14,h=960,i=600,k=60,s=c.params=Quark.getUrlParams(),n=c.mouseR=s.r||Q.supportTouch?90:0,l=c.stage,f=c.bitmaps={},q=c.images={},p=c.offset={x:55,y:70};
c.canShot=!0;var o;window.onload=function(a){var c=new Quark.ImageLoader;c.addEventListener("complete",function(a){a.target.removeAllEventListeners();for(var c in a.images)q[c]=a.images[c].image;b()});c.load(a)}([{id:"table",src:"res/table.jpg"},{id:"cue",src:"res/cue.png"},{id:"light",src:"res/light.png"},{id:"ballRoad",src:"res/ballRoad.png"},{id:"player-txt",src:"res/player-txt.png"},{id:"ball1",src:"res/ball1.png"},{id:"ball9",src:"res/ball9.png"},{id:"shot-txt",src:"res/shot-txt.png"},{id:"num",
src:"res/number.png"},{id:"win",src:"res/win.png"},{id:"lose"