p5实现射击虫子类小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：p5实现射击虫子类小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@700&display=swap");

html,
body {
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
	cursor: crosshair;
	overflow: none;
}

.footer {
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: white;
	font-size: 12px;
	text-align: right;
	font-family: monospace;
	pointer-events: none;
}

.footer a {
	color: white;
	text-decoration: none;
}
</style>

  
</head>

<body>
  <div class="footer">
	Made with ❤️ by Marcus | Visit <a href="h" target="_blank">Shopblocks</a>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script >
const tileSize = 32;

let isGamePaused = false;
let spiders = [];
let player;
let spiderSpawnTime = 300;
let spiderMaxSpeed = 1.2;
let frame = 0;
let score = 0;
let highScore = 0;

// Preload images
let playerSprite;
let spiderSprite;

function preload() {
	playerSprite = loadImage(
		"//repo.bfw.wiki/bfwrepo/images/shoot/spiritsone.png"
	);
	spiderSprite = loadImage(
		"//repo.bfw.wiki/bfwrepo/images/shoot/spiritstwo.png"
	);
}

let touches = [];
let isMobileDevice = false;

function setup() {
	canvas = createCanvas(windowWidth, windowHeight);
	canvas.elt.setAttribute("style", "display: block");
	pixelDensity(1);
	player = new Player();

	for (let i = 0; i < 42; i++) {
		spiders.push(new Spider(random(spiderMaxSpeed)));
	}

	// Detect if it's a mobile device
	detectMobile();

	if (isMobileDevice) {
		// Add touch event listeners for player movement and shooting
		canvas.mousePressed(() => {
			// Trigger shooting on touch (for mobile devices)
			if (mouseButton === LEFT) {
				player.shoot();
			}
		});

		// Add touch event listeners for player movement
		canvas.touchStarted(handleTouch);
		canvas.touchMoved(handleTouch);
		canvas.touchEnded(handleTouch);
	}

	const savedHighScore = localStorage.getItem("highScore");
	if (savedHighScore) {
		highScore = parseInt(savedHighScore);
	}
}

function handleTouch(event) {
	touches = event.touches;
}

// Detect if it's a mobile device
function detectMobile() {
	if (
		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
			navigator.userAgent
		)
	) {
		isMobileDevice = true;
	}
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

function handleGameOver() {
	isGamePaused = true;

	if (score > highScore) {
		highScore = score; // Update the high score
		localStorage.setItem("highScore", highScore); // Save the high score to local storage
	}
}

function draw() {
	if (isGamePaused) {
		// Display the pause screen with a transparent background
		background(0, 0, 0, 200); // Transparent black background
		textSize(32);
		fill(255);
		textAlign(CENTER);
		text("Game Over", width / 2, height / 2 - 100);
		text("Current Score: " + score, width / 2, height / 2);
		text("High Score: " + highScore, width / 2, height / 2 + 50);

		// Draw the "Restart" button (you can customize the appearance)
		fill(100, 100, 200);
		rectMode(CENTER); // Set the rectangle mode to CENTER
		rect(width / 2, height / 2 + 117, 150, 50);
		fill(255);
		textSize(24); // Adjust text size
		text("Restart", width / 2, height / 2 + 125); // Center the text
		textSize(32); // Restore the text size for other text

		// Handle player input to restart the game
		if (mouseIsPressed) {
			// Check if the mouse is over the "Restart" button
			if (
				mouseX > width / 2 - 75 &&
				mouseX < width / 2 + 75 &&
				mouseY > height / 2 + 75 &&
				mouseY < height / 2 + 125
			) {
				restart();
				isGamePaused = false; // Unpause the game
			}
		}
	} else {
		// Normal game loop
		background(97, 87, 97);
		rectMode(CENTER);

		player.draw();
		player.update();
		player.animate();

		for (let i = spiders.length - 1; i >= 0; i--) {
			spiders[i].draw();
			spiders[i].update();

			if (spiders[i].ateYou()) {
				restart();
				break;
			}

			if (player.hasShot(spiders[i])) {
				score++;
				spiders.splice(i, 1);
			}
		}

		if (frame >= random(spiderSpawnTime, spiderSpawnTime * 1.2)) {
			spiders.push(new Spider(random(spiderMaxSpeed)));
			spiderSpawnTime *= 0.95;
			frame = 0;
		}

		if (frameCount % 1000 == 0) {
			spiderMaxSpeed += 0.1;
		}

		frame++;

		// Draw the score text with a pixelated effect
		textAlign(CENTER);
		textSize(40);
		textFont("Pixelify Sans"); // Use a monospace font for a pixel-like appearance
		fill(255); // White text
		stroke(0); // Black outline
		strokeWeight(4); // Adjust the outline thickness
		text(score, width / 2, 100);

		if (touches.length === 1) {
			const touch = touches[0];
			let joystickCenterX = width / 6;
			let joystickCenterY = height - height / 6;
			let movementVector = createVector(
				touch.x - joystickCenterX,
				touch.y - joystickCenterY
			);
			let movementMagnitude = movementVector.mag();

			if (movementMagnitude > 20) {
				movementVector.normalize();
				movementVector.mult(4); // Adjust the movement speed
				player.pos.add(movementVector);
			}
		}
	}
}

function restart() {
	player = new Player();
	spiders = [];
	spiderSpawnTime = 300;
	spiderMaxSpeed = 1.2;
	score = 0;
}

function mouseClicked() {
	player.shoot();
}

function randomGradient() {
	let colors = [
		color("#b6908d"),
		color("#eacec4"),
		color("#af8886"),
		color("#b09192")
	];
	shuffle(colors, true); // Randomize the colors
	return colors[0];
}

class Bullet {
	constructor(x, y, angle, playerSize) {
		this.pos = createVector(x, y);
		this.speed = 16;
		this.angle = angle;
		this.playerSize = playerSize;
		this.bulletLength = random(playerSize * 0.4, playerSize * 0.6);
		this.bulletWidth = random(playerSize * 0.04, playerSize * 0.06);
		this.circleSize = random(playerSize * 0.06, playerSize * 0.1);
		this.fillColor = randomGradient();
	}

	draw() {
		push();
		noStroke();
		translate(this.pos.x, this.pos.y);
		rotate(this.angle);

		// Gradient fill for the bone
		let fromColor = this.fillColor;
		let toColor = color("#b09192"); // Use the last color in the gradient as the end color
		for (let i = 0; i < 3; i++) {
			let interColor = lerpColor(fromColor, toColor, i / 2);
			fill(interColor);
			rectMode(CENTER);
			rect(0, 0, this.bulletLength, this.bulletWidth, this.circleSize);
			fromColor = interColor;
		}

		// Circles at the ends of the bone
		fill(fromColor);
		ellipse(-this.bulletLength / 2, 0, this.circleSize);
		ellipse(this.bulletLength / 2, 0, this.circleSize);

		stroke("#5d4352"); // Outline color
		strokeWeight(2); // Outline thickness

		pop();
	}.........完整代码请登录后点击上方下载按钮下载查看