[代码共享] Javascript

最新推荐文章于 2024-01-17 13:20:18 发布
最新推荐文章于 2024-01-17 13:20:18 发布
阅读量860 收藏
点赞数
分类专栏： DHtml 文章标签： javascript timer function table generator null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anson_ui/article/details/546106
版权

从入行以来，应用过N中编程语言，不过只要你开发系统是B/S架构，你就离不开Javascript！如果你不熟悉Javascript你一定做不好web应用！

从今日起，我会从以前的代码中，抽出一些可以重用的函数，希望给大家带来方便！

今天是第一个,一个简单的游戏！

[贪食蛇]

<!--
anson lao_an@126.com 16328244 珠海
2005.6.18 大雨
怀念8250 。。。
怀念贪食蛇 。。。
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 贪食蛇 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{font-size:12px}
table{width:300px;height:300px;border:1px #000 solid}
.fruit{
 background-color:green;
}
.dragon{
 background-color:red;
}
.normal{
 background-color:#fff;
}
</style>
</head>

<body>
本局得分:<span id="divScore" style="margin-right:155px">0</span>  你的最高分:<span style="color:Red" id="hightScore">0</span>
<table cellspacing="1" cellpadding="1" >
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
游戏速度 : <select id="selLevel" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="button" value="重新开始" οnclick="Init()"/>
</body>
</html>
<script language="JScript">

var divScore = document.getElementById("divScore");
var hightScore = document.getElementById("hightScore");
var level  ;
var table = document.getElementsByTagName("table")[0];
var timer = null;
var timer_space = 500;
var point;
var time1;

//定义龙对象
var dragon = new Object();
dragon.runed = false;
//定义龙身体
dragon.body = new Array();
//定义龙行进方向
dragon.dire = "";
//设置龙身颜色
dragon.setColor = function()
{
 for(var i=0;i<dragon.body.length;i++)
 {
  dragon.body[i].className = "dragon";
 }
}
//龙移动
dragon.move = function(pos)
{
 divScore.innerText = point * level;
 if(!((pos == "left" && dragon.dire == "right") ||
           (pos == "right" && dragon.dire == "left") ||
           (pos == "top" && dragon.dire == "bottom") ||
           (pos == "bottom" && dragon.dire == "top")))
 {
  dragon.dire = pos; 
 }
 else pos = dragon.dire;
 var bw = dragon.bumpWall(pos);
 if(bw)
 {
  if(timer != null) window.clearInterval(timer);
  alert("最后得分 : " + (point * level) + "/n运行时间 : "+ (new Date() - time1)/1000 +"秒");
  dragon.runed = false;
  if(parseInt(hightScore.innerText) < (point * level))
   hightScore.innerText = (point * level);
  reset();
  return ;
 }
 var _len = dragon.body.length;
 var _rIndex = dragon.body[0].parentNode.rowIndex;
 var _cIndex = dragon.body[0].cellIndex;
 //判断方向
 switch(pos)
 {
  case "top" :
   dragon.body.unshift(table.rows[_rIndex-1].cells[_cIndex]);
   var cell = dragon.body[0];
   if(cell.className != "fruit")
    dragon.body.pop().className = "normal";
   else fruit.setNew();
   break;
  case "right" :
   dragon.body.unshift(table.rows[_rIndex].cells[_cIndex+1]);
   var cell = dragon.body[0];
   if(cell.className != "fruit")
    dragon.body.pop().className = "normal";
   else fruit.setNew();
   break;
  case "bottom" :
   dragon.body.unshift(table.rows[_rIndex+1].cells[_cIndex]);
   var cell = dragon.body[0];
   if(cell.className != "fruit")
    dragon.body.pop().className = "normal";
   else fruit.setNew();
   break;
  case "left" :
   dragon.body.unshift(table.rows[_rIndex].cells[_cIndex-1]);
   var cell = dragon.body[0];
   if(cell.className != "fruit")
    dragon.body.pop().className = "normal";
   else fruit.setNew();
   break;
 }
 dragon.setColor();
 window.clearInterval(timer);
 timer = window.setInterval("dragon.move('"+pos+"')",parseInt(timer_space/level));
}

dragon.bumpWall = function(pos)
{
 var head = dragon.body[0];
 var result = false;
 var _rIndex = dragon.body[0].parentNode.rowIndex;
 var _cIndex = dragon.body[0].cellIndex;
 switch(pos)
 {
  case "top" :
   result = ((head.parentNode.rowIndex == 0) || dragon.isDragonBody(table.rows[_rIndex-1].cells[_cIndex]));
   break;
  case "bottom" :
   result = ((head.parentNode.rowIndex == 19) || dragon.isDragonBody(table.rows[_rIndex+1].cells[_cIndex]));
   break;
  case "left" :
   result = ((head.cellIndex == 0) || dragon.isDragonBody(table.rows[_rIndex].cells[_cIndex-1]));
   break;
  case "right" :
   result = ((head.cellIndex == 19) || dragon.isDragonBody(table.rows[_rIndex].cells[_cIndex+1]));
   break;
 }
 return result
}

dragon.isDragonBody = function(obj)
{
 for(var i=0;i<dragon.body.length;i++)
 {
  if(dragon.body[i] == obj) return true;
 }
 return false;
}

var fruit = new Object();

fruit.body = null;

fruit.setNew = function()
{
 var n = getRandom(0,400);
 var rIndex;
 var cIndex;
 if(n > 19)
 {
  rIndex = parseInt(n/19)-1;
  cIndex = (parseInt(n%19) == 0) ? 0 : parseInt(n%19);
 }
 else
 {
  rIndex = 0;
  cIndex = (n == 0) ? 0 : n;
 }
 fruit.body = table.rows[rIndex].cells[cIndex];
 var b = false;
 for(var i=0;i<dragon.body.length;i++)
 {
  if(fruit.body == dragon.body[i])
  {
   b = true;
  }
 }
 if(b)
 {
  fruit.setNew();
 }
 else
 {
  point++;
  fruit.body.className = "fruit";
  return;
 }
}

getRandom = function(l,u)
{
 var n = (u - l + 1)*Math.random() + l;
 return Math.floor(n);
}

//初始化
Init = function()
{
 time1 = new Date();
 reset();
 dragon.runed = true;
 level = parseInt(document.getElementById("selLevel").selectedIndex + 1);
 point = -1;
 dragon.body = [table.rows[19].cells[5],table.rows[19].cells[4],table.rows[19].cells[3],table.rows[19].cells[2],table.rows[19].cells[1],table.rows[19].cells[0]]
 dragon.setColor();
 timer = window.setInterval("dragon.move('right')",parseInt(timer_space/level));
 fruit.setNew();
}

document.onkeydown = function()
{
 if(!dragon.runed) return;
 switch(event.keyCode)
 {
  case 37 :
   dragon.move("left");
   break;
  case 38 :
   dragon.move("top");
   break;
  case 39 :
   dragon.move("right");
   break;
  case 40 :
   dragon.move("bottom");
   break;
 } 
}

reset = function()
{
 if(fruit.body)
 {
  fruit.body.className = "";
 }
 
 for(var i=0;i<dragon.body.length;i++)
 {
  dragon.body[i].className = "";
 }

 if(timer != null)  window.clearInterval(timer);
 divScore.innerText = "0";
}

</script>

anson_ui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
代码共享
02-22
代码共享运行yarn generate以添加新问题
JavaScript共享内存简介
cune1359的博客
07-03 2368
共享内存是JavaScript的高级功能，线程（进程的当前执行部分）可以利用共享内存 。 共享内存意味着不必在线程之间传递更新的数据，并且所有线程都可以访问和更新共享内存中的相同数据。 听起来不可爱吗？ 好吧，差不多。 在本文中，我们将看到如何在JavaScript中使用共享内存以及如何确定这是否是您真正想要的。 另请阅读： 面向对象JavaScript（OOJS）：创建对象实例的3种...
JavaScript原型数据共享与方法共享探究
流楚丶格念的博客
04-19 4116
文章目录数据共享什么样子的数据是需要写在原型中?数据共享案例原型简单写法原型方法共享 数据共享 什么样子的数据是需要写在原型中? 需要共享的数据就可以写原型中 原型的作用之一：数据共享 属性需要共享,方法也需要共享： 不需要共享的数据写在构造函数中 需要共享的数据写在原型中 下面我们看一个案例 数据共享案例 每个学生的名字，年龄，性别都是独特的，我们要设置 所有学生的身高都是188,所有人的体重都是55 所有学生都要每天写500行代码 所有学生每天都要吃一个10斤的西瓜 就可以把共有数据写到原型中 &
javascript题库
weixin_46282030的博客
08-20 3508
1. document load 和 document ready 的区别 答案： 页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数 问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响 2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行 在原生的js中不包括ready()这个方法，只有l
TypeScript与JavaScript
qq_57756904的博客
04-26 4948
有些语言根本不允许那些有缺陷的程序运行。在不运行代码的情况下检测代码中的错误称为静态检查。根据正在操作的值的种类来确定什么是错误，什么不是错误，这被称为静态类型检查。
javascript购物车实现详细代码讲解
热门推荐
小圣贤君的博客
09-27 10万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操
JavaScript 面向对象详解
qq_36081714的博客
08-09 3537
JavaScript面向对象
JavaScript基本结构
a1234556667的博客
09-20 2273
轮播图 常位于首页，用作活动推广的大图，其可以自动播放，点击左右切换按钮播放，也可以点击图片上的小圆点播放 Tab切换 用于点击不同的标签或标题，显示不同的内容 表单验证 常位于注册和登录页面，其用来在数据被送往服务器前对HTML表单中的输入数据进行验证。若输入的数据不正确，则会提示错误 什么是JavaScript JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 其常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果 Ja...
JavaScript原型Prototype详情
菜鸟教程
04-25 2625
文章来源： 学习通http://www.bdgxy.com/ 目录1、概述1.1原型是什么1.2获取原型2、原型属性2.1利用原型添加属性与方法。2.2访问原型属性原型方法3、自有属性与原型属性3.1检测自有属性或者原型属性4、isPrototypeOf()方法5、扩展内置对象6、结语1、概述 1.1原型是什么 在JavaScript中，函数是一个包含属性和方法的Function类型的对象。而原型（Prototype ）就是Function类型对象的一个属性。 在函数定义是包含了prototype属
JavaScript 快速入门手册
Java.慈祥
08-17 8598
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
Vue Mixin 代码重用与逻辑共享
最新发布
俊刚的博客
01-17 1187
深入理解Vue Mixin：代码重用与逻辑共享在Vue.js开发中，我们经常会遇到需要在多个组件中共享相同逻辑的情况。为了避免重复编写代码并提高代码的可维护性，Vue提供了一种强大的工具——Mixin。本文将深入探讨Vue Mixin的概念、实现原理以及如何使用Mixin来实现代码重用与逻辑共享。
原生javascript如何实现共享onload事件
10-15
主要介绍了原生javascript如何实现共享onload事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入理解JavaScript系列（45）：代码复用模式（避免篇）详解
10-24
主要介绍了深入理解JavaScript系列（45）：代码复用模式（避免篇）详解,本文讲解了默认模式、借用构造函数、借用构造函数并设置原型、共享原型、临时构造函数、klass等内容,需要的朋友可以参考下
javascript 时间比较实现代码
10-29
web开发中有时需要对输入框中的时间（主要是开始时间和结束时间）进行比较，网上搜索了一番，发现有不少是无效的，以下方法经小弟检验确实有效，特此共享。
javascript globalStorage类代码
12-08
和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。 作用域 globalStorage[‘z.baidu.com’] 所有z.baidu.com下面的页面都可以使用这块空间 globalStorage[‘baidu.com’] 所有baidu.com下面...
Js编写的Session类！！IE only
浴火重生
11-05 1343
//Session类function Session(){    var SessionObj = null;    this.init = function() {     SessionObj = document.createElement(input);  SessionObj.type = "hidden";  SessionObj.id = "Sessionid";  Sessio
JavaScript的event对象列表
浴火重生
11-01 1309
属性                             说明event.type             事件的类型 event.srcElement event.button event.clientX event.clientY event.offsetX event.offsetY event.altKey event.ctrlKey event.shiftlKey event.key
asp中，服务端JS如何遍历Request.ServerVariables？
浴火重生
12-07 1100
今天，有网友问我这个问题，asp中，服务端JS如何遍历Request.ServerVariables？说实话，以前的asp都使用vbs写的，从来没想过js怎么写，随即给出答案！ 如下：for(var i in Request.ServerVariables){        Response.Write(Request.ServerVariables(i));}%>运行后发现，并没有任何输出，奇怪
实时编辑表格数据！DOM
浴火重生
11-19 990
            asdfas1asdfsdf1asdfas2asdfsdf2asdfas3asdfsdf3function edit(){    var obj = ""; var txt = "";    if(event.srcElement.tagName == "TD") {     event.cancelBubble=true;  obj = event.srcElement;
JavaScript 共享成员属性
06-08
在JavaScript中，使用构造函数创建对象时，可以通过将属性和方法添加到构造函数的prototype属性上，从而实现对象之间的共享属性和方法。这种方式被称为原型链继承。 例如，以下代码使用构造函数创建了一个Person...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值