Interactive Actor Game
About this app
An interactive 2d game where actors can display graphics, move, and interact with each other.
Pixel Adventure Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pixel Adventure Game</title>
<meta name="description" content="A 2D pixel adventure game where a ghost girl collects skulls and avoids zombies.">
<meta name="keywords" content="pixel adventure, game, 2d, ghost girl, skulls, zombies">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* App CSS Goes Here */
#gameCanvas {
border: 1px solid #000;
background: url('https://images.unsplash.com/photo-1560807707-3b7f5e9f6fdd') no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<canvas id="gameCanvas" width="480" height="320"></canvas>
</div>
<script type="text/javascript">
try {
var actors = []; // Store all actors
var userActor; // The actor controlled by the user
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var score = 0;
var collectiblesCollected = 0;
var isGameOver = false;
var isGameWon = false;
function Actor(x, y, color) { // Actor class
this.x = x;
this.y = y;
this.color = color;
this.dx = 0; // Change in x
this.dy = 0; // Change in y
this.size = 20;
}
Actor.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
Actor.prototype.update = function() {
this.x += this.dx;
this.y += this.dy;
};
// Create user actor
userActor = new Actor(canvas.width/2, canvas.height-30, "#F0FFFF");
actors.push(userActor);
// Create collectible item
var collectible = new Actor(Math.random() * (canvas.width - 40) + 20, Math.random() * (canvas.height - 40) + 20, "#FFFFFF");
collectible.size = 10;
actors.push(collectible);
// Create creature actors
for(var i = 0; i < 5; i++) {
var creature = new Actor(Math.random() * (canvas.width - 40) + 20, Math.random() * (canvas.height - 40) + 20, "#00FF00");
creature.size = 15;
actors.push(creature);
}
// Event listener for user control
document.addEventListener("keydown", function(event) {
if(event.key == "Right" || event.key == "ArrowRight") {
userActor.dx = 2;
}
else if(event.key == "Left" || event.key == "ArrowLeft") {
userActor.dx = -2;
}
});
document.addEventListener("keyup", function(event) {
if(event.key == "Right" || event.key == "ArrowRight") {
userActor.dx = 0;
}
else if(event.key == "Left" || event.key == "ArrowLeft") {
userActor.dx = 0;
}
});
canvas.addEventListener("touchstart", function(event) {
var touchX = event.touches[0].clientX;
if(touchX < userActor.x) {
userActor.dx = -2;
}
else if(touchX > userActor.x) {
userActor.dx = 2;
}
});
canvas.addEventListener("touchend", function(event) {
userActor.dx = 0;
});
function shrinkActor() {
if(userActor.size > 10) {
userActor.size -= 5;
}
else {
isGameOver = true;
}
}
function detectCollision() {
for(var i = 1; i < actors.length; i++) {
var dx = userActor.x - actors[i].x;
var dy = userActor.y - actors[i].y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < userActor.size + actors[i].size) {
if(i === 1) {
collectiblesCollected++;
score++;
if(collectiblesCollected === 5) {
isGameWon = true;
}
collectible.x = Math.random() * (canvas.width - 40) + 20;
collectible.y = Math.random() * (canvas.height - 40) + 20;
}
else {
shrinkActor();
}
actors.splice(i, 1);
break;
}
}
}
function drawActors() {
for(var i = 0; i < actors.length; i++) {
actors[i].draw();
}
}
function updateActors() {
for(var i = 0; i < actors.length; i++) {
actors[i].update();
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Score: " + score, 8, 20);
}
function drawGameOver() {
ctx.font = "40px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("Game Over", canvas.width/2 - 120, canvas.height/2);
}
function drawGameWon() {
ctx.font = "40px Arial";
ctx.fillStyle = "#00FF00";
ctx.fillText("You Won!", canvas.width/2 - 100, canvas.height/2);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(!isGameOver && !isGameWon) {
drawActors();
updateActors();
detectCollision();
drawScore();
requestAnimationFrame(draw);
}
else if(isGameOver) {
drawGameOver();
}
else if(isGameWon) {
drawGameWon();
}
}
draw();
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!