Nulo
11 months ago
commit
2c70605ba1
14 changed files with 316 additions and 0 deletions
@ -0,0 +1,5 @@
|
||||
node_modules |
||||
.DS_Store |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="es"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<!-- TODO: favicon --> |
||||
<!-- <link rel="icon" type="image/svg+xml" href="favicon.svg" /> --> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Salvá la costanera</title> |
||||
</head> |
||||
<body> |
||||
<div style="display: none"> |
||||
<!-- Cargar imágenes --> |
||||
<img id="img-boton-jugar" src="/src/assets/boton_jugar.png"> |
||||
<img id="img-larreta" src="/src/assets/larreta.png"> |
||||
<img id="img-vereda" src="/src/assets/piso.png"> |
||||
<img id="img-fondo" src="/src/assets/fondo.png"> |
||||
</div> |
||||
<canvas id="juego" width="1280" height="720"></canvas> |
||||
<script type="module" src="/src/main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,12 @@
|
||||
{ |
||||
"name": "salva-la-costanera", |
||||
"version": "0.0.0", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"serve": "vite preview" |
||||
}, |
||||
"devDependencies": { |
||||
"vite": "^2.3.8" |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@
|
||||
lockfileVersion: 5.3 |
||||
|
||||
specifiers: |
||||
vite: ^2.3.8 |
||||
|
||||
devDependencies: |
||||
vite: 2.3.8 |
||||
|
||||
packages: |
||||
|
||||
/colorette/1.2.2: |
||||
resolution: {integrity: sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==} |
||||
dev: true |
||||
|
||||
/esbuild/0.12.9: |
||||
resolution: {integrity: sha512-MWRhAbMOJ9RJygCrt778rz/qNYgA4ZVj6aXnNPxFjs7PmIpb0fuB9Gmg5uWrr6n++XKwwm/RmSz6RR5JL2Ocsw==} |
||||
hasBin: true |
||||
requiresBuild: true |
||||
dev: true |
||||
|
||||
/fsevents/2.3.2: |
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} |
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} |
||||
os: [darwin] |
||||
dev: true |
||||
optional: true |
||||
|
||||
/function-bind/1.1.1: |
||||
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} |
||||
dev: true |
||||
|
||||
/has/1.0.3: |
||||
resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} |
||||
engines: {node: '>= 0.4.0'} |
||||
dependencies: |
||||
function-bind: 1.1.1 |
||||
dev: true |
||||
|
||||
/is-core-module/2.4.0: |
||||
resolution: {integrity: sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==} |
||||
dependencies: |
||||
has: 1.0.3 |
||||
dev: true |
||||
|
||||
/nanoid/3.1.23: |
||||
resolution: {integrity: sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==} |
||||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} |
||||
hasBin: true |
||||
dev: true |
||||
|
||||
/path-parse/1.0.7: |
||||
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} |
||||
dev: true |
||||
|
||||
/postcss/8.3.5: |
||||
resolution: {integrity: sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==} |
||||
engines: {node: ^10 || ^12 || >=14} |
||||
dependencies: |
||||
colorette: 1.2.2 |
||||
nanoid: 3.1.23 |
||||
source-map-js: 0.6.2 |
||||
dev: true |
||||
|
||||
/resolve/1.20.0: |
||||
resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==} |
||||
dependencies: |
||||
is-core-module: 2.4.0 |
||||
path-parse: 1.0.7 |
||||
dev: true |
||||
|
||||
/rollup/2.52.3: |
||||
resolution: {integrity: sha512-QF3Sju8Kl2z0osI4unyOLyUudyhOMK6G0AeqJWgfiyigqLAlnNrfBcDWDx+f1cqn+JU2iIYVkDrgQ6/KtwEfrg==} |
||||
engines: {node: '>=10.0.0'} |
||||
hasBin: true |
||||
optionalDependencies: |
||||
fsevents: 2.3.2 |
||||
dev: true |
||||
|
||||
/source-map-js/0.6.2: |
||||
resolution: {integrity: sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==} |
||||
engines: {node: '>=0.10.0'} |
||||
dev: true |
||||
|
||||
/vite/2.3.8: |
||||
resolution: {integrity: sha512-QiEx+iqNnJntSgSF2fWRQvRey9pORIrtNJzNyBJXwc+BdzWs83FQolX84cTBo393cfhObrtWa6180dAa4NLDiQ==} |
||||
engines: {node: '>=12.0.0'} |
||||
hasBin: true |
||||
dependencies: |
||||
esbuild: 0.12.9 |
||||
postcss: 8.3.5 |
||||
resolve: 1.20.0 |
||||
rollup: 2.52.3 |
||||
optionalDependencies: |
||||
fsevents: 2.3.2 |
||||
dev: true |
||||
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 666 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,50 @@
|
||||
import { posInBox } from './utils.js' |
||||
|
||||
const larretaImg = document.getElementById("img-larreta") |
||||
const inmobiliariaImg = document.getElementById("img-inmobiliaria") |
||||
const veredaImg = document.getElementById("img-vereda") |
||||
const fondoImg = document.getElementById("img-fondo") |
||||
|
||||
export function createJugandoState() { |
||||
return { |
||||
current: 'jugando', |
||||
pos: { x: 0 }, |
||||
velocity: { x: 0 }, |
||||
// { x }
|
||||
enemies: [{ x: 0 }], |
||||
} |
||||
} |
||||
|
||||
export function updateJugando(juego, dt) { |
||||
juego.state.velocity.x = 0 |
||||
if (juego.keyboard.keys.d) { |
||||
juego.state.velocity.x += 20 |
||||
} |
||||
if (juego.keyboard.keys.a) { |
||||
juego.state.velocity.x -= 20 |
||||
} |
||||
juego.state.pos.x += juego.state.velocity.x |
||||
} |
||||
|
||||
function drawBackground(juego, y, height, img) { |
||||
const aspect = img.width / img.height |
||||
const width = height * aspect |
||||
const realY = typeof y === 'function' |
||||
? y(height) |
||||
: y |
||||
for (let i = 0; i < 10; i++) { |
||||
juego.ctx.drawImage(img, i * (width - 1) - juego.state.pos.x, realY, width, height) |
||||
} |
||||
} |
||||
|
||||
export function drawJugando(juego) { |
||||
const {width, height} = juego.canvas |
||||
const {x} = juego.state.pos |
||||
|
||||
drawBackground(juego, 0, (height / 3) * 2, fondoImg) |
||||
drawBackground(juego, h => height - h, height / 3, veredaImg) |
||||
|
||||
for (const enemy of juego.state.enemies) { |
||||
//juego.ctx.drawImage(larretaImg, enemy.x, btn.y, btn.width, btn.height)
|
||||
} |
||||
} |
||||
@ -0,0 +1,85 @@
|
||||
import './style.css' |
||||
|
||||
import { drawWelcome, updateWelcome } from "./welcome.js" |
||||
import { drawJugando, updateJugando } from "./jugando.js" |
||||
|
||||
function update(juego, dt) { |
||||
switch (juego.state.current) { |
||||
case "welcome": |
||||
updateWelcome(juego, dt) |
||||
break |
||||
case "jugando": |
||||
updateJugando(juego, dt) |
||||
break |
||||
} |
||||
} |
||||
|
||||
function draw(juego) { |
||||
const {width, height} = juego.canvas |
||||
|
||||
juego.ctx.clearRect(0, 0, width, height) |
||||
switch (juego.state.current) { |
||||
case "welcome": |
||||
drawWelcome(juego) |
||||
break |
||||
case "jugando": |
||||
drawJugando(juego) |
||||
break |
||||
} |
||||
} |
||||
|
||||
function resizeCanvas(canvas) { |
||||
canvas.width = canvas.clientWidth |
||||
canvas.height = canvas.clientHeight |
||||
} |
||||
|
||||
function initJuego() { |
||||
const canvas = document.querySelector("#juego") |
||||
const ctx = canvas.getContext("2d") |
||||
|
||||
window.addEventListener("resize", () => resizeCanvas(canvas), false) |
||||
resizeCanvas(canvas) |
||||
|
||||
let juego = { |
||||
canvas, |
||||
ctx, |
||||
mouse: { x: 0, y: 0, down: false }, |
||||
keyboard: { keys: {} }, |
||||
state: { |
||||
current: "welcome", |
||||
}, |
||||
} |
||||
window.juego = juego |
||||
|
||||
canvas.addEventListener("mousemove", e => { |
||||
juego.mouse.x = e.clientX |
||||
juego.mouse.y = e.clientY |
||||
}, false) |
||||
canvas.addEventListener("mousedown", e => { |
||||
juego.mouse.down = true |
||||
}, false) |
||||
canvas.addEventListener("mouseup", e => { |
||||
juego.mouse.down = false |
||||
}, false) |
||||
window.addEventListener("keydown", e => { |
||||
juego.keyboard.keys[e.key] = true |
||||
}) |
||||
window.addEventListener("keyup", e => { |
||||
juego.keyboard.keys[e.key] = false |
||||
}) |
||||
|
||||
let lastRender = 0 |
||||
function loop(timestamp) { |
||||
const progress = timestamp - lastRender |
||||
|
||||
update(juego, progress) |
||||
draw(juego) |
||||
|
||||
lastRender = timestamp |
||||
window.requestAnimationFrame(loop) |
||||
} |
||||
|
||||
window.requestAnimationFrame(loop) |
||||
} |
||||
initJuego() |
||||
document.addEventListener("DOMDocumentLoaded", console.log) |
||||
@ -0,0 +1,17 @@
|
||||
html, body { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
margin: 0; |
||||
padding: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
#juego { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
@ -0,0 +1,4 @@
|
||||
export function posInBox(box, pos) { |
||||
return pos.x > box.x && pos.x < box.x + box.width |
||||
&& pos.y > box.y && pos.y < box.y + box.height |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
import { posInBox } from './utils.js' |
||||
import { createJugandoState } from './jugando.js' |
||||
|
||||
const img = document.getElementById("img-boton-jugar") |
||||
|
||||
function startButton(juego) { |
||||
const [width, height] = [img.width / 4, img.height / 4] |
||||
return { |
||||
x: juego.canvas.width - width - 30, |
||||
y: juego.canvas.height - height - 30, |
||||
width, |
||||
height, |
||||
} |
||||
} |
||||
|
||||
export function updateWelcome(juego, dt) { |
||||
const btn = startButton(juego) |
||||
if (juego.mouse.down && posInBox(btn, juego.mouse)) { |
||||
juego.state = createJugandoState() |
||||
} |
||||
} |
||||
|
||||
export function drawWelcome(juego) { |
||||
const {width, height} = juego.canvas |
||||
const btn = startButton(juego) |
||||
juego.ctx.drawImage(img, btn.x, btn.y, btn.width, btn.height) |
||||
} |
||||
Loading…
Reference in new issue