】【又写了个 JavaScript 小游戏】

最新推荐文章于 2024-07-09 10:56:44 发布
最新推荐文章于 2024-07-09 10:56:44 发布
阅读量309 收藏
点赞数 1
文章标签： javascript 游戏 function xhtml null html


<!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">
            var obj=
            {
                //行数
                rows:12,//12
                //列数
                cols:11,//11
                //记录选中球周围的同色球的td对象
                arrBall:null,
                //向右整体移动时，记录左边的空行数
                nullcol:0,

                imgarr:new Array("http://i3.6.cn/cvbnm/2d/09/1b/a8a3c16e83db7628b256791ab4e0df9e.gif",
                                "http://i3.6.cn/cvbnm/7d/d9/08/3da5c4034a7f5b2c02e297c0960f7d8a.gif",
                                "http://i3.6.cn/cvbnm/1e/b7/b6/2606486ac70d45dfa703ec59982413c4.gif",
                                "http://i3.6.cn/cvbnm/e5/d1/8d/342243e5d16905c301ce6934f262da4b.gif",
                                "http://i3.6.cn/cvbnm/dc/5c/86/2ab9704d95b4cdb4a7b0e8d53d22acdd.gif"),
               
                //创建游戏界面
                createTable:function()
                {
                    var tabobj=document.createElement("table");
                    tabobj.style.border="black solid 1px";
                    tabobj.cellSpacing="0";
                    tabobj.cellPadding="0";
                    tabobj.style.width=obj.cols*40+"px";
                    tabobj.style.height=obj.rows*40+"px";

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

                    tabobj.appendChild(tbodyobj);

                    for(var i=0;i<obj.rows;i++)
                    {
                        var trobj=document.createElement("tr");

                        for(var j=0;j<obj.cols;j++)
                        {
                            var tdobj=document.createElement("td");
                            tdobj.id=i+"_"+j;
                            tdobj.style.width="40px";
                            tdobj.style.height="40px";
                            tdobj.style.border="white solid 1px";
                           
                            tdobj.onclick=obj.getSelectBall;

                            var imgobj=document.createElement("img");
                            imgobj.src=obj.imgarr[obj.randomBall()];

                            tdobj.appendChild(imgobj);

                            trobj.appendChild(tdobj);
                        }

                        tbodyobj.appendChild(trobj);
                    }

                    tabobj.appendChild(tbodyobj);
                    document.getElementById("mapid").appendChild(tabobj);
                },
               
                //随机五彩球
                randomBall:function()
                {
                    var v=Math.round(Math.random()*10);
                    while(v>4)
                    {
                         v=Math.round(Math.random()*10);
                    }
                    return v;
                },
               
                getSelectBall:function()
                {
                    //if(this.style.border=="white 1px solid")
                    if(this.style.border.indexOf("white")!=-1)
                    {
                        //取消刚刚选中的球
                        if(obj.arrBall!=null)
                        {
                            for(var i=0;i<obj.arrBall.length;i++)
                            {
                                obj.arrBall[i].style.border="white solid 1px";
                            }

                            obj.arrBall=null;
                        }

                        obj.arrBall=new Array();
                        //往数组中添加第一个球，也就是点中的那个球
                        obj.arrBall[obj.arrBall.length]=obj.getTdObj(this.id);
                        obj.getAllLineBall();
                    }
                    else
                    {
                        //消隐
                        obj.hiddenBall();
                    }
                },
                //获取每个球的四方位上相同的球
                getAllLineBall:function()
                {
                    var imgsrc=obj.arrBall[0].getElementsByTagName("img")[0].src;
                   
                    //获取每个球的四方位上相同的球
                    for(var i=0;i<obj.arrBall.length;i++)
                    {
                        var iandj=obj.arrBall[i].id.split("_");
                       
                        //判读点中的这个球四个方位上是否有同样的球，有则添加到数组
                        if(iandj[0]-1>=0 && obj.isExistsImg(iandj[0]-1+"_"+iandj[1])) //上
                        {
                            if(obj.getImgObj(iandj[0]-1+"_"+iandj[1]).src==imgsrc)
                            {
                                if(obj.isExists(obj.getTdObj(iandj[0]-1+"_"+iandj[1]))) //不含有，则添加
                                    obj.arrBall[obj.arrBall.length]=obj.getTdObj(iandj[0]-1+"_"+iandj[1]);
                            }
                        }
                       
                        if(iandj[1]-0+1<obj.cols && obj.isExistsImg(iandj[0]+"_"+(iandj[1]-0+1))) //右
                        {
                            if(obj.getImgObj(iandj[0]+"_"+(iandj[1]-0+1)).src==imgsrc)
                            {
                                if(obj.isExists(obj.getTdObj(iandj[0]+"_"

ousisang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript编写的小游戏
01-18
上班无聊吗？下载一个js写的小游戏玩玩把，什么超级玛丽，坦克大战，贪吃蛇等等，玩过之后不妨再学习一下。
用javaScript做的小游戏，很有趣。
04-13
用javaScript做的小游戏，很有趣，自己试着玩玩吧
JavaScript经典小游戏
runfeel
06-27 681
最近看了几本JavaScript的本，主要想学习下JavaScript面向对象的编码方式，想从游戏入手，特收集了一些JavaScript经典小游戏(下载地址：http://download.csdn.net/detail/bbirdsky/5659811)，感兴趣的童鞋可以下载下来试试。 突然发现JS还是很给力，有图有真相，以下是截图： 1、90坦克，经典中的经典呀，实现的真是太给力了，可惜代...
由于篇幅和复杂性限制，我将为你提供三个不同编程语言的基本小程序游戏示例：Python（使用pygame库进行图形处理）、JavaScript（用于网页小游戏）和C#（用于Unity游戏引擎）。每个示例
最新发布
ElvaRaleign的博客
07-09 885
添加一个UI Canvas，然后在Canvas下添加一个Text组件用于显示提示和结果，添加一个InputField用于输入猜测，以及一个Button用于提交猜测。由于Unity和C#的集成性很强，且涉及到Unity编辑器的使用，这里无法直接给出完整的代码示例。添加一个UI Canvas，然后在Canvas下添加一个Text组件用于显示提示和结果，添加一个InputField用于输入猜测，以及一个Button用于提交猜测。在脚本中，编写逻辑来处理按钮点击事件，随机生成一个数字，并比较用户的输入。
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
JavaScript 小游戏:FlappyBall
houyanhua1的专栏
03-18 941
demo.html： body { margin: 0; padding: 0; } #game { width: 800px; height: 600px; border: 1px soli
JavaScript小游戏
06-28
自己做的一款“跑酷小游戏” 技术:JavaScript和jQuery 有注册功能，记录每个账号的最高的排行榜， 游戏玩法通过空格键跳起来躲避攻击，可以吃金币， 一共三个boss,boss出现的时候回车键可攻击boss。 适合学习...
25个好玩的JavaScript小游戏分享
12-09
今天，本文与大家分享25个好玩的 JavaScript 小游戏，感受一下 JavaScript 的魅力。Bunny Hunt Travians Ajax Chinese Chess Digg Attack Invaders From Mars Solitaire Card Games Jetris – JavaScript Tetris ...
原创javascript小游戏实现代码
10-28
总之，这个JavaScript小游戏的代码片段提供了一个基础的框架，但要实现一个完整的功能游戏，还需要进一步扩展和完善。开发者需要结合HTML、CSS和JavaScript的综合运用，构建出更复杂的游戏逻辑和视觉效果。对于初学...
JavaScript跑酷小游戏源代码
06-23
通过分析这个JavaScript跑酷小游戏源代码，我们可以深入理解如何用JavaScript构建一个完整的交互式应用，这对于提升JavaScript编程技能，尤其是游戏开发方面的能力大有裨益。同时，这也为开发者提供了动手实践的机会...
javascript小游戏
07-17
纯javascript写的一个小游戏 相当简单，但是却是80后很多人玩的经典游戏之一。
javascript小游戏综合
01-09
游戏登陆模块的实现 javascript小游戏综合 娱乐游戏 猜拳游戏 俄罗斯方块 连连看游戏 弹球球游戏 智力游戏 爱情测试 拼盘游戏 推箱子游戏 弹球球游戏 测试游戏 比眼力 比动作 贪吃蛇游戏 比灵敏 其他游戏 测试反应 游戏1 游戏2 游戏3 网址:http://www.13itao.com
javaScript小游戏
12-07
非常好的JS小游戏，简单易懂
纯js写的小游戏，打开就可以玩，类似于是男人就坚持20秒
03-02
纯javascript写的小游戏， 打开浏览器就可以玩， 类似于是男人就坚持20秒。
原创的一个Js写的小游戏（俄罗斯方块),javascript小游戏
09-27
五年前用Js写的俄罗斯小方块 刚刚修改了下使其支持Firefox和IE,其它浏览器还没有试（也因为当今不入流的浏览器太多啦，没办法). 主体就是用一个Table， 控制其每一个td的class来实现的。 地址：http://www.topnorth.cn/upload/rects.html 或者打开 http://www.topnorth.cn 进javascript栏目，javascript俄罗斯方块里可以看到。 看看吧，现丑现丑！！:)
javascript翻转棋、javascript写的小游戏
HaQiaME的博客
07-29 652
用js写了个黑白翻转棋的，大家感兴趣的可以直接粘贴就能用。 把下面代码放到txt文件里，文件后缀改成htm直接打开就能用，没有加人机的功能。不过还不错呀！
JavaScript做的小游戏
Vincero
11-21 1737
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 记忆力小游戏 var pics = new Array(); //用于保存
用javascript写一个俄罗斯方块小游戏
02-16
下面是一个简单的俄罗斯方块小游戏的示例，你可以基于这个示例进行修改和扩展。 HTML 代码： ```html <!DOCTYPE html> 俄罗斯方块 #game-board { width: 200px; height: 400px; border: 1px solid black;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值