js 考记忆力得小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
var oStar = document.getElementById("start");
var oSpan = oStar.getElementsByTagName("span")[0]; var oContent = document.getElementById("content");
var oRect = document.getElementById("rect");
var timer = null;
var oTime = document.getElementById("time"); var aImg = document.getElementsByTagName("img"); var arrImg = ["http://img3.douban.com/view/photo/thumb/public/p1994200192.jpg",
"http://img5.douban.com/view/photo/thumb/public/p1994200528.jpg",
"http://img3.douban.com/view/photo/thumb/public/p1994200963.jpg",
"http://img3.douban.com/view/photo/thumb/public/p1994201400.jpg",
"http://img3.douban.com/view/photo/thumb/public/p1994201804.jpg",
"http://img5.douban.com/view/photo/thumb/public/p1994201968.jpg",
"http://img3.douban.com/view/photo/thumb/public/p1994202154.jpg",
"http://img5.douban.com/view/photo/thumb/public/p1994202276.jpg",
"http://img3.douban.com/view/photo/thumb/public/p1994202342.jpg"]; var oScore = document.getElementById("score");
var oFail = document.getElementById("fail");
var oSuccess = document.getElementById("success");
var level = [{"num":"3","timeGame":"10"},
{"num":"4","timeGame":"10"},
{"num":"6","timeGame":"15"},
{"num":"8","timeGame":"20"}]; oSpan.onclick = function (){ var rating = 0;
starGame( level[rating].num,level[rating].timeGame,rating ); } // 游戏程序 参数分别代表 块数 游戏时间 等级
function starGame( num,timeGame,rating){ oStar.style.display = "none";
oFail.style.display = "none";
oSuccess.style.display = "none";
oContent.style.display = "block";
oContent.setAttribute("off","0"); oTime.style.width = "440px";
oScore.innerHTML = 0;
oRect.innerHTML = ""; fillContent(num);
setTimeout(function (){
for(var i = 0; i < aImg.length; i++){
aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
}
getTime( oTime,"width", -Math.floor( parseInt( getStyle(oTime,"width") )/timeGame ), timeGame, num*20, rating );
},3000);
} //填充块
function fillContent(size){
var arr = Mix(size,1,2);
//console.log(arr); for(var i = 0; i < arr.length; i++){
oRect.innerHTML += "<img style = 'top:"+ 110*Math.floor(i/4) +"px; left:"+ 110*Math.floor(i%4) +"px' select = 'N' index = " + i + " address = " + arrImg[arr[i]] +" src = "+ arrImg[arr[i]] +" num = "+ arr[i] + ">";
}
} function Mix( max,min,fre){
var arr = [];
for(var i = min; i <= max; i++ ){
arr.push(i);
}
var newarr = [getRandom(arr.length,1)];
for(var i = 0; newarr.length < arr.length*fre; i++ ){ var num = getRandom(arr.length,1); if( toCon(num,fre-1 ) ){
newarr.push(num);
}
} function toCon( num,fre ){
var iNow = 0;
for(var i = 0; i < newarr.length; i++ ){
if( num == newarr[i] && iNow != fre ){
++iNow;
}else if( num == newarr[i] && iNow == fre ){
return false;
}
}
return true;
} return newarr;
} function getTime( obj,attr,speed,time,totle,rating ){
clearInterval(obj.timer); selectRect(totle,rating);
obj.timer = setInterval( function (){ time--;
if( time != 0 ){
obj.style[attr] = parseInt( getStyle(obj,attr) ) + speed + "px";
if( parseInt(oContent.getAttribute("off")) == 1 ){
clearInterval(obj.timer);
}
} if( time == 0 ){
obj.style[attr] = "0px";
clearInterval(obj.timer);
for(var i = 0; i < aImg.length; i++ ){
aImg[i].src = aImg[i].getAttribute("address");
} //console.log( oContent.getAttribute("off") );
if( parseInt(oContent.getAttribute("off"))!= 1 ){ oContent.style.display = "none";
oFail.style.display = "block"; var oP = oFail.getElementsByTagName("p")[0]; oP.onclick = function (){ oFail.style.display = "none";
oStar.style.display = "block"; oSpan.onclick = function (){
starGame(level[0].num,level[0].timeGame,0);
}
}
} }
},1000)
} function selectRect(totle,rating){
var selectNum = 0;
var selectVal = [];
var selectIndex = [];
for(var i = 0; i < aImg.length; i++ ){
aImg[i].style.cursor = "pointer";
aImg[i].onclick = function(){
selectNum++;
this.style.border = "1px red solid";
this.src = this.getAttribute("address");
this.setAttribute("select","Y");
selectVal.push( parseInt( this.getAttribute("num")) );
selectIndex.push( parseInt( this.getAttribute("index")) ); //console.log(selectVal );
if( selectNum == 2 ){
selectNum = 0; if( selectVal.length == 2 ){
if( selectVal[0] == selectVal[1] && selectIndex[0]!= selectIndex[1] ){ toSelectSuccess(totle,rating);
oScore.innerHTML = parseInt( oScore.innerHTML ) + 20;
} else {
toSelectError();
}
}
selectVal = [];
selectIndex = [];
}
}
} function toSelectError(){
setTimeout (function(){
var selArrE = []; for(var i = 0; i < aImg.length; i++ ){
if( aImg[i].getAttribute("select") == "Y"){
selArrE.push( parseInt(aImg[i].getAttribute("index")) );
}
} for(var i = 0; i < aImg.length; i++ ){
for(var j = 0; j < selArrE.length; j++ ){
if( aImg[i].getAttribute("index") == selArrE[j] ){
aImg[i].src = aImg[i].getAttribute("address");
aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
aImg[i].style.border = "1px white solid";
aImg[i].setAttribute("select","N");
}
}
}
selArrE.length = 0;
},300);
} function toSelectSuccess( totle,rating){
setTimeout (function(){
var selArrS = [];
for(var i = 0; i < aImg.length; i++ ){
if( aImg[i].getAttribute("select") == "Y"){
selArrS.push( aImg[i].getAttribute("index") );
}
} //console.log(totle); for(var i = 0; i < aImg.length; i++ ){
for(var j = 0; j < selArrS.length; j++ ){
if( aImg[i].getAttribute("index") == selArrS[j] ){
aImg[i].src = aImg[i].getAttribute("address");
aImg[i].style.display = "none";
aImg[i].setAttribute("select","N");
}
}
}
selArrS.length = 0; if( parseInt( oScore.innerHTML ) == parseInt( totle ) ){ oContent.setAttribute("off","1");
oContent.style.display = "none";
oSuccess.style.display = "block"; var oP = oSuccess.getElementsByTagName("p")[0];
oP.onclick = function(){
rating++; if( rating == 4 ){
oStar.style.display = "block";
oFail.style.display = "none";
oSuccess.style.display = "none";
oContent.style.display = "none";
rating = 0; oSpan.onclick = function (){ starGame( level[0].num,level[0].timeGame,0 ); } } starGame( level[rating].num,level[rating].timeGame,rating); } } //console.log( selArr[0],selArr[1] );
var selArr = [];
//console.log( selArr[0],selArr[1] );
//var selArr = [];
},200);
} } function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj)[attr];
}
} function getRandom( max, min){
return Math.floor( Math.random()*( max - min + 1) + min );
}
}
</script>
<style>
*{
padding: 0px;
margin: 0px;
}
#start{
background: url(images/background.jpg) no-repeat;
margin: 50px auto;
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
display: block;
} #start span{
background: pink;
color: white;
position: absolute;
top: 400px;
left: 700px;
cursor: pointer;
padding: 15px;
} #content{
background: #cccccc;
margin: 50px auto;
position: relative;
width: 440px;
height: 440px;
display: none;
}
#content p{
position: absolute;
right: 5px;
top: -20px;
} #content #rect{
width: 440px;
height: 440px;
position: relative;;
} #content img{
border: 1px white solid;
width: 98px;
height: 98px;
margin: 5px;
position: absolute;
} #time{
width: 440px;
background: red;
height: 30px;
position: absolute;
bottom: -30px;
} #fail{
background: black;
margin: 50px auto;
width: 440px;
height: 440px;
display: none;
} #fail p {
margin: 50px auto;
font-size: 120px;
color:white;
cursor: pointer;
} #success{
background: red;
margin: 50px auto;
width: 440px;
height: 440px;
display: none;
} #success p {
margin: 50px auto;
font-size: 120px;
color:white;
cursor: pointer;
}
</style>
</head>
<body>
<div id = "start">
<span>start</span>
</div> <div id = "content" off = "0">
<p>Score: <span id = "score">0</span>point</p>
<div id = "time"></div>
<div id="rect"></div> </div> <div id = "fail">
<p>Failure!</p>
</div> <div id = "success">
<p>Success</p>
</div>
</body>
</html>
js 考记忆力得小游戏的更多相关文章
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- js实现表格配对小游戏
js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...
- JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- 原生js写的flybird小游戏
游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html> <!-- This ...
- css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...
- 从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）
回顾 上一节我们搭建了游戏的骨架,添加了四个游戏场景,分别是加载.开始.游戏.结束.那么这一节我们来介绍加载这个场景,顺带丰富一下各个场景的基本内容. Phaser.Loader Phaser框架自带 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- js实现点气球小游戏
二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- js 面向对象 打气球小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 商城商品购买数量增减的完美JS效果
近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验. 数量一定是数字 点击增减按钮的时候要能自动加1或减1 ...
- 【转】Unity3d中制作Loading场景进度条所遇到的问题 LoadLevelAsync，AsyncOperation
背景 通常游戏的主场景包含的资源较多,这会导致加载场景的时间较长.为了避免这个问题,可以首先加载Loading场景,然后再通过Loading场景来加载主场景.因为Loading场景包含的资源较少,所以 ...
- Git详解之二 Git基础 转
http://www.open-open.com/lib/view/open1328069733264.html Git 基础 读完本章你就能上手使用 Git 了.本章将介绍几个最基本的,也是最常用的 ...
- BZOJ 1087：[SCOI2005]互不侵犯King（状压DP）
[SCOI2005]互不侵犯King [题目描述] 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子 ...
- 【bzoj4059】[Cerc2012]Non-boring sequences 分治
题目描述 我们害怕把这道题题面搞得太无聊了,所以我们决定让这题超短.一个序列被称为是不无聊的,仅当它的每个连续子序列存在一个独一无二的数字,即每个子序列里至少存在一个数字只出现一次.给定一个整数序列, ...
- 【bzoj1475】方格取数 网络流最小割
题目描述 在一个n*n的方格里,每个格子里都有一个正整数.从中取出若干数,使得任意两个取出的数所在格子没有公共边,且取出的数的总和尽量大. 输入 第一行一个数n:(n<=30) 接下来n行每行n ...
- 雪人（snowman）
test1025 五子棋(fir) 依照题意模拟即可,先判是否合法,然后在判是否胜利 迷宫(maze) 折半搜素裸题 雪人(snowman) 二分+hash a1-b1=a2-b2=a3-b3 等价于 ...
- Transformer解析与tensorflow代码解读
本文是针对谷歌Transformer模型的解读,根据我自己的理解顺序记录的. 另外,针对Kyubyong实现的tensorflow代码进行解读,代码地址https://github.com/Kyuby ...
- 延迟加载技术 jquery lazyload
原文发布时间为:2011-01-17 -- 来源于本人的百度文章 [由搬家工具导入] 文章： http://www.appelsiini.net/projects/lazyload 下载地址：htt ...
- SQL触发器的使用及语法
原文发布时间为:2010-08-07 -- 来源于本人的百度文章 [由搬家工具导入] ===以下转qsfwy.javaeye.com/blog/424789定义： 何为触发器？在SQL Server里 ...