H5 canvas控制坦克移动
window.onkeydown = function(){
alert("Merry Christmas!");
};
window.onkeydown = function(eve){
alert(eve.keyCode);
};
window.onkeydown = function(eve){
alert("所按键对应的键码是: " + eve.keyCode);
};
window.onkeydown = function(eve){
if(eve.keyCode == 38 || eve.keyCode == 87){
alert("上");
}else if(eve.keyCode == 40 || eve.keyCode == 83){
alert("下");
}else if(eve.keyCode == 37 || eve.keyCode == 65){
alert("左");
}else if(eve.keyCode == 39 || eve.keyCode == 68){
alert("右");
}
};
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
alert("上");
break;
case 40:
case 83:
alert("下");
break;
case 37:
case 65:
alert("左");
break;
case 39:
case 68:
alert("右");
}
};
function drawTank(x,y){
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y-25);
cxt.stroke();
}
drawTank(150,200); //以(150,200)的点为坦克的左上角(左边履带的左上角)造一个坦克
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "orange";
cxt.fillRect(50,50,300,80);
得到:
cxt.clearRect(0,0,800,500);
//封装一个获取绘图环境的函数
function getCxt(){
var myCanvas = document.getElementById('floor'),
myContext = myCanvas.getContext('2d');
return myContext;
} //封装一个画坦克的函数,传两个参数x,y,分别代表左上角的横纵坐标
function drawTank(x,y){
var cxt = getCxt();
cxt.fillStyle = "#542174";
cxt.fillRect(x,y,20,65);
cxt.fillRect(x+70,y,20,65);
cxt.fillRect(x+23,y+10,44,50);
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(x+45,y+35,16,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(x+45,y+35);
cxt.lineTo(x+45,y-25);
cxt.stroke();
} //初始化一个对象myTank,用来存储一些属性和方法
var myTank = {};
myTank.x = 350;
myTank.y = 400;
myTank.step = 3; //设置步长,步长越大那么坦克运动的速度越快 //先画一个坦克出来
drawTank(myTank.x,myTank.y); //封装一个更新战场的函数
function updateFloor(){
var cxt = getCxt();
cxt.clearRect(0,0,800,500); //更新之前先清除画布
drawTank(myTank.x,myTank.y); //清除完之后重新造坦克,坦克要移动就必须实时地根据坐标重新来造
} //设置一个间歇调用的函数,每隔100ms更新一下战场
setInterval(function(){
updateFloor();
},100); //响应玩家的操作指令
window.onkeydown = function(eve){
switch(eve.keyCode){
case 38:
case 87:
myTank.y -= myTank.step; //Y坐标减小向上移动
break;
case 40:
case 83:
myTank.y += myTank.step; //Y坐标增加向下移动
break;
case 37:
case 65:
myTank.x -= myTank.step; //X坐标减小向左移动
break;
case 39:
case 68:
myTank.x += myTank.step; //X坐标增加向右移动
}
};
H5 canvas控制坦克移动的更多相关文章
- H5 canvas控制坦克移动2
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html),这篇主要修复两个bug,第一,玩家按下方向键时,坦克的炮筒应该指向相应的方向,并向 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- H5 canvas建造敌人坦克
接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
- H5坦克大战之【玩家控制坦克移动2】
周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...
- H5坦克大战之【玩家控制坦克移动】
自从威少砍下45+11+11的大号三双之后,网上出现了各种各样的神级段子,有一条是这样的: 威少:Hey,哥们,最近过得咋样! 浓眉:对方开启了好友验证,请先添加对方为好友 威少:...... JRS ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制 ...
随机推荐
- 后缀树 & 后缀数组
后缀树: 字符串匹配算法一般都分为两个步骤,一预处理,二匹配. KMP和AC自动机都是对模式串进行预处理,后缀树和后缀数组则是对文本串进行预处理. 后缀树的性质: 存储所有 n(n-1)/2 个后缀需 ...
- centos7 iptables/firewalld docker open port
here are multiple "hackish" ways to do it: scan kernel logs, as mentioned by Jiri (but you ...
- Java 算法-快速幂
1 什么是快速幂? 快速幂,顾名思义就是快速的求次幂,例如:a^b,普通的算法就是累乘,这样的计算方法的时间复杂度就是O(n),而快速幂的方法使得次幂的计算方法的时间复杂度降低到O(logn). 假 ...
- MySQL的知识海洋
第一篇:初识数据库 第二篇:库操作 第三篇:表操作 第四篇:数据操作 第五篇:视图.触发器.存储过程.函数.事物与数据库锁 第六篇:索引原理与慢查询优化 第七篇:pymysql(用python连接以及 ...
- 验证url的正则
一. '/@(?i)\b((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()& ...
- 【Python】如何取到input中的value值?
练习:取到下方链接下所有海贼王的下载链接. # coding=utf-8 from selenium import webdriver from time import sleep import ke ...
- 剑指offer总结
1.实现Singleton模式 2.二维数组中的查找:每行从左到右递增,每列从上到下递增,输入一个数,判断数组中是否存在该数 1 2 8 9 2 4 9 12 4 7 10 13 6 8 11 ...
- IP层网络安全协议(IPSec)技术原理图解——转载图片
- 多线程Java面试题总结
57.Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别?答:sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指 ...
- 安装WIN7时提示“缺少所需的CD/DVD驱动器设备驱动程序”
同事机器重装Win7,先百度了一下不适合64bit,于是直接上32bit系统. BOIS设置DVD启动,把安装盘放在移动光驱里,开始安装. 在安装时出现下图错误:“缺少所需的CD/DVD驱动器设备驱动 ...