JavaScript_小游戏代码

最新推荐文章于 2024-08-12 03:46:42 发布
最新推荐文章于 2024-08-12 03:46:42 发布
阅读量556 收藏 1
点赞数
文章标签： javascript 游戏 function div html null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanmoulidelei/article/details/7024900
版权

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

<htmlxmlns="http://www.w3.org/1999/xhtml">

   <head>

       <title>wujinjian</title>

       <script type="text/javascript">

           var xyNum=20; //敌方数量

           var arrXY=new Array(); //用数组记录敌方

           var myObjII;  //我自己外面的div

           var myObjI; //我自己

           var mapobj; //地图对象

 

           //控制窗体位置

           function formPosition()

           {

                var w=getMapObj().style.width.replace("px","")-0;

                varclientw=document.body.clientWidth;

       

               getMapObj().style.left=(clientw-w)/2+"px";

               document.getElementById("fbid").style.left=(clientw-w)/2+"px";

                document.getElementById("gzid").style.left=(clientw-w)/2+"px";

           }

           

           function getMapObj()

           {

                if(mapobj==null)

                   mapobj=document.getElementById("mapid");

                return mapobj;

            }

           

           //创建敌方

           function createYu()

           {

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

                {

                    varxyObj=document.createElement("div");

                    arrXY[i]=xyObj;

                   

                    varsx=randomZL().split("*");

                   

                    xyObj.qdy=0; //当敌人比我强大时，敌人向我靠近

                    xyObj.tp=sx[3]; //敌人类型

                    xyObj.sdx=getRandom(10); //敌人向左移动的速度

                    xyObj.sdy=0; //敌人向上移动的速度

                   xyObj.style.position="absolute";

                   xyObj.style.left=getMapWidth()+"px";

                   xyObj.style.top=getRandom(getMapHeight())+"px";

                    xyObj.style.width=sx[0];

                   xyObj.style.height=sx[1];

                   xyObj.style.border="white solid 1px";

                   xyObj.style.filter="alpha(opacity=80)";

                    xyObj.style.opacity=0.8;

                   xyObj.style.backgroundColor=sx[2];

                

                   getMapObj().appendChild(xyObj);

                }

               

                createMyYu();

                moveYu();

           }

 

           //随机敌人类型

           function randomZL()

           {

                var zl=getRandom(10);

 

                var w=""; //敌人的宽

                var h=""; //高

                var color=""; //颜色

                var tp=""; //类型

 

                if(zl>=1 && zl<=3)

                {

                    w="20px";

                    h="20px";

                    color="cyan";

                    tp="1"; //敌人类型，1最小，依次类推

                }

                else if(zl==4 || zl==5)

                {

                    w="40px";

                    h="40px";

                    color="yellow";

                    tp="2";

                }

                else if(zl==6 || zl==7)

                {

                    w="60px";

                    h="60px";

                    color="gray";

                    tp="3";

                }

                else if(zl==8)

                {

                    w="80px";

                    h="80px";

                    color="black";

                    tp="4";

                }

                else

                {

                    w="20px";

                    h="20px";

                    color="red";

                    tp="5";  //tp=5 为补生命值

                }

 

                returnw+"*"+h+"*"+color+"*"+tp;

           }

 

            //创建我自己

           function createMyYu()

           {   

                //创建我自己外面的div,用于判断敌人是否在我附近

               myObjII=document.createElement("div");

                   

               myObjII.style.position="absolute";

                myObjII.style.left="0px";

               myObjII.style.top="0px";

               myObjII.style.width="120px";

               myObjII.style.height="120px";

               myObjII.style.backgroundColor="";//

               

                getMapObj().appendChild(myObjII);

               

                //创建我自己跟随鼠标移动的div

               myObjI=document.createElement("div");

                   

               myObjI.style.position="absolute";

               myObjI.style.left="0px";

               myObjI.style.top="0px";

                myObjI.style.width="20px";

               myObjI.style.height="20px";

                myObjI.tp="1";

               myObjI.style.backgroundColor="blue";

                myObjI.style.border="whitesolid 1px";

               

                getMapObj().appendChild(myObjI);

           }

           

           //获取某个值下的随机数

           function getRandom(maxval)

           {

                varsj=parseInt(Math.random()*maxval);

                if(sj==0)

                    sj=1;

 

                return sj;

           }

 

           //敌人移动

           function moveYu()

           {

                for(vari=0;i<arrXY.length;i++)

                {

                    //敌人向左移动

                   arrXY[i].style.left=getObjWaH(arrXY[i],"left")-arrXY[i].sdx+"px";

                   

                    //敌人向上移动

                    if(getObjWaH(arrXY[i],"top")<=getMapHeight()/2)

                       arrXY[i].style.top=getObjWaH(arrXY[i],"top")-arrXY[i].sdy+"px";

                    else

                       arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].sdy+"px";

                   

                    //当敌人比我强大时，敌人向我靠近

                   arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].qdy+"px";

                   

                    //敌人从地图中消失

                   if(getObjWaH(arrXY[i],"left")<0 ||getObjWaH(arrXY[i],"top")<0 || getObjWaH(arrXY[i],"top")>getMapHeight())

                    {

                        resetMove(arrXY[i]);

                    }

                   

                    //判断敌人是否在我附近

                   if(isChongDie(myObjII,arrXY[i]))

                    {

                        if(myObjI.tp-0>=arrXY[i].tp-0) //比对方强大时，敌人逃跑

                            arrXY[i].sdy=10;

                        elseif(arrXY[i].tp-0!=5) //比对方弱小时，敌人向我靠近

                        {

                           if(getObjWaH(myObjI,"top")<getObjWaH(arrXY[i],"top"))

                            {

                               if(arrXY[i].qdy==0)

                                   arrXY[i].qdy=-10; //向上靠近

                            }

                            else

                            {

                               if(arrXY[i].qdy==0)

                                   arrXY[i].qdy=10; //向下靠近

                            }

                        }

                    }

                    else //不在我附近时，还原值

                        arrXY[i].qdy=0;

                   

                    //判断是否吃掉对方，或被对方吃掉

                   if(isChongDie(myObjI,arrXY[i]))

                    {

                        //吃掉对方

                       if(myObjI.tp-0>=arrXY[i].tp-0)

                        {

                           

                            var _szz=0;

                           if(arrXY[i].tp=="1")

                                _szz=10;

                            elseif(arrXY[i].tp=="2")

                                _szz=15;

                            elseif(arrXY[i].tp=="3")

                                _szz=20;

                            elseif(arrXY[i].tp=="4")

                                _szz=25;

 

                            varnowszz=getObjWaH(document.getElementById("szz"),"width")+_szz;

                            if(nowszz>=500)//长大一级

                            {

                               if(myObjI.tp-0<5)

                                {

                                   myObjI.tp=myObjI.tp-0+1;

                                   myObjI.style.width=getObjWaH(myObjI,"width")+20+"px"

                                   myObjI.style.height=getObjWaH(myObjI,"height")+20+"px"

                                   

                                    document.getElementById("szz").style.width="10px";

                                }

                                else

                                {

                                   alert("哈哈...顺我者昌逆我者亡！");

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

                                }

                            }

                            else

                            {

                                document.getElementById("szz").style.width=nowszz+"px";

                               document.getElementById("szz").innerHTML=nowszz;

                            }

 

                           resetMove(arrXY[i]);

                        }

                       elseif(arrXY[i].tp-0==5)//吃到生命值

                        {

                            varnowsmz=getObjWaH(document.getElementById("smz"),"width")+50;

                            if(nowsmz>=500)

                               document.getElementById("smz").style.width="500px";

                            else

                               document.getElementById("smz").style.width=nowsmz+"px";

                           

                           document.getElementById("smz").innerHTML=document.getElementById("smz").style.width.replace("px","");

 

                           resetMove(arrXY[i]);

                        }

                        else //被对方吃掉

                        {

                            var _smz=0;

                           if(arrXY[i].tp=="1")

                                _smz=10;

                            elseif(arrXY[i].tp=="2")

                                _smz=20;

                            elseif(arrXY[i].tp=="3")

                                _smz=50;

                            elseif(arrXY[i].tp=="4")

                                _smz=100;

 

                            varnowsmz=getObjWaH(document.getElementById("smz"),"width")-_smz;

                            if(nowsmz<=0) //

                            {   

                               document.getElementById("smz").style.width="0px";

                               document.getElementById("smz").innerHTML="0";

 

                               alert("over");

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

                            }

                            else

                            {

                                document.getElementById("smz").style.width=nowsmz+"px";

                               document.getElementById("smz").innerHTML=nowsmz;

                            }

                        }

                    }

                }

 

                setTimeout(moveYu,50);

           }

 

           //敌人从地图中消失时重置

           function resetMove(yuobj)

           {

                varsx=randomZL().split("*");

 

                yuobj.tp=sx[3];

                yuobj.sdx=getRandom(10);

                yuobj.sdy=0;

                yuobj.style.width=sx[0];

                yuobj.style.height=sx[1];

               yuobj.style.backgroundColor=sx[2];

               yuobj.style.left=getMapWidth()+"px";

               yuobj.style.top=getRandom(getMapHeight())+"px";

           }

       

           function getMapWidth()

           {

                returngetMapObj().style.width.replace("px","")-0;

           }

           function getMapHeight()

           {

                returngetMapObj().style.height.replace("px","")-0;

           }

           function getMapTop()

           {

                returngetMapObj().style.top.replace("px","")-0;

           }

           function getMapLeft()

           {

                returngetMapObj().style.left.replace("px","")-0;

           }

 

           function getObjWaH(obj,wah)

           {

                returnobj.style[wah].replace("px","")-0;

           }

 

           //跟随鼠标移动的div(我自己)

           function mouseMove(e)

           {

                varmyObjIleft=e.clientX-getMapLeft()-getObjWaH(myObjI,"width")/2;

                if(myObjIleft<0)

                    myObjIleft=0;

               if(myObjIleft>getMapWidth()-getObjWaH(myObjI,"width"))

                   myObjIleft=getMapWidth()-getObjWaH(myObjI,"width");

 

               myObjI.style.left=myObjIleft+"px";

 

                varmyObjIIleft=e.clientX-getMapLeft()-getObjWaH(myObjII,"width")/2;

                if(myObjIIleft<0)

                    myObjIIleft=0;

                if(myObjIIleft>getMapWidth()-getObjWaH(myObjII,"width"))

                   myObjIIleft=getMapWidth()-getObjWaH(myObjII,"width");

 

               myObjII.style.left=myObjIIleft+"px";

               

                varmyObjItop=e.clientY-getMapTop()-getObjWaH(myObjI,"height")/2;

                if(myObjItop<0)

                    myObjItop=0;

               if(myObjItop>getMapHeight()-getObjWaH(myObjI,"height"))

                   myObjItop=getMapHeight()-getObjWaH(myObjI,"height");

 

                myObjI.style.top=myObjItop+"px";

 

                varmyObjIItop=e.clientY-getMapTop()-getObjWaH(myObjII,"height")/2;

                if(myObjIItop<0)

                    myObjIItop=0;

               if(myObjIItop>getMapHeight()-getObjWaH(myObjII,"height"))

                   myObjIItop=getMapHeight()-getObjWaH(myObjII,"height");

 

               myObjII.style.top=myObjIItop+"px";

           }

           

           //判断敌我双方是否碰撞在一起，原理：利用两个圆的圆心距离之和是否小于两个圆的半径之和

           function isChongDie(obj1,obj2)

           {

                varobj1left=getObjWaH(obj1,"left")+getObjWaH(obj1,"width")/2;

                varobj2left=getObjWaH(obj2,"left")+getObjWaH(obj2,"width")/2;

 

                varobj1top=getObjWaH(obj1,"top")+getObjWaH(obj1,"width")/2;

                var obj2top=getObjWaH(obj2,"top")+getObjWaH(obj2,"width")/2;

 

                varjl=Math.sqrt(Math.abs(obj1left-obj2left)*Math.abs(obj1left-obj2left)+Math.abs(obj1top-obj2top)*Math.abs(obj1top-obj2top));

 

               if(jl<=getObjWaH(obj1,"width")/2+getObjWaH(obj2,"width")/2)

                    return true;//重叠

                else

                    return false;

           }

 

       </script>

   </head>

 

 

 

 

 

 

