JavaScript 实例 可以看看

最新推荐文章于 2024-08-17 21:49:37 发布
最新推荐文章于 2024-08-17 21:49:37 发布
阅读量247 收藏
点赞数
分类专栏： web前台页面 文章标签： javascript function table div null border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j2ee_dev/article/details/4896836
版权

<head>
<meta content-type="text/html;charset=utf-8"/>
<style>
#table {
 position:absolute;
 left:0;
 top:0;
 z-index:6;
 width :100%;
 height:100%;
 border:"1px solid black";
}
#table td {
 width:18;
 height:18;
 background-color:yellow;
 padding:1;
}
#info {
 position:relative;
 top:-18;
 left:591;
 width :100;
 height:150;
 background-color:blue;
}
</style>
<script >
Game = {
 BlockWidth : 20,
 GameState :"pause",
 Level : 1,
 Scoure : 0,
 Option :{
  init:function(){
   this.speed = 200-(Game.Level-1)*50;
   //this.foodPositionLevel = 1;
   this.foodNumOfsucced = 10+((Game.Level-1)*5);
   this.eatDeficultLevel = 16-Game.Level;
  }
 },
 Map : {
  init : function(left,top,width,height,foodNum){
   this.food = [];
   this.foodNum = foodNum;
   this.left = left;
   this.top = top;
   this.width = width;
   this.height = height;
   this.instance = document.createElement("div");
   this.instance.setAttribute("id","map");
   this.instance.style.position = "absolute";
   this.instance.style.left = left;
   this.instance.style.top = top;
   //this.instance.style.offsetWidth = width;
   //this.instance.style.offsetHeight = height;
   this.instance.style.width = width;
   this.instance.style.height = height;
   this.instance.style.backgroundColor = "gray";
   document.getElementById("adiv").appendChild(this.instance);
   var table = document.createElement("table");
   table.setAttribute("id","table");
   var frag = document.createDocumentFragment();
   frag.appendChild(table);
   for(var i = 0;i<600;i+=Game.BlockWidth){
    var row = table.insertRow(-1);
    for(var j =0;j<600;j+=Game.BlockWidth){
     var cell = row.insertCell(-1);
     //cell.innerHTML = "";
    }
   }
   this.instance.appendChild(frag);
  },
  createOrRefreshFood: function(){
   var ran;
   var tempRan;
   var foodPosLeft,foodPosTop;
   for(var i=0;i<this.foodNum;i++){
    if(!this.food[i]){
     this.food[i] = Game.Food.create(Game.BlockWidth-2,Game.BlockWidth-2,"red");
     this.instance.appendChild(this.food[i]);
    }
    //写了个关数越高,食物越靠近边沿的算法
    ran = Math.random();
    if(parseInt(ran*100) % 2 == 0 ){
     tempRan = (1/(Game.Level*2))*ran;
    }else{
     tempRan = 1-(1/(Game.Level*2))*ran;
    }
    if(parseInt(ran*1000) % 3 == 0 ){
     foodPosLeft = tempRan*(this.width-20) + this.left;
     foodPosLeft = foodPosLeft - foodPosLeft%20
     foodPosTop = ran*(this.height-20) + this.top;
     foodPosTop = foodPosTop - foodPosTop%20;
    }else if(parseInt(ran*1000) % 3 == 1){
     foodPosLeft = ran*(this.width-20) + this.left;
     foodPosLeft = foodPosLeft - foodPosLeft%20;
     foodPosTop = tempRan*(this.height-20) + this.top;
     foodPosTop = foodPosTop - foodPosTop % 20;
    }else{
     foodPosLeft = tempRan*(this.width-20) + this.left;
     foodPosLeft = foodPosLeft - foodPosLeft%20;
     foodPosTop = tempRan*(this.height-20) + this.top;
     foodPosTop = foodPosTop - foodPosTop % 20;
    }
    this.food[i].style.left = foodPosLeft;
    this.food[i].style.top = foodPosTop;
   }
  }
 },
 Food : {
  create : function(width,height,color){
     this.width = width;
     this.height = height;
     this.color = color;
     this.instance = document.createElement("div");
     this.instance.style.position = "absolute";
     this.instance.style.zIndex = "9";
     this.instance.style.width = width;
     this.instance.style.height = height;
     this.instance.style.backgroundColor = color;
     return this.instance;
    }
 },
 Snack : {
  init: function(defaultFoodNum){
   this.foodNum = defaultFoodNum;
   this.foodNumOfEat = 0;
   this.instance = [];
   this.derect = -1; // -1 = left,1=right,-2=up,2=down
   this.instance[0] = document.createElement("div");
   this.instance[0].style.position = "absolute";
   this.instance[0].style.backgroundColor = "black";
   this.instance[0].style.zIndex = "9";
   this.instance[0].style.width = Game.BlockWidth;
   this.instance[0].style.height = Game.BlockWidth;
   this.instance[0].style.left = 200;
   this.instance[0].style.top = 200;
   this.tail = null;
   this.instance[0].style.border = "2px  solid   white";
   Game.Map.instance.appendChild(this.instance[0]);
   for(var i=1;i<this.foodNum;i++){
    this.instance[i] = this.instance[0].cloneNode(true);
    this.instance[i].style.width = Game.BlockWidth;
    this.instance[i].style.height = Game.BlockWidth;
    this.instance[i].style.left = (parseInt(this.instance[i-1].style.left)+ Game.BlockWidth);
    this.instance[i].style.top = 200;
    this.instance[i].style.backgroundColor = "black";
    this.instance[i].style.border = "2px  solid   white";
    //this.instance[i].style.borderColor = "red";
    Game.Map.instance.appendChild(this.instance[i]);
   }
  },
  move:function(derect){
   if(derect + this.derect!=0){
    this.derect = derect;
   }
   var head = {};
   head.left = parseInt(this.instance[0].style.left);
   head.top = parseInt(this.instance[0].style.top);
   switch (this.derect){
     case -1:{
      this.instance[0].style.left = parseInt(this.instance[0].style.left)-Game.BlockWidth;
      break;
      }
     case 1:{
      this.instance[0].style.left = parseInt(this.instance[0].style.left)+Game.BlockWidth;
      break;
     }
     case -2:{
      this.instance[0].style.top = parseInt(this.instance[0].style.top)-Game.BlockWidth;
      break;
     }
     case 2:{
      this.instance[0].style.top = parseInt(this.instance[0].style.top)+Game.BlockWidth;
      break;
     }
    }
   if(this.tail!=null){
     this.foodNum++;
   }
   if(this.foodNum>1){
    for(var i=this.foodNum-1;i>1;i--){
     this.instance[i].style.left = this.instance[i-1].style.left;
     this.instance[i].style.top = this.instance[i-1].style.top;
    }
    if(this.tail!=null){
     Game.Map.instance.appendChild(this.tail);
     this.tail = null;
    }
    this.instance[1].style.left = head.left;
    this.instance[1].style.top = head.top;
   }
   if(this.isFull()){
    alert("恭喜您,顺利闯过第"+Game.Level+"关");
    clearInterval(Game.timing);
    if(Game.Level>5){
     alert("you win!");
    }else{
     Game.Level++;
     $("act").innerHTML = Game.Level;
     Game.Option.init();
    }
   }else if(this.isDead()){
    clearInterval(Game.timing);
    window.onkeydown = null;
    alert("you fail");
   }else{
    this.eat();
   }
  },
  eat : function(){
   var map = Game.Map;
   var head = this.instance[0];
   for(var i=0;i<map.food.length;i++){
    if(Math.abs(parseInt(this.instance[0].style.left)-parseInt(map.food[i].style.left))<=Game.Option.eatDeficultLevel
     && Math.abs(parseInt(this.instance[0].style.top)-parseInt(map.food[i].style.top))<=Game.Option.eatDeficultLevel) {
     //alert("eat!");
     this.tail = this.instance[this.instance.length] = this.instance[0].cloneNode(true); 
     var foodEated = map.food[i];
     for(var j=i+1;j<map.food.length;j++){
      map.food[j-1] = map.food[j];
     }
     map.food.length--;
     foodEated.parentNode.removeChild(foodEated);
     this.foodNumOfEat++;
     //alert(Game.Scoure);
     Game.Scoure = Game.Scoure + (100*Game.Level);
     //alert($("scoure"));
     $("scoure").innerHTML = ""+Game.Scoure;
     break;
    }
   }
   if(map.food.length<=0){
    map.createOrRefreshFood(map.foodNum);
   }
  },
  isFull : function(){
   //alert(this.foodNumOfEat);
   //alert(Game.foodNumOfsucced);
   return this.foodNumOfEat >= Game.Option.foodNumOfsucced;
  },
  isDead : function(){
   var map = Game.Map;
   if(
    parseInt(this.instance[0].style.left) < map.left
    || parseInt(this.instance[0].style.left) >= (map.left+map.width)
    || parseInt(this.instance[0].style.top) < map.top
    || parseInt(this.instance[0].style.top) >= (map.top + map.height) ) {
    return true;
    }
   for(var i=1;i<this.foodNum;i++){
    if(this.instance[0].style.left == this.instance[i].style.left
     && this.instance[0].style.top == this.instance[i].style.top){
      return true; 
     }
   }
  }
 },
 GameStart :function(level){
  this.Map.init(0,0,600,600,1);
  this.Map.createOrRefreshFood();
  this.Snack.init(6);
  this.Option.init(level);
  var gameItsSelf = this;
  //if(!window.onkeydown){
  // window.onkeydown = document.body.onkeydown;
  //}
  //alert(document.body.onkeydown);
  window.onkeydown = document.body.onkeydown = function(event){
   event = window.event||event;
   var keyCode = event.keyCode;
   //alert(keyCode);
   if(keyCode==32){
    //alert("暂停");
    if(Game.GameState=="pause"){
     Game.GameState = "alive";
     window.clearInterval(Game.timing);
     Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,Game.Snack.derect),Game.Option.speed);
    }else{
     Game.GameState = "pause";
     window.clearInterval(Game.timing);
    }
   }else if(Game.GameState =="alive"){
    var tempDirect;
    switch (keyCode) {
     case 37:{
      //$("debug").innerHTML +="X";
      tempDirect = -1;
      if(tempDirect!=Game.Snack.derect){
       window.clearInterval(Game.timing);
       Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
      }
      break;
      }
     case 38:{
      //$("debug").innerHTML +="y";
      tempDirect = -2;
      if(tempDirect!=Game.Snack.derect){
       window.clearInterval(Game.timing);
       Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
      }
      break;
      }
     case 39:{
      tempDirect = 1;
      if(tempDirect!=Game.Snack.derect){
       window.clearInterval(Game.timing); 
       Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
      }
      break;
      }
     case 40: {
      tempDirect = 2;
      if(tempDirect!=Game.Snack.derect){
       window.clearInterval(Game.timing);
       Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
      }
      break;
      }
     default :
      break;
    }
   }
  }
 }
}
function bindParamsToFun(obj,fun){
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(){
 fun.apply(obj,args);
 };
}
function $(id){
 return document.getElementById(id);
}
window.onload = function(){
 Game.GameStart();
 }
