HTML5坦克大战（2）绘制坦克复习
html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大战</title>
<script src="tank.js"></script>
</head>
<body onkeydown="moveTank(hero)">
<canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin: 50px auto; background-color:black;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var hero = new Tank(, , , ); //创建hero对象
var hero = new Tank(, , , ); function moveTank(tank) {
//上下左右移动坦克
switch (event.keyCode) {
case ://左
tank.direct = ;
tank.moveLeft();
break;
case ://右
tank.direct = ;
tank.moveRight();
break;
case ://上
tank.direct = ;
tank.moveUp();
break;
case ://下
tank.direct = ;
tank.moveDown();
break;
default:
}
drawTank(hero);
} drawTank(hero);
</script>
</body>
</html>
JavaScript代码：
function Tank(x, y, direct, speed) {
//创建坦克类，横纵坐标，方向，速度
this.x = x;
this.y = y;
this.direct = direct;
this.speed = speed;
this.moveUp = function () {
this.y -= this.speed;
}
this.moveDown = function () {
this.y += this.speed;
}
this.moveLeft = function () {
this.x -= this.speed;
}
this.moveRight = function () {
this.x += this.speed;
}
}
function drawTank(tank) {
//画坦克
switch (tank.direct) {
case :
case :
//向上，向下
//清屏
context.clearRect(, , canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, , );//左轮
context.fillRect(tank.x + , tank.y + , , );//身体
context.fillRect(tank.x + , tank.y, , );//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + , tank.y + , , , * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = ;
context.moveTo(tank.x + , tank.y + );
if (tank.direct == ) {
context.lineTo(tank.x + , tank.y);
} else if (tank.direct == ) {
context.lineTo(tank.x + , tank.y + );
}
context.stroke();
context.fill();
context.closePath();
break;
case :
case :
//向左，向右
//清屏
context.clearRect(, , canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, , );//左轮
context.fillRect(tank.x + , tank.y + , , );//身体
context.fillRect(tank.x, tank.y + , , );//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + , tank.y + , , , * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = ;
context.moveTo(tank.x + , tank.y + );
if (tank.direct == ) {
context.lineTo(tank.x + , tank.y + );
} else if (tank.direct == ) {
context.lineTo(tank.x, tank.y + );
}
context.stroke();
context.fill();
context.closePath();
break;
default:
}
}
HTML5坦克大战（2）绘制坦克复习的更多相关文章
- 【 java版坦克大战--事件处理】 坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下
上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...
- HTML坦克大战学习02---坦克动起来
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Java坦克大战 (七) 之图片版
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- HTML5-坦克大战一完成坦克上下左右移动的功能（一）
坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- HTML5坦克大战（1）绘制坦克
坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- HTML5坦克大战（韩顺平版本）
HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...
随机推荐
- jQuery.toggleClass() 和detach()方法详解
一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...
- git中报unable to auto-detect email address
git commit 时报错: ** Please tell me who you are. Run git config --global user.email "you@example. ...
- EditText输入为空button不可点击搜索
一丶任务详情 二丶改动后演示效果 三丶改动过程 分析:非常明显这里是须要监听EditText,推断输入字符串长度是否不为0来改变Button样式 首先的屡清楚代码逻辑在适当的位子加监听推断是最好的处理 ...
- taro 创建 Tabbar
1.代码 src/app.js import '@tarojs/async-await' import Taro, { Component } from '@tarojs/taro' import H ...
- ubuntu使用du命令查看一级子目录存储空间大小
命令如下: ls | xargs du -ksh 可以ls不同的目录以查看不同的目录下的一级子目录大小.直接使用ls为当前目录下的一级子目录大小. 查看其他目录的大小: ls -d dirname/* ...
- 安卓Camera APP
一.Camera package android.hardware 该类用于设定图像捕获设置,开启/关闭预览,抓拍图片以及获取帧用于编码视频.这个类是Camera服务的客户端,用 ...
- lspci查看硬件信息时提示找不到命令
系统环境:centos 6.3 X64 错误信息:[root@localhost ~]# lspci-bash: lspci: command not found 问题原因:这是因为没有安装pciut ...
- iOS多线程的初步研究（一）-- NSThread
对于多线程的开发,iOS系统提供了多种不同的接口,先谈谈iOS多线程最基础方面的使用.产生线程的方式姑且分两类,一类是显式调用,另一类是隐式调用. 一.显示调用的类为NSThread.一般构造NSTh ...
- jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式
在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...
- 【干货】电路设计师指导手册（已更新完毕）（转载EDN）
[干货]电路设计师指导手册(已更新完毕) 第一部分:接地与布线第二部分:电源返回路径与I/O信号接地第三部分:板间互连.星形接地及屏蔽第四部分:安全地以及电线/电缆第五部分:射频电缆.双绞线与串扰