forked from sent/waves
383 lines
7.0 KiB
HTML
383 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>CrossNRoad</title>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<meta charset="utf-8" />
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
|
|
<!-- Optional theme -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
<style>
|
|
@import url('https://fonts.cdnfonts.com/css/press-start-2p');
|
|
body {
|
|
font-family: 'Press Start 2P', sans-serif;
|
|
background-color:green; color:white;
|
|
}
|
|
.a {
|
|
display:none;
|
|
}
|
|
button {
|
|
background-color:green;
|
|
border:0;
|
|
}
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
$("button").click(function(){
|
|
$(".a").css("display", "inline");
|
|
|
|
|
|
|
|
});
|
|
});
|
|
$(document).ready(function(){
|
|
$("button").click(function(){
|
|
$(".b").css("display", "none");
|
|
|
|
|
|
|
|
});
|
|
});
|
|
$(document).ready(function(){
|
|
$("button").click(function(){
|
|
$("body").css("background-color", "#00FF00")
|
|
|
|
|
|
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main class="a">
|
|
</main>
|
|
<center>
|
|
<br>
|
|
<h1 class="b">CrossNRoad</h1>
|
|
<button class="b">Click to Play</button>
|
|
|
|
<script>
|
|
let Press;
|
|
|
|
|
|
var carX = 740;
|
|
var carSpeed;
|
|
var carType;
|
|
|
|
var carX2 = 740;
|
|
var carSpeed2;
|
|
var carType2;
|
|
|
|
var carX3 = 740;
|
|
var carSpeed3;
|
|
var carType3;
|
|
|
|
var peepX = 350;
|
|
var peepY = 622;
|
|
var peepRadius = 10;
|
|
|
|
var hasKey = "false";
|
|
var keyX;
|
|
var keyY;
|
|
|
|
var score = 0;
|
|
|
|
var lives = 3;
|
|
var loseMode = false;
|
|
|
|
function preload() {
|
|
Press = loadFont('assets/Press.ttf');
|
|
}
|
|
|
|
function setup() {
|
|
createCanvas(1280, 720);
|
|
carSpeed = random(5, 15);
|
|
carType = random(["🚗", "🚙", "🚓"]);
|
|
|
|
carSpeed2 = random(5, 15);
|
|
carType2 = random(["🚗", "🚙", "🚓"]);
|
|
|
|
carSpeed3 = random(5, 15);
|
|
carType3 = random(["🚗", "🚙", "🚓"]);
|
|
|
|
keyX = random([100, 200, 300, 400, 500, 600]);
|
|
keyY = random([560, 430, 280, 180]);
|
|
}
|
|
|
|
function draw() {
|
|
background(0, 255, 0);
|
|
|
|
lifeCount();
|
|
if (loseMode == false) {
|
|
push();
|
|
fill("grey");
|
|
noStroke();
|
|
rect(0, 330, 700, 275);
|
|
rect(0, 100, 700, 115);
|
|
pop();
|
|
|
|
|
|
|
|
push();
|
|
textFont('Press');
|
|
textSize(20);
|
|
text("Score: " + score, 10, 50);
|
|
pop();
|
|
|
|
cars();
|
|
player();
|
|
doorKey();
|
|
door();
|
|
}
|
|
}
|
|
|
|
function cars() {
|
|
var hitCar1 = rectRect(
|
|
peepX - peepRadius,
|
|
peepY - peepRadius,
|
|
20,
|
|
80,
|
|
carX,
|
|
500,
|
|
100,
|
|
70
|
|
);
|
|
|
|
var hitCar2 = rectRect(
|
|
peepX - peepRadius,
|
|
peepY - peepRadius,
|
|
20,
|
|
80,
|
|
carX2,
|
|
360,
|
|
100,
|
|
70
|
|
);
|
|
|
|
var hitCar3 = rectRect(
|
|
peepX - peepRadius,
|
|
peepY - peepRadius,
|
|
20,
|
|
80,
|
|
carX3,
|
|
115,
|
|
100,
|
|
70
|
|
);
|
|
|
|
push();
|
|
textSize(100);
|
|
text(carType, carX, 570);
|
|
pop();
|
|
carX -= carSpeed;
|
|
|
|
if (carX < -120) {
|
|
carX = 740;
|
|
carSpeed = random(5, 15);
|
|
carType = random(["🚗", "🚙", "🚓"]);
|
|
}
|
|
|
|
push();
|
|
textSize(100);
|
|
text(carType2, carX2, 430);
|
|
pop();
|
|
carX2 -= carSpeed2;
|
|
|
|
if (carX2 < -120) {
|
|
carX2 = 740;
|
|
carSpeed2 = random(5, 15);
|
|
carType2 = random(["🛻", "🚐", "🛺"]);
|
|
}
|
|
|
|
push();
|
|
textSize(100);
|
|
text(carType3, carX3, 185);
|
|
pop();
|
|
carX3 -= carSpeed3;
|
|
|
|
if (carX3 < -120) {
|
|
carX3 = 740;
|
|
carSpeed3 = random(5, 15);
|
|
carType3 = random(["🏍️", "🛵", "🚛"]);
|
|
}
|
|
|
|
if (hitCar1 || hitCar2 || hitCar3) {
|
|
peepX = 350;
|
|
peepY = 622;
|
|
hasKey = "false"
|
|
keyX = random([100, 200, 300, 400, 500, 600]);
|
|
keyY = random([560, 430, 280, 180]);
|
|
lives--;
|
|
}
|
|
}
|
|
|
|
function drawPeep(x, y, size) {
|
|
push();
|
|
strokeWeight(7);
|
|
fill("yellow");
|
|
ellipse(x, y, size);
|
|
|
|
let x0 = x;
|
|
let y0 = y + size / 2;
|
|
line(x0, y0, x0, y0 + 2 * size);
|
|
|
|
line(x0, y0 + size, x0 - size, y0);
|
|
line(x0, y0 + size, x0 + size, y0);
|
|
|
|
line(x0, y0 + 2 * size, x0 + size, y0 + size * 3);
|
|
line(x0, y0 + 2 * size, x0 - size, y0 + size * 3);
|
|
pop();
|
|
}
|
|
|
|
function player() {
|
|
drawPeep(peepX, peepY, peepRadius * 2);
|
|
}
|
|
|
|
function keyPressed() {
|
|
if (key == "w" || keyCode == UP_ARROW) {
|
|
peepY -= 50;
|
|
}
|
|
|
|
if ((key == "s" || keyCode == DOWN_ARROW) && peepY < 620) {
|
|
peepY += 50;
|
|
}
|
|
|
|
if ((key == "a" || keyCode == LEFT_ARROW) && peepX > 0) {
|
|
peepX -= 50;
|
|
}
|
|
|
|
if ((key == "d" || keyCode == RIGHT_ARROW) && peepX < 700) {
|
|
peepX += 50;
|
|
}
|
|
}
|
|
|
|
function doorKey() {
|
|
push();
|
|
textSize(60);
|
|
text("🔑", keyX, keyY);
|
|
pop();
|
|
|
|
var hitKey = rectRect(
|
|
peepX - peepRadius,
|
|
peepY - peepRadius,
|
|
20,
|
|
80,
|
|
keyX,
|
|
keyY - 60,
|
|
60,
|
|
80
|
|
);
|
|
|
|
if (hitKey) {
|
|
hasKey = "true";
|
|
}
|
|
|
|
if (hasKey == "true") {
|
|
keyX = peepX - 20;
|
|
keyY = peepY + 30;
|
|
}
|
|
}
|
|
|
|
function rectRect(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) {
|
|
if (
|
|
r1x + r1w >= r2x &&
|
|
r1x <= r2x + r2w &&
|
|
r1y + r1h >= r2y &&
|
|
r1y <= r2y + r2h
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function door() {
|
|
|
|
push();
|
|
textSize(80);
|
|
text("🚪", 320, 60);
|
|
pop();
|
|
|
|
if (peepX == 350 && peepY == 22 && hasKey == "true") {
|
|
peepY = 622;
|
|
peepX = 350;
|
|
keyX = random([100, 200, 300, 400, 500, 600]);
|
|
keyY = random([550, 450, 350, 250, 150]);
|
|
hasKey = "false";
|
|
score++;
|
|
}
|
|
}
|
|
|
|
function lifeCount() {
|
|
push();
|
|
textSize(50);
|
|
text("❤️", 510, 50);
|
|
text("❤️", 570, 50);
|
|
text("❤️", 630, 50);
|
|
pop();
|
|
|
|
if (lives <= 2) {
|
|
push();
|
|
fill(0, 255, 0);
|
|
noStroke();
|
|
rect(500, 0, 70, 80);
|
|
pop();
|
|
}
|
|
|
|
if (lives <= 1) {
|
|
push();
|
|
fill(0, 255, 0);
|
|
noStroke();
|
|
rect(560, 0, 70, 80);
|
|
pop();
|
|
}
|
|
|
|
if (lives <= 0) {
|
|
loseScreen();
|
|
loseMode = true;
|
|
}
|
|
}
|
|
|
|
function loseScreen() {
|
|
push();
|
|
fill("red");
|
|
noStroke();
|
|
rect(0, 0, 700, 700);
|
|
pop();
|
|
|
|
push();
|
|
textSize(70);
|
|
textAlign(CENTER, CENTER);
|
|
textFont('Press');
|
|
text("You Lose!", 350, 350);
|
|
textSize(15);
|
|
text("You got hit by a car three times.", 350, 420);
|
|
text("Your score was " + score + ".", 350, 460);
|
|
text("If you want to try again, just reload the page.", 350, 500);
|
|
pop();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|