如何通过请求动画帧从其新实例中移动形状
How to move shapes from its new instance by requestAnimationFrame?
这是小提琴。将创建小矩形以模拟按下空格键(键码 32)时的项目符号。我遇到了一些问题:如何将它们移动到顶部(减少 y 坐标)?谁能帮我?感谢!
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;
init();
function init(){
context.rect((cw-5)/2, ch-5, 5, 5);
context.fill();
update();
}
function update(){
if(ps){
playerShoot();
}
requestAnimationFrame(update);
}
function playerShoot(){
var b = new bullet(2);
}
function bullet(speed){
this.speed = speed;
speed++;
context.ellipse((cw-1)/2, ch-10-speed, 1, 3, 0, 0, Math.PI*2);
context.fill();
}
document.addEventListener("keydown", function(e){
switch(e.keyCode){
case 32:
ps = true;
break;
};
});
document.addEventListener("keyup", function(e){
switch(e.keyCode){
case 32:
ps = false;
break;
};
});
我已经在
代码本身的注释中解释了很多代码。
其他几点:
- 某些浏览器(包括我的浏览器,即Firefox v44.0.2)不绘制省略号。所以我把你的项目符号变成了另一个矩形。
- 我用
fillRect
而不是rect
只是因为我更了解这一点。 - 我通过在具有不透明背景颜色的旧项目符号上绘制来重新绘制项目符号。但是,如果需要,您也可以清除上一个项目符号周围的矩形。
- 您在示例中提高了速度。从概念的角度来看,这可能不是你想要的,即使你已经得到了你想要的视觉结果。我怀疑你希望你的子弹以恒定的速度移动。因此,
speed
变量应该是常数,即不变。相反,您应该使用speed
常量来定期更改项目符号的位置。我换了bulletY
,这是子弹的垂直位置。 - 为简单起见,我一次只允许屏幕上显示一个项目符号。
- 我将代码限制为运行 500 个周期。这主要是为了不惹恼尝试代码的堆栈溢出用户......他们不希望无限循环发生。
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;
// some new variables
var bulletShowing = false; // is a bullet currently showing?
var bulletY; // the vertical position of the bullet
var speed = 8; // the bullet speed
var time = 500; // the time remaining
init();
function init() {
// draw background
context.fillStyle = "yellow";
context.fillRect(0, 0, cw, ch);
// draw gun
context.fillStyle = "black";
context.fillRect((cw - 5) / 2, ch - 5, 5, 5);
// update the scene
update();
}
function update() {
if (ps) {
playerShoot();
}
// if a bullet is supposed to be showing then, well, show it
if (bulletShowing) {
// redraw the bullet (erase the old, draw the new)
drawBullet();
// if the bullet has gone off-screen, allow a new shot
if (bulletY < -5) {
bulletShowing = false;
}
}
// give a visual indicator of time remaining
document.querySelector("div").innerHTML = "Time: " + time;
// decrement the time
time -= 1;
// if there is still time remaining, do it all again
if (time >= 0) {
requestAnimationFrame(update);
}
}
function playerShoot() {
// indicate a bullet will now be showing
bulletShowing = true;
// start the bullet out near the gun
bulletY = ch - 10;
}
function drawBullet() {
// erase the old bullet by drawing over it with the background color
// this rectangle is slightly larger than the bullet itself
// to ensure the entire old bullet is drawn over
context.fillStyle = "yellow";
context.fillRect((cw - 1) / 2 - 2, bulletY - 1, 5, 7);
// move the bullet position
bulletY -= speed;
// draw the new bullet
context.fillStyle = "black";
context.fillRect((cw - 1) / 2 - 1, bulletY, 3, 5);
}
document.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32:
// only allow one bullet on the screen at a time
// (for the sake of coding simplicity)
if (!bulletShowing) {
ps = true;
}
break;
};
});
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 32:
ps = false;
break;
};
});
#myCanvas {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 5%);
background-color: #cccccc;
z-index: -1;
}
<p>Click on the canvas, then use the space bar to fire bullets one at a time.</p>
<div></div>
<canvas id="myCanvas" width=300 height=150></canvas>
相关文章:
- ES6构造函数返回基类的实例
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- 如何从画布上的某个移动事件中获取X和Y
- 触摸移动时切换到新元素
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- KnockoutJS-组件-多个实例
- 为什么无法在TypeScript中导出类实例
- 停止jQuery UI滑块移动超过给定值
- 如何在GoogleWeb工具包(GWT)中从JSNI调用接口(实例化)
- fluxxor向一个flux实例添加一组以上的操作
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 使用jQuery获取Dropzone实例/对象
- 将共享的“code_block”从 loc-A 移动到 loc-B,只有一个书面的“code_block”实例
- 如何通过请求动画帧从其新实例中移动形状
- rtciceccandidate实例不能在移动设备上的浏览器中创建
- 如何在将组件实例移动到react中的另一个父组件时保留它