js实现桌球游戏效果代码
代码语言:html
所属分类:游戏
代码描述:js实现桌球游戏效果代码,按住左键,移动鼠标进行瞄准,左键不放选择力度,然后松开左键。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {margin:0; padding:0}
body {background:black; text-align:center}
h1 {font-size:12px; color:gray; font-weight:normal; line-height:200%}
h1 .sub {vertical-align:super; color:red; font-size:9px; }
.info {position:absolute; right:0}
#table {position:relative; width:800px; margin:20px auto 10px; height:544px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/table.jpg) no-repeat}
.ball {position:absolute; width:30px; height:30px}
#dotWrap {position:absolute; z-index:2; left:32px; top:32px; width:736px; height:480px}
.guide {z-index:3; background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/dashed_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/dashed_ball.png"); background-repeat:no-repeat}
.target {left:500px; top:250px; background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/yellow_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/yellow_ball.png"); background-repeat:no-repeat}
.cue {background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/white_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/white_ball.png"); background-repeat:no-repeat}
.bot {position:relative; width:800px; margin:10px auto 10px; height:70px}
.ctrl {position:absolute; top:0; right:0; width:200px; height:80px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/bg_controler.png) no-repeat}
#force {position:absolute; left:0; top:18px; width:75px; height:20px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/force_conver.png) no-repeat}
#shootPos {position:absolute; top:0; right:14px; width:52px; height:52px}
#dot {position:absolute; top:22px; left:22px; width:8px; height:8px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/bule_dot.png) no-repeat; font-size:1px}
#scoreBoard {position:absolute; z-index:3; top:230px; left:346px; font-size:50px; color:white; filter:alpha(opacity=0); -moz-opacity:0; opacity:0}
#tips {padding:15px 0 0 20px; text-align:left; color:red; font-size:12px}
</style>
<script type="text/javascript">
// common
function $(str) {
return document.getElementById(str);
}
function $tag(str,target) {
target = target || document;
return target.getElementsByTagName(str);
}
function addEventHandler(obj,eType,fuc){
if(obj.addEventListener){
obj.addEventListener(eType,fuc,false);
}else if(obj.attachEvent){
obj.attachEvent("on" + eType,fuc);
}else{
obj["on" + eType] = fuc;
}
}
function removeEventHandler(obj,eType,fuc){
if(obj.removeEventListener){
obj.removeEventListener(eType,fuc,false);
}else if(obj.attachEvent){
obj.detachEvent("on" + eType,fuc);
}
}
function randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
}
Array.prototype.remove=function(dx) {
if(isNaN(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
//const
var TOTALR = 15, //球的半径(包括阴影)
R = 12, //球真实半径
POKER = 20,
W = 736, //案宽
H = 480, //案高
THICKNESS = 32, //边缘厚度
RATE = 100, //刷新频率
F = 0.01, //摩擦力
LOSS = 0.2, // 碰撞速度损失
TIPS = ["Tip1: 参考球,目标球,目标袋,三点一线,这是最基本的进球方法","Tip2: 右下角蓝条代表击球力度,小的力度更便于控制母球位置","Tip3: 右下角白球上的蓝点控制击球点,高杆,低杆,加塞都由它控制,高手与菜鸟的区别往往在此","Tip4: 桌球,其实打的不是目标球,是母球"];
var table, //案子
cueBall, //母球
guideBall, //参考球
dotWrap, //参考线
speed = 12,
rollUp = 0,
rollRight = 0,
timer,
forceTimer,
balls = [],
movingBalls = [],
pokes = [[0,0],[W/2,-5],[W,0],[0,H],[W/2,H+5],[W,H]],
hasShot = false;
shots = 0; //连击次数
window.onload = function() {
initTable();
initShootPos();
showTips();
startGame();
}
function startGame() {
initBall();
addEventHandler(table,"mousemove",dragCueBall);
addEventHandler(table,"mouseup",setCueBall);
}
function initTable() {
table = $("table");
var dotWrapDiv = document.createElement("div"),
guideBallDiv = document.createElement("div");
dotWrapDiv.id = "dotWrap";
guideBallDiv.className = "guide ball";
setStyle(guideBallDiv,"display","none");
dotWrap = table.appendChild(dotWrapDiv);
guideBall = table.appendChild(guideBallDiv);
}
function initBall() {
//添加母球
cueBall = new Ball("cue",170,H/2);
balls.push(cueBall);
//添加目标球
for(var i = 0; i < 5; i++) {
for(var j = 0; j <= i; j++) {
var ball = new Ball("target",520 + i*2*R, H/2 - R*i + j*2*R);
balls.push(ball);
}
}
}
function initShootPos() {
var wrap = $("shootPos"),
handler = $("dot"),
arrowR = 18;
addEventHandler(wrap,"mousedown",selectDot);
function selectDot(e) {
e = e || event;
var pos = getElemPos(wrap),
x = e.clientX - pos[0] - handler.offsetWidth/2,
y = e.clientY - pos[1] - handler.offsetHeight/2;
if(Math.sqrt((x-22)*(x-22) + (y-22)*(y-22)) > arrowR) {
var angle = Math.atan2(x-22,y-22);
x = arrowR*Math.sin(angle) + 22;
y = arrowR*Math.cos(angle) + 22;
}
setPos(handler,x,y);
}
}
function getElemPos(target,reference) {
reference = reference || document;
var left = 0,top = 0;
return getPos(target);
function getPos(target) {
if(target != reference) {
left += target.offsetLeft;
top += target.offsetTop;
return getPos(target.parentNode);
} else {
return [left,top];
}
}
}
// ball class
function Ball(type,x,y) {
var div = document.createElement("div");
div.cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0