help for website game base
so this is my very first project on a "Game". it's a green dot that just moves using wasd. I need help on getting a brown box on the side to appear with text in it when you get to a specific pixel.
here's the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#gameArea {
border: 4px solid rgb(57, 143, 223);
}
body {
height: 100vh;
background: linear-gradient(
0deg,
rgba(57, 143, 223) 0%,
rgba(255, 255, 255) 50%,
rgba(255, 167, 36) 100%
);
text-align: center;
overflow: hidden;
}
h1 {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>water problems</h1>
<canvas id="gameArea" width="800" height="600"></canvas>
<script src="index.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#gameArea {
border: 4px solid rgb(57, 143, 223);
}
body {
height: 100vh;
background: linear-gradient(
0deg,
rgba(57, 143, 223) 0%,
rgba(255, 255, 255) 50%,
rgba(255, 167, 36) 100%
);
text-align: center;
overflow: hidden;
}
h1 {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>water problems</h1>
<canvas id="gameArea" width="800" height="600"></canvas>
<script src="index.js"></script>
</body>
</html>
and then the java:
const canvas = document.getElementById('gameArea');
const ctx = canvas.getContext("2d");
let x = 100;
let y = 100;
let radius = 30;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
function DrawGame(){
clearScreen();
inputs();
drawCharacter();
}
function inputs(){
if(downPressed){
y = y + 5;
}
if(upPressed){
y = y - 5;
}
if(leftPressed){
x = x - 5;
}
if(rightPressed){
x = x + 5;
}
}
function drawCharacter(){
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
function clearScreen(){
ctx.fillStyle= "black";
ctx.fillRect(0,0, canvas.width, canvas.height);
}
document.body.addEventListener("keydown", keyDown);
document.body.addEventListener("keyup", keyUp);
function keyDown(event){
if(event.keyCode == 83){
downPressed = true;
}
if(event.keyCode == 87){
upPressed = true;
}
if(event.keyCode == 65){
leftPressed = true;
}
if(event.keyCode == 68){
rightPressed = true;
}
}
function keyUp(event){
if(event.keyCode == 83){
downPressed = false;
}
if(event.keyCode == 87){
upPressed = false;
}
if(event.keyCode == 65){
leftPressed = false;
}
if(event.keyCode == 68){
rightPressed = false;
}
}
setInterval(DrawGame, 1000/60);const canvas = document.getElementById('gameArea');
const ctx = canvas.getContext("2d");
let x = 100;
let y = 100;
let radius = 30;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
function DrawGame(){
clearScreen();
inputs();
drawCharacter();
}
function inputs(){
if(downPressed){
y = y + 5;
}
if(upPressed){
y = y - 5;
}
if(leftPressed){
x = x - 5;
}
if(rightPressed){
x = x + 5;
}
}
function drawCharacter(){
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
function clearScreen(){
ctx.fillStyle= "black";
ctx.fillRect(0,0, canvas.width, canvas.height);
}
document.body.addEventListener("keydown", keyDown);
document.body.addEventListener("keyup", keyUp);
function keyDown(event){
if(event.keyCode == 83){
downPressed = true;
}
if(event.keyCode == 87){
upPressed = true;
}
if(event.keyCode == 65){
leftPressed = true;
}
if(event.keyCode == 68){
rightPressed = true;
}
}
function keyUp(event){
if(event.keyCode == 83){
downPressed = false;
}
if(event.keyCode == 87){
upPressed = false;
}
if(event.keyCode == 65){
leftPressed = false;
}
if(event.keyCode == 68){
rightPressed = false;
}
}
setInterval(DrawGame, 1000/60);
u/Human-Fun-8325 — 5 days ago