<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>坦克大战</title>

 </head>

 <body onkeydown="hero.move(event)">

 <div id="filed" style="background:#000;width:500px;height:400px;position:absolute;"></div>

 <div id="mytank" style="background:url(w.png) no-repeat;width:40px;height:40px;position:absolute;"></div>

 <input type="button" value="上">

 <input type="button" value="右" >

 <input type="button" value="下" >

 <input type="button" value="左">

 <script type="text/javascript">

 // function change(obj){

 // if(obj.value=="上"){

 // tank.style.backgroundPositionY="0px";

 // }else if(obj.value=="右"){

 // tank.style.backgroundPositionY="-40px";

 // }

 // else if(obj.value=="下"){

 // tank.style.backgroundPositionY="-80px";

 // }

 // else if(obj.value=="左"){

 // tank.style.backgroundPositionY="-120px";

 // }

 // }

 //用面向对象的方法开发，web版本的坦克大战，可以通过asdw键来控制坦克的走向

 function MyTank(x,y,direct){

 this.x=x;//坦克的横坐标

 this.y=y;//坦克的纵坐标

 this.speed=3;//速度

 //初始化

 mytank.style.left=this.x+"px";

 mytank.style.top=this.y+"px";

 mytank.style.backgroundPositionY="0px";

 //event表示按键事件

 this.move=function move(event){

 //a表示左 3

 //s表示下 2

 //d表示右 1

 //w表示上 0

 switch (event.keyCode){

 case 65:

 //a表示左

 this.x-=this.speed;

 this.direct=3;

 mytank.style.backgroundPositionY="-120px";

 break;

 case 83:

 //S表示向下 2

 this.y+=this.speed;

 this.direct=2;

 mytank.style.backgroundPositionY="-80px";

 break;

 case 68:

 //d表示右 1

 this.x+=this.speed;

 this.direct=1;

 mytank.style.backgroundPositionY="-40px";

 break;

 case 87:

 //w表示上 0

 this.y-=this.speed;

 this.direct=0;

 mytank.style.backgroundPositionY="0px";

 break;

 }

 //统一改变位置

 mytank.style.left=this.x+"px";

 mytank.style.top=this.y+"px";

 }

 }

 //创建坦克

 var hero=new MyTank(200,360,0)

 </script>

 </body>

 </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. 51Nod 1108 距离之和最小 V2 1096 距离之和最小 中位数性质

    1108 距离之和最小 V2基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注三维空间上有N个点, 求一个点使它到这N个点的曼哈顿距离之和最小,输出这个最小 ...

  2. window下phpstudy的nginx配置虚拟主机

    由于很长时间没有配置Apache,虽然说知道怎么配置nginx,但是还是花费了一些时间这次记下来下次直接用 在其他选项文件菜单中->打开配置文件->选择vhosts-conf nginx的 ...

  3. WeChat 隐私政策

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

  4. SQLMap简单尝试

    第一次完成了一个注入呢,虽然是恬不知耻的用sqlmap跑出来的 简单介绍注入时后台的数据等级,有助于后面的理解 ①可以类比成一个装着excel文件的文件夹,每一个excel文件就相当于一个数据库 ②库 ...

  5. linux crontab yum安装

    crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...

  6. 8.5 filecmp--文件和文件夹比較处理

    本模块主要提供了对文件和文件夹进行简单的比較处理,假设须要复杂的文件比較须要使用difflib库来处理. filecmp.cmp(f1, f2, shallow=True) 比較文件f1和文件f2,当 ...

  7. MySQL远程訪问的两个问题

    安装MySQL后,不能远程訪问.进行例如以下配置就可以 连接后,依旧不能连接,报例如以下错误: 1042 - Can't get hostname for your address 解决方法在my.i ...

  8. httpfs安装指南

    httpfs安装指南 安装环境 Linux maven3 jdk1.6 本地的maven源(有些依赖的jar包Cloudera已不再维护) 1.下载httfs源代码包 https://github.c ...

  9. pthread线程属性介绍

    线程属性 创建线程函数 int pthread_create (pthread_t* restrictthread,  const pthread_attr_t* restrictattr,void* ...

  10. 自己手写WEB程序框架并执行

    1.新建目录,起名MyWeb 2.目录下,新建两个目录 WEB-INF, META-INF,,还能够新建一些jsp,html文件 ,如 index.html 3在WEB-INF中必须存在一个文件WEB ...