網頁版撞球小遊戲

2022-08-23 12:36:15 字數 3239 閱讀 6909

主要是用html  js  css 做的乙個網頁版小遊戲,從網上看到的所以整理下面給大家看看

先來看效果圖

html檔案

然後css檔案

* 

body

h1 h1 .sub

.info

#table

.ball

#dotwrap

.guide

.target

.cue

.bot

.ctrl

#force

#shootpos

#dot

#scoreboard

#tips

js檔案

// common 

function $(str)

function $tag(str,target)

function addeventhandler(obj,etype,fuc)else if(obj.attachevent)else

} function removeeventhandler(obj,etype,fuc)else if(obj.attachevent)

}function randownum(start,end)

array.prototype.remove=function(dx)

for(var i=0,n=0;iarrowr)

setpos(handler,x,y); }}

function getelempos(target,reference) else }}

// ball class

function ball(type,x,y)

function setcueball()

function startshot()

function dragcueball(e)

function shotcueball()

function showguide(e) }}

function roll()

for(var i = 0; i < movingballs.length; i++)

var vx = ball.v * sin,

vy = ball.v * cos;

ball.x += vx;

ball.y += vy;

//入袋

if(ispocket(ball.x,ball.y)) ,500);

}else

}balls.length -= 1;

}return;

} //邊緣碰撞

if(ball.x < r || ball.x > w - r)

} if(ball.y < r || ball.y > h - r)

} //小球碰撞

for(var j = 0; j < balls.length; j++)

x1 += vx1;

x2 += vx2;

// 將位置旋轉回來

var x1final = x1 * hitcos - y1 * hitsin,

y1final = y1 * hitcos + x1 * hitsin,

x2final = x2 * hitcos - y2 * hitsin,

y2final = y2 * hitcos + x2 * hitsin;

obj.x = ball.x + x2final;

obj.y = ball.y + y2final;

ball.x = ball.x + x1final;

ball.y = ball.y + y1final;

// 將速度旋轉回來

vx = vx1 * hitcos - vy1 * hitsin;

vy = vy1 * hitcos + vx1 * hitsin;

objvx = vx2 * hitcos - vy2 * hitsin;

objvy = vy2 * hitcos + vx2 * hitsin;

//最終速度

ball.v = math.sqrt(vx*vx + vy*vy) * (1 - 0);

obj.v = math.sqrt(objvx*objvx + objvy*objvy) * (1 - 0);

// 計算角度

ball.angle = math.atan2(vx , vy);

obj.angle = math.atan2(objvx , objvy);

//break;}}

}

setballpos(ball,ball.x,ball.y); }}

function ispocket(x,y)

} }

}function getballpos(obj)

function setpos(obj,x,y)

function setballpos(ball,x,y)

setpos(ball,x + thickness - totalr,y + thickness - totalr);

}function drawdot(wrap,x,y) );

setpos(elem,x,y);

}function updateforce() }

function setstyle()

} else if (arguments.length > 2)

}function hide(obj)

function show(obj)

//輸出資訊

function trace(sth,who)

function showscore(n)

function fadein(obj) }

function fadeout() }

}function setopacity(obj,n)

function showtips()

}

下面是:

靜態網頁呈現小遊戲

重啟httpd 啟用httpd 設定httpd開機重啟 開放80埠並永久生效 firewall cmd add port 80 tcp permanent reload重置,讓防火牆當場生效 firewall cmd reload 若使用的伺服器為雲伺服器,則不需要設定防火牆,只需到雲伺服器安全組設...

小遊戲開發 迷宮(遞迴版)

前面我們寫到迷宮的普通版,那這篇文章就來寫一下如何用遞迴來實現!遞迴實現迷宮問題同普通版差不多,其中關鍵思路 初始化及列印地圖 建立位置結點類等與普通版一樣,只有判斷座標的合理性與尋找迷宮通路的方法不同而已。源 如下 include include using namespace std inclu...

掃雷小遊戲公升級版

include include include include include stdlib.h define row 9 define col 9 define rows row 2 define cols col 2 define minenum 10 初始10個雷 void initboard...