出征文字游戏制作（localstore缓存应用）

最新推荐文章于 2022-03-01 10:05:24 发布

命名不规范者

最新推荐文章于 2022-03-01 10:05:24 发布

阅读量132

点赞数 1

文章标签： localstore缓存 js函数计时器

本文链接：https://blog.csdn.net/qq_42275455/article/details/82595151

版权

npc1.html出征等待界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #contain{
            left: 200px;
            top: 50px;
            position:absolute;
            width: 800px;
            height: 300px;
            border: 1px solid green;
        }
        #top{
            /*float: left;*/
            position: relative;
            width: 800px;
            height: 200px;
            background-color: red;
        }
        #bottom{
            /*float: left;*/
            position:relative;
            width: 800px;
            height: 100px;
            background-color: yellow;

        }
        .npc{
            margin-top: 40px;
            margin-left: 55px;
            float: left;
            width: 90px;
            height: 120px;
            background-color: blue;
            border: 1px solid green;
            border-radius:5px 5px 5px 5px; 
            text-align: center;
            line-height:120px;
        }
        #npa1{
            margin-top: 20px;
            margin-left: 85px;
            float: left;
            width: 20px;
            height: 20px;
            border: 1px solid green;
            border-radius:5px 5px 5px 5px;
        }
        #npa2,#npa3,#npa4,#npa5{
            margin-top: 20px;
            margin-left: 125px;
            float: left;
            width: 20px;
            height: 20px;
            border: 1px solid green;
            border-radius:5px 5px 5px 5px;
        }
        p{
            position: relative;
            display:block;
        }
        #wz1{
            float: left;
            margin-left:85px;
        }
        #wz2,#wz3,#wz4,#wz5{
            float: left;
            margin-left:133px;
        }
        #an{
            margin-left: 550px;
            margin-top: 400px;
            width: 75px;
            height: 50px;
            border-radius:5px 5px 5px 5px;
        }
        #anqx{
            position:absolute;
            top: 20px;
            left: 5px;
            width: 70px;
            height: 70px;
            border-radius:5px 5px 5px 5px;
        }
        #anfx{
            position:absolute;
            top: 20px;
            left: 725px;
            width: 70px;
            height: 70px;
            border-radius:5px 5px 5px 5px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="top">
            <div class="npc" id="npc1">甲</div>
            <div class="npc" id="npc2">乙</div>
            <div class="npc" id="npc3">丙</div>
            <div class="npc" id="npc4">丁</div>
            <div class="npc" id="npc5">戊</div>
        </div>
        <div id="bottom">
            <input class="npa" id="npa1" type="checkbox" name="test" value="1">
            <input class="npa" id="npa2" type="checkbox" name="test" value="2">
            <input class="npa" id="npa3" type="checkbox" name="test" value="3">
            <input class="npa" id="npa4" type="checkbox" name="test" value="4">
            <input class="npa" id="npa5" type="checkbox" name="test" value="5">
            <p id="wz1">甲</p>
            <p id="wz2">乙</p>
            <p id="wz3">丙</p>
            <p id="wz4">丁</p>
            <p id="wz5">戊</p>
            <input id="anqx" type="button" value="全部出发" onclick="going()">
            <input id="anfx" type="button" value="休息吧" onclick="sleeping()">
        </div>
    </div>
    <input id="an" type="button" value="出征！" onclick="go()">
    <script type="text/javascript" src="h.js"></script>
<script type="text/javascript">
    // var toop=document.getElementById('top');
    // var npc1=toop.children[0];
    // // console.log(toop);
    // // console.log(npc1);
    // var npc2=toop.children[1];
    // var npc3=toop.children[2];
    // var npc4=toop.children[3];
    // var npc5=toop.children[4];
    // var bot=document.getElementById('bottom');
    // var npa1=bot.children[0];
    // // console.log(npa1);
    // var npa2=bot.children[1];
    // var npa3=bot.children[2];
    // var npa4=bot.children[3];
    // var npa5=bot.children[4];
    // var anqx=document.getElementById('anqx');
    // var anfx=document.getElementById('anfx');
    // var an=document.getElementById('an');
    function go(k){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            {
                check_val.push(obj[k].value);
        storage.set(k,obj[k].value);
            }
    }
    alert(check_val+"即将出征");
    window.location.href="npc2.html";
}
function sleeping(k){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked){}
            else{
                check_val.push(obj[k].value);
        var npc={name:'k',value:'obj[k].value'}
        storage.set(k,obj[k].value);
            }
    }
    alert(check_val+"即将出征");
    window.location.href="npc2.html";
}
function going(k){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
                check_val.push(obj[k].value);
        var npc={name:'k',value:'obj[k].value'}
        storage.set(k,obj[k].value);
    }
    alert(check_val+"即将出征");
    window.location.href="npc2.html";
}
</script>
</body>
</html>

