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


Posted in HTML / CSS onSeptember 02, 2013

复制代码
代码如下:

<!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>
HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
You might like
js下函数般调用正则的方法附代码
2008/06/22 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
深入PHP数据加密详解
2013/06/18 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python处理中文标点符号大集合
2018/05/14 Python
python3实现表白神器
2019/04/09 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
战友聚会邀请函
2014/01/18 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
单位证明范文
2015/06/18 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python