📄 you10.htm

📁 javascript各种效果的实例及源代码
💻 HTM
📖 第 1 页 / 共 2 页
字号:
12 下一页
<html>
<head>
<title>选择路线游戏</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<BODY bgcolor="#fef4d9" onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);initBoard();">
<br>
<br>
<center><font color=red face="隶书" size=6>选择路线游戏</font></center>
<br>
<center>

<br>
<br>
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>你试着走走看!</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='UP' 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='DOWN' onClick='incy(this.form)'></td>
 <tr>
   <td><input type='button' value='LEFT' 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='RIGHT' onClick='incx(this.form)'></td>
 </table>
 </form>
</td></tr>
</table></center>
<br>
<center>
<textarea name=source rows=12 cols=45 class=yk9>
脚本说明:
12 下一页
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -