说明: 简单的走迷宫游戏
效果: 点这里看效果!
代码: 要完成此效果需要两个步骤
第一步:把如下代码加入到<body>区域中
<center>
<br>
<br>
<center>
<table border=5 bordercolor=#000000 borderlight=green>
<tr>
<td align=center><font size=5 color=red face="Arial,
Helvetica, sans-serif"><strong><font face="楷体_GB2312">走迷宫</font></strong></font></td>
</tr><tr><td align=center>
<script>
var line = "";
var x = 0;
var y = 0;
var full="*";
var blank = ".";
var wall = "#";
var goal = "$";
var fill = "";
// Functions to create the board
function makeboard() {
for (var i=1; i<= 10; i++)
this[i] = new makeRow();
return this;
}
function makeRow() {
for (var i=1; i<= 10; i++)
this[i]=blank;
return this;
}
// Functions to fill & clear the board.
function clearBoard (form) {
// Clears & resets the board
x = 0;
y = 0;
form.xval.value = 1;
form.yval.value = 1;
for (var i=1; i<= 10; i++)
for (var j=1; j<= 10; j++)
theBoard[i][j]=blank;
drawMaze();
fillBoard(form);
return;
}
function fillBoard (form) {
// Clear board buffer
line = "";
form.grid.value = "";
// Fill board buffer
for (var i=1; i<= 10; i++)
for (var j=1; j<= 10; j++)
line += theBoard[i][j];
// Move buffer contents to board
form.grid.value=line;
}
function plot (v, h) {
theBoard[v][h] = fill;
}
function drawMaze() {
// Plots the walls of the maze
//
// Ideally, a function should do this automatically,
// or maybe I should write a maze generating function in
JS!
// Note: This program operates in Y,X co-ordinates (not
standard X,Y).
theBoard[10][10] = goal;
theBoard[1][2] = wall;
theBoard[2][2] = wall;
theBoard[4][1] = wall;
theBoard[4][2] = wall;
theBoard[4][3] = wall;
theBoard[2][3] = wall;
theBoard[5][2] = wall;
theBoard[6][2] = wall;
theBoard[2][5] = wall;
theBoard[4][5] = wall;
theBoard[5][5] = wall;
theBoard[2][6] = wall;
theBoard[2][7] = wall;
theBoard[9][10] = wall;
theBoard[9][9] = wall;
theBoard[8][9] = wall;
theBoard[7][9] = wall;
theBoard[10][7] = wall;
theBoard[9][7] = wall;
theBoard[8][7] = wall;
theBoard[6][7] = wall;
theBoard[9][2] = wall;
theBoard[9][3] = wall;
theBoard[9][4] = wall;
theBoard[8][2] = wall;
theBoard[7][4] = wall;
theBoard[7][5] = wall;
theBoard[6][5] = wall;
theBoard[6][6] = wall;
theBoard[6][7] = wall;
theBoard[6][8] = wall;
theBoard[6][9] = wall;
theBoard[5][7] = wall;
theBoard[5][8] = wall;
theBoard[5][9] = wall;
theBoard[4][9] = wall;
}
function update(form) {
var horiz = eval(form.xval.value);
var vert = eval(form.yval.value);
plot(vert,horiz);
fillBoard(form);
return;
}
function initBoard() {
theBoard = new makeboard();
fill = full;
clearBoard(document.board);
update(document.board);
}
// Functions to handle the player piece
//
// I suppose I could have written one function to handle
this,
// but it was getting too complex. Feel free to try. :)
//
function decx(form) {
fill = blank;
update(form);
checkx = eval(form.xval.value - 1);
checky = form.yval.value;
if (form.xval.value > 1) {
if (theBoard[checky][checkx] != wall) {
form.xval.value=eval(form.xval.value - 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function incx(form) {
fill = blank;
update(form);
checkx = eval(1 * form.xval.value + 1);
checky = form.yval.value;
if (form.xval.value < 10) {
if (theBoard[checky][checkx] != wall) {
form.xval.value=eval(1 * form.xval.value + 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function decy(form) {
fill = blank;
update(form);
checkx = form.xval.value;
checky = eval(form.yval.value - 1);
if (form.yval.value > 1) {
if (theBoard[checky][checkx] != wall) {
form.yval.value=eval(form.yval.value - 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
function incy(form) {
fill = blank;
update(form);
checkx = form.xval.value;
checky = eval(1 * form.yval.value + 1);
if (form.yval.value < 10) {
if (theBoard[checky][checkx] != wall) {
form.yval.value=eval(1 * form.yval.value + 1);
}
else {
alert("THUD!\nYou hit a wall.");
}
if (theBoard[checky][checkx] == goal) {
alert("YOU WIN!");
}
}
fill = full;
update(form);
}
// Various Functions
function cheater (form) {
// Refuse to change values manually, and start over. CHEATER!
alert("You can't change this value manually.\nPlease
use the buttons.");
clearBoard(form);
update(form);
}
</script>
<form method="post" name="board">
<input type='button' value='Reset' onClick='clearBoard(this.form);update(document.board);'>
<br>
<textarea name="grid" rows="12" cols="10"
wrap=virtual></textarea><br>
<!-- virtual-wrap is the key! Now one text line becomes
a grid! -->
<table>
<tr>
<td>
<input type='button' value='向上' onClick='decy(this.form)'>
</td>
<td><input type='text' value='1' size=5 name='yval'
onChange='cheater(this.form);'></td>
<td>
<input type='button' value='向下' onClick='incy(this.form)'>
</td>
<tr>
<td>
<input type='button' value='向左' onClick='decx(this.form)'>
</td>
<td><input type='text' value='1' size=5 name='xval'
onChange='cheater(this.form);'></td>
<td>
<input type='button' value='向右' onClick='incx(this.form)'>
</td>
</table>
</form>
</td></tr>
</table></center>
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function goHist(a)
{
history.go(a);
}
//-->
</script>
</center>
<br>
<br>
第二步:把下列代码加在<body>标记里
onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);initBoard();"
作者:佚名 来源: 网上转帖 |