1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>坦克大战</title>
  6.  
  7.  </head>
  8.  <body onkeydown="hero.move(event)">
  9.  <div id="filed" style="background:#000;width:500px;height:400px;position:absolute;"></div>
  10.  <div id="mytank" style="background:url(w.png) no-repeat;width:40px;height:40px;position:absolute;"></div>
  11.  <input type="button" value="上">
  12.  <input type="button" value="右" >
  13.  <input type="button" value="下" >
  14.  <input type="button" value="左">
  15.  <script type="text/javascript">
  16.  // function change(obj){
  17.  // if(obj.value=="上"){
  18.  // tank.style.backgroundPositionY="0px";
  19.  // }else if(obj.value=="右"){
  20.  // tank.style.backgroundPositionY="-40px";
  21.  // }
  22.  // else if(obj.value=="下"){
  23.  // tank.style.backgroundPositionY="-80px";
  24.  // }
  25.  // else if(obj.value=="左"){
  26.  // tank.style.backgroundPositionY="-120px";
  27.  // }
  28.  // }
  29.  //用面向对象的方法开发，web版本的坦克大战，可以通过asdw键来控制坦克的走向
  30.  function MyTank(x,y,direct){
  31.  this.x=x;//坦克的横坐标
  32.  this.y=y;//坦克的纵坐标
  33.  this.speed=3;//速度
  34.  //初始化
  35.  mytank.style.left=this.x+"px";
  36.  mytank.style.top=this.y+"px";
  37.  mytank.style.backgroundPositionY="0px";
  38.  //event表示按键事件
  39.  this.move=function move(event){
  40.  //a表示左 3
  41.  //s表示下 2
  42.  //d表示右 1
  43.  //w表示上 0
  44.  switch (event.keyCode){
  45.  case 65:
  46.  //a表示左
  47.  this.x-=this.speed;
  48.  this.direct=3;
  49.  mytank.style.backgroundPositionY="-120px";
  50.  break;
  51.  case 83:
  52.  //S表示向下 2
  53.  this.y+=this.speed;
  54.  this.direct=2;
  55.  mytank.style.backgroundPositionY="-80px";
  56.  break;
  57.  case 68:
  58.  //d表示右 1
  59.  this.x+=this.speed;
  60.  this.direct=1;
  61.  mytank.style.backgroundPositionY="-40px";
  62.  break;
  63.  case 87:
  64.  //w表示上 0
  65.  this.y-=this.speed;
  66.  this.direct=0;
  67.  mytank.style.backgroundPositionY="0px";
  68.  break;
  69.  }
  70.  //统一改变位置
  71.  mytank.style.left=this.x+"px";
  72.  mytank.style.top=this.y+"px";
  73.  }
  74.  }
  75.  //创建坦克
  76.  var hero=new MyTank(200,360,0)
  77.  </script>
  78.  </body>
  79.  </html>

例子：web版坦克大战1.0的更多相关文章

  1. （java项目）坦克大战 2.0

    这个版本,只能算是一个雏形,把最基本的东西给完成了,不过,后面可添加的也不多.有一点,还是想去实现,那就是敌方坦克自己寻找对手!也就是游戏AI. emmm, 什么时候可以了解一下这个AI.顺便学学py ...

  2. 【java版坦克大战---准备篇】 java 绘图

    要写坦克大战当然要先画出坦克.java画图是基础. package com.game; import java.awt.*; import javax.swing.*; public class Pr ...

  3. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  4. 【 java版坦克大战--绘图技术】 绘制坦克

    通过上一节,我们学会的用java绘图.那现在就用java绘制自己坦克. 首先通过分析坦克由这几部分组成.如图 各个部件的长宽如图.15,10为圆心. /** * 坦克游戏的1.0版 * 1.画出坦克 ...

  5. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  6. 【 java版坦克大战--事件处理】 让坦克动起来--事件处理的准备

    要能够控制坦克运动,必须用到事件处理的知识. 事件处理的一个demo. /** * 事件处理机制:委派事件模型.指当事件发生的时候,产生事件的对象(事件源),会把此 * "消息"传 ...

  7. 坦克大战-C语言-详注版

    代码地址如下:http://www.demodashi.com/demo/14259.html 坦克大战-C语言-详注版 概述 本文详述了C语言版坦克大战游戏的原理以及实现方法,对游戏代码进行了详细的 ...

  8. Java小项目--坦克大战（version1.0）

    Java小项目--坦克大战<TankWar1.0> 这个小项目主要是练习j2se的基础内容和面向对象的思想.项目实现了基本的简单功能,我方一辆坦克,用上下左右键控制移动方向,按F键为发射炮 ...

  9. Java__线程---基础知识全面实战---坦克大战系列为例

    今天想将自己去年自己编写的坦克大战的代码与大家分享一下,主要面向学习过java但对java运用并不是很熟悉的同学,该编程代码基本上涉及了java基础知识的各个方面,大家可以通过练习该程序对自己的jav ...

随机推荐

  1. PHP扩展开发 第一课 为什么要写扩展及hello world

    PHP扩展开发其实很简单.那为什么要扩展开发呢. 这里咱们以实际的案例进行对比. 第一步,进入 php源码包   http://www.php20.com/forum.php?m ... =159&a ...

  2. php结合redis实现高并发下的抢购、秒杀功能 (转载)

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如何解决库存的正确减少("超卖"问题) 对于第一个问题,已经很容易想到 ...

  3. System.Security.Cryptography.RSA.FromXmlString 系统找不到指定的文件和X509读取证书文件系统找不到指定的文件异常

    前言: 最近公司增加服务器,在新增加的服务器中发现一些问题. 1.应用程序在读取证书文件中出现"系统找不到指定的文件."异常,但是已经确认证书文件存在.本地测试也可以读取,就在新增 ...

  4. SketchMaster 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  5. 分享Sql Server 2008 r2 数据备份，同步服务器数据（一.本地备份）

    最近在部署一个系统,处于数据安全的考虑,因此对相应的数据库服务器定时备份,以及数据同步到备份服务上.之前在另外的一个项目中也做过相应的操作,但是操作都是按照查找到的文章一步一步的操作,碰到一些细节问题 ...

  6. Django中多表查询思路

    需求: 1.有一张文章表和一张评论表 2.两张表的关系是一对多 3.规则:若是有新评论,则将对应的文章置顶,若是有新文章则将新文章置顶. 思路: 在文章表中增加一个最后评论时间的字段.然后采用分组排序 ...

  7. 游戏服务端中使用Servlet和Java注解的一个好设计

    SNS类游戏基本都是使用HTTP短连接,用Java来开发服务端时能够使用Servlet+Tomcat非常轻松的架构起服务端来.在这里介绍一种使用Servlet比較好的一种设计,我也见过非常多基于HTT ...

  8. Java的流程控制结构，细节详解

    位运算符 &与 |或 ^异或 <<左移 >>右移 >>>无符号右移  ~取反 注意:位运算是针对整数运算的 int i = 6,j = 10; 方式一 ...

  9. effective java学习笔记之不可实例化的类

    在没有显式声明一个类的构造方法时,编译器会生成默认的无参构造方法,在设计工具类时,我们通常将方法设置成静态方法,以类名.方法名的形式调用,此时这个类就没有必要创建实例,我们知道抽象类不可以被实例化,但 ...

  10. Python之Metaclass详解，Python之元类

    本人Java程序员一枚,这几天闲来无事就自学了下Python,学到Metaclass感觉有点迷惑,就在网上查相关资料,在栈溢出(stackoverflow)网站上看到一个关于metaclass的回答, ...