Self Study Lesson
Self Study Lesson on JavaScript For Loops and Sprites
Hack #1: Apply Your Own Game Idea
%%html
<html>
<head>
<title>Player-NPC Game</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 30px;
height: 30px;
text-align: center;
border: 1px solid #000;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Simple Game</h1>
<table id="game-map"></table>
<input type="text" id="direction-input" placeholder="Enter direction (up, down, left, right)">
<button onclick="movePlayer()">Move</button>
<div id="npc-dialog"></div>
<script>
let gameMap = [
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
];
let playerPosition = [0, 0];
let npcPosition = [Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)];
const npcDialog = "Hello! Can you answer a question for me?";
const npcQuestion = "What is the capital of France?";
const npcAnswer = "Paris";
// Display the game map as a table
function displayGameMap() {
let table = document.createElement("table");
for (let i = 0; i < gameMap.length; i++) {
let row = document.createElement("tr");
for (let j = 0; j < gameMap[i].length; j++) {
let cell = document.createElement("td");
if (playerPosition[0] === i && playerPosition[1] === j) {
cell.textContent = "P";
} else if (npcPosition[0] === i && npcPosition[1] === j) {
cell.textContent = "N";
} else {
cell.textContent = gameMap[i][j];
}
row.appendChild(cell);
}
table.appendChild(row);
}
let gameMapDiv = document.getElementById("game-map");
gameMapDiv.innerHTML = "";
gameMapDiv.appendChild(table);
}
// Handle player movement
function movePlayer() {
let direction = document.getElementById("direction-input").value;
document.getElementById("direction-input").value = ""; // Clear the input field
if (direction === "up" && playerPosition[0] > 0) {
playerPosition[0] -= 1;
} else if (direction === "down" && playerPosition[0] < 9) {
playerPosition[0] += 1;
} else if (direction === "left" && playerPosition[1] > 0) {
playerPosition[1] -= 1;
} else if (direction === "right" && playerPosition[1] < 9) {
playerPosition[1] += 1;
}
// Check if player encounters NPC
if (playerPosition[0] === npcPosition[0] && playerPosition[1] === npcPosition[1]) {
interactWithNpc();
}
displayGameMap(); // Update the game map display
}
// Interaction with NPC
function interactWithNpc() {
let dialogDiv = document.getElementById("npc-dialog");
dialogDiv.textContent = npcDialog;
setTimeout(() => {
let playerAnswer = prompt(npcQuestion);
if (playerAnswer.toLowerCase() === npcAnswer.toLowerCase()) {
alert("Correct! You win!");
} else {
alert("Incorrect. Try again.");
}
}, 500);
}
// Display the initial game map
displayGameMap();
</script>
</body>
</html>
Simple Game
%%html
<html>
<head>
<title>Sprite Animation</title>
</head>
<body>
<canvas id="spriteCanvas"></canvas>
<script>
// Sprite sheet metadata
const spriteData = {
src: "https://static.wixstatic.com/media/c6fb96_88ba297597bc4ad0812e06be20cb28c9~mv2.png/v1/fill/w_1600,h_900,al_c,q_90/file.jpg", // Image URL
frameWidth: 100, // Width of each frame
frameHeight: 100, // Height of each frame
framesPerRow: 16, // Number of frames per row
frameCount: 144 // Total number of frames
};
// Create a canvas element
const canvas = document.getElementById("spriteCanvas");
canvas.width = spriteData.frameWidth;
canvas.height = spriteData.frameHeight;
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = spriteData.src;
// Display individual sprites from the sprite sheet
let currentFrame = 0;
const frameSpeed = 10; // Adjust the speed of animation (lower = faster)
let frameCount = 0;
function displaySprite() {
// Calculate row and column based on the current frame
const col = currentFrame % spriteData.framesPerRow;
const row = Math.floor(currentFrame / spriteData.framesPerRow);
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the current frame
ctx.drawImage(
img,
col * spriteData.frameWidth, // X position on sprite sheet
row * spriteData.frameHeight, // Y position on sprite sheet
spriteData.frameWidth,
spriteData.frameHeight,
0, 0,
spriteData.frameWidth,
spriteData.frameHeight
);
// Increment the frame counter
frameCount++;
if (frameCount >= frameSpeed) {
currentFrame = (currentFrame + 1) % spriteData.frameCount;
frameCount = 0;
}
// Request the next animation frame
requestAnimationFrame(displaySprite);
}
// Start the animation when the image is loaded
img.onload = displaySprite;
</script>
</body>
</html>