//window.onload = function(){
// alert(document.getElementById("theBody"));
//}
</script>
</head>
<body id="theBody">
 <div id="adiv" width="1000" height="1000">
  <div id="info">
   <table>
    <tr>
     <td>关数 :</td>
     <td><span id="act">0</span></td>
    </tr>
    <tr>
     <td>分数 :</td>
     <td><span id="scoure">0</span></td>
    </tr>
   </table>
  </div>
 </div>
</body>

J2EE_dev
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实例教程
06-22
JavaScript实例教程着重于通过具体实例来讲解JavaScript编程中的关键概念和编程技巧。本次我们将围绕以下几个重要知识点展开详细介绍。 首先，事件处理是JavaScript中不可或缺的一部分。在用户与网页交互时，浏览器...
JavaScript 拖拽实例代码
10-21
首先，让我们来看看使用纯JavaScript实现拖拽的基本步骤和原理。拖拽主要涉及三个事件：`mousedown`、`mousemove`和`mouseup`。 - `mousedown`事件用于初始化拖拽动作，它会在用户按下鼠标按钮时触发。 - `...
JavaScriptwangyetexiao.rar_javascript 实例_网页特效
09-22
首先，我们来看"javascript_实例"这个标签。实例是学习任何编程语言的最佳途径，因为它们直观地展示了如何将理论知识转化为实际应用。在JavaScript中，实例可能包括但不限于：鼠标悬停效果、滑动门导航、图片轮播、...
JavaScript闭包实例讲解
10-26
JavaScript中的闭包是一种强大的特性，它允许内部函数访问并操作其外部函数的变量，即使外部函数已经执行完毕。...在实际开发中，理解并熟练运用闭包，可以帮助我们编写出更加高效和健壮的JavaScript代码。
JavaScript对象反射用法实例
10-24
本文将通过实例分析来探讨JavaScript对象反射的具体用法，包括对DOM对象和自定义对象的反射。 首先，我们来看一下DOM对象的反射用法。DOM（文档对象模型）是JavaScript操作网页内容的基础，它允许脚本动态地读取和...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 299
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 323
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 948
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1123
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
weixin_42348009的博客
08-14 174
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 968
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 570
NVDLA专题4：具体模块介绍——Convolution DMA
一些有趣的XSS注入GAME
最新发布
qq_67758645的博客
08-17 648
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 533
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
C#中Newtonsoft.Json 库的使用
weixin_64532720的博客
08-14 241
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集，标准 ECMA-262 第三版 - 1999 年 12 月。JSON 格式的数据由键值对组成，数据以文本形式存储和交换。
Javascript嵌套函数的调用
Cc040909的博客
08-17 340
闭包的嵌套函数就不同了，由于有两个函数，调用栈就标记为1， 表示内部还有函数，这个函数不知道什么时候才执行，所以js引擎就把他保存在内存中了。恰好第一个函数和第二个函数执行的时候，眼睛观察到的调用是看不到对象，所以执行的是默认绑定，都默认绑定在全局对象window上(浏览器环境)。上面这个总结的过程非常微妙，细节就在于嵌套的函数的分部执行过程，尽管内部函数嵌套在外部函数内，但是外部函数并没有影响内部函数的权利，内部函数的执行是不受外部函数控制的。外部函数和内部函数是两个不同的事件循环位置，独立调用的，
基于vue框架的SSM基于B_S的毕业设计题目管理系统的设计与实现ij0q7（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-13 737
在高等教育体系中，毕业设计作为学生综合运用所学知识和技能，解决实际问题的重要环节，其管理过程的高效性和透明度直接影响到学生的培养质量和学校的教学管理水平。随着信息技术的快速发展，开发一套基于Web的毕业设计题目管理系统，实现题目申报、审核、分配、进度跟踪等流程的信息化管理，已成为提升毕业设计管理效率和质量的重要途径。每个步骤都需要仔细配置和测试，以确保系统的稳定性和高效性。[6]师明,曾丹.基于Vue.js和Spring Boot的校招日记系统[J].工业控制计算机,2020,33(01):95-97.
JavaScript基础（三）BOM、DOM模型
weixin_68441705的博客
08-14 267
BOM ：Browser Object Model 浏览器对象模型window：screen：屏幕history：访问历史记录location:访问地址，url。
发票查验接口哪个好？如何JavaScript集成发票识别+查验接口
weixin_41711744的博客
08-14 317
选择发票查验接口时，应综合考虑查验准确度、响应速度、日志留存能力以及是否支持批量识别和自动分类等因素。进项发票管理比较麻烦，需要手工把发票信息一张一张入账，对财务是一个比较大的工作量，而发票识别+发票查验接口功能让财务人员的工作起到了事半功倍的效果。发票识别+发票查验API，自主识别核心技术，识别速度快、识别准确率高，发票查验接口，实时联网核验发票的真伪，返回为真的结果还可返回全票面信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值