Interactive Actor Game
About this app
An interactive 2d game where actors can display graphics, move, and interact with each other.
Pixel Adventure Game
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
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!