p5.js: 通过上下左右键控制方块的位置

最新推荐文章于 2022-12-06 12:38:32 发布
最新推荐文章于 2022-12-06 12:38:32 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingIsFun/article/details/86674198
版权 
<html>
 <head>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
   <style>
	 
	  body {
	  padding: 0;
	  margin: 0;
	  background: rgb(0);
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
	 }
	</style>
	 
	<script>
	var x=200;
	var y=200
	function setup() {
		createCanvas(400, 400);
		rectMode(CENTER);
	}
	function draw() {
		background(220);
		fill(100);
		noStroke();
		rect(x,y, 80,80);//绘制方块
	}

//通过方向键更改方块中心的坐标
	function keyPressed() {
		switch (keyCode) {
			case LEFT_ARROW:
				x -= 5;
				break;
			case RIGHT_ARROW:
				x += 5;
				break;
			case UP_ARROW:
				y -= 5;
				break;
			case DOWN_ARROW:
				y += 5;
				break;
		}

	}
	</script>
 </head>
 <body>
 </body>
</html>

 

CodingIsFun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
p5.serialport：用于p5.js的串行端口API和服务器
02-02
p5。串口一个库，可在您的p5草图与Arduino（或另一个启用串行的设备）之间进行通信。它有什么作用？ p5.serialport或多或少地克隆了 。 由于浏览器中JavaScript无法与串行端口直接交互，因此该库可以解决此问题。 p5...
【P5JS教学】对战游戏教程之控制对象设计1：设计一个可以控制移动方向的对象
weixin_52345129的博客
11-03 39
02 通过监听方向键与wasd键，更新对象坐标位置，从而实现移动角色的效果；01 新增了一个方块作为控制对象，且方块定位坐标设置为中心；03 将背景移动线段设置成了灰色。
用js监控分辨率调整背景图片宽度_P5.js基础1——绘画与图形
weixin_39760434的博客
12-04 570
之前已经介绍过了P5.js的编辑器，也简单说明了它的用法，这次我们就开始使用它来画一些简单的二维图形。当我们代开编辑器,然后选择新建一个草图，就会看到在编辑器中已经有了设置函数setup() 和绘画函数draw() 。 在这里我们可以看到有一些花括号、小括号、逗号和分号，在括号中还有一些数字，此外还有一些英语单词，这些单词在程序中通常被称为命令或指令。在P5.js中它有一个专有的名称，就是函数。...
P5.js开发之——借助p5.shape插件库绘制2D形状(4)
我的博客
10-15 573
一 概述 本文介绍借助于p5.shape库，绘制一些简单的几何形状，效果图如下： 二 项目介绍 2.1 项目地址 p5.shape.js 2.2 如何使用 p5.shape:lib依赖文件,通过script导入 example:示例文件,类似于sketch.js 省略:index.html和p5.js 三 p5.shape示例 3.1 创建p5.js项目(vscode-p5 Project Create插件) 将p5.shape:放到libs目录下,并在index.html中通过script导入 将
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2330
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
p5.js 绘制趣味图形
weixin_53261137的博客
12-06 622
p5.js绘制趣味图形
p5.js网页3d网状动态js特效
ICode联盟
06-16 194
下载地址基于p5.js实现的网页3d网状动态特效dd:
p5.js码绘：基于向量的运动
weixin_45736769的博客
01-03 736
p5.js码绘：基于向量的运动 文章目录p5.js码绘：基于向量的运动前言一、按键控制的小飞船二、改进的飞船：自动校准方向总结 前言 本文记载的是自己阅读《代码本色》1-3章之后借助p5.js自带的向量完成的简单运动的练习。 一、按键控制的小飞船 简介： 这个是按照《代码本色》练习3.5要求完成的一个用三角形表示的小飞船，需要有两个按键分别控制飞船的左右旋转，同时还要有一个按键控制飞船的加速。这里我用方向键左和右分别控制飞船的顺时针旋转和逆时针旋转，上和下分别控制飞船的加速度的升高和降低。 完整代码
移动端显示p5.js
weixin_40581859的博客
06-08 710
移动端显示p5.js 编辑器：vs code＋vs code的 live server 插件 操作系统：osx 准备工作： （1）在vs code中下载live server 插件 （2）将电脑连接上手机热点 （3）新建html文件并复制下面代码，保存文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
P5.js开发之——通过createButton向页面中添加按钮
我的博客
01-18 1492
一 概述 createButton语法介绍 示例—添加按钮和点击事件 二 createButton语法介绍 2.1 语法 createButton(label, [value]) 2.2 说明 在页面中添加按钮 可以级联使用p5.Element的语法 2.3 参数及返回值 参数 参数 说明 label 按钮文字描述 value 按钮的value值(可选) 返回值 p5.Element 三 示例—添加按钮和点击事件 3.1 代码 let button; function
JavaScript 创意编程程式库p5.min.js
08-03
p5.min.js
p5.EasyCam:一个p5.js库，可轻松进行3D摄像机控制
05-25
p5.EasyCam 用于和WEBGL渲染器的简单3D摄像机控件。 要快速开始使用EasyCam，请查看以下有关OpenProcessing.org的教程： -> 发行版 和 例子 EasyCam.js-高级着色器/照明 EasyCam.js-基本 相机状态 CameraStates_Basic 平视显示器 快速开始 快速入门 拆分视图 多视图 多画布 备用第一人称相机 对于简单的第一人称视角p5.js相机库，请看一下p5.RoverCam p5.RoverCam 用法 function setup ( ) { createCanvas ( windowWidth , windowHeight , WEBGL ) ; // the simplest method to enable the camera createEasyCam ( ) ; //
前端项目-p5.js.zip
09-02
前端项目-p5.js,p5.js是一个JavaScript客户端库，基于处理的核心原则，使用Canvas和HTML5创建图形和交互体验。
Code-Package-p5.js:本书的代码包
05-04
安装 （获取最新的稳定版本） 打开终端，然后导航到您下载到计算机上的Code-Package-p5.js文件夹： $ cd path/to/folder# e.g. cd /Users/GG/Documents/Code-Package-p5.js跑步： $ npm install运行草图尽管大多数...
p5.timer:.js类扩展了p5.js的计时器功能
03-17
p5.timer.js 由斯科特·基尔达尔（Scott Kildall） 夏娜（Alina Xia）修改 概述 这是p5.js的类，它将用作计时器。 它封装了millis（）函数和各种您可以用来执行异步计时操作的变量。 将其添加到index.html 使用此...
p5.gibber.js:用于p5.js的音乐和音频编程
05-28
p5.gibber.js 用于p5.js的音乐和音频编程。 这是的薄包装，可轻松进行音乐排序和音频信号处理。 ##用法该库位于dist文件夹中。 在p5草图中使用它： 包含p5.js 包括p5.gibber.js 包括您的sketch.js文件包含的示例目录...
Javascript>> onmouseover用法
CodingIsFun
07-22 4353
<!DOCTYPE html> <html> <head> <title>Window Title</title> </head> <body> <p>Test your mouse on me!</p> <script> const p = document.quer...
用Javascript显示一个电子时钟
CodingIsFun
01-21 2122
<!DOCTYPE html> <html> <head> <style type="text/css" media="screen"> body { background: black; } #txt { position: absolute; top: 50%; left: 50%; transf...
You Don't Know JS Yet (book series) - 2nd Edition by Kyle Simpson
CodingIsFun
04-21 1861
You Don’t Know JS Yet (book series) - 2nd Edition 全文阅读地址From https://github.com/getify/You-Dont-Know-JS 我的GitHub文件： https://github.com/Li-YangZhong/Kyle_Simpson_You_Don-t_Know_JS_Yet_-Get_Started.git...
p5.js如何模拟正向运动学:行走
最新发布
02-02
比如，当按下键盘上的“上下左右”键时，人物可以向对应的方向移动，并且可以根据按键的持续时间来改变移动的速度。 另外，我们还可以利用p5.js中的动画函数来实现行走的连续运动效果。我们可以使用p5.js中的draw...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值