Script网页小游戏<<能抓到我吗?>>

最新推荐文章于 2024-09-20 10:40:49 发布
最新推荐文章于 2024-09-20 10:40:49 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： Java学习/Script/Web游戏 文章标签： 游戏 function up table xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyujing1234/article/details/7668933
版权

 

 

偶尔在CSDN上看到高手用script写的一个网页小游戏：<<能抓到我吗？>>。

一、效果

在浏览器上的效果如下：

二、实现过程

1、1  框架设计

 

2、2  源码实现

 

在作者的基础上我加上了注释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>wujinjian</title>
    <script type="text/javascript">
        //11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapSize
        var mapSize=11; 
        //地图的大小
        var mapWH=440;  
        //记录对方的ID
        var computerID; 
        //这个方向是否可走
        var isPath=true; 
        //记录四方位上距离对方的距离
        var up=0;
        var left=0;
        var right=0;
        var down=0;
        //障碍物的最多个数(可重叠)
        var za=3;
        
        window.οnerrοr=function()
        {
            alert("异常！点击确定重新开始");
            window.location.href=window.location.href;
        };
        
        function createMap()
        {
            var x=Math.round(Math.random()*(mapSize-1));  //行
            var y=Math.round(Math.random()*(mapSize-1));  //列
            
            if(x==0)
                x=x+1;
            else if(x==(mapSize-1))
                x=x-1;
            if(y==0)
                y=y+1;
            else if(y==(mapSize-1))
                y=y-1;
                
            //var x=7;
            //var y=2;
            
			// 得到对方的ID
            computerID=x+"_"+y;
            
            var tabobj=document.createElement("table");
            tabobj.style.width=mapWH+"px";
            tabobj.style.height=mapWH+"px";
            
            tabobj.border="1";
            
			// 创建一个tbody
            var tbodyobj=document.createElement("tbody");
            
            for(var i=0;i<mapSize;i++)
            {
				// 创建一个tr
                var trobj=document.createElement("tr");
                
                for(var j=0;j<mapSize;j++)
                {
					// 创建一个td
                    var tdobj=document.createElement("td");
                    tdobj.style.border="rgb(128,128,255) solid 1px";
                    tdobj.id=i+"_"+j
					// 每个方格按下事件的回调函数
                    tdobj.οnclick=tdClick;
                    
                    if(i+"_"+j==computerID)
                    {
                        tdobj.style.backgroundColor="red";
                    }
                    // 创建一个txt
                    var txt=document.createTextNode(" ");
                    tdobj.appendChild(txt);
                    // 在tr里添加td
                    trobj.appendChild(tdobj);
                }
                // 在tbody里添加tr
                tbodyobj.appendChild(trobj);
            }
            // 在table里添加tbody
            tabobj.appendChild(tbodyobj);
            
			// 在map_div里添加table
            document.getElementById("map_div").appendChild(tabobj);
            
            //默认随机障碍物
            for(var i=0;i<za;i++)
            {
                var _id=Math.round(Math.random()*(mapSize-1)) +"_"+ Math.round(Math.random()*(mapSize-1));
                if(document.getElementById(_id).style.backgroundColor=="")
                    document.getElementById(_id).style.backgroundColor="gray";
            }
            
            for(var i=0;i<mapSize;i++)
            {
                document.getElementById(i+"_"+(mapSize-1)).style.border="rgb(223,223,223) solid 1px";
                document.getElementById((mapSize-1)+"_"+i).style.border="rgb(223,223,223) solid 1px";
                document.getElementById(i+"_0").style.border="rgb(223,223,223) solid 1px";
                document.getElementById("0_"+i).style.border="rgb(223,223,223) solid 1px";
            }
        }

        // 每个方格按下事件的回调函数
        function tdClick()
        {
            if(this.style.backgroundColor=="")
            {
                this.style.backgroundColor="gray";
                
                up=0;
                left=0;
                right=0;
                down=0;
                
                computerXZ();
            }  
        }
        
        function computerXZ()
        {
            var xy=computerID.split("_");
            var x=xy[0]-0;
            var y=xy[1]-0;
            
            //中心位置
            var mid=(mapSize-1)/2;
            
            //左上角
            if(x<=mid && y<=mid) 
            { 
                //向上
                if(x<=y)
                {
                    //向上不通,向左走 //false 表示是判断,true 表示行走
                    if(!computerUp(x,y,false)) 
                    {
                        //向左不通，向右走
                        if(!computerLeft(x,y,false))
                        {
                            //向右不通，向下走
                            if(!computerRight(x,y,false))
                            {
                                //向下不通，向下走(往最长的方向走)
                                if(!computerDown(x,y,false))
                                {
                                    
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }       
                }
                else  //向左
                {
                   if(!computerLeft(x,y,false))
                    {
                        if(!computerUp(x,y,false))
                        {
                            if(!computerDown(x,y,false))
                            {
                                if(!computerRight(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }    
                }
            }
           //右上角
            else if(x<=mid && y>=mid)
            {
                if(x<=(mapSize-1-y)) //向上
                {
                    if(!computerUp(x,y,false)) 
                    {
                        if(!computerRight(x,y,false))
                        {
                            if(!computerLeft(x,y,false))
                            {
                                if(!computerDown(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }       
                }
                else  //向右
                {
                   if(!computerRight(x,y,false))
                    {
                        if(!computerUp(x,y,false))
                        {
                            if(!computerDown(x,y,false))
                            {
                                if(!computerLeft(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }    
                }
            }
            //右下角
            else if(x>=mid && y>=mid)
            {
                if(x>=y) //向下
                {
                    if(!computerDown(x,y,false)) 
                    {
                        if(!computerRight(x,y,false))
                        {
                            if(!computerLeft(x,y,false))
                            {
                                if(!computerUp(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }       
                }
                else  //向右
                {
                   if(!computerRight(x,y,false))
                    {
                        if(!computerDown(x,y,false))
                        {
                            if(!computerUp(x,y,false))
                            {
                                if(!computerLeft(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }    
                }
            }
            //左下角
            else if(x>=mid && y<=mid)
            {
                if((mapSize-1-x)<=y) //向下
                {
                    if(!computerDown(x,y,false)) 
                    {
                        if(!computerLeft(x,y,false))
                        {
                            if(!computerRight(x,y,false))
                            {
                                if(!computerUp(x,y,false))
                                {
                                    direction(up,left,right,down,x,y)
                                }
                            }
                        }  
                    }       
                }
                else  //向左
                {
                   if(!computerLeft(x,y,false))
                    {
                        if(!computerDown(x,y,false))
                        {
                            if(!computerUp(x,y,false))
                            {
                                if(!computerRight(x,y,false))
                                {
                                    direction(up,left,right,down,x,y) 
                                }
                            }
                        }  
                    }    
                }
            }

        }
		function direction(up,left,right,down,_x,_y)
        {
            if(up==0 && left==0 && right==0 && down==0)
            {
                alert("恭喜你，赢了！");
                window.location.href=window.location.href;
            }
            else
            {
                var arrayDirection=new Array(up,left,right,down);
            
                arrayDirection.sort(function(x,y){return y-x;})
                
                //对方 往 离自己(对方)最远的那个障碍物走
                if(up==arrayDirection[0])
                    computerUp(_x,_y,true); 
                else if(down==arrayDirection[0])
                    computerDown(_x,_y,true); 
                else if(left==arrayDirection[0])
                    computerLeft(_x,_y,true); 
                else if(right==arrayDirection[0])
                    computerRight(_x,_y,true); 
            }
        }
        
        //判断是否输了
        function isDeath()
        {
            for(var i=0;i<mapSize;i++)
            {
                if(document.getElementById(i+"_"+(mapSize-1)).style.backgroundColor=="red" ||
                document.getElementById((mapSize-1)+"_"+i).style.backgroundColor=="red" ||
                document.getElementById(i+"_0").style.backgroundColor=="red" ||
                document.getElementById("0_"+i).style.backgroundColor=="red" )
                {
                    alert("想抓我，没门！");
                    window.location.href=window.location.href;
                }
            }
        }
        
        function computerUp(x,y,mode)//向上走
        {
            for(var i=x-1;i>=0;i--)
            {
                if(document.getElementById(i+"_"+y).style.backgroundColor=="")
                {
                    isPath=true;
                    up++;
                }
                else
                {
                    isPath=false;
                    break;
                }
            }
            
            if(isPath || mode)
            {
                document.getElementById(computerID).style.backgroundColor="";
                document.getElementById((x-1)+"_"+y).style.backgroundColor="red";
                computerID=(x-1)+"_"+y;
                
                isDeath();
                                       
                return true;
            }
            
            return false;
        }
        
        function computerLeft(x,y,mode)//向左走
        {
            for(var i=y-1;i>=0;i--)
            {
                if(document.getElementById(x+"_"+i).style.backgroundColor=="")
                {
                    isPath=true;
                    left++;
                }
                else
                {
                    isPath=false;
                    break;
                }
            }
            
            if(isPath || mode)
            {
                document.getElementById(computerID).style.backgroundColor="";
                document.getElementById(x+"_"+(y-1)).style.backgroundColor="red";
                computerID=x+"_"+(y-1);
                
                isDeath();
                
                return true
            }
            return false;
        }
        
        function computerRight(x,y,mode)//向右走
        {
            for(var i=y+1;i<mapSize;i++)
            {
                if(document.getElementById(x+"_"+i).style.backgroundColor=="")
                {
                    isPath=true;
                    right++;
                }
                else
                {
                    isPath=false;
                    break;
                }
            }
            
            if(isPath || mode)
            {
                document.getElementById(computerID).style.backgroundColor="";
                document.getElementById(x+"_"+(y+1)).style.backgroundColor="red";
                computerID=x+"_"+(y+1);
                
                isDeath();
                
                return true
            }
            return false;
        }
        
        function computerDown(x,y,mode)//向下走
        {
            for(var i=x+1;i<mapSize;i++)
            {
                if(document.getElementById(i+"_"+y).style.backgroundColor=="")
                {
                    isPath=true;
                    down++;
                }
                else
                {
                    isPath=false;
                    break;
                }
            }
            
            if(isPath || mode)
            {
                document.getElementById(computerID).style.backgroundColor="";
                document.getElementById((x+1)+"_"+y).style.backgroundColor="red";
                computerID=(x+1)+"_"+y;
                
                isDeath();
                                       
                return true;
            }
            
            return false;
        }
    </script>
</head>
<body οnlοad="createMap()" style="font-size:10pt">
    <form id="form1">
        <center>
            <br><br><br>
            <div id="map_div"></div>
            <br>
            * 游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。
        </center>
    </form>
</body>
</html>


 

Jackchenyj
关注
专栏目录
个人初做小游戏RunRunMagic（四）障碍物和碰撞检测
RockV的博客
04-12 1450
总算是到障碍物啦！总之先上图↓ 有了素材我们就开始干活吧！我又有些不厌其烦地从新写了一个类，大概只有下面这些东西 Enemy::Enemy(){ Sprite::initWithFile("glasses.png"); } 想让这玩意动起来并不难，和之前背景的移动方式几乎相同，最好是和背景移动方式是一样的。不过为了让这些障碍物随机时间出现我想了一阵子。。。实际上我是这样想的，每个障
兵抓贼网页游戏
m0_45394874的博客
10-20 194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>兵抓贼游戏开发</title> </head> <body> <form> <input type="button" value="换背景" onclick="setbg()" /> </form> &lt
全script写出的游戏
05-30
全script写做。帮助快速提升基础算法，对初学者绝对是好东西。老程序员也可以看看
TypeScript入门实战小游戏-----贪吃蛇的面向对象开发总结
m0_55842907的博客
05-18 804
前言：花了近一个星期左右的时间去学习了一下TypeScript的基本语法和开发环境的配置，跟着教程做了个简单的贪吃蛇的游戏，所有的功能基本实现，写篇博客做一下总结。所有源码包括html,less,ts文件都在博客中给出，并就用到的一些知识点进行总结归纳。 一、功能介绍以及实现结果展示 废话不多说，直接上图展示最终的实现效果； ...
JavaScript实现的躲避球小游戏
u013034580的专栏
07-29 1408
自己搜集了很多资料，看了很多视频，写了一个躲避球的游戏，本人还在学习阶段，写次文章也算是对自己所学的再一次领悟吧，请大神勿喷。     好了，话不多说了，直接进入主题。      首先创建一个游戏画面，当然本人只为实现功能，没有注重美观。
xss靶场练习(二)之xss小游戏
angry_program的博客
02-13 2800
前言 话说自从网络安全修正法推出, 不敢轻易动国内的网站, 平时就打打靶场, 本文记录练习之路。 xss小游戏在线地址:http://test.ctf8.com/ xss小游戏一共二十关。 为了方便, 我把项目copy在本地。 为了方便实战效果和理解, 本文采用先通关再展示源码的排版方式。 Leve-1 有一个参数name: 再看看name在html源...
【FiddlerScript】利用Fiddler中的FiddlerScript解除4399小游戏的防沉迷
svip2242257464的博客
02-18 1513
利用Fiddler中的FiddlerScript自动进行防沉迷的解除
还有 Selenium 抓不到的内容？
cainiao_python的博客
05-05 567
有一些同学在写爬虫的时候，过于依赖 Selenium，觉得只要使用模拟浏览器，在不被网站屏蔽的情况下，就可以爬到任何内容。今天我们不讨论字体反爬虫和 CSS 反爬虫这两种情况。我们来看一段...
学习日记|javaScript在网页实现的弹球游戏
weixin_48595687的博客
07-23 511
利用javeScript对象以及方法实现的网页弹球游戏。 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <script src="https://cdn.bootcdn.net/ajax/libs
H5游戏作弊与防作弊——我如何拿到第一名的天猫精灵
热门推荐
xlzy
12-03 1万+
一次微信公众号游戏的抓包、修改源码（Fillder） 今天走在上班的路上，突然回忆起去年的一件事。那是2019年9月16日的一个晚上，我打开了微信，进入一个微信群，看到一位群友分享了一个页面，说玩游戏可以领话费。于是我遍点进去试玩。游戏的玩法是一个球向上弹，上面落下一些球，你需要通过粘在这里球上作为跳板往上，一个球一分，最后玩了四十多分。(现在那个网站已经关了) 思考(如何不讲武德) 首先，他肯定是要和服务端进行通信的，最终分数由前端还是后端计算的需要分析接口和代码。 然后开始抓包，我之前是用的Wi
xss小游戏及常用绕过方法
Jaychouzzk
01-06 1151
下载链接：https://pan.baidu.com/s/143vKmX0mfmseIFK-iQesYg 参考链接：https://www.secpulse.com/archives/44299.html                   https://xz.aliyun.com/t/1206 -----------------------------------------------...
web网页设计期末课程大作业 基于HTML+CSS+JavaScript响应式环保科技公司网站模板(环保主题网站设计)
HTML网页设计
09-26 7968
🌲环境保护、🌳 保护地球、🌴 校园环保、🌵垃圾分类、🚵🏼绿色家园、等网站的设计与制作。⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）🏅 一套A+的网...
web期末大作业设计网页： 餐饮主题——火锅食品餐饮网站设计(11页) HTML+CSS+JavaScript HTM5网页设计作业成品
qq_365392777
09-27 2441
HTML5期末大作业： 餐饮主题——火锅食品餐饮网站设计(11页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业,
软件设计模式之(二)装饰者模式
chenyujing1234的专栏
05-02 7617
欢迎大家提出意见,一起讨论!   转载请标明是引用于 http://blog.csdn.net/chenyujing1234  例子代码:(编译工具：Eclipse) http://www.rayfile.com/zh-cn/files/1291b5bd-9418-11e1-b6a1-0015c55db73d/ 参考书籍: >   装饰者模式(Decorator ['dekəre
Java学习笔记
chenyujing1234的专栏
07-23 869
转载请标明是引用于 http://blog.csdn.net/chenyujing1234  欢迎大家拍砖!   1、Jav的与C++的不同处： （1）Java程序中，不能在任何类之外定义全局变量，只能通过一个类中定义公用、静态的变量来实现全局； （2）不支持goto语句； （3）不支持指针操作；也不支持结构和联合； （4）Java语言能创建并动态维护数据结构所需的内存；
适用于QF的存档系统
最新发布
2301_80005044的博客
09-20 392
今天分享一个适用于QF的存档系统这个系统的优点为1、轻量化，总共代码不超过400行2、自动化，基于QF框架，自动注入值缺点：1、不能序列化Unity内部类型，如Vector2、需要给能被序列化的类加上【Serialize】属性。
巨人网络参展云栖大会，两款“游戏+AI”自研大模型应用首发
TMT_XQ的博客
09-19 557
巨人网络将持续深耕“游戏+AI”，为用户创造全新的游戏乐趣。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物</title> <link type="text/css" rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>订单</h1> <ul> <li>配送至：<?php echo $_POST["address"];?></li> <!-- 显示商品信息、商品总量和商品总价--> </ul> <?php foreach($order as $key => $value):?> <li><?php echo $value['name'];?> <span>￥<?php echo $value['price'];?></span> <span>x<?php echo $value['num'];?></span> </li> <?php endforeach;?> <li>总共<?php echo $num?>件</li> <li>合计￥<?php echo $sum;?></li> </body> </html> 请给我检查错误
05-31
<script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>订单</h1> <ul> <li>配送至：<?php echo $_POST["address"];?></li> <?php // 获取订单信息 $order = array( array('name' ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值