架构师_程序员_码农网

用户名  找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 15454|回复: 8

[JavaScript] JavaScript做的一个小游戏

[复制链接]
发表于 2014-11-7 22:58:39 | 显示全部楼层 |阅读模式
声明:技术有点渣   大神不要黑我   没有做按钮的处理   挂了只能刷新页面了
       下面是代码:也可以直接下载附件
  1. <html>
  2. <head>
  3.     <title></title>
  4.     <script type ="text/javascript">

  5.         //***********封装一个Tank类***
  6.         //当创建一个实例时在页面生成一个Tank
  7.         function Tank(x, y) {
  8.             this.x = x;
  9.             this.y = y;
  10.             this.shape = "~^~";
  11.             //****创建div到页面****
  12.             this.div = document.createElement("div");
  13.             this.div.style.position = "absolute";
  14.             this.div.style.width = "40px";
  15.             this.div.style.height = "40px";
  16.             this.div.style.lineHeight = "20px";
  17.             this.div.style.textAlign = "center";
  18.             this.div.style.backgroundColor = "red";
  19.             this.div.style.left = this.x + "px";
  20.             this.div.style.top = this.y + "px";
  21.             this.div.innerHTML = this.shape;
  22.             document.body.appendChild(this.div);
  23.             //*************************
  24.             this.move = function (left, top) {
  25.                 var h = window.innerHeight || document.documentElement.clientHeight;  // 浏览器内容窗口的高
  26.                 var w = document.documentElement.clientWidth;  // 宽
  27.                 this.x += left;
  28.                 this.y += top;
  29.                 if (this.x + 40 > w) {
  30.                     this.x = w - 40;
  31.                 }
  32.                 if (this.x < 0) {
  33.                     this.x = 0;
  34.                 }
  35.                 if (this.y + 40 > h) {
  36.                     this.y = h - 40;
  37.                 }
  38.                 if (this.y < 0) {
  39.                     this.y = 0;
  40.                 }
  41.                 this.div.style.left = this.x + "px";
  42.                 this.div.style.top = this.y + "px";
  43.             };
  44.             //消失的方法
  45.             this.die = function () {
  46.                 document.body.removeChild(this.div);
  47.             };
  48.         }

  49.         //****************创建*****
  50.         var arr = new Array();
  51.         var i = 0;
  52.         function createTank() {
  53.             var x = document.getElementById("xp").value;
  54.             var y = document.getElementById("yp").value;
  55.             arr[i] = new Tank(parseInt(x), parseInt(y));
  56.             startMove(i);   
  57.             i++;
  58.         }

  59.         var siArr = new Array();//记录下所有回调
  60.         function startMove(num) {
  61.                 //速度与方向**************************
  62.                 var xLen = Math.random() * 20;
  63.                 xLen = parseInt(xLen);  //5
  64.                 var yLen = Math.random() * 20;
  65.                 yLen = parseInt(yLen);  //5
  66.                 //************************
  67.                 siArr[num] = setInterval(function () {
  68.                     arr[num].move(xLen, yLen);
  69.                     if (mouseX >= arr[num].x && mouseX <= arr[num].x + 40 &&
  70.                         mouseY >= arr[num].y && mouseY <= arr[num].y + 40
  71.                     ) {

  72.                         for (var j = 0; j < siArr.length; j++) {
  73.                             clearInterval(siArr[j]);
  74.                         }
  75.                         clearInterval(si);
  76.                         alert("game over!");

  77.                     }

  78.                     var h = window.innerHeight || document.documentElement.clientHeight;  // 浏览器内容窗口的高
  79.                     var w = document.documentElement.clientWidth;  // 宽
  80.                     if (arr[num].x >= w - 40) {
  81.                         xLen = Math.abs(xLen) * (-1);
  82.                     }
  83.                     if (arr[num].x <= 0) {
  84.                         xLen = Math.abs(xLen);
  85.                     }
  86.                     if (arr[num].y >= h - 40) {
  87.                         yLen = Math.abs(yLen) * (-1);
  88.                     }
  89.                     if (arr[num].y <= 0) {
  90.                         yLen = Math.abs(yLen);
  91.                     }
  92.                 }, 10);
  93.         }


  94.         var mouseX = 0;
  95.         var mouseY = 0;
  96.         document.onmousemove = function (e) {
  97.             var ev = e || event;
  98.             mouseX =parseInt( ev.clientX);
  99.             mouseY =parseInt( ev.clientY);
  100.             document.title = "x:" + mouseX + " y:" + mouseY;
  101.         }

  102.         //*********************开始游戏
  103.         var si = null;
  104.         function startGame(v) {
  105.             i = 0;
  106.             v.disabled = true;
  107.             var time = 0;
  108.             si = setInterval(function () {
  109.                 time++;
  110.                 v.value = "时间:" + time + "秒";
  111.             }, 1000);
  112.             var n=document.getElementById("lev").value;
  113.             n=parseInt(n);
  114.             for ( ; i < n; i++) {
  115.                 arr[i] = new Tank(200, 200);
  116.                 startMove(i);
  117.             }
  118.         }
  119.     </script>
  120. </head>
  121. <body >
  122. <center>
  123. <br />看你能玩多久!!
  124. 难度:<input  type ="text" value ="10" id="lev" />
  125. <input type ="button" value="开始" onclick="startGame(this)" />
复制代码




Tank.zip

1.48 KB, 下载次数: 13, 下载积分: 威望 -1 点, 贡献 -1 点





上一篇:c#调用RunDll32.exe清理浏览器缓存和垃圾
下一篇:发几个迅雷会员!
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2014-11-7 23:17:26 | 显示全部楼层
我还是下载附件算了      游戏挺难玩的    建议大家把难度调到1  
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2014-11-7 23:20:14 | 显示全部楼层
admin 发表于 2014-11-7 23:17
我还是下载附件算了      游戏挺难玩的    建议大家把难度调到1

改源码   调整下时间试试
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2014-11-13 20:09:28 | 显示全部楼层
QQ截图20141113200908.jpg

你猜我把鼠标放在那里了?
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2014-11-13 21:15:56 | 显示全部楼层
什么游戏啊?怎么玩啊  一开始就gameover了
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2014-11-14 22:21:24 | 显示全部楼层
北城织温22度 发表于 2014-11-13 21:15
什么游戏啊?怎么玩啊  一开始就gameover了

鼠标不能被移动的Tank撞到   一撞到就挂了
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2014-11-14 22:22:10 | 显示全部楼层
admin 发表于 2014-11-13 20:09
你猜我把鼠标放在那里了?

好厉害的样子
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2014-11-14 22:22:51 | 显示全部楼层

其实,我是用的审查元素
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2014-11-14 22:23:50 | 显示全部楼层
admin 发表于 2014-11-14 22:22
其实,我是用的审查元素

万能的F12  
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2025-7-12 18:31

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表