<bodyοnlοad="formPosition(),createYu()"οnresize="formPosition()" style="font-size:10pt">

       <div id="fbid"style="position:absolute;left:0px;top:10px;width:795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;border:blacksolid 1px">

           <table>

                <tr>

                    <td>生命值：</td>

                    <td><divid="smz"style="width:500px;height:15px;background-color:red;color:white;font-weight:bold"align="center">500</div></td>

                </tr>

                <tr>

                    <td>生长值：</td>

                    <td><divid="szz"style="width:10px;height:15px;background-color:blue;color:white;font-weight:bold"align="center">0</div></td>

                </tr>

           </table>

       </div>

       <div id="mapid"style="position:absolute;left:0px;top:60px;width:800px;height:400px;background-color:rgb(223,223,223);overflow:hidden;border:blacksolid 1px" οnmοusemοve="mouseMove(event)">

       </div>

       <div id="gzid" style="position:absolute;left:0px;top:465px;width:795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;padding-top:5px;border:blacksolid 1px;color:red;line-height:20px">

           *游戏规则：移动鼠标吃方块，你只能吃跟你同样大小或比你小的方块，当你的生长值到达500时，你自己的方块会变大一级，<br>

           当生命值变成0时，Game Over！游戏中的红色小方块就是给你补生命值的。

       </div>

   </body>

