JavaScript_小游戏代码

最新推荐文章于 2024-03-19 04:30:47 发布
最新推荐文章于 2024-03-19 04:30:47 发布
阅读量536 收藏 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>

 

李赫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 4104
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
小安驾到的博客
09-16 9648
100行代码带你实现经典小游戏【像素鸟】，附有项目全部素材文件和完整代码
JavaScript实现2048小游戏，我终于赢了一把
最新发布
m0_61331573的博客
03-19 925
/创建卡片var card;i < 4;j++) {随机生成一个卡片，2或者4代码如下：//随机创建一个卡片//这样取出来的就是1-5 之间的随机数//因为2和4出现的概率是1比4，所以如果index是1，则创建数字4，否则创建数字2(1被随机出来的概率就是1/5，而其他就是4/5 就是1：4的关系)num = 4;//判断如果格子已经满了，则不再获取，退出return;//获取随机卡片，不为空的。
2048 小游戏（Javascript）核心代码
weixin_55176296的博客
05-12 489
2048小游戏
js 编写的简单游戏代码,javascript小游戏开发
神经网络爱好者
11-06 1321
戳这里拿原码👉github创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号Deepl降重。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。这里就直接附上html的码，因为很短，就没什么好说的。
JavaScript 小游戏代码汇总
07-02
JavaScript 小游戏代码汇总
语言程序设计资料：JavaScript_小游戏代码.doc
09-17
语言程序设计资料：JavaScript_小游戏代码.doc
原创javascript小游戏实现代码
10-28
javascript小游戏实现代码，喜欢用javascript实现游戏效果代码的朋友可以参考下。
JavaScript打字小游戏代码
10-28
上半年自学了JavaScript，然后就做了个打字小游戏玩玩
用 React 制作的 简单数独游戏_JavaScript_代码_下载
06-24
数独是一款基于逻辑的数字放置益智游戏。游戏的重点是用数字填充 9x9 网格，以便每一列、每一行和九个 3x3 子网格中的每一个都包含从 1 到 9 的所有数字。 React-Sudoku 根据玩家浏览器中的三个难度（简单、中等和...
JavaScript简单实现拼图小游戏（附源码和资源）
qq_44651842的博客
07-03 3643
JavaScript代码68行，刚学JavaScript的时候写的，思想很简单，分享一下。附源码。
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2563
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
Javascript 俄罗斯方块 游戏代码
精选资讯文章
06-01 1338
通过设置的 Options.width, Options.height 列数与行数，以及设置的小方格宽度，初始化了一个宽：Options.width列，高为 Options.height 的表格界面出来；共7种方块，以1,2,3,4,5,6,7 索引键表示，方块是四个小块组成，每块都有各自的坐标，1-4表示组成该块的初始坐标位置，5表示旋转点；OLSFK.play 正常下落的方法，也得判断下落一格是否有被占用的格，如果没有，清除当前方块，绘制方块新位置;以及左右，向下及旋转动作判断，重新渲染方块位置；
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
js实现简单打地鼠小游戏
m0_55603459的博客
12-11 8488
小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。
JavaScript | 益智类数字棋牌小游戏，无游戏框架，浏览器直接运行JavaScript（js）小游戏【源码+解析】
神奇代码在哪里
08-11 6552
一款纯HTML+CSS+Javascript开发的益智类的数字棋牌游戏，无游戏框架，浏览器直接运行。曾几何时想有一款自己编写的游戏，通过不断学习，终于掌握了一点JavaScript基础，捣鼓了一个益智类的数字棋牌游戏，没有使用任何游戏框架，就简单使用HTML做布局，CSS做动画，JavaScript做事件响应，有兴趣的童鞋可以拿去玩一下。...............
简单用JavaScript做一个猜数字小游戏
qq_69099591的博客
05-18 3325
今天我们使用JavaScript来做一个猜数字小游戏。猜数字游戏是一种简单而又有趣的游戏，它可以帮助我们提高逻辑思维能力和编程技能。在这个小案例中，我们将通过JavaScript的初级知识来实现这个游戏，并且逐步提高游戏的难度和用户体验。无论你是初学者还是已经有一定编程经验的人，这个案例都将对你有所帮助。让我们开始吧！猜数字游戏是一种基于JavaScript编写的简单游戏，玩家需要猜出程序随机生成的数字。在编写游戏时，可以使用JavaScript的Math对象来生成随机数字。
JavaScript小游戏源代码
12-18
以下是一个JavaScript小游戏的源代码，游戏是一个拼图游戏，拼图是4*4的，共三张图。代码思路简单，适合初学者学习。 ```javascript var imgArr = ["1.jpg", "2.jpg", "3.jpg"]; // 图片数组 var imgIndex = 0; // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值