HTML5实现一个能够移动的小坦克示例代码

HTML5一词想必大家早已如雷贯耳,其功能很强大,本文为大家介绍下通过其实现一个能够移动的小坦克,具体如下,喜欢HTML的朋友可以参考下

 

 

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
</head>
<body onkeydown="changeDirect()">
<canvas id="tankMap" width="500px" height="300px" style="border:1px solid #d3d3d3;">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas1=document.getElementById('tankMap');
var ctx=canvas1.getContext('2d');
var myX=30;
var myY=30;
function drawBall(){
ctx.shadowBlur=30,ctx.shadowColor="#008C46";
ctx.fillStyle='#008C46';
ctx.fillRect(myX,myY,5,30);
ctx.fillRect(myX+17,myY,5,30);
ctx.fillRect(myX+6,myY+5,10,20);
ctx.beginPath();
ctx.fillStyle='#004020';
ctx.arc(myX+11,myY+15,5,0,Math.PI*1.5);
ctx.closePath();
ctx.fill();
ctx.strokStyle="#008C46";
ctx.moveTo(myX+11,myY+15);
ctx.lineTo(myX+11,myY-5);
ctx.stroke();
}
drawBall();
function changeDirect(){
var code=event.keyCode;
switch(code){
case 87:
myY--;
break;
case 68:
myX++;
break;
case 83:
myY++;
break;
case 65:
myX--;
break;
}
ctx.clearRect(0,0,500,300);
//重新绘制
drawBall();
}
</script>
</body>
</html>

时间: 2024-10-27 20:08:25

HTML5实现一个能够移动的小坦克示例代码的相关文章

c#一个定时重启的小程序实现代码第1/2页_C#教程

原理我像大家都很清楚,这里只说.NET(c#实现).服务器每次启动或者重启,都是没登陆的.那意味着启动项里不只能做,我就考虑到使用Windows服务.Windows服务在系统加载时候就会启动所有服务,把程序写进里面应该没错了. 需要重启,那就要一个时间来效验,写法都有很多.我这里采用ini来存放. Time 记录要重启的时间,验证时间. Day 用来累加天数. 复制代码 代码如下: [Reboot] Time=02:02:01 Day=3 使用System.Timers.Timer循环验证时间(

使用.NET发送E-Mail小程序示例

本文主要是以.NET下怎么实现发送E-Mail作为示例分析讲解,故在示例程序里有许多涉及到.Net.Mail之外的内容都没做.最近比较忙没太多的时候去完善其功能,有兴趣的朋友可以下载源码去完善下.这不是一个什么大的软件,也不是什么很特别的东西,我写这个文章的目的是让大家一起来学习.NET下发送E-mail的实现,希望这篇文章可以帮助到还没搞清楚怎么实现发送邮件的朋友,对于已经会的或是这方面的牛人的前辈们看了本文请留下宝贵的建议. 本程序是采用.NET框架下的Mail类来完成邮件的发送操作的,里面

《HTML5+JavaScript动画基础》——2.3 用代码实现动画

2.3 用代码实现动画 在准备好HTML5文件的基本结构之后,我们已经了解了足够多的基础知识,可以开始编码了.我们需要一个文本编辑器用来输入示例代码以及一个支持HTML5的Web浏览器运行这些示例.同时我们需要熟悉该浏览器内置的开发者控制台.在准备好这些工具后(它们很可能已经在你的电脑上)我们就可以出发了,让我们深入学习一些动画吧. 2.3.1 动画循环几乎所有的程序动画都会表现为某种形式的循环.我们会创建一个展现一系列图像的流程图以实现逐帧动画,其中每一帧只需要绘制出来即可,如图2-2所示.

c++-一个关于递归的小程序,理解不了其输出结果。。。。。

问题描述 一个关于递归的小程序,理解不了其输出结果..... 一个c++递归的小程序,其输出结果理解不了,请问这个递归的基例是"cout<<endl;"这个吗? void f(char ch){ if (('A' <= ch) && (ch <= 'H')){ f(ch - 1); cout << ch; } else cout << endl; } int main(){ f('C'); } 输出结果为: (空一行) A

SQL数据库上面显示一个绿色向上的小箭头是怎么回事?也无法访问数据库了,有什么办法吗?

问题描述 SQL数据库上面显示一个绿色向上的小箭头是怎么回事?也无法访问数据库了,有什么办法吗? 解决方案 sql 有一个browser服务 这个是1434端口的 解决方案二: 你那里是sqlserver客户端吗 你看看sqlservernetmanager里的网络配置1433开了吗 解决方案三: 数据库服务是否启动,端口是否在侦听,防火墙是否拦截请求

mfc-C++6.0一个关于static的小问题

问题描述 C++6.0一个关于static的小问题 static可以通过拖动来滚动上面的绘图么?重新绘图的定位是怎么样的,MFC 解决方案 scrollviewhttp://blog.csdn.net/scyatcs/article/details/7942585 解决方案二: 可以,但是需要给static手动的绑定一个滚动条才可以,重绘的本质就刷新界面的同时,改变绘图的点坐标,定位的话可以根据滚动条当前位置对绘图的坐标进行一个计算和显示 解决方案三: 省事儿点的方式是直接在单文档程序中绘图,这

一个JavaScript的求爱小特效_javascript技巧

这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男们,是不是可以给你的小萝莉发个这样的网页啊.给力的. 贴上code吧: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

mysql-求大神帮忙调试一个Struts+MySQL的小项目

问题描述 求大神帮忙调试一个Struts+MySQL的小项目 该软件要求采用Struts2+MYSQL方式实现,能够快速查询车源信息. 能够准确填写发货单. 能够实现实现发货单查询. 能够实现对回单处理. 能够对车源信息进行添加,修改和删除. 能够对客户信息进行管理. 项目是我照着资料书上敲的,每次运行都显示连不上数据库,哪位大神愿意腾出时间的,我就把项目还有数据库的sql脚本发给您,自己是个新手,求大神们多多指教了. 解决方案 你看看数据库的驱动引入了吗,然后看看用户名和密码是不是打错了,把连

android-如何在每一个EditText中放入小的行线?

问题描述 如何在每一个EditText中放入小的行线? 我想在 Edit Texts 里添加小的行,照下面的样子,如何实现? 解决方案 看看你要找的是不是这个http://blog.csdn.net/yhm2046/article/details/9183673 解决方案二: 就是替换下backGround的selector就好了