<!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. Windows 服务多语言化时读取配置文件失败的问题。

    在Installer中,按一般读取配置文件的方法(ConfigurationManager.AppSettings["CultureName"])读取不到内容. 可以这样读取: v ...

  2. mybatis实现延迟加载多对一

    1.数据库表 CREATE TABLE `country` ( `cid` ) NOT NULL AUTO_INCREMENT COMMENT '国家id', `cname` ) COLLATE ut ...

  3. NOIP2017 小凯的疑惑

    题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...

  4. Sun 与 Oracle 合并的未来

    引言 SUN 2008 初 10 亿美元收购 MySQL Oracle 2009 年 4 月 74 亿美元收购 SUN Sun 与 Oracle 合并的未来 1,如果云计算对企业来说变得越来越重要,那 ...

  5. 再说Postgres中的高速缓存(cache)

    表的模式信息存放在系统表中,因此要访问表,就需要首先在系统表中取得表的模式信息.对于一个PostgreSQL系统来说,对于系统表和普通表模式的访问是非常频繁的.为了提高这些访问的效率,PostgreS ...

  6. 《RabbitMQ Tutorial》译文 第 5 章 主题

    原文来自 RabbitMQ 英文官网的教程(5.Topics),其示例代码采用了 .NET C# 语言. In the previous tutorial we improved our loggin ...

  7. 使用Dagger2做静态注入, 对比Guice.

    Dagger 依赖注入的诉求, 这边就不重复描述了, 在上文Spring以及Guice的IOC文档中都有提及, 既然有了Guice, Google为啥还要搞个Dagger2出来重复造轮子呢? 因为使用 ...

  8. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  9. android动画介绍之 自己定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本使用方法.小伙伴们了解的怎么样了?假设还没有了解过Animation的小伙伴能够看看这篇博客 android动画介绍--Animation 实现loading动画 ...

  10. 指尖上的电商---(4).net开发solr

    这一节我们看下如何把查询数据放到server端存储,这里我们须要使用client工具来操作与服务端数据打交道,网上有好多基于.NET开发的SOLRclient,我们这里选择easynet.solr,非 ...