</html>

 

李赫
关注
JS小游戏源码
04-22
各种js小游戏源码例如：微信打飞机， 泡泡龙，开心消消乐，架子鼓；所有代码均可正常运行，你值得拥有！
javascript小游戏代码
12-12
ASCII键盘 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0025)http://js.wanxu.com/myjs/ --> <HTML><HEAD><TITLE>网页特效集锦(js.wanxu.com )</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="java, javascript, js, scripts, free, dHTML, HTML,javascripts, JavaScript,asp,php, JSP, javascripting, password, search, visitor, 网页制作特效, 酷, 网页特效,技巧， 时间, 日期, cool, 按钮, 背景, alert, 警告, 图形, 鼠标, picture, cookie, 密码" name=keywords> <STYLE type=text/css>BODY { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } </STYLE> <META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD> <BODY text=#000000 bgColor=#ffffff scroll=no><IFRAME src="ASCII键盘.files/index-frameset.htm" width="100%" height="100%"></IFRAME> <SCRIPT language=JavaScript src="ASCII键盘.files/click.htm" type=text/javascript></SCRIPT> <A href="http://www.wanxu.com/" target=_blank>技术支持：万旭网</A> </BODY></HTML>
JavaScript 小游戏代码汇总
07-02
JavaScript 小游戏代码汇总
使用javascript写的游戏大全
最新发布
weixin_34534456的博客
08-12 852
使用JavaScript编写的游戏大全 JavaScript作为一种强大的编程语言，不仅用于网页开发，也为游戏开发提供了丰富的可能性。随着HTML5和Canvas的引入，开发者能够在浏览器中实现各种类型的游戏，从简单的休闲游戏到复杂的多人在线游戏。本文将介绍几种使用JavaScript编写的游戏，并提供相关代码示例。 1....
小游戏代码Javascript
12-08
这个是一个不错的 小游戏 很简单吧 所以快速下载吧
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
语言程序设计资料：JavaScript_小游戏代码.doc
09-17
语言程序设计资料：JavaScript_小游戏代码.doc
JavaScript跑酷小游戏源代码
06-23
通过分析这个JavaScript跑酷小游戏源代码，我们可以深入理解如何用JavaScript构建一个完整的交互式应用，这对于提升JavaScript编程技能，尤其是游戏开发方面的能力大有裨益。同时，这也为开发者提供了动手实践的机会...
js_game.rar_game JavaScript _js小游戏
09-19
总之，这个"js_game.rar"压缩包中包含的JavaScript小游戏展示了如何用JavaScript来实现基本的交互式娱乐体验。通过分析和理解游戏的源代码，开发者可以学习到JavaScript的事件处理、动画制作、状态管理等多方面的...
用 React 制作的 简单数独游戏_JavaScript_代码_下载
06-24
数独是一款基于逻辑的数字放置益智游戏。游戏的重点是用数字填充 9x9 网格，以便每一列、每一行和九个 3x3 子网格中的每一个都包含从 1 到 9 的所有数字。 React-Sudoku 根据玩家浏览器中的三个难度（简单、中等和...
原创javascript小游戏实现代码
10-28
javascript小游戏实现代码，喜欢用javascript实现游戏效果代码的朋友可以参考下。
javascript小游戏源代码个人整理
04-29
javascript小游戏源代码个人整理，大部分是基于 jquery的。 扫雷，俄罗斯方块，贪吃蛇，数独，老虎机，吉他英雄
使用HTML和JavaScript做小游戏的代码
07-19
文件包含使用HTML和JavaScript实现的 俄罗斯方块、扫雷、贪吃蛇、推箱子、五子棋、打方块等几个小游戏的代码
javascript编写的小游戏
01-18
上班无聊吗？下载一个js写的小游戏玩玩把，什么超级玛丽，坦克大战，贪吃蛇等等，玩过之后不妨再学习一下。
Javascript打飞机小游戏源代码
12-27
javascript打飞机,带框架 javascrip打飞机小游戏源代码 中弹的部分被我注释掉了，有需要的自行修改
javaScript小游戏
12-07
非常好的JS小游戏，简单易懂
javascript经典小游戏代码集合
diaobang0776的博客
05-25 9077
http://www.jb51.net/Special/349.htm 转载于:https://www.cnblogs.com/wordblog/p/6901703.html
js 编写的简单游戏代码,javascript小游戏开发
神经网络爱好者
11-06 1528
戳这里拿原码👉github创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号Deepl降重。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。这里就直接附上html的码，因为很短，就没什么好说的。
javascript小游戏_Cocos Creator下JavaScript实现相邻动物同化小游戏，附代码
weixin_39553458的博客
12-02 70
游戏玩法游戏目标是将游戏区域的动物全部同化成同一种动物。游戏从左上角开始，从右边点击需要变成的目标动物头像，如果被同化动物周围包含了点击的动物，则所有被同化动物都变成点击选中的动物，完成一次同化，然后逐渐扩大左上角的同化区域，直到所有动物变成同一种。游戏效果游戏主要有两个界面，游戏开始界面和游戏中界面。以下是游戏开始时界面：​以下是进行游戏时显示的动态效果效果：​实现逻辑介绍：1. 关卡初始化每关...
原创JavaScript游戏代码实现分享
"这篇资源提供了一段原创的JavaScript小游戏实现代码，适合对使用JavaScript编写游戏效果感兴趣的开发者参考学习。" JavaScript是一种广泛应用于网页和互联网应用的脚本语言，它允许在用户浏览器上运行，实现动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值