npc2.html出征界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .npc{
            margin-top: 20px;
            margin-left: 55px;
            /*float: left;*/
            width: 90px;
            height: 120px;
            background-color: blue;
            border: 1px solid green;
            border-radius:5px 5px 5px 5px; 
            text-align: center;
            line-height:120px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript">
    if (storage.get(0)==1) {//甲
         var div1 = document.createElement('div');
         div1.className = 'npc';
         document.body.appendChild(div1);
         div1.innerHTML="甲"
         var num=55;
         var timer=null;
         window.onmouseover=function(){

            if (num>1000) {clearInterval(timer);}
            else{
                num++;
            div1.style.marginLeft=num+"px";}

         }
         timer=setInterval(window.onmouseover,10);
    }
    if (storage.get(1)==2) {//乙
        var div2 = document.createElement('div');
         div2.className = 'npc';
         document.body.appendChild(div2);
         div2.innerHTML="乙"
          var num=55;
         var timer=null;
         window.onmouseover=function(){

            if (num>1000) {clearInterval(timer);}
            else{
                num++;
            div2.style.marginLeft=num+"px";}

         }
         timer=setInterval(window.onmouseover,10);
    }
    if (storage.get(2)==3) {//丙
        var div3 = document.createElement('div');
         div3.className = 'npc';
         document.body.appendChild(div3);
         div3.innerHTML="丙"
          var num=55;
         var timer=null;
         window.onmouseover=function(){

            if (num>1000) {clearInterval(timer);}
            else{
                num++;
            div3.style.marginLeft=num+"px";}

         }
         timer=setInterval(window.onmouseover,10);
    }
    if (storage.get(3)==4) {//丁
        var div4 = document.createElement('div');
         div4.className = 'npc';
         document.body.appendChild(div4);
         div4.innerHTML="丁"
          var num=55;
         var timer=null;
         window.onmouseover=function(){

            if (num>1000) {clearInterval(timer);}
            else{
                num++;
            div4.style.marginLeft=num+"px";}

         }
         timer=setInterval(window.onmouseover,10);
    }
    if (storage.get(4)==5) {//戊
        var div5 = document.createElement('div');
         div5.className = 'npc';
         document.body.appendChild(div5);
         div5.innerHTML="戊"
          var num=55;
         var timer=null;
         window.onmouseover=function(){

            if (num>1000) {clearInterval(timer);}
            else{
                num++;
            div5.style.marginLeft=num+"px";}

         }
         timer=setInterval(window.onmouseover,10);
    }
    storage.clear()
</script>
</body>
</html>

h.js关于页面间数据传输的记录（页面间的数据通过缓存实现交互）

 //获取元素方法（var out=$('.out')[0]）
//  function $(string){
//    var tag=string.charAt(0);
//    var ele=null;
//    switch(tag){
//        case ".":
//         ele=document.getElementsByClassName(string.slice(1))
//         break;
//        case "#":
//         ele=document.getElementById(string.slice(1))
//         break;
//        default:
//         ele=document.getElementsByTagName(string);
//         break;
//    }
//    return  ele;
// }
//缓存localStorage（注释为部分使用方法）
// var npc={name:'wangyi',hp:100}
//   storage.set('npc',npc);
//   storage.set('npc2','1');
//   storage.set('npc3','2');
//   console.log(storage.getAllKey());
//   console.log(storage.get('npc'));
  // storage.clear()
var storage={
    obj:window.localStorage?window.localStorage:null,
    get:function(key){
      var result=this.obj.getItem(key);
      if (JSON.parse(result)) {
        result=JSON.parse(result)
      }
      return result;
    },
    set:function(key,value){
      if (typeof(value)=='object') {
        value=JSON.stringify(value)
      }
      this.obj.setItem(key,value)
    },
    clear:function(key){
      if (key) {
        this.obj.removeItem(key)
      }else{
        this.obj.clear();
      }
    },
    getAllKey:function(){
      var keys=[];
      for (var i = 0; i < this.obj.length; i++) {
        keys.push(this.obj.key(i))
      }
      return keys;
    }
  }
  //通过具体的item获取cookie值
  //cookie表示要查询cookie字符串
  //key表示要查询的属性
  // function getCookie(key){
  //   var array=document.cookie.split(",");
  //   for(var i=0;i<array.length;i++){
  //     var tmp=array[i].split("=");
  //     if (tmp[0]==key) {
  //       return tmp[1];
  //     }
  //   }
  // }
  // //添加cookie
  // function addCookie(key,value,time){
  //   var day=time?time:10;
  //   var date=new Date();
  //   date.setTime(date.getTime()+day*24*3600*1000);
  //   document.cookie=key+"="+value+";expires="+date.toGMTString();
  // }
  // //删除cookie
  // function removeCookie(key){
  //   var date=new Date();
  //   date.setTime(date.getTime()-1000);
  //   document.cookie=key+"=''";expires="+date.toGMTString();"
  // }
  //ajax传输数据方法
  //ajax.php
  //<?php 
//get方法
// $ps=$_GET['ps'];
// $us=$_GET['us'];
// $arr=[];
// if ($us=='wangyi') {
//  $arr['msg']='用户名已存在';
//     $arr['err']=0;
// }else{
//  $arr['msg']='用户名可用';
//     $arr['err']=-1;
// }
// echo json_encode($arr);



//post方法
// $ps=$_POST['ps'];
// $us=$_POST['us'];
//  $arr=[];
// if ($us=='wangyi') {
//  $arr['msg']='用户名已存在';
//     $arr['err']=0;
// }else{
//  $arr['msg']='用户名可用';
//     $arr['err']=-1;
// }
// echo json_encode($arr);



//post（json）方法
// $josn=file_get_contents("php://input");
// $obj=json_decode($josn,true);//true解析为数组，flase解析为php对象
// $us=$obj['us'];
// $arr=[];
// if ($us=='wangyi') {
//   $arr['msg']='用户名已存在';
//     $arr['err']=0;
// }else{
//   $arr['msg']='用户名可用';
//     $arr['err']=-1;
// }
// echo json_encode($arr,true);


//  ?>
  // var Ajax={
  //   //get方法
  //  get:function(url,date,callback){
  //    var http=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP");
  //    // console.log(url);
  //    var date=url.indexOf('?')==-1?"?"+params(date):params(date)
  //    var url=url+date;
  //    http.open("GET",url,true);
  //    http.send(null);
  //    http.onreadystatechange=function(){
  //  if (http.readyState==4 && http.status==200)
  //  {
  //    // 从服务器获取数据
  //    callback(http.response);
  //  }
  // }
  //  },
  //   // post方法
  //   post:function(url,date,callback){//改为json方法时只有两处变化
  //     var http=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP");
  //     http.open("POST",url,true);
  //     // http.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")//表单
  //     http.setRequestHeader("Content-Type","application/json;")//json方法

  //     http.onreadystatechange=function(){
  //   if (http.readyState==4 && http.status==200)
  //   {
  //     // 从服务器获取数据
  //     callback(http.response);
  //   }
  // }
  // // http.send(date);//表单方法
  //     http.send(JSON.stringify(date));//json方法
  //   }
  // }
  // // get方法的params参数函数
  // function params(date){
  //   var arr=[];
  //   for (k in date) {
  //     arr.push(k+'='+date[k]);
  //   }
  //   return arr.join("&");
  // }
   //get方法获取页面数据并判断（失去焦点时判断）；下例中date数据较短，直接写在Ajaxget函数组中
 //    function checkus(obj){
  //  var url="http://localhost/8.3-4/test%20.php";
  //     // var date={us:'wangyi',ps:'123'};
  //     // Ajax.get(url,date,function())
  //     Ajax.get(url,{us:obj.value},function(res){
  //      var jsonstring=res;
  //      console.log(JSON.parse(jsonstring))
  //     })
  // }
  //post方法获取页面数据并判断（失去焦点时判断）；下例中date数据较短，直接写在Ajaxget函数组中
  // var span=document.getElementsByTagName('span')[0];
  //  function checkus(obj){//改为json方法时只有一处变化
  //   var url="http://localhost/8.3-4/test%20.php";
  //     // var date={us:'wangyi',ps:'123'};
  //     // Ajax.get(url,date,function())
  //     // Ajax.post(url,"us="+obj.value,function(res){//post方法
  //        Ajax.post(url,{us:obj.value},function(res){//post中的json传输方法
  //       var jsonstring=res;
  //       var obj=JSON.parse(jsonstring);
  //       if (obj.err==0) {
  //         span.innerHTML=obj.msg;
  //       }
  //       else{
  //         span.innerHTML=obj.msg;
  //       }
  //     })
  // }

准备页面内容

缓存中所存数据，如需则要注释storage.clear()

结果图

命名不规范者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
出征文字游戏制作（localstore缓存应用）

npc1.html出征等待界面&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &a
复制链接

扫一扫