<!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. Jersy、Jetty和Servlet

    1.Jersy框架 Jersey RESTful WebService框架是一个开源的.产品级别的JAVA框架,是JAX-RS的参考实现.Jersey提供自己的API,其API继承自JAX-RS,提供 ...

  2. 强大的MobaXterm

    MOobaXterm是一款强大的远程终端登录软件. 1.多终端分屏 2.内建SFTP文件传输(这个功能用的太爽了) 等等 功能强大,还需要继续研究

  3. 基于Node的高性能MVC框架

    赶上公司去Windows化,有一大波.net站点需要转成Node.js,于是自己就顺便琢磨一个通用的Node版MVC框架. 经过几天的努力,beta版终于面世了!因为其高性能的特点,特地命名node- ...

  4. 2017蓝桥杯省赛C/C++B（补题中）

    标题:等差素数列 2,3,5,7,11,13,....是素数序列. 类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列公差为30,长度为6. 200 ...

  5. nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:37

    一:开始Nginx的SSL模块 1.1 Nginx如果未开启SSL模块,配置Https时提示错误 1 nginx: [emerg] the "ssl" parameter requ ...

  6. Python 冒泡法排序

    def sequence(disorder='', separators=''): arrays = disorder.split(separators) def desc(): for i in r ...

  7. 小白的Python之路 day1 Python3的bytes/str之别

    原文:The bytes/str dichotomy in Python 3 Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示,二 ...

  8. Android数据绑定技二，企业级开发

    PS:上一篇文章写了Databinding的简单使用,写了一个绑定textview的示例,和绑定的一些用法,估计有的人会说,之前的写的好好的,为什么要数据绑定这样的写法呢,没办法,社会在进步,当然是怎 ...

  9. VSCode jQuery代码提示

    在VSCode中,ctrl+`打开终端: 运行命令: npm install @types/jquery --save 最后在项目中会生成: 说明安装成功! 详情可参见:链接

  10. FSharp 调用 Oracle.ManagedDataAccess.dll

    FSharp 调用 Oracle.ManagedDataAccess.dll 1.Oracle.ManagedDataAccess.dll 的下载地址.好像如今必需要注冊才干下载. 即使是 64 位系 ...