<!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>

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

<title>无标题文档</title>

<script type="text/javascript">

var now=-;

var last=-;

var count=;

var x=;

var a=;

var n;

n=(row*col)/;

var row=,col=;

var isUsed=new Array;

var myArray=new Array();

function mySort()

{

    return Math.random()>.;

}

function init(row, col)

{

    n=(row*col)/;

    for(var k=;k<n;k++)

    {

        myArray[k]=( Math.round( Math.random()* )+);

        myArray[k+n]=myArray[k];

    }

    for(var k=;k<*n;k++)

    {

        isUsed[k]=false;

    }

    myArray.sort(mySort);

    var str='<table name="myT" border="0" width="400"  height="400">';

    for(var i=;i<=row;i++)

    {

        str+="<tr>";

        for(var j=;j<col;j++)

        {

            str+="<td onclick='judge("+ ((i-)*col +j )+");'>"

            str +="<img id='img_"+ ((i-)*col +j )+"' src='photo/image0.gif'/>"

            str+="</td>";

        }

        str+="</tr>";

    }

    str+= "</table>"

    document.getElementById("mt").innerHTML=str;

}

function createTable()

{

    var row=document.getElementById("t1").value;

    var col=document.getElementById("t2").value;

    init(row,col);

}

function judge(temp)

{

    n=(row*col)/;

    if(isUsed[temp]) return;

    isUsed[temp]=true;

    last=now;

    now=temp;

    var currImg=document.getElementById("img_"+temp);

    currImg.src="photo/image"+myArray[temp]+".gif";

        if(last>=)

        {

            if(myArray[now]==myArray[last])

            {

                last=-;

                now=-;

                count++;

                    if(count==n)

                    {

                        ++x;

                        if(x>)

                        {

                            alert("游戏结束");

                            var str="您的游戏得分是："+a;

                            document.getElementById("mt").innerHTML=str;

                        }

                       else{

                            count=;

                            alert("游戏胜利，进入下一关");

                            return init(++row,++col);

                        }

                    }

            }

            else

            {

                a--;

                currImg=document.getElementById("img_"+last);

                currImg.src="photo/image0.gif";

                isUsed[last]=false;

            }

    }

}

</script>

</head>

<body>

<body id="mt" style="background:url(photo/10.jpg)">

<h1> <div id="mt">卡牌记忆游戏</div></h1>

<input type="text" value="" id="t1"/>

<input type="text" value="" id="t2"/>

<input type="button" value="开始游戏"  onClick="createTable();"/>

</body>

</html>

半期考html5小游戏制作的更多相关文章

  1. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  2. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  3. 通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）

    亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...

  4. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  5. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  6. Unity小游戏制作 - 暗影随行

    用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...

  7. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  8. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  9. HTML5小游戏之见缝插针

    今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...

随机推荐

  1. 【postgresql的使用】

    #安装: #初始化: #允许远程登录: #创建数据库并指定用户 #创建用户 #列出数据库 #进入数据库 #查询数据 #or(或)查询 #and ,or(和,或查询) #表连接 #内,外(左右),交叉连 ...

  2. oracle相关操作，存储、临时表空间、用户操作、启动过程

    表空间:此空间是用来进行数据存储的(表.function.存储过程等),所以是实际物理存储区域.临时表空间:主要用途是在数据库进行排序运算[如创建索引.order by及group by.distin ...

  3. iOS开发者证书-详解/生成/使用

    本文假设你已经有一些基本的Xcode开发经验, 并注册了iOS开发者账号. 相关基础 加密算法 现代密码学中, 主要有两种加密算法: 对称密钥加密 和 公开密钥加密. 对称密钥加密 对称密钥加密(Sy ...

  4. STM32F4寄存器编写跑马灯例程

    最近由于在学习STM32看到别人用寄存器编程控制跑马灯,于是自己也想试一试.可是试了好久终究弄不出来.回头看了下库函数的调用关系才搞明白.首先通过查看GPIOA的设置函数发现设置如下: void GP ...

  5. python3 str各个功能记录

    capitalize() 将字符串的第一个字符转换为大写 center(width, fillchar) 返回一个指定的宽度 width 居中的字符串,fillchar 为填充的字符,默认为空格. c ...

  6. Oracle入门第一天（下）——数据库的管理

    一.SQL Developer的使用 常用设置,参考:https://www.cnblogs.com/biGpython/archive/2012/03/30/2424739.html https:/ ...

  7. Could not connect to '192.168.80.145' (port 22): Connection failed的解决办法（远程连不上xshell）

    问题状况表现1 这个问题一般是你 的什么配置影响了虚拟机的网卡网关设置!!!. 问题状况表现2 这个问题一般是你 的什么配置影响了虚拟机的网卡网关设置. 解决办法 网上的那些解决方案,我都试过,比如. ...

  8. 20155231 2016-2017-2 《Java程序设计》第2周学习总结

    20155231 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 学习目标: 了解java编程风格 认识java的类型与变量 掌握java流程控制 第三章基础 ...

  9. 20155235 2016-2017-2 《Java程序设计》第9周学习总结

    20155235 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC入门 JDBC简介 连接数据库 使用Statement.Res ...

  10. PostgreSQL的 synchronous_standby_names 参数学习

    磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面: PostgreSQL集群方案相关索引页     回到顶级页面:PostgreSQL索引页[作者 高健@博客园  luckyjackgao@gm ...