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