Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New games features (Controls, Screens, Pause game) #19

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

New games features (Controls, Screens, Pause game) #19

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0821a8a
Adding movement with D and A keys
ChrisJosJC Feb 22, 2024
425ddb4
Incredibles new features for Arkanoid
ChrisJosJC Feb 22, 2024
d5f2004
Everything in English
ChrisJosJC Feb 22, 2024
3793d55
Merge branch 'main' into main
ChrisJosJC Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 167 additions & 17 deletions 02-arkanoid-game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
background-color: #f0f0f0;
display: grid;
place-content: center;
font-family: monospace;
}

canvas {
Expand All @@ -14,9 +15,97 @@
display: block;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}

form {
position: relative;
top: -2;
box-sizing: border-box;
max-width: 455px;
padding-inline: 10px;
padding-bottom: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: #0002;
}

h2 {
margin-bottom: 6px;
}

input[type="range"]:disabled {
transition: all 300ms;
filter: saturate(0);
}

input[type="range"] {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
width: 100%;
cursor: pointer;
outline: none;
/* slider progress trick */
overflow: hidden;
border-radius: 16px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
height: 15px;
background: #fff4;
border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
height: 15px;
background: #ccc;
border-radius: 16px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
height: 15px;
width: 15px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #f50;
/* slider progress trick */
box-shadow: -407px 0 0 400px #f50;
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #f50;
/* slider progress trick */
box-shadow: -407px 0 0 400px #f50;
}
</style>

<canvas></canvas>
<form>
<h2>Controls</h2>
<!-- Dificultad: Velocidad de la bola -->
<label for="mode_game">
Difficulty del juego
<input accesskey="none" type="range" step="1" min="1" max="5" id="mode_game">
</label>
<!-- Velocidad del paddle -->
<label for="mode_paddle">
Paddle sensitivity
<input accesskey="none" type="range" max="16" min="4" id="mode_paddle">
</label>
</form>

<img hidden id="sprite" src="./sprite.png" alt="Sprite Arkanoid" />
<img hidden id="bricks" src="./bricks.png" alt="Sprite Bricks Arkanoid" />
Expand All @@ -27,23 +116,25 @@

const $sprite = document.querySelector('#sprite')
const $bricks = document.querySelector('#bricks')
const $rangePaddle = document.querySelector('#mode_paddle')
const $rangeBall = document.querySelector('#mode_game')

canvas.width = 448
canvas.height = 400

/* Variables de nuestro juego */

let isPaused = true
/* VARIABLES DE LA PELOTA */
const ballRadius = 3;
// posicion de la pelota
let x = canvas.width / 2
let y = canvas.height - 30
// velocidad de la pelota
let dx = -3
let dy = -3
let dx = getControlsValues().ball
let dy = getControlsValues().ball

/* VARIABLES DE LA PALETA */
const PADDLE_SENSITIVITY = 8
let PADDLE_SENSITIVITY = getControlsValues().paddle

const paddleHeight = 10;
const paddleWidth = 50;
Expand Down Expand Up @@ -87,6 +178,24 @@
}
}

function setControlsValues(event, key) {
const { value } = event.target
sessionStorage.setItem(key, value)
}

function getControlsValues(key) {
const ballValue = sessionStorage.getItem("ball") || 2
const paddleValue = sessionStorage.getItem("paddle") || 8

$rangeBall.value = ballValue
$rangePaddle.value = paddleValue
return {
ball: Number(ballValue),
paddle: Number(paddleValue)
}
}



function drawBall() {
ctx.beginPath() // iniciar el trazado
Expand Down Expand Up @@ -132,9 +241,10 @@
}
}
}

function drawUI() {
ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
ctx.beginPath()
ctx.fillText(`FPS: ${framesPerSec}`, 5, 20)
ctx.closePath()
}

function collisionDetection() {
Expand Down Expand Up @@ -186,11 +296,15 @@
} else if ( // la pelota toca el suelo
y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
) {
console.log('Game Over')
document.location.reload()
cleanCanvas()
writeCenterText("Game Over!", 85, "#f00", 50)
isPaused = true
setTimeout(() => {
if (confirm("Do you want to play again?")) document.location.reload()
}, 1000)
}

// mover la pelota
// mover la pelotas
x += dx
y += dy
}
Expand All @@ -207,15 +321,53 @@
ctx.clearRect(0, 0, canvas.width, canvas.height)
}

function writeCenterText(text = "",
x = canvas.width / 3.5 - 50,
color = "#fff",
font = 20) {
ctx.beginPath()
ctx.font = `bold ${font}px monospace`;
ctx.fillStyle = color
ctx.fillText(text, x, canvas.height / 2)
ctx.closePath()
}

function togglePause(event) {
const { key, code } = event
if (key === "p" || code == "Space") {
isPaused = !isPaused
if (!isPaused) draw()
$rangeBall.setAttribute('disabled', true)
$rangePaddle.setAttribute('disabled', true)
}
}


function initEvents() {
document.addEventListener('keydown', togglePause)
document.addEventListener('keydown', keyDownHandler)
document.addEventListener('keyup', keyUpHandler)
$rangePaddle.addEventListener('change', e => setControlsValues(e, 'paddle'))
$rangeBall.addEventListener('change', e => setControlsValues(e, 'ball'))


getControlsValues()



writeCenterText("Press space to start now!")

ctx.beginPath()
ctx.fillStyle = "#fff"
ctx.fillRect(canvas.width / 3.5, canvas.height, 150, 100);
ctx.closePath()


function keyDownHandler(event) {
const { key } = event
if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
if (key === 'Right' || key === 'ArrowRight' || key === 'd') {
rightPressed = true
} else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
} else if (key === 'Left' || key === 'ArrowLeft' || key === 'a') {
leftPressed = true
}
}
Expand All @@ -231,16 +383,16 @@
}

// a que velocidad de fps queremos que renderice nuestro juego
const fps = 60
const fps = 30

let msPrev = window.performance.now()
let msFPSPrev = window.performance.now() + 1000;
const msPerFrame = 1000 / fps
let frames = 0
let framesPerSec = fps;

function draw() {
window.requestAnimationFrame(draw)
if (!isPaused) window.requestAnimationFrame(draw)

const msNow = window.performance.now()
const msPassed = msNow - msPrev
Expand All @@ -252,8 +404,7 @@

frames++

if (msFPSPrev < msNow)
{
if (msFPSPrev < msNow) {
msFPSPrev = window.performance.now() + 1000
framesPerSec = frames;
frames = 0;
Expand All @@ -274,6 +425,5 @@

}

draw()
initEvents()
</script>