最近打火机与公主裙电视剧追疯了！！！谁还没有李峋爱心代码！！快来领！！沉浸式追剧大学生今天午觉没睡怒干爱心代码现有三分资源如下：
效果：
1）、公主两个for循环二维C++控制台输出爱心；
2）、原创C++语言利用openGL库实现三维动态旋转粉色爱心；
以上两者可以在一个代码文件中同时实现，所以写在了一起，全部代码包括注释实现如下所示：
注：前提是安装了OpenGL库！
#include "stdlib.h"
#include "glut.h"
#include <time.h>
#include<iostream>
#define STEP 1.0f
#pragma comment(lib,"glut32.lib")
using namespace std;
//#define _USE_MATH_DEFINES //用到math里面的宏常量
#include <math.h>
GLfloat w = 840;
GLfloat h = 800;
double rotate_x = 0.0;//选转
double rotate_y = 0.0;
double rotate_z = 0.0;
// 对颜色的宏定义
# define Hotpink 255.0/255.0, 105.0/255.0, 180.0/255.0
# define sunshine 255.0/255.0, 210.0/255.0, 166.0/255.0
#define BMP_Header_Length 54 //图像数据在内存块中的偏移量
// 旋转初始的角度
GLfloat angle = 0.0f;
// 设置旋转轴：两个三维的点确定的旋转轴
GLfloat axis[][3] = {
0.0f, 0.5f, 0.5f,
1.0f, 0.5f, 0.5f
};
GLfloat tra[3] = { -300, 0, -470 };
//材质参数
GLfloat matiral_specular[4] = { 0.00, 0.00, 0.00, 1.00 }; //材质参数：镜面反射，所得到的光的强度（颜色）
GLfloat matiral_emission[4] = { 0.00, 0.00, 0.00, 1.00 }; //材质本身就微微的向外发射光线
const GLfloat matiral_shininess = 11.00;
void setMetiral(GLfloat matiral_diffuse_ambient[4])
{
//设置颜色
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, matiral_diffuse_ambient); //设置相同值更逼真
//设置参数
glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, matiral_specular); //镜面反射，所得到的光的强度（颜色）
glMaterialfv(GL_FRONT_AND_BACK, GL_EMISSION, matiral_emission); //材质本身就微微的向外发射光线，以至于眼睛感觉到它有这样的颜色
glMaterialf(GL_FRONT_AND_BACK, matiral_shininess, 0); //“镜面指数”（0~128） 该值越小，材质越粗糙，点光源发射的光线照射到上面，也可以产生较大的亮点。该值越大，表示材质越类似于镜面，光源照射到上面后，产生较小的亮点。
}
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity(); //增加M矩阵
glRotatef(rotate_x, 1.0, 0.0, 0.0);//绕x轴旋转
glRotatef(rotate_y, 0.0, 1.0, 0.0);
glRotatef(rotate_z, 0.0, 0.0, 1.0);
glTranslatef(tra[0], tra[1], tra[2]);//平移
// 设置绕给定的轴旋转
glTranslatef(300, 0, 0);
glRotatef(angle, axis[1][1] - axis[0][1], axis[0][0] - axis[1][0], axis[1][2] - axis[0][2]);
glTranslatef(-300, 0, 0);
**************************************爱心*************
glColor3f(Hotpink);
glTranslatef(300, 200, 0);//1
glutSolidSphere(70.0, 200, 200);//（半径/球面数）
glTranslatef(-300, -200, 0);
glColor3f(Hotpink);
glTranslatef(540, 200, 0);//2
glutSolidSphere(130.0, 200, 200);//（半径/球面数）
glTranslatef(-540, -200, 0);
glColor3f(Hotpink);
glTranslatef(60, 200, 0);//3
glutSolidSphere(130.0, 200, 200);//（半径/球面数）
glTranslatef(-60, -200, 0);
glColor3f(Hotpink);
glTranslatef(180, 260, 0);//4
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-180, -260, 0);
glColor3f(Hotpink);
glTranslatef(420, 260, 0);//5
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-420, -260, 0);
glColor3f(Hotpink);
glTranslatef(300, -180, 0);//6
glutSolidSphere(90.0, 200, 200);//（半径/球面数）
glTranslatef(-300, 180, 0);
glColor3f(Hotpink);
glTranslatef(420, -28, 0);//7
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-420, 28, 0);
glColor3f(Hotpink);
glTranslatef(180, -28, 0);//8
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-180, 28, 0);
glColor3f(Hotpink);
glTranslatef(480, 90, 0);//9
glutSolidSphere(120.0, 200, 200);//（半径/球面数）
glTranslatef(-480, -90, 0);
glColor3f(Hotpink);
glTranslatef(120, 90, 0);//10
glutSolidSphere(120.0, 200, 200);//（半径/球面数）
glTranslatef(-120, -90, 0);
glColor3f(Hotpink);
glTranslatef(120, 270, 0);//11
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-120, -270, 0);
glColor3f(Hotpink);
glTranslatef(480, 270, 0);//12
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-480, -270, 0);
glColor3f(Hotpink);
glTranslatef(240, -100, 0);//13
glutSolidSphere(90.0, 200, 200);//（半径/球面数）
glTranslatef(-240, 100, 0);
glColor3f(Hotpink);
glTranslatef(360, -100, 0);//14
glutSolidSphere(90.0, 200, 200);//（半径/球面数）
glTranslatef(-360, 100, 0);
glColor3f(Hotpink);
glTranslatef(300, -50, 0);//15
glutSolidSphere(90.0, 200, 200);//（半径/球面数）
glTranslatef(-300, 50, 0);
glColor3f(Hotpink);
glTranslatef(300, 50, 0);//16
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-300, -50, 0);
glColor3f(Hotpink);
glTranslatef(260, 100, 0);//17
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-260, -100, 0);
glColor3f(Hotpink);
glTranslatef(340, 100, 0);//18
glutSolidSphere(100.0, 200, 200);//（半径/球面数）
glTranslatef(-340, -100, 0);
//glColor3f(Hotpink);
//glTranslatef(300, 40, -50);//19
//glutSolidSphere(200.0, 200, 200);//（半径/球面数）
//glTranslatef(-300, -40, 50);
//***************************************************
glFlush(); // 刷新
glutSwapBuffers();//双缓冲
}
// 窗口大小变化回调函数
void reshape(int w, int h) {
glViewport(0, 0, w, h);//定义视口大小
glMatrixMode(GL_PROJECTION);//为投影变换指定当前矩阵
glLoadIdentity();//设置当前矩阵为单位矩阵
gluPerspective(90.0, (GLfloat)w / (GLfloat)h, 0.1, 100000.0);//设置透视投影矩阵,指定了要观察的视景体在世界坐标系中的具体大小
//（视角，横纵比，近处裁面，远处裁面）
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}
// 动画所需的定时器回调函数
void timer_function(GLint value)
{
// 旋转角度增加
angle += STEP;
// 若角度大于360转完一圈则清零
if (angle > 360.0) angle -= 360.0;
glutPostRedisplay();
glutTimerFunc(33, timer_function, value);
}
void init(void)
{
GLfloat sun_direction[] = { 700.0, 400.0, 100.0, 1.0 };
GLfloat sun_intensity[] = { sunshine, 1.0 };
GLfloat ambient_intensity[] = { 0.5, 0.5, 0.5, 1.0 };//周围环境的强度
glEnable(GL_LIGHTING); // Set up ambient light.环境光
glLightModelfv(GL_LIGHT_MODEL_AMBIENT, ambient_intensity);//全局光照
glEnable(GL_LIGHT0); // Set up sunlight.漫反射
glLightfv(GL_LIGHT0, GL_POSITION, sun_direction);
glLightfv(GL_LIGHT0, GL_DIFFUSE, sun_intensity);
glEnable(GL_COLOR_MATERIAL); //如果在光照下希望模型的颜色可以起作用，需要启动颜色材料模式:
glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);//表示模型的正面接受环境光和散射光
glLineWidth(5);
glClearColor(0.0, 0.0, 0.0, 0.0); //定义背景颜色--> black
//允许二维映射
glEnable(GL_MAP2_VERTEX_3);
//二维映射：x、y方向U和V的参数[0, 1]，且中间插值数量为各20个
glMapGrid2f(20, 0.0, 1.0, 20, 0.0, 1.0);
//启用反走样
glEnable(GL_BLEND);
glEnable(GL_LINE_SMOOTH);
glHint(GL_LINE_SMOOTH_HINT, GL_FASTEST); // (指定反走样线段的采样质量,选择速度最快选项)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glEnable(GL_BLEND); // 打开颜色混合
glDisable(GL_DEPTH_TEST); // 关闭深度测试
glBlendFunc(GL_SRC_ALPHA, GL_ONE); // 基于源像素α通道值的半透明混合函数,可以透过窗户看房内
glEnable(GL_DEPTH_TEST); //打开深度测试
glMatrixMode(GL_PROJECTION); // 貌似和视角有关的定义 places the camera at (0,0,0) and faces it along(0,0,-1).
glOrtho(-w, w, -h, h, -w, w); // 创建一个正交平行的视景体。 一般用于物体不会因为离屏幕的远近而产生大小的变换的情况
}
void specialkeys(int key, int x, int y){ //键盘相应函数
//旋转
if (key == GLUT_KEY_RIGHT)
rotate_y -= 1;
else if (key == GLUT_KEY_LEFT)
rotate_y += 1;
else if (key == GLUT_KEY_DOWN)
rotate_x -= 1;
else if (key == GLUT_KEY_UP)
rotate_x += 1;
glutPostRedisplay();
}
int main(int argc, char** argv) // main函数
{
float x, y, a;
for (y = 1.5; y > -1.5; y -= 0.1)
{
for (x = -1.5; x < 1.5; x += 0.05)
{
a = x * x + y * y - 1;
putchar(a * a * a - x * x * y * y * y <= 0.0 ? '*' : ' ');
}
putchar('\n');
}
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(w, h);
glutInitWindowPosition(100, 100);
glutCreateWindow("The LOVE");
init();
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);//源颜色的α作为源因子/1-α作为目标因子
glEnable(GL_DEPTH_TEST); //启动深度缓存
glutSpecialFunc(specialkeys); //调用键盘控制函数
glutDisplayFunc(display);
//glutReshapeFunc(reshape);
glutTimerFunc(500, timer_function, 1);
glutIdleFunc(display);//设置空闲时调用的函数
glutMainLoop();
//system("pause");
return 0;
}实现效果：
3）、李峋爱心html+css+js；
说明：本代码是参考其他博主，方便大家学习借鉴，全部代码也粘贴如下：
（自己新建一个文本文件，以下全部代码粘贴进去，然后将文本文件的格式重命名由.txt改成.html然后直接打开就可以啦）
另注：有一部分没有基础的小笨蛋们还会遇到这样的问题（因为我发给我的小伙伴们遇到了QAQ),大家新建文本文件后，一部分人的电脑没有改动前不显示文件格式，即不是名字+.txt的形式，首先需要显示文件格式，才能改文件格式。
显示文件格式如下：
①打开我的电脑，在下图位置1点击三个点 
②在位置2点击选项
③打开文件夹选项后，点击位置3查看，之后滑动高级设置滚动栏，找出位置4隐藏已知文件类型的扩展名，将它前面的勾取消即可。然后点击应用，点击确定就完成了！
显示出文件类型之后，将文件后缀.txt改成.htm（重命名改）就可以啦！
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
.aa {
position: fixed;
left: 50%;
bottom: 10px;
color: #ccc;
}
.container {
width: 100%;
height: 100%;
}
canvas {
z-index: 99;
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<!-- 樱花 -->
<div id="jsi-cherry-container" class="container">
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio>
<img class="img" src="./123.png" alt="" />
<!-- 爱心 -->
<canvas id="pinkboard" class="container"> </canvas>
</div>
</body>
</html>
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
(function () {
var b = 0;
var c = ["ms", "moz", "webkit", "o"];
for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[c[a] + "CancelAnimationFrame"] ||
window[c[a] + "CancelRequestAnimationFrame"];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (h, e) {
var d = new Date().getTime();
var f = Math.max(0, 16 - (d - b));
var g = window.setTimeout(function () {
h(d + f);
}, f);
b = d + f;
return g;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (d) {
clearTimeout(d);
};
}
})();
/*
* Point class
*/
var Point = (function () {
function Point(x, y) {
this.x = typeof x !== "undefined" ? x : 0;
this.y = typeof y !== "undefined" ? y : 0;
}
Point.prototype.clone = function () {
return new Point(this.x, this.y);
};
Point.prototype.length = function (length) {
if (typeof length == "undefined")
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function () {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
/*
* Particle class
*/
var Particle = (function () {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function (x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function (deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function (context, image) {
function ease(t) {
return --t * t * t + 1;
}
var size = image.width * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.drawImage(
image,
this.position.x - size / 2,
this.position.y - size / 2,
size,
size
);
};
return Particle;
})();
/*
* ParticlePool class
*/
var ParticlePool = (function () {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
particles[i] = new Particle();
}
ParticlePool.prototype.add = function (x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};
ParticlePool.prototype.update = function (deltaTime) {
var i;
// update active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
}
// remove inactive particles
while (
particles[firstActive].age >= duration &&
firstActive != firstFree
) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function (context, image) {
// draw active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].draw(context, image);
for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
}
};
return ParticlePool;
})();
/*
* Putting it all together
*/
(function (canvas) {
var context = canvas.getContext("2d"),
particles = new ParticlePool(settings.particles.length),
particleRate =
settings.particles.length / settings.particles.duration, // particles/sec
time;
// get point on heart with -PI <= t <= PI
function pointOnHeart(t) {
return new Point(
160 * Math.pow(Math.sin(t), 3),
130 * Math.cos(t) -
50 * Math.cos(2 * t) -
20 * Math.cos(3 * t) -
10 * Math.cos(4 * t) +
25
);
}
// creating the particle image using a dummy canvas
var image = (function () {
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = settings.particles.size;
canvas.height = settings.particles.size;
// helper function to create the path
function to(t) {
var point = pointOnHeart(t);
point.x =
settings.particles.size / 2 +
(point.x * settings.particles.size) / 350;
point.y =
settings.particles.size / 2 -
(point.y * settings.particles.size) / 350;
return point;
}
// create the path
context.beginPath();
var t = -Math.PI;
var point = to(t);
context.moveTo(point.x, point.y);
while (t < Math.PI) {
t += 0.01; // baby steps!
point = to(t);
context.lineTo(point.x, point.y);
}
context.closePath();
// create the fill
context.fillStyle = "#ea80b0";
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;
})();
// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(settings.particles.velocity);
particles.add(
canvas.width / 2 + pos.x,
canvas.height / 2 - pos.y,
dir.x,
-dir.y
);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, image);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function () {
onResize();
render();
}, 10);
})(document.getElementById("pinkboard"));
</script>
<script>
var RENDERER = {
INIT_CHERRY_BLOSSOM_COUNT: 30,
MAX_ADDING_INTERVAL: 10,
init: function () {
this.setParameters();
this.reconstructMethods();
this.createCherries();
this.render();
if (
navigator.userAgent.match(
/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
// var box = document.querySelectorAll(".box")[0];
// console.log(box, "移动端");
// box.style.marginTop = "65%";
}
},
setParameters: function () {
this.$container = $("#jsi-cherry-container");
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $("<canvas />")
.attr({ width: this.width, height: this.height })
.appendTo(this.$container)
.get(0)
var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
x = this.renderer.width / 2 + this.x * rate,
y = this.renderer.height / 2 - this.y * rate;
return { rate: rate, x: x, y: y };
},
re
}
} else {
this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);
this.phi %= Math.PI;
}
if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
this.x += 2;
this.y = -this.renderer.height * this.SURFACE_RATE;
} else {
this.x += this.vx;
this.y += this.vy;
}
return (
this.z > -this.FOCUS_POSITION &&
this.z < this.FAR_LIMIT &&
this.x < this.renderer.width * 1.5
);
},
};
$(function () {
RENDERER.init();
});
</script>
实现效果如下：
自己兴趣所做，有问题可以评论提出虚心请教！感谢喜欢！
加字比如：
文章来源：https://www.toymoban.com/news/detail-545210.html
有想加特定字的再和我联系啦啦啦啦文章来源地址https://www.toymoban.com/news/detail-545210.html
到了这里，关于爱心代码html或c++调用opengl库两种实现（二维三维动态也可键盘交互）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
