<!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. PHP核心技术

    一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) <?php /** * 创建多级目录 * @param $path string 要创建的目录 * @param $m ...

  2. MongoDB入门学习(一)：MongoDB的安装和管理

    以前用MySQL数据库,整天都是写大堆大堆的SQL语句,要记住这些SQL关键字都要花好几天时间,写的蛋都爆了,当接触到MongoDB的时候,发现不用写SQL,瞬间觉得高大上,瞬间产生了学习使用它的冲动 ...

  3. SQL图像查看器 —— SQL Image Viewer

    有时候往数据库里面存储了一些图片,但是如果不写读取程序的话,就不知道存储的对不对. 或者查看SQL数据库里面二进制看不懂,这个看图片很直观的. 就需要SQL Image Viewer这么一个

  4. bitcms内容管理系统 3.1版源码发布

    开源bitcms内容管理系统采用ASP.NET MVC5+MySql的组合开发,更适应中小型系统低成本运行. bitcms的主要功能 1.重写了APS.NET MVC的路由机制.bitcms使用路由参 ...

  5. NOI导刊2010提高装备运输

    www.luogu.org/problem/show?pid=1794 挺裸的一题背包,算很基础. 可以运用的技巧是三维->二维(节省空间还能少敲一点代码 #include<iostrea ...

  6. ElasticSearch 学习记录之ES短语匹配基本用法

    短语匹配 短语匹配故名思意就是对分词后的短语就是匹配,而不是仅仅对单独的单词进行匹配 下面就是根据下面的脚本例子来看整个短语匹配的有哪些作用和优点 GET /my_index/my_type/_sea ...

  7. textarea高度自适应，随着内容增加高度增加

    $(function(){        $.fn.autoHeight = function(){            function autoHeight(elem){             ...

  8. ajax xmlhttp 局部显示另一个页面

    function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera ...

  9. Android 当打开“开发人员模式”中的“不保留活动”后，程序应当怎么保持正常执行

    Android 当打开"开发人员模式"中的"不保留活动"后,程序应当怎么保持正常执行咧. .? 在这几天,我一直在纠结这个问题.从发现,程序出现这个问题,是由于 ...

  10. gulp管理静态资源缓存

    前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,s ...