《p5.js创意游戏编程》第一课:跳动的小球
准备:Hbuilder/vscode等可以编写网页的编辑器
如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsrun在线编辑器)本案例最终代码17行
开始
- 创建画布,生成一个400*400大小的画布。
function setup() {
createCanvas(400, 400);
}
- 创建背景及小球,首先通过background()函数创建一个天蓝色(87,250,255)的背景,再创建一个20*20大小的小球,生成地点位于(200,200)的位置,使用ellipse()函数创建,ellipse()函数内有四个参数,分别表示生成小球的x,y坐标及宽和高。
var x=200,y=200;
function draw() {
background(87,250,255);
ellipse(x,y,20,20);
}
draw()函数会不断地运行(频率为FPS,默认60帧/秒)
- 让小球动起来,通过draw()函数不断刷新屏幕可以通过改变小球的x,y坐标让小球运动起来。
var sx=2,sy=3;
function draw() {
background(87,250,255);
ellipse(x,y,25,20);
x+=sx;
y+=sy;
}
- 让小球来回运动,通过条件判断让小球来回运动,如果小球来到了边缘位置,就让小球的x/y坐标减1
if(x>width||x<0){
sx*=-1;
}
if(y>height||y<0){
sy*=-1;
}
最后附上完整代码:
var x=200,y=200;
var sx=2,sy=3;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(87,250,255);
ellipse(x,y,20,20);
x+=sx;
y+=sy;
if(x>width||x<0){
sx*=-1;
}
if(y>height||y<0){
sy*=-1;
}
}
如果想进一步探讨p5.js,可以关注我的vx公众号:大李日志
《p5.js创意游戏编程》第一课:跳动的小球的更多相关文章
- 少儿编程:python趣味编程第一课
本文仅针对8-16岁的青少年,所以流程是按如何去教好中小学生走的,并不适合成人找工作学习,因为进度也是按照青少年走的 大家好,我是C大叔,从事少儿编程行业三年有余(2016年从事少儿编程行业,少儿编程 ...
- python3.6编程第一课画个五角星
使用的是海龟图库 turtle import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.righ ...
- Python菜鸟快乐游戏编程_pygame(2)
Python菜鸟快乐游戏编程_pygame(博主录制,2K分辨率,超高清) https://study.163.com/course/courseMain.htm?courseId=100618802 ...
- 【C语言探索之旅】 第三部分第一课:SDL开发游戏之安装SDL
内容简介 1.课程大纲 2.第三部分第一课: SDL开发游戏之安装SDL 3.第三部分第二课预告: SDL开发游戏之创建窗口和画布 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会 ...
- 【C语言探索之旅】 第二部分第一课:模块化编程
内容简介 1.课程大纲 2.第二部分第一课: 模块化编程 3.第二部分第二课预告: 进击的指针,C语言王牌 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C ...
- 【C语言探索之旅】 开宗明义及第一课:什么是编程?
内容简介 1.课程大纲 2.第一部分第一课:什么是编程? 3.第一部分第二课预告:工欲善其事,必先利其器 课程大纲 不知道为什么,一直对C语言有一种很深厚的“情怀”(类似老罗对锤子手机的那种),说 ...
- vue.js学习(第一课)
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- 如何用webgl(three.js)搭建一个3D库房-第一课
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...
- 【pygame游戏编程】第一篇-----创建一个窗口
下面我们一起来创建一个背景为蓝色的窗口作为游戏编程的开始: import sys import pygame def creat_screen(): #初始化pygame pygame.init() ...
随机推荐
- 总结HashMap实现原理分析
一.底层数据结构在JDK1.6,JDK1.7中,HashMap采用位桶+链表实现,即使用链表处理冲突,同一hash值的键值对会被放在同一个位桶里,当桶中元素较多时,通过key值查找的效率较低. 而JD ...
- Python File next() 方法
概述 next() 方法在文件使用迭代器时会使用到,在循环中,next()方法会在每次循环中调用,该方法返回文件的下一行,如果到达结尾(EOF),则触发 StopIteration高佣联盟 www.c ...
- Python math 模块、cmath 模块
Python math 模块.cmath 模块 Python 中数学运算常用的函数基本都在 math 模块.cmath 模块中.高佣联盟 www.cgewang.com Python math 模块提 ...
- PHP print_r() 函数
print_r() 函数用于打印变量,以更容易理解的形式展示. PHP 版本要求: PHP 4, PHP 5, PHP 7高佣联盟 www.cgewang.com 语法 bool print_r ( ...
- Ploya定理学习笔记
由于自己的作息极其不规律导致比赛被打爆了 但是有的时候状态其实还行. 关于Ploya定理其实特别有意思 这里粘一个[dalao的blog](https://blog.csdn.net/lyc16355 ...
- 基于asp.net core 从零搭建自己的业务框架(二)
前言 对于项目的迭代,如何降低复杂性的要求高于性能以及技术细节的 一个易用的项目,才能迭代到比拼性能,最后拼刺刀的阶段 传统单体项目,都是传统三层,直接请求响应的模式,这类称为Rpc模式,易用性上非常 ...
- jersey简单总结与demo
参考链接:https://www.iteye.com/blog/dyygusi-2148029?from=singlemessage&isappinstalled=0 测试代码: https: ...
- 推荐:pyqt5入门教程
版权声明:本文为CSDN博主「AzureMouse」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/azure ...
- JavaFX桌面应用开发-HelloWorld
JavaFX是一个强大的图形和多媒体处理工具包集合,它允许开发者来设计.创建.测试.调试和部署富客户端程序,并且和Java一样跨平台. JavaFX比Swing好用很多,它允许开发使用FXML来设计和 ...
- 2020-04-07:说出Servlet的生命周期,并说出Servlet和CGI的区别。
Servlet的生命周期分为5个阶段:实例化:Servlet容器创建Servlet类的实例.初始化:该容器调用init()方法,通常会申请资源.服务:由容器调用service()方法,(也就是doGe ...