半期考html5小游戏制作

<!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=-1;
var last=-1;
var count=0;
var x=0;
var a=100;
var n;
n=(row*col)/2;
var row=3,col=4;
var isUsed=new Array;
var myArray=new Array(13);
function mySort()
{
    return Math.random()>.5;
}
function init(row, col)
{

    n=(row*col)/2;
    for(var k=0;k<n;k++)
    {
        myArray[k]=( Math.round( Math.random()*18 )+1);
        myArray[k+n]=myArray[k];
    }
    for(var k=0;k<2*n;k++)
    {
        isUsed[k]=false;
    }
    myArray.sort(mySort);
    var str=‘<table name="myT" border="0" width="400"  height="400">‘;
    for(var i=1;i<=row;i++)
    {
        str+="<tr>";
        for(var j=0;j<col;j++)
        {
            str+="<td onclick=‘judge("+ ((i-1)*col +j )+");‘>"
            str +="<img id=‘img_"+ ((i-1)*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)/2;
    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>=0)
        {
            if(myArray[now]==myArray[last])
            {
                last=-1;
                now=-1;
                count++;
                    if(count==n)
                    {
                        ++x;
                        if(x>2)
                        {
                            alert("游戏结束");
                            var str="您的游戏得分是:"+a;
                            document.getElementById("mt").innerHTML=str;
                        }
                       else{
                            count=0;

                            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="3" id="t1"/>
<input type="text" value="4" id="t2"/>
<input type="button" value="开始游戏"  onClick="createTable();"/>
</body>
</html>
时间: 2024-10-29 19:07:14

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

突发奇想想学习做一个HTML5小游戏

前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代.有人说如果一个人开始回忆童年的时候,那么他开始变老了,不知道是不是这样一个原因,我突然想起了很多以前的老朋友,开始想起了一些童年时期的玩伴.也就想做这样一款简单的游戏,也只是单纯的想回忆一下童年. 计划: 游戏其实很简单,我们把它叫着裤裆棋,又叫什么狗卵坨还是什么的,有些记忆模糊了,反正大致是这样子

HTML5小游戏-火枪英雄

HTML5小游戏-火枪英雄

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

HTML5小游戏源码收藏

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

HTML5小游戏-绵羊快跑

用HTML5仿一款灵敏测试的flash小游戏程序 下载地址:http://www.huiyi8.com/divcss/<?php/**Author: Jamin* */if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')){    ob_start('ob_gzhandler');}?><!DOCTYPE html><html><head><title>绵羊快跑</title>

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

换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.        知识点 canvas绘制背景 canvas绘制图片 canvas绘制边框 canvas事件处理 canvas简单动画制作      步骤 1.准备好图片,首先是机器的外观.以及滚动的奖项图片,我一共准备了6种,奖项图片按照一定的规律命名,这样方便处理   2.准备好canvas画布,设置好基本的C

节奏大师小游戏制作流程

当我接到这个小游戏的时候,让我在那一瞬间不知所措.但总是要尝试,尝试后你会发现,只要思路理清楚,一步步走下来,效果自然的就实现了起来. 下面简单讲下自己做这个的一个思路. HTML实现:页面上有4个点击的按钮和4条轨道,4条轨道的倾斜度可通过transform: rotate();样式来实现. js实现:首先我们定义一个随机落下的物体的一个方法: 1 randoms: function() { 2 num++; 3 number = (1 + Math.random() * (4 - 1)).t

翻转拼图网页小游戏制作

咱们学东西的时候,往往喜欢玩点有趣的,这次就参考别人的创意,做了一个小游戏,虽然在css和JavaScript上我都算是新手,不过辛苦一天还是还超哥和各位师兄的帮助下弄出来了,就把这次开发分享一下吧. 先上最终成品 http://luyishisi.github.io/test.html 在准备写这个之前至少要有html,css和JavaScript的知识,如果会jQuery最好. 首先贴上一开始想的开发规划: 逐步实现:1:点击按钮实现变色,2:点击按钮实现旁边按钮的变色3:实现变色的重复性,

Java从基础到进阶学习之路----数独小游戏制作(一)

前言 数独这个游戏大多数人都玩过,所以具体的游戏本身就不描述了. 详见百度百科:http://baike.baidu.com/subview/961/10842669.htm 规则和目标 数独的规则很简单,就是在每一行,每一列,每个小宫格区(3X3)内不可以出现重复的数字. 先贴一下大概的游戏界面样子: 需求功能分析 站在学习者的角度来说 练下手,学习一下MVC框架模式 这个项目涉及的Java的主要内容有: 1.Java基础语法,特别是Java集合的部分. 2.Java内置的Observer模式