这篇文章主要介绍了javascript编写的网页小游戏，附上全部代码供大家查看，实现了网页的小游戏页面，需要的朋友可以参考下
以下为游戏界面：
以下为游戏代码：
<html>
<head>
<script language="javascript">
<!-- original: nick young () -->
<!-- recompose: pakchoi () -->
var timerid = null;
var int = 40;
var loadflg = 0;
var gameflg = 0;
var missflg = 0;
var tim = 0;
var blcol = new array(5); // block color
var blsta = new array(40); // block status
var blno = new array(40); // block no
var blclr = 0; // clear block
var ballx = 0; // ball data
var bally = 0;
var balln = 5;
var balldx = 0;
var balldy = 0;
var tmprl = 193;
var x = 0;
blcol[0] = "blue";
blcol[1] = "yello";
blcol[2] = "red";
blcol[3] = "purple";
blcol[4] = "#ff0000";
blcol[5] = "black";
function mainf() {
cleartimeout(timerid);
tim = tim + 1;
with (math) {
tmptim = floor(tim / 10)};
document.forms[0].tm.value = tmptim;
ballx = ballx + balldx;
bally = bally + balldy;
outchk();
blkchk();
ball.style.postop = bally;
ball.style.posleft = ballx;
racket.style.posleft = tmprl;
if (gameflg == 01) {
timerid = settimeout("mainf()", int);
}
}
function initg() {
if (blclr >= 40) {
blclr = 0;
tim = 0;
balln = 3;
with (math) {
tmptim = floor(tim / 10);
}
document.forms[0].tm.value = tmptim;
clrmes.style.postop = -1000;
clrmes.style.posleft = -1000;
ovrmes.style.postop = -1000;
ovrmes.style.posleft = -1000;
for (ib = 0; ib < 5; ib++) {
for (ia = 0; ia < 8; ia++) {
chc(ib * 8 + ia +1, ib);
blsta[ib * 8 + ia] = ib;
}
}
}
document.forms[0].bl.value = balln;
starter.style.postop = -1000;
starter.style.posleft = -1000;
gameflg = 1;
loadflg = 1;
ballx = 209;
bally = 270;
balldx =- 8;
balldy =- 8;
tmprl = 193;
missflg = 0;
timerid = settimeout("mainf()", int);
}
function sup() {
up.outerhtml = "<p id='dn' style='position:absolute'><a href='javascript:sdn()'>speed down</a></p>";
dn.style.postop = 170;
dn.style.posleft = 432;
int = 40;
}
function sdn() {
dn.outerhtml = "<p id='up' style='position:absolute'><a href='javascript:sup()'>speed up</a></p>";
up.style.postop = 170;
up.style.posleft = 432;
int = 50;
}
function mousemv() {
if (loadflg == 1) {
tmprl = x - 20;
if (tmprl < 16) { tmprl = 16; }
if (tmprl > 370) { tmprl = 370; }
}
}
function outchk() {
if (ballx < 16){ ballx = 32 - ballx; balldx = -balldx; }
if (ballx > 401){ ballx = 802 - ballx; balldx = -balldx; }
if (bally < 16){ bally = 32 - bally; balldy = -balldy; }
if (bally >= 272) {
if (missflg == 0) {
tmpx = (balldx / balldy) * (272 - bally) + ballx;
if (tmpx >= tmprl - 12) {
if (tmpx <= tmprl + 42) {
bally = 272; balldy = -balldy;
ballx = tmpx;
ballrd = tmpx - tmprl;
with (math){ balldx = 8 * abs(balldx) / balldx; }
if (ballrd < -4){ balldx = -15; }
if (ballrd > 36){ balldx = 15; }
if (ballrd >= 14){ if (ballrd <= 16) { balldx = -2; } }
if (ballrd >= 17){ if (ballrd <= 20) { balldx = 2; } }
if (ballrd >= 0){ if (ballrd <= 4) { balldx = -4; } }
if (ballrd >= 28){ if (ballrd <= 32) { balldx = 4; } }
if (ballrd >= -4){ if (ballrd <= -1) { balldx = -11; } }
if (ballrd >= 33){ if (ballrd <= 36) { balldx = 11; } }
}
}
if (balldy > 0){ missflg = 1; }
}
else {
if (bally > 290){ missflg = 0; balln = balln - 1; gameend(); }
}
}
}
function blkchk() {
tmpy = bally + 4;
tmpx = ballx + 4;
if (tmpy >= 48) {
if (tmpy <= 147) {
if (tmpx >= 29) {
if (tmpx <= 396) {
with (math) {
ia = floor((tmpx - 29) / 46);
ib = floor((tmpy - 48) / 20);
ic = ib * 8 + ia;
}
if (blsta[ic] <= 4) {
tmpbc = blsta[ic] + 1;
blsta[ic] = tmpbc;
chc(ic + 1, tmpbc);
if (tmpbc == 5){ blclr = blclr + 1; }
if (blclr >= 40){ gameend(); }
if (balldx > 0) {
iy=(balldy / balldx) * (29 + 46 * ia - tmpx) + tmpy;
if (iy > 48 + 20 * ib + 18) {
tmpy1 = 48 + 20 * ib + 18;
tmpx1 = (balldx / balldy) * (48 + 20 * ib + 18 - tmpy) + tmpx;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldy = -balldy;
}
else {
if (iy < 44 + 20 * ib) {
tmpy1 = 48 + 20 * ib;
tmpx1 = (balldx / balldy) * (48 + 20 * ib - tmpy) + tmpx;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldy = -balldy;
}
else {
tmpx1 = 29 + 46 * ia;
tmpy1 = (balldy / balldx) * (29 + 46 * ia - tmpx) + tmpy;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldx = -balldx;
}
}
}
else {
iy = (balldy / balldx) * (29+46 * ia + 44 - tmpx) + tmpy;
if (iy > 48 + 20 * ib + 18) {
tmpy1 = 48 + 20 * ib + 18;
tmpx1 = (balldx / balldy) * (48 + 20 * ib + 18 - tmpy) + tmpx;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldy = -balldy;
}
else {
if (iy < 44 + 20 * ib) {
tmpy1 = 48 + 20 * ib;
tmpx1 = (balldx / balldy) * (48 + 20 * ib - tmpy) + tmpx;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldy = -balldy;
}
else {
tmpx1 = 29+46 * ia + 44;
tmpy1 = (balldy / balldx) * (29 + 46 * ia + 44 - tmpx) + tmpy;
ballx = tmpx1 - 4;
bally = tmpy1 - 4;
balldx = -balldx;
}
}
}
}
}
}
}
}
}
function gameend() {
document.forms[0].bl.value = balln;
gameflg = 0;
loadflg = 0;
starter.style.postop = 200;
starter.style.posleft = 180;
if (blclr >= 40) {
clrmes.style.postop = 150;
clrmes.style.posleft = 160;
}
if (balln <= 0) {
ovrmes.style.postop = 150;
ovrmes.style.posleft = 160;
blclr = 40;
}
}
function onld() {
bgie.style.postop = 16;
bgie.style.posleft = 16;
ball.style.postop = 270;
ball.style.posleft = 209;
racket.style.postop = 280;
racket.style.posleft = 193;
info.style.postop = 16;
info.style.posleft = 432;
starter.style.postop = -1000;
starter.style.posleft = -1000;
clrmes.style.postop = -1000;
clrmes.style.posleft = -1000;
ovrmes.style.postop = -1000;
ovrmes.style.posleft = -1000;
dn.style.postop = 170;
dn.style.posleft = 432;
for (ib = 0; ib < 5; ib++) {
for (ia = 0; ia < 8; ia++) {
blsta[ib * 8 + ia] = ib;
}
}
starter.style.postop = 200;
starter.style.posleft = 180;
}
function chc(bno,bcl) {
tmpbno = ((bno < 10.5) ? "b0" : "b") + (bno-1);
eval(tmpbno).bgcolor = blcol[bcl];
}
// end -->
</script>
</head>
<body onload="onld();" onmousemove='x=event.x;mousemv();'>
<span id=info style='position:absolute'>
<pre>
<font style="font-size:24px" color="#000044"><i><b>pong</b></i></font>
<form>
ball: <input type=text name=bl size=5 value=5>
time: <input type=text name=tm size=5 value=0>
</form>
</pre>
</span>
<script language="javascript">
<!-- block image write-->
with (document) {
write("<table id='bgie' width='394' height='300' bgcolor='#000000' style='position:absolute'><td></td></table>");
write("<table id='b00' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:29'><td></td></table>");
write("<table id='b01' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:75'><td></td></table>");
write("<table id='b02' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:121'><td></td></table>");
write("<table id='b03' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:167'><td></td></table>");
write("<table id='b04' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:213'><td></td></table>");
write("<table id='b05' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:259'><td></td></table>");
write("<table id='b06' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:305'><td></td></table>");
write("<table id='b07' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:351'><td></td></table>");
write("<table id='b08' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:29'><td></td></table>");
write("<table id='b09' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:75'><td></td></table>");
write("<table id='b10' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:121'><td></td></table>");
write("<table id='b11' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:167'><td></td></table>");
write("<table id='b12' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:213'><td></td></table>");
write("<table id='b13' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:259'><td></td></table>");
write("<table id='b14' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:305'><td></td></table>");
write("<table id='b15' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:351'><td></td></table>");
write("<table id='b16' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:29'><td></td></table>");
write("<table id='b17' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:75'><td></td></table>");
write("<table id='b18' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:121'><td></td></table>");
write("<table id='b19' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:167'><td></td></table>");
write("<table id='b20' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:213'><td></td></table>");
write("<table id='b21' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:259'><td></td></table>");
write("<table id='b22' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:305'><td></td></table>");
write("<table id='b23' width='42' height='16' bgcolor='#ff7f00' style='position:absolute; top:88; left:351'><td></td></table>");
write("<table id='b24' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:29'><td></td></table>");
write("<table id='b25' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:75'><td></td></table>");
write("<table id='b26' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:121'><td></td></table>");
write("<table id='b27' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:167'><td></td></table>");
write("<table id='b28' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:213'><td></td></table>");
write("<table id='b29' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:259'><td></td></table>");
write("<table id='b30' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:305'><td></td></table>");
write("<table id='b31' width='42' height='16' bgcolor='#ff3f00' style='position:absolute; top:108; left:351'><td></td></table>");
write("<table id='b32' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:29'><td></td></table>");
write("<table id='b33' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:75'><td></td></table>");
write("<table id='b34' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:121'><td></td></table>");
write("<table id='b35' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:167'><td></td></table>");
write("<table id='b36' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:213'><td></td></table>");
write("<table id='b37' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:259'><td></td></table>");
write("<table id='b38' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:305'><td></td></table>");
write("<table id='b39' width='42' height='16' bgcolor='#ff0000' style='position:absolute; top:128; left:351'><td></td></table>");
write("<p id='ball' style='position:absolute'>");
write("<table width='4' height='8' bgcolor='#b0b0b0' style='position:absolute; left:0; top:0'><td></td></table>");
write("<table width='8' height='4' bgcolor='#b0b0b0' style='position:absolute; left:-1; top:2'><td></td></table>");
write("<table width='4' height='4' bgcolor='#ffffff' style='position:absolute; left:0; top:1'><td></td></table>");
write("</p>");
write("<table id='racket' width='40' height='4' bgcolor='#b0b0ff' style='position:absolute'><td></td></table>");
write("<p id='starter' style='position:absolute'><form><input type='button' value='start' onclick='initg();blur()'></form></p>");
write("<p id='clrmes' style='position:absolute'><font style='font-size:24px' color='#44cc44'>all clear!</font></p>");
write("<p id='ovrmes' style='position:absolute'><font style='font-size:24px' color='#cc4444'>game over!</font></p>");
write("<p id='dn' style='position:absolute'><a href='javascript:sdn()'>speed down</a></p>");
}
</script>
</body>
</html>
以上就是javascript编写的网页小游戏分享（图）的详细内容。