I thought was hard but with the use of two neurons here done and could became a game of the kind take the sphere to its home, or if the sphere went to the right place will change the colour till you got the right colour and win the game. This is one of test your skills - introducing to events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skills 2 Events</title>
<style>
* {
box-sizing: border-box;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Skills 02 Events</h1>
<section class="preview"></section>
<canvas width="600" height="600" tabindex="0">
</canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
//ctx.beginPath();
//ctx.fillStyle = 'black';
//ctx.arc(0,0,20,0,Math.PI*2);
function drawCircle(x,y,size) {
ctx.fillStyle = 'white';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.arc(x,y,size,0,Math.PI*2);
ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x,y,size);
document.body.addEventListener('keydown', (event)=> {
if(event.key === 'w'|| event.key ==='W') {
y -= 5;
drawCircle(x,y,size);
}
else if(event.key === 's' || event.key === 'S') {
y += 5;
drawCircle(x,y,size);
}
else if (event.key === 'a' || event.key === 'A') {
x -= 5;
drawCircle(x,y,size);
} else if (event.key === 'd' || event.key === 'D') {
x += 5;
drawCircle(x,y,size);
}
});
</script>
</body>
</html>
Rute Bezerra de Menezes Gondim
Ps.: The hard of publish the game working is that in the blog all the variables that are on the same page will mix with the next code, so if I want publish the final result I have to rewrite the code to make names that aren't in common with other codes that is in the same page.
Ps 2.: The keys to move the sphere are the w, a, s, d.
No comments:
Post a Comment