javascript - Canvas 使用键盘输入移动，但图像不移动-6ren

javascript - Canvas 使用键盘输入移动，但图像不移动

转载作者：行者123 更新时间：2023-11-28 07:27:58

25

4

所以我从基础开始，添加了 canavs、css、javascript。图像应该在 html 还是 javascript 中？接下来我在 Canvas 上添加了背景颜色。然后我在 javascript 中添加 Canvas 属性以及 keyCodes。我用 window.onload 得到了图像。之后我注意到 Canvas 在移动但图像没有移动。

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];

window.addEventListener("keydown", function(e){
	keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
	delete keys[e.keyCode];
}, false);

function game(){
	window.onload;
	update();
	render();
}

function update(){
	if(keys[38]) img.y--;
	if(keys[40]) img.y++;
	if(keys[37]) img.x--;
	if(keys[39]) img.x++;
}
function render(){
	ctx.fillRect(img.x, img.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    var ctx=c.getContext("2d");
    var img=document.getElementById("chio");
    ctx.drawImage(img,10,10);
};

setInterval(function(){
    game();
}, 1000/30)


// > note: window.onload shows the images

#app{
background-color:#33ff00
}

<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<canvas id="app" width=300 height=640></canvas>
<img id="chio" src="chio.png"/>
<script src="app.js"></script>
</body>
</html>

我现在迷路了，请帮助我

最佳答案

我在“app.js”中做了一些更正，但我不知道你到底想要什么。如果您想移动图像，这是一种方法。

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];
var ctx;
var img;
var position = {x:0,y:0};
window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    keys[e.keyCode] = false;
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) position.y--;
    if(keys[40]) position.y++;
    if(keys[37]) position.x--;
    if(keys[39]) position.x++;
}
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,position.x,position.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    ctx=c.getContext("2d");
    img=document.getElementById("chio");
};

setInterval(function(){
    game();
}, 1000/30);


// > note: window.onload shows the images

关于javascript - Canvas 使用键盘输入移动，但图像不移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31710350/

25

4

0

文章推荐： c++ - 如何制作需要执行此操作的功能？

文章推荐： c++ - 流的重载产生两种不同的结果

文章推荐： css - Font Awesome 社交图标未显示

文章推荐： javascript - wordpress 中的 SVG 动画 - 填充

python - Pyinstaller & 键盘
我遇到了一个问题。我正在使用 pyinstaller 将代码导出到 .exe。代码包括 tkinter、PIL 和 keyboard 模块。软件在我使用 Python 的 PC 上运行完美，而在没有
STM32 HID 键盘
我正在尝试将 STM32F0-disco 用作 Windows PC 的键盘。正在打印的字符有问题。下面的代码等到板载按钮被按下，然后应该打印一次这三个字符。 /* USER CODE BE
iphone - 键盘 'Done'按钮上的Resign键盘
我想在单击键盘上的“完成”按钮时退出键盘。我怎样才能做到这一点？我有以下代码=> textView.returnKeyType = UIReturnKeyDone; 我有这个代码用于限制 TextVi
c - 键盘 Hook
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
Android 有没有办法在应用程序中调出自定义电话#键盘？
我想调出一个用于输入电话号码的键盘。有没有办法在我自己的 Activity 中显示此对话框并捕获用户输入的内容。我需要能够控制用户点击调用时发生的情况。所以我很感兴趣自定义允许用户输入电话号码的 Ac
布局顶部的 Android 键盘
我希望软键盘位于我的布局之上，而不是在它弹出时四处移动我的布局。我该怎么做呢？我查看了 list ，但从未设置 android:windowSoftInputMode="adjustResize" 此
C++ 键盘 Hook
主题:将某些键替换为另一个键值。例如如果我按 P，它应该是 F24。当我尝试从 .ini 文件加载键值时， Hook 不再是全局的。它仅在 winapi 窗体处于焦点时才有效。我的 DLL 代码
Android 键盘 - 开始小写
当我点击 EditText 时，是否可以用小写字母启动 android 键盘？基本上，我想要的是将 EditText 中的第一个字母小写，但也让用户可以根据需要将其变为大写...... (EditTe
隐藏按钮上的 IOS 键盘
我想监控 IOS 上的键盘隐藏按钮并触发一个事件。我在说: 我只想在用户按下实际按钮时进行监控。我不想要键盘隐藏时的事件。最佳答案用户键盘通知观察者.. 对于 swift NSNotificati
ios - 关闭具有多个文本字段的第一响应者/键盘
在经历了这一切之后就像认真的...... Easy way to dismiss keyboard? ...我有多个 TextFields 和一些 TextViews。有没有办法对所有文本字段进行批处
带有表情符号的 Android 键盘
所以我想在我的应用程序中添加一个键盘，其中包含表情符号，就像 Whatsapp 或环聊一样。我怎样才能做到这一点？我想保留我的键盘，因为我只想添加标签来放置表情符号。我认为软键盘很容易支持它，但到目前
ios - 如何创建自定义 iOS 键盘
首先，我会让您知道，我在 StackOverflow 以及 Google 和 Github 上查看了很多很多不同的帖子。我已经到处寻找对我有帮助的任何。但是，似乎没有任何效果。它要么已经过时(超过 1
java - 键盘 Action 监听器
当按下相应的键时，我试图让我的游戏中的宇宙飞船 (PlayerShip.gif) 向左、向右、向上和向下移动。我知道我需要一个 keyboardListener 但我在弄清楚它的去向以及它是如何实际实
usb - 隐藏式 USB 键盘
我正在尝试制作一个 HID USB 设备。我搜索了一下，发现键盘的输出有 8 个字节。第一个字节是修饰符，第二个字节是保留字节，其余 6 个字节是关键代码。我认为在某些情况下，例如“prtsc”，需要
Vim 和 azerty 键盘
我最近开始学习 Vim，在深入学习之前，我有一个问题需要回答。使用 AZERTY 键盘，我是否应该重新映射命令和快捷方式的键以适应 QWERTY 键盘的键位置？我之所以问这个，是因为显然在创建这些
keyboard - 如何使用 Dvorak 键盘？
我一直认为在使用 Dvorak 布局之前，我需要购买 Dvorak 键盘。但是我在亚马逊上找不到。仅仅是从 Qwerty 键盘上弹出键并移动它们吗？最佳答案为了帮助您了解键盘布局，您可以重新排列
iphone - 激活 iPhone 键盘
我不敢相信我还没有找到任何关于此的文档，但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢最佳答案您还可以使用 UIKeyInput 协议(pro
iPhone 键盘 Shift 键已禁用
我有一个 UITextField，其中弹出的键盘已禁用其 Shift 键。键盘类型设置为 UIKeyboardTypeNamePhonePad，看起来应该允许大写。如果我将键盘类型更改为“默认”但保
delphi - 键盘 Hook 过程的问题
背景:我的表单有一个 TWebBrowser。我想用 ESC 关闭表单，但 TWebBrowser 吃掉了击键 - 所以我决定使用键盘 Hook 。问题是表单可以同时在多个实例中打开。无论我做什么
iphone - 定制 iPhone 键盘
我需要(即客户要求)提供自定义键盘，供用户在文本字段和区域中输入文本。我已经有一些可以执行键盘操作并将测试附加到文本字段的东西，但是我想让它更通用并让它像标准的 iphone 键盘一样工作，即当用户选

首页

博学

6Ren·AI

商城

javascript - Canvas 使用键盘输入移动，但图像不移动