<!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. 两年JAVA程序员的面试总结

    前言 工作两年左右,实习一年左右,正式工作一年左右,其实挺尴尬的,高不成低不就.因此在面试许多公司,找到了目前最适合自己的公司之后.于是做一个关于面试的总结.希望能够给那些依旧在找工作的同学提供帮助. ...

  2. node.js入门必知

    目录: 一.node.js简介 1.1特点 1.2适合开发什么 1.3Node.js无法挑战老牌后台语言 二.http模块 一.node.js简介 Node.js开发服务器,数据.路由.本地关心的效果 ...

  3. 以css伪类为基础,引发的选择器讨论 [新手向]

    作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久. 经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论. 伪类:伪类对元素进行分类是基于特征(characteri ...

  4. 数组a和&a区别

    假设我们定义一个数组char a[16]; 那么a与&a分别代表什么呢?它们完全一样吗? a其实代表的是数组中首元素的地址,即a[0]的地址,&a代表的是整个数组的起始地址.我们做个测 ...

  5. Java爬虫——模拟登录知乎

    登录界面,首先随意输入一个账号,登录查看发送表单的请求 可以发现请求是Post : https://www.zhihu.com/login/phone_num 发送的表单是 _xsrf: passwo ...

  6. JAVA-----基于POI实现对Excel导入

    在日常项目开发中, 数据录入和导出是十分普遍的需求,因此,导入导出也成为了开发中一个经典的功能.数据导出的格式一般是excel或者pdf,而批量导入的信息一般是借助excel来减轻工作量,提高效率. ...

  7. POJ 2482 Stars in Your Window（线段树）

    POJ 2482 Stars in Your Window 题目链接 题意:给定一些星星,每一个星星都有一个亮度.如今要用w * h的矩形去框星星,问最大能框的亮度是多少 思路:转化为扫描线的问题,每 ...

  8. 【cogs 597】【dp】交错匹配

    597. 交错匹配 ★☆ 输入文件:crossa.in 输出文件:crossa.out 简单对照 时间限制:1 s 内存限制:128 MB [问题描写叙述] 有两行自然数. UP[1..N] . DO ...

  9. MyBatis SQL处理大于、小于号

    MyBatis mapper文件是xml文件,需要特殊字符如大于号.小于号后需要转义. 原字符 转义后字符 < < <= <= > > > >=

  10. .Net版InfluxDB客户端使用时的一些坑

    1.如果应用程序是WebAPi,则需要使用同步版的InfluDB客户端 2.如果应用程序是Winform或Console程序或Windows服务,则使用同步或异步版客户端都可以,建议用异步版 3.如果 ...