这是我一年前写的一个小游戏（具体什么时候忘记了）
链接:记忆力训练（移动端）
想和我交流的话可以邮件我，邮箱在第三部分。
第一部分：页面的设计框架
对于每个小方块或者说每一行我并没有采用js来自动生成（.lines）：似乎就算使用js也不能简化我的标签，也不能优化性能，或许能够降低流量传输，但是对于这个项目来说这样不到1kB的数据似乎是不用担心的。
另外在#temp部分，我将所有图片直接读入了，而不是在需要的时候读入，这样做的原因是：在网络不好的情况下游戏时，如果根据需要读入图片，可能使得初次游戏过程不流畅；一次性全部读入的话默认情况是可以使图片缓存，因而不用担心再次游戏时流量的问题，并且初次使用时不会有卡顿（源于拉取图片）。
<body> <div id="transition"> <h2>游 戏 结 束</h3> <h3>得分：</h2> <h3>用时：</h2> </div> <div id="game"> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> <div class="lines"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </div> <div id="begin"> <span>得分：000</span> <button>开始</button> <span>时间：000</span> </div> <div id="info"> <span>设置</span> <span>帮助</span> </div> <div id="setting"> 背景色： <select name="" id="setting_color"> <option value="5">恢复</option> <option value="1">白色</option> <option value="2">黑色</option> <option value="3">灰色</option> <option value="4">蓝色</option> </select> <br> <br> <!-- 背景音乐：<input type="checkbox" id="check_music"> <br> --> <button id="setting_form">确定</button> </div> <div id="help"> <h3>记忆力训练</h3> <ul> <li>点击开始系统在随机位置生成一张图</li> <li>点击该图并记忆位置，游戏界面黑屏</li> <li>约0.5s后屏幕重新点亮并有一张新图在随机位置生成</li> <li>点击该图并记忆位置，游戏界面黑屏</li> <li>重复上述过程</li> <br> <li>任何问题请邮件我： <a href="mailto:[email protected]">[email protected]</a> </li> </ul> <div id="temp"> <img src="icon/14.png" alt=""> <img src="icon/15.png" alt=""> <img src="icon/16.png" alt=""> <img src="icon/17.png" alt=""> <img src="icon/18.png" alt=""> <img src="icon/19.png" alt=""> <img src="icon/20.png" alt=""> <img src="icon/21.png" alt=""> <img src="icon/22.png" alt=""> <img src="icon/23.png" alt=""> <img src="icon/24.png" alt=""> <img src="icon/25.png" alt=""> <img src="icon/26.png" alt=""> <img src="icon/27.png" alt=""> <img src="icon/28.png" alt=""> <img src="icon/29.png" alt=""> <img src="icon/30.png" alt=""> <img src="icon/31.png" alt=""> <img src="icon/32.png" alt=""> </div> </div> <!-- <video controls loop name="bgmusic"> <source src="http://wvvw.peiyin.me/yinyue-16-2015-08-08-e11313acc1e9a455a6a0a7b1af1ee0a5.mp3" type="audio/mp3"> </video> --> </body>
第二部分：CSS
<style>
html{
padding: 0 0;
margin: 0 0;
}
body{
background: #222;
padding: 0 0;
margin: 0 0;
}
a{
text-decoration: none;
}
.lines,#begin,#info,#setting{
width:100%;
vertical-align: middle;
text-align: center;
}
.lines img{
display: inline;
width:12%;
/*border:1px solid #aaa;*/
margin: 0 0;
padding: 0 0;
border: 0;
background: #222;
}
#begin button , #setting button{
margin:0 20px;
margin-top: 10px;
background: #aaa;
color:#222;
padding: 10px 20px;
border-radius: 5px 5px 5px 5px;
outline: none;
}
#begin span{
color:#aaa;
}
#info{
width:100%;
line-height: 30px;
background: #aaa;
position: absolute;
bottom:0;
}
#info span{
width: 50%;
margin: 0 30px;
padding: 0 30px;
text-align: center;
}
#setting{
background: #aaa;
width:100%;
padding: 5px 5px;
position: absolute;
top:0;
display: none;
}
#setting select{
padding: 5px 5px;
margin-top: 10px;
}
#setting button{
border: 0;
background: #eee;
margin: 20px 0;
}
#help{
width:100%;
background: #aaa;
padding: 5px 5px;
position: absolute;
top:0;
text-align: center;
display: none;
}
#help li{
margin:10px 5px;
text-align: initial;
}
#temp{
display: none;
}
#transition{
width:100%;
position: absolute;
top:0;
text-align: center;
padding: 50px 0px;
color:#fff;
opacity: 0.8;
display: none;
}
video{
display: none;
}
input[type="checkbox"]{
height:10px;
width:20px;
}
</style>
第三部分：JS代码
之前写代码居然没有注释！！！
如果你想和我交流的话可以邮件我[email protected]
<script type="text/javascript">
// 没有注释！！！
var time_sec = 0;
var get_score = 0;
var imgs = document.getElementsByTagName('img');
var imgs_sort = new Array();
var temp_index = 0;
var temp_img;
var time_flow;
var flag_help = 0;
var flag_setting = 0;
for(var loop = 0 ; loop < 63 ; loop++)
imgs_sort[loop] = loop;
function ShowTime()
{
var string;
if(time_sec < 10)
string = "时间：00" + time_sec;
else if(time_sec < 100)
string = "时间：0" + time_sec;
else string = "时间：" + time_sec;
document.getElementById("begin").getElementsByTagName("span")[1].innerHTML = string;
time_sec++;
}
function InitVector(imgs_sort)
{
imgs_sort.sort(function(a,b){ return Math.random() > 0.5 ? -1 : 1;});
}
function AddClick()
{
for(var loop = 0 ; loop < 63 ; loop++)
imgs[loop].onclick = ClickSite;
}
function GetScore()
{
var string;
get_score++;
if(get_score < 10)
string = "得分：00" + get_score;
else if(get_score < 100)
string = "得分：0" + get_score;
else string = "得分：" + get_score;
document.getElementById("begin").getElementsByTagName("span")[0].innerHTML = string;
}
function ClickSite()
{
var this_part = this.src.split(".");
if(this_part[this_part.length - 1] != "html")
{
if(this.index == (imgs_sort[temp_index-1] + 1))
{
var time = new Date();
var time_1 = time.getTime();
var time_2 = new Date();
GetScore();
//alert(time_1);
if(parseInt(get_score) == 63)
{
var score = "得分：" + get_score;
var time = "用时：" + (parseInt(time_sec)-1) + "s";
var transition = document.getElementById("transition");
transition.getElementsByTagName("h2")[0].innerHTML = "大师，你赢了！"
transition.getElementsByTagName("h3")[0].innerHTML = score;
transition.getElementsByTagName("h3")[1].innerHTML = time;
transition.style.display = "block";
document.getElementById("begin").getElementsByTagName("button")[0].innerHTML = "继续";
document.getElementById("begin").getElementsByTagName("button")[0].style.visibility = "visible";
clearInterval(time_flow);
}
else
{
document.getElementById("game").style.visibility = "hidden";
var imgs_index = parseInt(Math.random() * (14 + 1) + 14 , 10);
temp_img = imgs_index;
imgs[imgs_sort[temp_index]].src = "icon/" + imgs_index + ".png";
window.setTimeout("document.getElementById(\"game\").style.visibility = \"visible\"",500);
temp_index++;
}
}
else
{
imgs[imgs_sort[temp_index-1]].style.border="1px red solid";
var score = "得分：" + get_score;
var time = "用时：" + (parseInt(time_sec)-1) + "s";
var transition = document.getElementById("transition");
transition.getElementsByTagName("h2")[0].innerHTML = "游 戏 结 束";
transition.getElementsByTagName("h3")[0].innerHTML = score;
transition.getElementsByTagName("h3")[1].innerHTML = time;
transition.style.display = "block";
document.getElementById("begin").getElementsByTagName("button")[0].innerHTML = "继续";
document.getElementById("begin").getElementsByTagName("button")[0].style.visibility = "visible";
clearInterval(time_flow);
}
}
}
function ShowHelp()
{
if(!flag_help)
{
document.getElementById("help").style.display = "block";
flag_help = 1;
}
else
{
document.getElementById("help").style.display = "none";
flag_help = 0;
}
}
function ImgBgcolor(color)
{
for(var loop = 0 ; loop < 63 ; loop++)
imgs[loop].style.background = color;
}
function GetForm()
{
var color = document.getElementById("setting_color");
var body = document.getElementsByTagName("body")[0];
switch(color.value)
{
case "1" : body.style.background = "#eee"; ImgBgcolor("#eee"); break;
case "2" : body.style.background = "#000"; ImgBgcolor("#000"); break;
case "3" : body.style.background = "#666"; ImgBgcolor("#666"); break;
case "4" : body.style.background = "#00f"; ImgBgcolor("#00f"); break;
case "5" : body.style.background = "#222"; ImgBgcolor("#222"); break;
}
// var check_music = document.getElementById("check_music");
// if(check_music.checked)
// {
// alert(0);
// document.getElementsByTagName("video")[0].autoplay = "autoplay";
// }
document.getElementById("setting").style.display = "none";
flag_setting = 0;
}
function ShowSetting()
{
if(!flag_setting)
{
document.getElementById("setting").style.display = "block";
flag_setting = 1;
}
else
{
document.getElementById("setting").style.display = "none";
flag_setting = 0;
}
}
function BeginGame()
{
if(this.innerHTML != "继续")
{
var imgs_index = parseInt(Math.random() * (14 + 1) + 14 , 10);
temp_img = imgs_index;
imgs[imgs_sort[temp_index]].src = "icon/" + imgs_index + ".png";
temp_index++;
this.style.visibility = "hidden";
time_flow = window.setInterval("ShowTime()",1000);
}
else
{
imgs[imgs_sort[temp_index-1]].style.border="0";
get_score = 0;
time_sec = 0;
document.getElementById("begin").getElementsByTagName("span")[0].innerHTML = "得分：000";
document.getElementById("begin").getElementsByTagName("span")[1].innerHTML = "时间：000";
for(var loop = 0 ; loop < 63 ; loop++)
imgs[loop].src = "";
InitVector(imgs_sort);
document.getElementById("transition").style.display = "none";
var imgs_index = parseInt(Math.random() * (14 + 1) + 14 , 10);
temp_img = imgs_index;
imgs[imgs_sort[temp_index]].src = "icon/" + imgs_index + ".png";
temp_index++;
this.style.visibility = "hidden";
time_flow = window.setInterval("ShowTime()",1000);
}
}
window.onload = function()
{
for(var loop = 0 ; loop < 63 ; loop++)
{
imgs[loop].height = imgs[loop].width;
imgs[loop].index = loop + 1;
}
document.getElementById("transition").height = (imgs[loop - 1].height) * 9;
//alert(document.getElementById("transition").height);
InitVector(imgs_sort);
AddClick();
document.getElementById("begin").getElementsByTagName("button")[0].addEventListener("click" ,BeginGame);
document.getElementById("info").getElementsByTagName("span")[1].addEventListener("click" ,ShowHelp);
document.getElementById("info").getElementsByTagName("span")[0].addEventListener("click" ,ShowSetting);
document.getElementById("setting_form").addEventListener("click" ,GetForm);
// alert("陆争是小笨蛋!!!");
}
</script>
这是我第一次写的文章，JS部分没有注释的问题希望我下次能记得写上吧！（现在正在开组会～～～）源码： https://github.com/caibingcheng/caibingcheng.github.io/tree/master/blog/app/game
下一篇文章我打算分享我的2048代码，写了一年多，好像也没有注释！！！
以后的文章内容可能会多偏向于计算机视觉图像处理部分。