JS经典小游戏（无名，能抓住我吗）

最新推荐文章于 2021-12-27 22:17:21 发布
最新推荐文章于 2021-12-27 22:17:21 发布
阅读量957 收藏 1
点赞数
分类专栏： 03 JavaScript 文章标签： 游戏 function up div border input 
<!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>你能抓住我吗</title>


    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />


    <script type="text/javascript">


        //11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapSize


        var mapSize=17; //一定要奇数


        //地图的大小


        var mapWH=500;  


        //记录对方的ID


        var computerID; 


        //这个方向是否可走


        var isPath=true; 


        //记录八方位上距离对方的距离


        var up=0;


        var left=0;


        var right=0;


        var down=0;


        var leftup=0;


        var rightup=0;


        var leftdown=0;


        var rightdown=0;


        //障碍物的最多个数(可重叠)


        var za=19;






        var isFirst=true;






        function createMap()


        { 


            var x=(mapSize-1)/2;


            var y=(mapSize-1)/2;


            


            computerID=x+"_"+y;


            


            var tabobj=document.createElement("table");


            tabobj.style.width=mapWH+"px";


            tabobj.style.height=mapWH+"px";


            


            tabobj.border="1";


            


            var tbodyobj=document.createElement("tbody");


            


            for(var i=0;i<mapSize;i++)


            {


                var trobj=document.createElement("tr");


                


                for(var j=0;j<mapSize;j++)


                {


                    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";


                    }


                    


                    var txt=document.createTextNode(" ");


                    tdobj.appendChild(txt);


                    


                    trobj.appendChild(tdobj);


                }


                


                tbodyobj.appendChild(trobj);


            }


            


            tabobj.appendChild(tbodyobj);


            


            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";


            }






            setMessageDivSize();


        }






        function setMessageDivSize()


        {


            document.getElementById("message_div").style.width="180px";


            document.getElementById("message_div").style.height=document.getElementById("map_div").offsetHeight-2+"px";


        }






        function startDate()


        {


            document.getElementById("startDate").value=new Date().toLocaleTimeString();


        }






        function nowDate()


        {


            document.getElementById("nowDate").value=new Date().toLocaleTimeString();






            setTimeout("nowDate()",1000);


        }






        function yxbs()


        {


            document.getElementById("yxbs").value=document.getElementById("yxbs").value-0+1;


        }


        


        function tdClick()


        {


            if(isFirst)


            {


                startDate();


                nowDate();


                isFirst=false;


            }


            if(this.style.backgroundColor=="")


            {


                this.style.backgroundColor="gray";


                


                up=0;


                left=0;


                right=0;


                down=0;


                leftup=0;


                rightup=0;


                leftdown=0;


                rightdown=0;






                computerXZ();






                yxbs();


            }  


        }


        


        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)


                {


                    if(!computerUp(x,y,false)) //向上不通,向左上角走 //false 表示是判断,true 表示行走


                        if(!computerLeftUp(x,y,false)) //左上角不通，向右上角走


                            if(!computerRightUp(x,y,false)) //右上角不通，向左走


                                if(!computerLeft(x,y,false))//向左不通，向左下角走


                                    if(!computerLeftDown(x,y,false)) //左下角不通，向右走


                                        if(!computerRight(x,y,false))//向右不通，向右下角走


                                            if(!computerRightDown(x,y,false)) //右下角不通，向下走


                                                if(!computerDown(x,y,false)) //向下不通，向下走(往最长的方向走)


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);


                }


                else  //向左


                {


                    if(!computerLeft(x,y,false))


                        if(!computerLeftUp(x,y,false)) 


                            if(!computerLeftDown(x,y,false))


                                if(!computerUp(x,y,false))


                                    if(!computerRightUp(x,y,false))


                                       if(!computerDown(x,y,false))


                                          if(!computerRightDown(x,y,false))


                                              if(!computerRight(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);                        


                }


            }


           //右上角


            else if(x<=mid && y>=mid)


            {


                if(x<=(mapSize-1-y)) //向上


                {


                    if(!computerUp(x,y,false)) 


                        if(!computerRightUp(x,y,false))


                            if(!computerLeftUp(x,y,false))


                                if(!computerRight(x,y,false))


                                    if(!computerRightDown(x,y,false))


                                        if(!computerLeft(x,y,false))


                                            if(!computerLeftDown(x,y,false))


                                                if(!computerDown(x,y,false)) 


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);


                           


                }


                else  //向右


                {


                   if(!computerRight(x,y,false))


                       if(!computerRightUp(x,y,false))


                           if(!computerRightDown(x,y,false))


                                if(!computerUp(x,y,false))


                                    if(!computerLeftUp(x,y,false))


                                        if(!computerDown(x,y,false))


                                            if(!computerLeftDown(x,y,false))


                                                if(!computerLeft(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);   


                }


            }


            //右下角


            else if(x>=mid && y>=mid)


            {


                if(x>=y) //向下


                {


                    if(!computerDown(x,y,false)) 


                        if(!computerRightDown(x,y,false))


                            if(!computerLeftDown(x,y,false))


                                if(!computerRight(x,y,false))


                                    if(!computerRightUp(x,y,false))


                                        if(!computerLeft(x,y,false))


                                            if(!computerLeftUp(x,y,false))


                                                if(!computerUp(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);        


                }


                else  //向右


                {


                   if(!computerRight(x,y,false))


                       if(!computerRightDown(x,y,false))


                           if(!computerRightUp(x,y,false))


                                if(!computerDown(x,y,false))


                                    if(!computerLeftDown(x,y,false))


                                        if(!computerUp(x,y,false))


                                            if(!computerLeftUp(x,y,false))


                                                if(!computerLeft(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);     


                }


            }










       //左下角


            else if(x>=mid && y<=mid)


            {


                if((mapSize-1-x)<=y) //向下


                {


                    if(!computerDown(x,y,false)) 


                        if(!computerLeftDown(x,y,false))


                            if(!computerRightDown(x,y,false))


                                if(!computerLeft(x,y,false))


                                    if(!computerLeftUp(x,y,false))


                                        if(!computerRight(x,y,false))


                                            if(!computerRightUp(x,y,false))


                                                if(!computerUp(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);        


                }


                else  //向左


                {


                   if(!computerLeft(x,y,false))


                       if(!computerLeftDown(x,y,false))


                           if(!computerLeftUp(x,y,false))


                                if(!computerDown(x,y,false))


                                    if(!computerRightDown(x,y,false))


                                        if(!computerUp(x,y,false))


                                            if(!computerRightUp(x,y,false))


                                                if(!computerRight(x,y,false))


                                                    direction(up,left,right,down,leftup,rightup,leftdown,rightdown,x,y);       


                }


            }






        }


        


        function direction(up,left,right,down,leftup,rightup,leftdown,rightdown,_x,_y)


        {


            if(up==0 && left==0 && right==0 && down==0 && leftup==0 && rightup==0 && leftdown==0 && rightdown==0)


            {


                alert("恭喜你，赢了！");


                window.location.href=window.location.href;


            }


            else


            {


            


                var arrayDirection=new Array(up,left,right,down,leftup,rightup,leftdown,rightdown);


            


                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); 


                else if(leftup==arrayDirection[0])


                    computerLeftUp(_x,_y,true); 


                else if(rightup==arrayDirection[0])


                    computerRightUp(_x,_y,true); 


                else if(leftdown==arrayDirection[0])


                    computerLeftDown(_x,_y,true); 


                else if(rightdown==arrayDirection[0])


                    computerRightDown(_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 computerLeftUp(x,y,mode) //leftup


        {


            var i=1;






            while(x-i>=0 && y-i>=0)


            {


                if(document.getElementById((x-i)+"_"+(y-i)).style.backgroundColor=="")


                {


                    isPath=true;


                    leftup++;






                    i++;


                }


                else


                {


                    isPath=false;


                    break;


                }


            }


            


            if(isPath || mode)


            {


                document.getElementById(computerID).style.backgroundColor="";


                document.getElementById((x-1)+"_"+(y-1)).style.backgroundColor="red";


                computerID=(x-1)+"_"+(y-1);


                


                isDeath();


                                       


                return true;


            }


            


            return false;


        }






        function computerRightDown(x,y,mode) //rightdown


        {


            var i=1;


            while(y+i<mapSize && x+i<mapSize)


            {


                if(document.getElementById((x+i)+"_"+(y+i)).style.backgroundColor=="")


                {


                    isPath=true;


                    rightdown++;






                    i++;


                }


                else


                {


                    isPath=false;


                    break;


                }


            }






            if(isPath || mode)


            {


                document.getElementById(computerID).style.backgroundColor="";


                document.getElementById((x+1)+"_"+(y+1)).style.backgroundColor="red";


                computerID=(x+1)+"_"+(y+1);


                


                isDeath();


                                       


                return true;


            }


            


            return false;


        }






        function computerRightUp(x,y,mode) //rightup


        {


            var i=1;


            while(x-i>=0 && y+i<mapSize)


            {


                if(document.getElementById((x-i)+"_"+(y+i)).style.backgroundColor=="")


                {


                    isPath=true;


                    rightup++;






                    i++;


                }


                else


                {


                    isPath=false;


                    break;


                }


            }






            if(isPath || mode)


            {


                document.getElementById(computerID).style.backgroundColor="";


                document.getElementById((x-1)+"_"+(y+1)).style.backgroundColor="red";


                computerID=(x-1)+"_"+(y+1);


                


                isDeath();


                                       


                return true;


            }


            


            return false;


        }






        function computerLeftDown(x,y,mode) //leftdown


        {


            var i=1;


            while(y-i>=0 && x+i<mapSize)


            {


                if(document.getElementById((x+i)+"_"+(y-i)).style.backgroundColor=="")


                {


                    isPath=true;


                    leftdown++;






                    i++;


                }


                else


                {


                    isPath=false;


                    break;


                }


            }






            if(isPath || mode)


            {


                document.getElementById(computerID).style.backgroundColor="";


                document.getElementById((x+1)+"_"+(y-1)).style.backgroundColor="red";


                computerID=(x+1)+"_"+(y-1);


                


                isDeath();


                                       


                return true;


            }


            


            return false;


        }






        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>


            <table>


                <tr>


                    <td>


                        <div id="map_div" style="border:rgb(231,24,220) solid 1px">


                        </div>


                    </td>


                    <td>


                        <div id="message_div" style="border:rgb(231,24,220) solid 1px">


                            <br><br><font color="red"><b>无名游戏</b></font><br><br>


                            开始时间:<input type="text" id="startDate" readonly style="width:80px"><br><br>


                            现在时间:<input type="text" id="nowDate" readonly style="width:80px"><br><br>


                            游戏步数:<input type="text" id="yxbs" readonly value="0" style="width:80px"><br><br><br><br>






                            <font color="red"><b>游戏规则</b></font><br><br>


                            (1)只要围住红色方块让它不<br>能移动，你就赢了。如下图<br>这种形式:


                            


                            <table style="width:60px;height:60px" border="1" cellspacing="0">


                                <tr>


                                    <td style="background-color:gray"> 


                                    </td>


                                    <td style="background-color:gray"> 


                                    </td>


                                    <td style="background-color:gray"> 


                                    </td>


                                <tr>


                                <tr>


                                    <td style="background-color:gray"> 


                                    </td>


                                    <td style="background-color:red"> 


                                    </td>


                                    <td style="background-color:gray"> 


                                    </td>


                                <tr>


                                <tr>


                                    <td style="background-color:gray"> 


                                    </td>


                                    <td style="background-color:gray"> 


                                    </td>


                                    <td style="background-color:gray"> 


                                    </td>


                                <tr>


                            </table>


                            <br>


                            (2)当红色方块跑到边界的灰<br>色格子里，你就输了。


                        </div>


                        


                    </td>


                </tr>


                <tr>


                <td colspan="2">


<p>


            此游戏由CSDN网友 <a href="http://hi.csdn.net/wujinjian2008n" target="_blank">wujinjian2008n</a> 提供。


            有关此游戏的更多讨论，请参看下面几篇帖子：<br />


            <a href="http://topic.csdn.net/u/20091203/23/208F4D03-CF8F-435D-88E5-D7854E125A97.html" target="_blank">http://topic.csdn.net/u/20091203/23/208F4D03-CF8F-435D-88E5-D7854E125A97.html</a><br />


            <a href="http://topic.csdn.net/u/20091202/23/74982b63-3c53-47e3-9c0b-c30d1707bb80.html" target="_blank">http://topic.csdn.net/u/20091202/23/74982b63-3c53-47e3-9c0b-c30d1707bb80.html</a>


            


            </p>


                </td>


                </tr>


            </table>


            <br>


        </center>


    </form>


</body>


</html>


passport_daizi
关注
专栏目录
JavaScript经典小游戏
02-24
很了二天时间下载并整理代码格式，确认运行效果，最终将几个感觉还不错的打包，供亲们下载！优点：代码格式良好，经过测试可以运行，内容经典包含：坦克（超猛）、俄罗斯方块、贪吃蛇、打雷、三子棋等六6个，希望能给深入学习JavaScript的童鞋们带来帮助
使用javascript写的游戏大全
最新发布
weixin_34534456的博客
08-12 609
使用JavaScript编写的游戏大全 JavaScript作为一种强大的编程语言，不仅用于网页开发，也为游戏开发提供了丰富的可能性。随着HTML5和Canvas的引入，开发者能够在浏览器中实现各种类型的游戏，从简单的休闲游戏到复杂的多人在线游戏。本文将介绍几种使用JavaScript编写的游戏，并提供相关代码示例。 1....
Javascript小游戏（原创）
05-15
JavaScript游戏， 全部采用javascript编写，本游戏只适用于Firefox或者苹果浏览器，不适用于IE浏览器或者IE为内核的浏览器。
植物大战僵尸（JS版）-小游戏-NAS-WebStation-HTML5
08-21
《植物大战僵尸（JS版）》是一款基于JavaScript技术开发的小游戏，它移植了经典游戏《植物大战僵尸》的玩法，并且特别设计为可以在NAS（网络附加存储）设备上的WebStation服务器上运行。这款游戏的亮点在于其轻量级...
CSDN 论坛无名游戏 C++版
04-01
CSDN论坛升级的时候经常出现的那个无名游戏，我把它移植成C++版的了。 压缩包中有源码（全部工程源码）和编译好的游戏文件。 注意（一定要意）：编译工具是VS2008的，上次一个源码就有很多人用VC6打不开。
js 编程笔记 无名函数
10-28
无名函数是JavaScript编程中一种特殊的函数表达式，它的名称不是预先定义的，而是通过函数表达式临时创建并使用。无名函数通常与立即执行函数表达式（IIFE）结合使用，这样可以立即执行一个函数而不必先声明一个具名...
无名轻博客php版(含小程序) v1.1
10-01
无名轻博客是一款基于php和sqlite的简单易用的个人博客系统(miniblog)。致力于为您提供快速、稳定，且在使用上又极其简单、舒适的博客服务。 运行环境：PHP=5.4 pdo_sqlite 使用前请修改密
无名游戏
02-15
"无名游戏"是一款可能由JavaScript编程语言开发的电子游戏。JavaScript是一种广泛应用于网页和互联网应用的脚本语言，尤其在交互式用户界面和网页动态内容的创建上扮演着重要角色。JavaScript允许开发者在用户的...
你能抓到我吗-小游戏程序
11-21
一个基于对话框的程序，编制一个小游戏“你能抓到我吗？”，让鼠标永远点不到的按钮，学编程时得练习结果。
javascript经典小游戏代码集合
diaobang0776的博客
05-25 8937
http://www.jb51.net/Special/349.htm 转载于:https://www.cnblogs.com/wordblog/p/6901703.html
又是5个经典的Javascript小游戏
a994182的博客
06-11 581
又到了周末了，继续把收藏在自己博客中的Javascript小游戏拿出来和园子里的朋友们分享，希望工作之余能给大家带来点轻松的东西。不废话了，喜欢的朋友可以看看玩玩，讨厌这玩意的朋友就不用看了，免得浪费大家时间。 1、一个令人纠结的js翻滚游戏 这个游戏我最多只能玩2关，这个移动也太纠结了，不知道有没有什么诀窍。 2、火拼浏览器 和火拼泡泡龙差不多，点击鼠标左键发射，个人觉得比...
原生js，实现一个终端小游戏！
学而不思则罔,思而不学则殆
12-27 2305
原生js，实现一个终端小游戏！
一个简单JS小游戏
qq_15857627的博客
02-19 7381
这是一个简单的利用JS制作的卡片类游戏, 卡片游戏 创建一个卡片 B I N G O                         Free
给我写一个html小游戏
04-19
好的，我可以为您提供一个简单的猜字游戏的HTML代码，以供参考： ```html <!DOCTYPE html> 猜数字游戏 <script type="text/javascript"> // 生成随机数 var number = Math.floor(Math.random() * 100) + 1;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值