First commit

WEEE-Open · Mar 11, 2024 · f685092 · f685092
commit f685092
Show file tree

Hide file tree

Showing 39 changed files with 742 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1,37 @@
+WEEE Open Game - Developed by WEEE Open student team, 2024
+
+-- How does this works?
+The root of the project is the index.html file, which loads each js module.
+The modules loaded are, in order:
+1. Utils (utils.js)
+2. Assets (assets.js)
+3. Scenes (scene_xxx.js)
+4. (transition.js)
+5. Main (main.js)
+6. Inputs (inputs.js)
+Let's see these modules more in details.
+
+-- 1. Utils
+Contains general global functions that can be useful while coding and that do not require any declared constant/variable.
+Usually Utils contains math functions and other frequent operations.
+
+-- 2. Assets
+-- 2.1. Global variables and functions
+-- 2.2. Resources
+-- 2.3. Rendering properties and functions
+
+-- 3. Scenes
+List of scenes in the format scene_xxx. Each scene must implement four methods:
+-- 3.1. xxxSceneInit(): 
+-- 3.2. xxxSceneKeyPress(key):
+-- 3.3. xxxSceneKeyRelease(key):
+-- 3.4. xxxSceneLoop():
+
+-- 4. Transition
+It's a "special scene" that overlaps others while changing a scene.
+It does not have methods about inputs (key press, key release)
+
+-- 5. Main
+It's the "global scene" that executes the code in each one of the four methods regardless of which scene is active
+
+-- 6. Inputs
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+    body {margin:0}
+</style>
+<title>WOG</title>
+<canvas id="game"></canvas>
+<script src="src/utils.js"></script>
+<script src="src/assets.js"></script>
+<script src="src/scene_game.js"></script>
+<script src="src/scene_menu.js"></script>
+<script src="src/transition.js"></script>
+<script src="src/main.js"></script>
+<script src="src/inputs.js"></script>
diff --git a/res/amp.pdn b/res/amp.pdn
diff --git a/res/amp.png b/res/amp.png
diff --git a/res/background.pdn b/res/background.pdn
diff --git a/res/background.png b/res/background.png
diff --git a/res/character.pdn b/res/character.pdn
diff --git a/res/character.png b/res/character.png
diff --git a/res/clouds.png b/res/clouds.png
diff --git a/res/coin.wav b/res/coin.wav
diff --git a/res/comic_bakery_noise_maker.mp3 b/res/comic_bakery_noise_maker.mp3
diff --git a/res/death.wav b/res/death.wav
diff --git a/res/emulogic.ttf b/res/emulogic.ttf
diff --git a/res/jetpack.wav b/res/jetpack.wav
diff --git a/res/old/amp_old_1.pdn b/res/old/amp_old_1.pdn
diff --git a/res/old/amp_old_2.pdn b/res/old/amp_old_2.pdn
diff --git a/res/old/amp_old_3.pdn b/res/old/amp_old_3.pdn
diff --git a/res/old/amp_old_4.png b/res/old/amp_old_4.png
diff --git a/res/old/background_old_1.png b/res/old/background_old_1.png
diff --git a/res/old/background_old_2.png b/res/old/background_old_2.png
diff --git a/res/old/eli.jpg b/res/old/eli.jpg
diff --git a/res/old/eli.pdn b/res/old/eli.pdn
diff --git a/res/old/grid.png b/res/old/grid.png
diff --git a/res/old/jetpack_old_1.wav b/res/old/jetpack_old_1.wav
diff --git a/res/old/jetpack_old_2.wav b/res/old/jetpack_old_2.wav
diff --git a/res/screw.pdn b/res/screw.pdn
diff --git a/res/screw.png b/res/screw.png
diff --git a/res/sound_of_infinity_f777.mp3 b/res/sound_of_infinity_f777.mp3
diff --git a/res/template.pdn b/res/template.pdn
diff --git a/res/time_machine_waterflame.mp3 b/res/time_machine_waterflame.mp3
diff --git a/res/unreal_super_hero_3.mp3 b/res/unreal_super_hero_3.mp3
diff --git a/res/world_of_vikings_maniac.mp3 b/res/world_of_vikings_maniac.mp3
diff --git a/src/assets.js b/src/assets.js
@@ -0,0 +1,142 @@
+/* Global variables and functions */
+const [W,H] = [1024,576]//[960,540]
+const VERSION = 0.1
+const keys = {
+    Enter:{pressed:false},
+    ' ':{pressed:false},
+    ArrowUp:{pressed:false},
+    ArrowDown:{pressed:false},
+    ArrowLeft:{pressed:false},
+    ArrowRight:{pressed:false},
+    w:{pressed:false},
+    a:{pressed:false},
+    s:{pressed:false},
+    d:{pressed:false},
+    r:{pressed:false},
+    l:{pressed:false},
+    m:{pressed:false},
+}
+const display = {
+    scene:'',
+    transition:false,
+}
+function sceneChange(scene_new,{type='fade',sleep=1000}={}) {
+    if(arguments.length>1) {
+        if(!display.transition) {
+            display.transition = true
+            transitionInit(scene_new,type,sleep)
+        }
+    } else {
+        window[scene_new+'SceneInit']()
+        display.scene = scene_new
+    }
+}
+
+/* Resources */
+const fonts = [
+    new FontFace('Emulogic','url(res/emulogic.ttf)'),
+]
+const sprites = {
+    character:{img:null,frames:4,slowness:8},
+    screw:{img:null,frames:4,slowness:8},
+    amp:{img:null,frames:4,slowness:8},
+    background:{img:null,dw:W*6,dh:H,sw:768,sh:72},
+    clouds:{img:null,dw:W,dh:H,sw:64,sh:36},
+}
+const music = {
+    theme1:{audio:new Audio('res/comic_bakery_noise_maker.mp3'),volume:0.5},
+    theme2:{audio:new Audio('res/world_of_vikings_maniac.mp3'),volume:0.4,verse:14.5},
+    theme3:{audio:new Audio('res/unreal_super_hero_3.mp3'),volume:0.8,verse:14.2},
+    theme4:{audio:new Audio('res/time_machine_waterflame.mp3'),volume:0.5},
+    theme5:{audio:new Audio('res/sound_of_infinity_f777.mp3'),volume:0.4},
+}
+const sounds = {
+    screw:{audio:new Audio('res/coin.wav'),volume:0.8},
+    death:{audio:new Audio('res/death.wav'),volume:0.6},
+    jetpack:{audio:new Audio('res/jetpack.wav'),loop:true,volume:0.4}
+}
+function loadResources() {
+    fonts.forEach(f => document.fonts.add(f))
+    Object.keys(sprites).forEach(s => {
+        sprites[s].img = new Image()
+        sprites[s].img.src = 'res/'+s+'.png'
+    })
+    Object.keys(music).forEach(m => {
+        music[m].audio.loop = true
+        if(music[m].volume) music[m].audio.volume = music[m].volume
+    })
+    Object.keys(sounds).forEach(s => {
+        if(sounds[s].loop) sounds[s].audio.loop = sounds[s].loop
+        if(sounds[s].volume) sounds[s].audio.volume = sounds[s].volume
+    })
+}
+function musicStop() {
+    Object.keys(music).forEach(m => {
+        music[m].audio.pause()
+        if(music[m].verse) music[m].audio.currentTime = music[m].verse
+        else music[m].audio.currentTime = 0
+    })
+}
+function musicPlay() {
+    musicStop()
+    const themes = Object.keys(music)
+    const track = randomInt(themes.length)
+    music[themes[track]].audio.play()
+}
+function soundStop(sound) {
+    sounds[sound].audio.pause()
+    sounds[sound].audio.currentTime = 0
+}
+function soundPlay(sound) {
+    if(sounds[sound].loop) {
+        sounds[sound].audio.play()
+    } else {
+        const clone = sounds[sound].audio.cloneNode()
+        clone.volume = sounds[sound].audio.volume
+        clone.play()
+    }
+}
+
+/* Rendering properties and functions */
+const canvas = document.getElementById('game')
+canvas.width = W
+canvas.height = H
+const ctx = canvas.getContext('2d')
+ctx.imageSmoothingEnabled = false
+
+function renderClear(x=0,y=0,w=W,h=H) {
+    ctx.clearRect(x,y,w,h)
+}
+
+function renderRect(x,y,w,h,color) {
+    ctx.fillStyle = color
+    ctx.fillRect(x,y,w,h)
+}
+
+function renderCircle(x,y,r,color) {
+    ctx.beginPath()
+    ctx.arc(x,y,r,0,2*Math.PI)
+    ctx.fillStyle = color
+    ctx.fill()
+}
+
+function renderText(text,x,y,color='black',{size=1,font='sans-serif',centered=false,maxw=undefined}={}) {
+    ctx.font = W/32*size+'px '+font
+    ctx.textAlign = centered ? 'center' : 'left'
+    ctx.fillStyle = color
+    ctx.fillText(text,x,y+size,maxw)
+}
+
+function renderLine(ax,ay,bx,by,color) {
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.moveTo(ax,ay)
+    ctx.lineTo(bx,by)
+    ctx.closePath()
+    ctx.stroke()
+}
+
+function toggleFullscreen() {
+    if(document.fullscreenElement) document.exitFullscreen()
+    else canvas.requestFullscreen()
+}
diff --git a/src/inputs.js b/src/inputs.js
@@ -0,0 +1,22 @@
+/* Before page loaded */
+loadResources()
+
+/* After page loaded */
+addEventListener('load',() => {
+    mainInit()
+    mainLoop()
+
+    addEventListener('keydown',({key}) => {
+        if(Object.keys(keys).includes(key) && !keys[key].pressed) {
+            keys[key].pressed = true
+            mainKeyPress(key)
+        }
+    })
+
+    addEventListener('keyup',({key}) => {
+        if(Object.keys(keys).includes(key)) {
+            keys[key].pressed = false
+            mainKeyRelease(key)
+        }
+    })
+})
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,20 @@
+function mainInit() {
+    display.scene = 'menu'
+    display.transition = false
+}
+
+function mainKeyPress(key) {
+    window[display.scene+'SceneKeyPress'](key)
+    if(key=='Enter') toggleFullscreen()
+}
+
+function mainKeyRelease(key) {
+    window[display.scene+'SceneKeyRelease'](key)
+}
+
+function mainLoop() {
+    renderClear()
+    window[display.scene+'SceneLoop']()
+    if(display.transition) transitionLoop()
+    requestAnimationFrame(mainLoop)
+}