Создал свою первую игру на Javascript, и это было так просто

Посетить мою демо 😅

Чтобы посетить исходный код 😈 перейдите на мой github

Шаг 0:

Создайте index.html, который будет вашим документом.

Шаг 1:

Прежде всего, включите p5.js, используя CDN внутри вашего документа.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script >

Шаг 2:

Добавьте в документ файл сценария, скажем, script.js.

<script src="./script.js"></script>

Вот вы и вставили свою логику.

Шаг 3.

Добавьте файл css в документ, скажем, style.css

<link rel="stylesheet" href="./style.css" />

Здесь вы размещаете свой стиль.

Вот как будет выглядеть ваш index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Color Matching Game </title>
</head>
<body>

<h2>Color Matching Game</h2>
<p>Click on the screen to switch the colors</p>

<script      src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js'></script>
<script src="./script.js"></script>

</body>
</html>

Шаг 4.

Добавьте немного логики в ваш файл script.js

const colors = {
	red: '#E53E3E',
	blue: '#4299E1'
}

let ballSpeed = 2;
let score = 0;

// used to place the middle balls
let topPosition;
let bottomPosition;
const middleOffset = 20;

let ballTop;
let ballBottom;
let enemyBalls = [];

function setup() {
	createCanvas(350, 600);
	
	// set positions
	topPosition = height / 2 - middleOffset;
	bottomPosition = height / 2 + middleOffset;
	
	// create middle balls
	ballTop = new Ball({ x: width / 2, y: topPosition, col: colors.red });
	ballBottom = new Ball({ x: width / 2, y: bottomPosition, col: colors.blue });
	
	createRandomFallingBall();
}

function draw() {
	background(51);
	
	ballTop.draw();
	ballBottom.draw();
	
	enemyBalls.forEach(ball => {
		ball.checkHit(ballTop);
		ball.checkHit(ballBottom);
		ball.update();
		ball.draw();
	});
	
	fill(255);
	textSize(16);
	text(`Score: ${score}`, width - 75, 25);
}

function createRandomFallingBall() {
	const ballCommonOptions = {
		x: width / 2,
		col: Math.random() < 0.5 ? colors.red : colors.blue
		
	}
	const ballTopOptions = {
		y: 0,
		dy: ballSpeed,
		...ballCommonOptions
	}
	
	const ballBottomOptions = {
		y: height,
		dy: -ballSpeed,
		...ballCommonOptions
	}
	
	const ball = new Ball(Math.random() < 0.5 ? ballTopOptions : ballBottomOptions);
	enemyBalls.push(ball);
}

function removeBall(ball) {
	enemyBalls = enemyBalls.filter(b => b !== b);
}

function mousePressed() {
	let temp = ballTop.pos.y;
	ballTop.pos.y = ballBottom.pos.y;
	ballBottom.pos.y = temp;
}

class Ball {
	constructor(options) {
		this.pos = createVector(options.x, options.y);
		this.vel = createVector(0, options.dy || 0);
		this.size = 15;
		this.col = options.col || colors.red;
	}
	
	update() {
		this.pos.add(this.vel);
	}
	
	checkHit(ball) {
		const d = dist(ball.pos.x, ball.pos.y, this.pos.x, this.pos.y); 
		if(d < this.size * 2) {
			if(this.col === ball.col) {
				score++;
				ballSpeed += 0.2;
			} else {
				score = 0;
				ballSpeed = 2;
			}
			
			removeBall(this);
			createRandomFallingBall();
		}
	}
	
	draw() {
		fill(this.col);
		noStroke();
		circle(this.pos.x, this.pos.y, this.size * 2)
	}
}

Шаг 5.

you feel good if you look good😛

Итак, добавление стилей тоже.

body {
 background-color: #5758BB;
 color: #fff;
 display: flex;
 align-items: center;
 flex-direction: column;
 min-height: 100vh;
 margin: 0;
}
h2 {
 margin: 10px 0 0;
}
p {
 margin: 5px 0;
}
a {
 color: #fff;
}
canvas {
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 cursor: pointer;
 margin-top: 20px;
}

Шаг 6.
ТАДА…Игра началась🚀 🚀🚀🚀🚀🚀

Создал свою первую игру на Javascript, и это было так просто

Вопросы по теме