基于javascript达成句子翻牌网页版小游戏,JS小游

作者: 关于计算机  发布:2019-09-08

本文实例汇报了JS小游戏的极速快跑源码,分享给大家供我们参谋。具体如下:

基于javascript实现句子翻牌网页版小游戏,javascript翻牌

本文实例为大家享用了js达成句子翻牌网页版小游戏,供大家参谋,具体内容如下

效果图:

图片 1

福寿年高思路:

重点打字工夫和回忆手艺的益智小游戏。
1.会先把一段文字展现
2.一小段时日后出示背面
3.输入框输入文字与文字全体心心相印展现正面

现实代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>句子翻牌</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/fanpai.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 //ht5 dom
 var otestAudio=document.getElementById("test-audio");
 //data
 var data_all=[];
 data_all[0]=[
 {id:'0',text:'我,爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'},
 {id:'1',text:'亲爱的,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'},
 {id:'2',text:'不知道,啊,!',is:true,count:2,'url':'audio/3.mp3'},
 {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'},
 {id:'4',text:'也许,对吧,!',is:true,count:2,'url':'audio/5.mp3'},
 {id:'5',text:'听,不懂,啊,!',is:true,count:3,'url':'audio/1.mp3'},
 {id:'6',text:'天天,向上,,,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'},
 {id:'7',text:'你,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'不要,问,为什么,!',is:true,count:3,'url':'audio/4.mp3'},
 {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'你,不爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'},
 {id:'11',text:'妈妈,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'},
 {id:'12',text:'想,知道,啊,!',is:true,count:3,'url':'audio/3.mp3'},
 {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'},
 {id:'14',text:'真的,也许,对吧,!',is:true,count:3,'url':'audio/5.mp3'},
 {id:'15',text:'完全,听,不懂,啊,!',is:true,count:4,'url':'audio/1.mp3'},
 {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'},
 {id:'17',text:'他,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'请,问,快了吗,!',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'} 
 ];
 data_all[1]=[
 {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'1',text:'我,怎么,知道,你,好不好,?',is:true,count:5,'url':'audio/2.mp3'},
 {id:'2',text:'不要,问,为什么,好吗,?',is:true,count:4,'url':'audio/3.mp3'},
 {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'},
 {id:'5',text:'你,一定,要帅,,,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'6',text:'你,去了,你二大爷,家,了吗,?',is:true,count:5,'url':'audio/2.mp3'},
 {id:'7',text:'天南,海北,,,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'9',text:'不知道,无罪,,,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'大中华,儿女,,,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'},
 {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'},
 {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'13',text:'有,你,就是,晴天,,,对吧,!',is:true,count:5,'url':'audio/4.mp3'},
 {id:'14',text:'说的,和,真的,似的,,,太假了,!',is:true,count:5,'url':'audio/5.mp3'},
 {id:'15',text:'呵呵,,,净,瞎扯淡,!',is:true,count:3,'url':'audio/1.mp3'},
 {id:'16',text:'行了,,,就,你,知道,?',is:true,count:4,'url':'audio/2.mp3'},
 {id:'17',text:'好好,学习,,,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'真的,无所依,,,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'你知道,的话,就,说,出来嘛,!',is:true,count:5,'url':'audio/5.mp3'} 
 ];
 data_all[2]=[
 {id:'0',text:'我,爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'},
 {id:'1',text:'亲爱的,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'},
 {id:'2',text:'不知道,啊,!',is:true,count:2,'url':'audio/3.mp3'},
 {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'},
 {id:'4',text:'也许,对吧,!',is:true,count:2,'url':'audio/5.mp3'},
 {id:'5',text:'听,不懂,啊,!',is:true,count:3,'url':'audio/1.mp3'},
 {id:'6',text:'天天,向上,,,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'},
 {id:'7',text:'你,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'不要,问,为什么,!',is:true,count:3,'url':'audio/4.mp3'},
 {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'你,不爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'},
 {id:'11',text:'妈妈,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'},
 {id:'12',text:'想,知道,啊,!',is:true,count:3,'url':'audio/3.mp3'},
 {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'},
 {id:'14',text:'真的,也许,对吧,!',is:true,count:3,'url':'audio/5.mp3'},
 {id:'15',text:'完全,听,不懂,啊,!',is:true,count:4,'url':'audio/1.mp3'},
 {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'},
 {id:'17',text:'他,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'请,问,快了吗,!',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'} 
 ];
 data_all[3]=[
 {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'1',text:'我,怎么,知道,你,好不好,?',is:true,count:5,'url':'audio/2.mp3'},
 {id:'2',text:'不要,问,为什么,好吗,?',is:true,count:4,'url':'audio/3.mp3'},
 {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'},
 {id:'5',text:'你,一定,要帅,,,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'},
 {id:'6',text:'你,去了,你二大爷,家,了吗,?',is:true,count:5,'url':'audio/2.mp3'},
 {id:'7',text:'天南,海北,,,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'},
 {id:'9',text:'不知道,无罪,,,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'},
 {id:'10',text:'大中华,儿女,,,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'},
 {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'},
 {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'13',text:'有,你,就是,晴天,,,对吧,!',is:true,count:5,'url':'audio/4.mp3'},
 {id:'14',text:'说的,和,真的,似的,,,太假了,!',is:true,count:5,'url':'audio/5.mp3'},
 {id:'15',text:'呵呵,,,净,瞎扯淡,!',is:true,count:3,'url':'audio/1.mp3'},
 {id:'16',text:'行了,,,就,你,知道,?',is:true,count:4,'url':'audio/2.mp3'},
 {id:'17',text:'好好,学习,,,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'},
 {id:'18',text:'真的,无所依,,,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'},
 {id:'19',text:'你知道,的话,就,说,出来嘛,!',is:true,count:5,'url':'audio/5.mp3'} 
 ];

 var guan_arr=[
 {n:'第一关',c:'正常语序'},
 {n:'第二关',c:'熟练熟悉'},
 {n:'第三关',c:'注意:词语打乱了'},
 {n:'第四关',c:'全神贯注'},
 {n:'第五关',c:'困难语序'}
 ];
 //base
 var current_guan=1;//当前所在关卡
 var current_index=0;//答对记录数
 var dong=null;//全局动画
 var alltime=300;//答题时间
 var iskey=true;//是否按键可用
 var count=0;//词语记录数
 var subindex=null;//子记录键
 var starttime=0;//开始时作答时间
 //event
 $(".game-fp-start").click(function(){
 $(".game-fp-name").hide();
 $(".game-fp-sm").hide();
 $(".game-fp-start").hide();
 init();
 });
 $(".game-fp-tools-see").children("dt").click(function(){
 funopen();
 setTimeout(function(){
 funclose();
 },2000); 
 });
 $("#game-fp-input").children("input").keyup(function(){ 
 if(iskey){
 var stext=$(this).val();
 matchval(stext);
 next($("#game-fp-words").children("div").length);
 }else{};  
 });
 $(".game-fp-tools-pause").click(function(){
 if($("#game-fp-input").children("input").prop('disabled')==false){
 clearInterval(dong);
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $("#game-fp-pause").show();
 }else{} 
 });
 $("#game-fp-sta").click(function(){ 
 $("#game-fp-input").children("input").removeAttr('disabled'); 
 $("#game-fp-pause").hide();
 $("#game-fp-input").children("input").focus();
 inctime();
 }); 
 $("#game-fp-reset-btn").click(function(){ 
 current_guan=1;
 current_index=0;
 alltime=300;
 iskey=true;
 subindex=null; 
 count=0;
 for(var i=0;i<data_all.length;i++){
 for(var j=0;j<data_all[i].length;j++){
 data_all[i][j]['is']=true;
 }; 
 }; 
 $("#game-fp-reset").hide();
 init();
 }); 
 $(".game-fp-tools-skip").children("dt").click(function(){ 
 if($("#game-fp-input").children("input").prop('disabled')==false){
 if($(this).children("span").html()<=0){

 }else{
 $(this).children("span").html($(this).children("span").html()-1);
 $("#game-fp-words").children().remove();
 fundata();
 }; 
 }else{} 
 }); 
 $(window).keyup(function(event){
 switch (event.which)
 {
 case 35://end
 $(".game-fp-tools-pause").trigger("click");
 break;
 case 36://hpme

 break;
 case 33://pageup
 $(".game-fp-tools-see").children("dt").trigger("click");
 break;
 case 34://pagedown
 $(".game-fp-tools-skip").children("dt").trigger("click");
 break;
 } 
 });
 //handel
 function matchval(stext){
 var real=stext;
 var delay=0;
 $("#game-fp-words").children("div").each(function(index, element) {
 var ishas=stext.search($(this).children("span").text());
 var that=$(this);
 if(ishas>-1 && $(this).attr("is")=="0"){
 delay=parseInt(delay)+parseInt(80);
 $(this).attr("is","1");
 addfen(10);
 setTimeout(function(){
  that.removeClass("close").addClass("open");
  that.children("em").addClass("feiqi");
 },delay);
 real=real.replace($(this).children("span").text(),""); 
 }else{
 };    
  });
 $("#game-fp-input").children("input").val(real);
 };
 function addfen(num){
 $("#game-fp-fen").find("input").val(parseInt($("#game-fp-fen").find("input").val())+parseInt(num));
 };
 function next(zlen){
 if($("#game-fp-words").children("div[is='1']").length==zlen && $("#game-fp-input").children("input").val().length==0){
 iskey=false;
 success();
 }else{};

 };
 function success(){
 showok();
 var alltime=null; 
 if(otestAudio.duration){ 
 alltime=otestAudio.duration; 
 skipsuccess(alltime); 
 }else{
 otestAudio.onloadedmetadata=function(){ 
 alltime=otestAudio.duration; 
 skipsuccess(alltime); 
 };
 };

 };
 function showok(){
 $("#game-fp-words").children().remove();
 var rindex=current_guan-1;
 var zz=chatime();
 $("#game-fp-result").show();
 $("#game-fp-result").append('<strong class="zonghefen zonghefeiqi">20</strong>');
 $("#game-fp-result").append('<strong class="mintimefen mintimefeiqi">'+zz+'</strong>') 
 addfen($("#game-fp-result").children(".zonghefen").html());
 addfen($("#game-fp-result").children(".mintimefen").html()); 
 var showval=data_all[rindex][subindex].text.split(",").join("");
 count=parseInt(count)+parseInt(data_all[rindex][subindex].count);
 $("#game-fp-result").children("p").html(showval);
 otestAudio.src=data_all[rindex][subindex].url;
 };
 function chatime(){
 var chaval=(new Date().getTime()-starttime)/1000; 
 if(chaval<=5){
 return 30;
 }else if(chaval>5 && chaval<=10){
 return 20;
 }else if(chaval>10){
 return 10;
 }else{
 return 0;
 }; 
 };
 function skipsuccess(alltime){
 otestAudio.play();
 current_index=parseInt(current_index)+parseInt(1);
 if(current_index%10==0){
 current_guan=parseInt(current_guan)+parseInt(1);
 setTimeout(function(){
 $("#game-fp-result").children(".zonghefen").remove();
 $("#game-fp-result").children(".mintimefen").remove(); 
 $("#game-fp-result").hide(); 
 funguan(); 
 },parseInt(alltime*1000));  
 setTimeout(function(){ 
 fundata();
 },parseInt(alltime*1000)+parseInt(1000)); 
 }else{
 setTimeout(function(){
 $("#game-fp-result").children(".zonghefen").remove();
 $("#game-fp-result").children(".mintimefen").remove(); 
 $("#game-fp-result").hide();
 fundata();
 },parseInt(alltime*1000));
 };
 $("#game-fp-input").children("input").val(""); 
 };
 //function 
 function init(){
 $("#game-fp-box").show();
 $("#game-fp-input").children("input").val("");
 $("#game-fp-fen").find("input").val("0");
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $("#game-fp-time").children("span").html(alltime);
 funguan(); 
 setTimeout(function(){
 fundata();
 },1000);
 inctime();
 };
 function funguan(){
 $("#game-fp-guanka").children("strong").html(guan_arr[current_guan-1].n);
 $("#game-fp-guanka").children("span").html(guan_arr[current_guan-1].c);
 $("#game-fp-guanka").show();
 setTimeout(function(){
 $("#game-fp-guanka").hide(); 
 },1000)
 };
 function fundata(){ 
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 setTimeout(function(){
 appenddata();
 iskey=true;
 },0);
 setTimeout(function(){
 funclose();
 $("#game-fp-input").children("input").focus();
 },2000);
 };
 function appenddata(){ 
 if(current_guan<=2){
 var arrtext=returnraditem().text.split(",");
 //console.log(current_guan+"-----"+returnraditem().id);
 for(var i=0;i<arrtext.length;i++){
 var tmp=$('<div class="fanpai" is="0">'+ arrtext[i] +'<em>10</em></div>');
 $("#game-fp-words").append(tmp);
 }; 
 }else if(current_guan>2 && current_guan<=4){
 var arrtext=returnraditem().text.split(",");
 //乱序处理
 var lasttext=[];
 var eearr=luanxu(arrtext.length);
 for(var j=0;j<eearr.length;j++){
 lasttext.push(arrtext[eearr[j]]);
 };
 for(var i=0;i<lasttext.length;i++){
 var tmp=$('<div class="fanpai" is="0">'+ lasttext[i] +'<em>10</em></div>');
 $("#game-fp-words").append(tmp);
 }; 
 }; 
 };
 function luanxu(maxlen){
 var rarr=[];
 for(var i=0;i<maxlen;i++){
 rarr.push(i);
 };
 var eearr=[];
 for(var j=0;j<maxlen;j++){
 var ing=Math.floor(Math.random()*rarr.length);
 eearr.push(rarr[ing]);
 rarr.splice(ing,1);
 };
 return eearr;
 };
 function returnraditem(){
 var rindex=current_guan-1;
 var temparr=[];
 for(var i=0;i<data_all[rindex].length;i++){
 if(data_all[rindex][i]['is']==true){ 
 temparr.push(data_all[rindex][i]); 
 }else{};
 };
 var realrad=Math.floor(Math.random()*temparr.length);
 for(var i=0;i<data_all[rindex].length;i++){
 if(data_all[rindex][i]['id']==temparr[realrad]['id']){ 
 data_all[rindex][i]['is']=false;
 subindex=i;
 }else{};
 }; 
 return temparr[realrad];
 };
 function funclose(){
 $("#game-fp-input").children("input").removeAttr('disabled');
 $("#game-fp-input").children("input").focus();
 starttime=new Date().getTime();
 $("#game-fp-words").children("div").each(function(index, element) {
   if($(this).attr("is")=="0"){
 $(this).removeClass("open").addClass("close");
 }else{};
  }); 
 };
 function funopen(){
 $("#game-fp-input").children("input").attr('disabled','disabled');
 $("#game-fp-words").children("div").each(function(index, element) {
   if($(this).attr("is")=="0"){
 $(this).removeClass("close").addClass("open");
 }else{};
  });

 };
 function inctime(){
 dong=setInterval(function(){
 alltime-=1;
 if(alltime<0){
 clearInterval(dong);
 $("#game-fp-words").children().remove();
 $("#game-fp-box").hide();
 $("#game-fp-input").children("input").attr('disabled','disabled'); 
 $(".game-fp-reset-con-a").html($("#game-fp-fen").find("input").val());
 $(".game-fp-reset-con-b").html(current_index);
 $(".game-fp-reset-con-c").html(count);
 $("#game-fp-reset").show();
 }else{
 $("#game-fp-time").children("span").html(alltime);
 };
 },1000);
 };
 //end
}); 
</script>
</head>
<body>
 <div id="game-fp">
  <div class="game-fp-name">句子翻牌</div>
  <div class="game-fp-sm">
   <p>1.将牌面上的词语输入到方块中。</p>
   <p>2.按照正确语序输入句子能获得额外奖励。</p>
   <p>3.每组词语显示2-4秒。</p>
   <p class="game-fp-sm-x">查看词语:点击“查看词语”,或按“PageUp”键</p>
   <p>4.一共有10次机会。</p>
   <p class="game-fp-sm-x">跳过词语:点击“跳过10”,或按“PageDown”键</p>
   <p>5.别忘了输入标点符号!</p>
  </div>
  <div class="game-fp-start">开始游戏</div>
  <div id="game-fp-box">
   <div id="game-fp-fen">
    得分<input type="text" value="0" readonly="readonly" />
   </div>
   <div id="game-fp-input">
    <input type="text" />
   </div>
   <div id="game-fp-time">
    剩余时间 300
   </div>
   <div id="game-fp-tools">
    <dl class="game-fp-tools-pause">
     <dt>暂停</dt>
     <dd>End</dd>
    </dl>
    <dl class="game-fp-tools-see">
     <dt>再看一次</dt>
     <dd>PageUp</dd>
    </dl>
    <dl class="game-fp-tools-skip">
     <dt>跳过10</dt>
     <dd>PageDown</dd>
    </dl>
    <dl class="game-fp-tools-ts">
     <dt>游戏说明</dt>
     <dd>Home</dd>
    </dl>
   </div>
   <div id="game-fp-words">
   </div>
   <div id="game-fp-guanka">
    <strong>第一关</strong>
    正常词序
   </div>
   <div id="game-fp-pause">
    继续
   </div>

   <div id="game-fp-result">
    <div>正确语序<em><audio src="" id="test-audio"></audio></em></div>
    <p></p>
    <!--<strong class="zonghefen">20</strong>
    <strong class="mintimefen">0</strong>-->
   </div>

  </div>
  <div id="game-fp-reset">
   <div class="game-fp-reset-con">    
    <p>游戏结束</p>
    <p>你的得分:0</p>
    <p>完成句子:0</p>
    <p>完成词语:0</p>
   </div>
   再玩一次
  </div> 
 </div>

</body>
</html>

代码下载:

只要大家感觉玩的还不舒坦仍是可以够翻看此专项论题:javascript优秀小游戏

上述正是本文的全体内容,希望对大家学习javascript程序设计有所支持。

玩耍运维后如下图所示:

你也许感兴趣的小说:

  • javascript 制作坦克战争游戏起头 图片与代码
  • JavaScript 打地鼠游戏代码表达
  • 纯JS达成五子棋游戏包容各浏览器(附源码)
  • js猜数字小游戏的简要完成代码
  • JS写的贪吃蛇游戏(个人练习)
  • javascript 模拟坦克战斗游戏(html5版)附源码下载
  • javascript兑现2048游乐示例
  • node.js适合游戏后台开垦吗?
  • JS小游戏之仙剑翻牌源码详解
  • Nodejs完成多个人同不常候在线移动鼠标的小游戏分享

本文实例为我们大快朵颐了js完成句子翻牌网页版小游戏,供大家参谋,具体内容如下 效...

图片 2

Javascript部分代码如下:

/** 极速快跑
* Author: fdipzone
* Date: 2012-07-15
* Ver: 1.0
*/

var gameimg = ['images/start.png', 'images/start_over.png', 'images/go.png', 'images/go_over.png', 'images/running.gif', 'images/run_start1.gif', 'images/run_start2.gif', 'images/run_start3.gif'];
var speed_obj = new SpeedClass();

window.onload = function(){
 var callback = function(){
 speed_obj.init();
 }
 img_preload(gameimg, callback);
}

// Speed Class
function SpeedClass(){
 this.levelset = [8,5,8,12]; // 难度参数
 this.playerlist = null; // 选手列表
 this.player = 0;  // 选中的选手
 this.level = 2;  // 难度
 this.lock = 0;  // 锁定
 this.isstart = 0;  // 是否开始
 this.isover = 0;  // 是否结束
}

// init
SpeedClass.prototype.init = function(){
 this.reset();
 this.create_player();
 this.create_event();
}

// reset
SpeedClass.prototype.reset = function(){
 this.player = 0;
 this.level = $('level').value; // level
 this.playerlist = $_tag('li', 'playerlist');
 for(var i=0; i<this.playerlist.length; i++){
 this.playerlist[i].className = '';
 }
 disp('start_btn', 'show', 'start_btn');
 disp('go_btn', 'hide', 'go_btn');
 this.lock = 0; // unlock
 this.isstart = 0; // unstart
 this.isover = 0; // unover
}

// create player
SpeedClass.prototype.create_player = function(){
 var runway = [];
 var playerlist = [];
 for(var i=1; i<=8; i++){
 runway[i] = '<li><div id="player' + (9-i) + '" class="run_status1"></div></li>';
 playerlist[i] = '<li>' + i + '</li>';
 }
 $('runway').innerHTML = runway.join('');
 $('playerlist').innerHTML = playerlist.join('');
 runway = null;
 playerlist = null;
}

// create event
SpeedClass.prototype.create_event = function(){
 var self = this;
 this.playerlist = $_tag('li', 'playerlist');
 for(var i=0; i<this.playerlist.length; i++){
 this.playerlist[i].onmouseover = function(){
  if(this.className!='on'){
  this.className = 'over';
  }
 }
 this.playerlist[i].onmouseout = function(){
  if(this.className!='on'){
  this.className = '';
  }
 }
 this.playerlist[i].onclick = function(o,c){
  return function(){
  if(self.lock==0){
   o.playerlist[c].className = 'on';
   if(o.player!=0 && o.player!=c+1){ // 不等於0且不等於自己
   o.playerlist[o.player-1].className = '';
   }
   o.player = c + 1;
  }
  }
 }(self, i);
 }

 $('start_btn').onmouseover = function(){
 this.className = 'start_over_btn';
 }
 $('start_btn').onmouseout = function(){
 this.className = 'start_btn';
 }
 $('start_btn').onclick = function(){
 if(self.player==0){
  return alert('请选择要支持的选手');
 }else{
  self.lock = 1; // locked
  disp('start_btn','hide');
  disp('go_btn','show');
  for(var i=1; i<=8; i++){
  self.start(i);
  }
 }
 }

 $('go_btn').onmouseover = function(){
 this.className = 'go_over_btn'; 
 }
 $('go_btn').onmouseout = function(){
 this.className = 'go_btn';
 }
 $('go_btn').onclick = function(){
 self.go();
 }
}

// start game
SpeedClass.prototype.start = function(c){
 var o = $('player' + c);
 var step = 1;
 var self = this;
 var exert = 0;

 o.style.marginLeft = '62px'; // init

 var et = setInterval(function(){
 if(step<4){ // step 1-3 is ready
  o.className = 'run_status' + step;
 }else{
  // run
  if(o.className!='running'){
  o.className = 'running';
  }
  // start can go
  if(self.isstart==0){
  self.isstart = 1;
  }
  // 已有一名选手到达终点
  if(self.isover==1){
  clearInterval(et);
  }else{
  if(self.player!=c){ // 其他选手
   exert = Math.floor(Math.random()* self.levelset[self.level])+3; // 根据level调整
  }
  o.style.marginLeft = parseInt(o.style.marginLeft) + Math.floor(Math.random()*8)+4 + exert + 'px';
  // 到达终点
  if(parseInt(o.style.marginLeft)>=745){ 
   clearInterval(et);
   self.isover = 1;
   self.gameover(o.id);
  }
  }
 }
 step ++;
 }, 350)
}

// go
SpeedClass.prototype.go = function(){
 if(this.isstart==1 && this.isover==0){
 var o = $('player' + this.player);
 var exert = Math.floor(Math.random()*3)+2; // 2-5
 o.style.marginLeft = parseInt(o.style.marginLeft) + exert + 'px';
 }
 return false;
}

// gameover
SpeedClass.prototype.gameover = function(id){
 id = id.replace('player','');
 var self = this;
 var msg = '';
 if(id==this.player){
 msg = "恭喜你,你支持的选手获得胜利nn";
 }else{
 msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选nn";
 }
 if(confirm(msg + '是否重新开始?')==true){
 setTimeout(function(){
  self.init();
 },1000);
 }else{
 return false;
 }
}

/** common function */

// get document.getElementBy(id)
function $(id){
 this.id = id;
 return document.getElementById(id);
}

// get document.getElementsByTagName
function $_tag(name, id){
 if(typeof(id)!='undefined'){
 return $(id).getElementsByTagName(name);
 }else{
 return document.getElementsByTagName(name); 
 }
}

/* div show and hide
* @param id dom id
* @param handle show or hide
* @param classname
*/
function disp(id, handle, classname){
 if(handle=='show'){
 $(id).style.display = 'block';
 }else{
 $(id).style.display = 'none'; 
 }
 if(typeof(classname)!='undefined'){
 $(id).className = classname;
 }
}

/* img preload
* @param img 要加载的图片数组
* @param callback 图片加载成功后回调方法
*/
function img_preload(img, callback){
 var onload_img = 0;
 var tmp_img = [];
 for(var i=0,imgnum=img.length; i<imgnum; i++){
 tmp_img[i] = new Image();
 tmp_img[i].src = img[i];
 if(tmp_img[i].complete){
  onload_img ++;
 }else{
  tmp_img[i].onload = function(){
  onload_img ++;
  }
 }
 }
 var et = setInterval(
 function(){
  if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback
  clearInterval(et);
  callback();
  }
 },200);
}

总体实例代码点击这里本站下载.rar)。

深信本文所述对大家的javascript游戏设计有肯定的借鉴价值。

你恐怕感兴趣的小说:

  • JS写的数字拼图小游戏代码[学学参照他事他说加以考察]
  • 用js做多个小游戏平台 (一)
  • js猜数字小游戏的简易达成代码
  • js完成俄罗丝方块小游戏分享
  • JS小游戏之象棋暗棋源码详解
  • JS小游戏之宇宙战机源码详解
  • JS小游戏之仙剑翻牌源码详解
  • Nodejs完成多人同一时候在线移动鼠标的小游戏分享
  • js完结大转盘抽取奖金游戏实例
  • 兰夜七巧节丘比特射箭小游戏
  • 纯javascript模仿微信手淫小游戏

本文由王中王开奖结果发布于关于计算机,转载请注明出处:基于javascript达成句子翻牌网页版小游戏,JS小游

关键词: