半期考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=-;
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小游戏制作的更多相关文章
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- 通通制作Html5小游戏——第二弹(仿flappy bird像素鸟)
亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...
- Html5 小游戏 俄罗斯方块
导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- Unity小游戏制作 - 暗影随行
用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...
- 菜鸟做HTML5小游戏 - 翻翻乐
记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...
- HTML5小游戏-简单抽奖小游戏
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
- HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...
随机推荐
- JS中判断字符串中出现次数最多的字符及出现的次数
<script type="text/javascript"> var str = 'qwertyuilo.,mnbvcsarrrrrrrrtyuiop;l,mhgfd ...
- 常用PHP方法
个人常用的一些方法记录/** * 返回错误 * * @param int $err_no * @param string $err_msg * @param array $data * @return ...
- tarjan强连通模板
#include<stdio.h>//用于求一个图存在多少个强连通分量 #include<string.h> #include<vector> using name ...
- 笔记-scrapy-selector
笔记-scrapy-selector scrapy版本:1.5.0 1.总述 scrapy内置selector建立在lxml上. 2.使用 可以使用xpath和css方法来进行解析,两者都返回列表: ...
- 20155226 实验一《Java开发环境的熟悉》实验报告
20155226 实验一<Java开发环境的熟悉>实验报告 一. 实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 输入cd Code进入Code文件夹里 ...
- [BZOJ2738]矩阵乘法-[整体二分+树状数组]
Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. (N<=500,Q<=60000) Solution 考虑二分答案,问题转化为求矩阵内为1 ...
- 【SAP BI】BW如何连接SQLSERVER数据库
一.工具 源版本: SQLSERVER2008 数据库TEST 目标版本: SAP 客户端 7.4 服务器7.5 二.在BW中建立数据库连接,并生成数据源 2.1 登录SAP BW开发机 ,输 ...
- day4 RHCE
12.实现一个web服务器 [root@server0 ~]# yum install httpd -y [root@server0 ~]# rpm -ql httpd 查看httpd产生的配置文件 ...
- 2288: 【POJ Challenge】生日礼物
2288: [POJ Challenge]生日礼物 https://lydsy.com/JudgeOnline/problem.php?id=2288 分析: 贪心+堆+链表. 首先把序列变一下,把相 ...
- [CF888E] Maximum Subsequence 序列分治
早期作品,不喜轻喷. LG传送门 序列分治板子题. 切这道题用了好长时间,所以想发篇题解作为纪念 . 首先,我们认真观察题目数据(面向数据做题是个好习惯),发现题目的\(n\)竟然只有\(35\),我 ...