让小球动起来，根据键盘的W(上)，D(右)，S（下），A（左）；键的点击移动小球

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>  

<body  onkeydown="test()">

<h1>html5-经典的坦克大战</h1>

<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">

</canvas>

<script type="text/javascript">

    //准备工作

    //得到画布

    var  canvas1=document.getElementById("tankeMap");

    //得到上下文引用对象，你可以理解成画笔

    var cxt=canvas1.getContext("2d");  

    var ballX=30;

    var ballY=30;

    //画中间的圆形的炮筒体  

    //画圆时必须要把beginPath和closePath加上

    function drawball(){

        cxt.fillStyle="#FF0000";

        cxt.beginPath();//重要，必须加上

        cxt.arc(ballX,ballY,15,0,360,false);

        cxt.closePath();//重要，必须加上

        cxt.fill();

    }

    drawball();  

    function test(){

        var code=event.keyCode;

        cxt.clearRect(0,0,500,500);

        switch(code){

            case 87:

                ballY--;

                break;

            case 68:

                ballX++;

                break;

            case 83:

                ballY++;

                break;

            case 65:

                ballX--;

                break;

        }

        drawball();

    }

</script>

</body>

</html>

HTML5初学---坦克大战基础的更多相关文章

  1. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  2. html5制作坦克大战

    全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...

  3. HTML5之坦克大战游戏开发

    1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startA ...

  4. HTML5实现坦克大战（一）

      Tank 字段 x:坦克的中心点的横坐标 y:坦克的中心点的纵坐标 dir:坦克的前进的方向 spped:坦克的速度 color:坦克的颜色,用于区分种类不同的坦克 bullet:坦克的子弹 为a ...

  5. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  6. 汉顺平html5课程分享：6小时制作经典的坦克大战！

    记起自己去年參加的一次面试,在做过Java多年的面试官面前发挥的并不好,但他一听说我会html5,立刻眼睛发亮.无论不顾的想要和我签约.. .所以.如今为工作犯愁的朋友们,学好html5,绝对会为你找 ...

  7. Java__线程---基础知识全面实战---坦克大战系列为例

    今天想将自己去年自己编写的坦克大战的代码与大家分享一下,主要面向学习过java但对java运用并不是很熟悉的同学,该编程代码基本上涉及了java基础知识的各个方面,大家可以通过练习该程序对自己的jav ...

  8. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

  9. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

随机推荐

  1. Cross Entropy in Machine Learning

    整理摘自:https://blog.csdn.net/tsyccnh/article/details/79163834 信息论 Outline 1. 信息量与信息熵 2. 相对熵(KL散度) 3. 交 ...

  2. SQLAlchemy 学习笔记（二）：ORM

    照例先看层次图 一.声明映射关系 使用 ORM 时,我们首先需要定义要操作的表(通过 Table),然后再定义该表对应的 Python class,并声明两者之间的映射关系(通过 Mapper). 方 ...

  3. 最大流——EK算法

    一.算法理论 [基本思想] 反复寻找源点s到汇点t之间的增广路径,若有,找出增广路径上每一段[容量-流量]的最小值delta,若无,则结束.在寻找增广路径时,可以用BFS来找,并且更新残留网络的值(涉 ...

  4. java线程（7）——阻塞队列BlockingQueue

    回顾: 阻塞队列,英文名叫BlockingQueue.首先他是一种队列,联系之前Java基础--集合中介绍的Queue与Collection,我们就很容易开始今天的阻塞队列的学习了.来看一下他们的接口 ...

  5. 解决微信小程序配置https不成功问题

    拿到一个微信小程序的项目,需要配置https安全链接(为什么必须使用https不再赘述),预想这个已经很成熟的流程,应该不会有太大问题,结果还真是出乎意料,竟然掉进一个大坑,折腾好久. 申请证书配置的 ...

  6. 数据结构—栈(Stack)

    栈的定义--Stack 栈是只允许在末端进行插入和删除的线性表.栈具有后进先出的特性(LIFO ,Last In Fast Out). 学过数据结构的人都知道:栈可以用两种方式来实现,一种方法是用数组 ...

  7. JSP语法，运行机理等

    JSP是几年前就接触了,但是用归用,很多实际的意义含义等还是不太明白,借此机会,梳理一下. 1.JSP运行原理:当浏览器web应用服务器请求一个JSP页面时,Web应用服务器将其转换成一个Servle ...

  8. [Leetcode] Best time to buy and sell stock iii 买卖股票的最佳时机

    Say you have an array for which the i th element is the price of a given stock on day i. Design an a ...

  9. POJ2406 Power Strings 【KMP 或 后缀数组】

    电源串 时间限制: 3000MS   内存限制: 65536K 提交总数: 53037   接受: 22108 描述 给定两个字符串a和b,我们定义a * b是它们的连接.例如,如果a =" ...

  10. C++——内存使用

    内存分配方式: (1)从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量. (2)在栈上创建.在执行函数时,函数内局部变量的存储单 ...