Javascript tekstiseikkailu peli (finnish)

Teimme kurssin tehtävänä javascript opetusvideon. Videossa käymme läpi miten voit kirjoittaa viestejä konsoliin, käyttäjän syöteen nappaamista prompt
Jatka lukemista ”Javascript tekstiseikkailu peli (finnish)”

Cordova media API

Viikon tehtävänä oli testata kaikki apikirjastot mitä tulevassa projektissa tulisi tarvitsemaan. Olin jo edellisellä kerralla tehnyt suurimman osan apikokeiluista ja ne on nähtävissä pomminpurkupelissä, joten en niitä halunnut laittaa nettiin turhaa toista kertaa.

Media api oli kuitenkin uusi. Kokeilin ensin hello world tyyppisesti oman äänen soittoa ja muokkasin siitä lopulta intervallin, joka soittaa piippauksen sekunnin välein (tarkoitus tehdä pommin piippaus). Piippausääni löytyi osoitteesta Freesound.org ja on Empty Bell nimisen käyttäjän tekemä Creative commonsilla lisensoitu ääniefekti.

Ladattuani äänitiedoston kopioin sen omaan projektiin kansioon music.

<!DOCTYPE HTML>
    <html>
      <head>
        <title>Media Example</title>

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">

        // Audio player
        //
        var my_media = null;
        var beepInterval;
	var beepPace = 1000;
		
        // Play audio
        //
        function playAudio() {
            my_media = new Media("/android_asset/www/music/beep.wav", onSuccess, onError);

	    beepInterval = setInterval(function() {
                my_media.play();
	    }, beepPace);
      	}
        

        // Pause audio
        // 
        function stopAudio() {
            if (my_media) {
                clearInterval(beepInterval);
            }
        }


        // onSuccess Callback
        //
        function onSuccess() {
            console.log("success");
        }

        // onError Callback 
        //
        function onError(error) {
            alert('code: '    + error.code    + '\n' + 
                  'message: ' + error.message + '\n');
        }

        </script>
      </head>
      <body>
        <a href="#" class="btn large" onclick="playAudio();">Play Audio</a>
        <a href="#" class="btn large" onclick="stopAudio();">Stop Audio</a>
        <p id="audio_position"></p>
      </body>
    </html>

Lähteet:

http://cordova.apache.org/docs/en/2.5.0/cordova_media_media.md.html

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

Android pomminpurku -peli

What It IS??

Peli on moninpelattava peli, missä tablettia / puhelinta on kierrätetään ringissä. Tehtävänä on saada pommin ajastin pysähtymään. Peli mittaa kiihtyvyysantureilla liikettä ja jos laite heiluu liikaa, pommi räjähtää. Myöskin pommin ajastin pitää huolta, että tablettia yritetään liikuttaa mahdollisimman nopeasti pelaajalta pelaajalle. Mikäli laite käy 15 kertaa toisella pelaajalla, voittavat pelaajat pelin.
bombb

Tarkemmat säännöt

Ensimmäinen pelaaja käynnistää pelin ja liikuttaa laitteen seuraavalle pelaajalle. Pelaaja joka vastaanottaa laitteen saa painaa kerran (1) pommia, joka lisää ajastimeen aikaa, sen jälkeen hän liikuttaa laitteen taas seuraavalle.

Jatkokehitys

Tämänhetkinen pommin räjähdys on melko antikliimaksinen. Sitä pitäisi parantaa esimerkiksi äänellä. Pommi täytyisi olla isompi, jotta aika näkyisi paremmin. Valikkorakenne ja parhaat tulokset.

Lataa täältä:
Sources

Lähteet:
https://cordova.apache.org/docs/en/3.0.0/cordova_notification_notification.md.html
http://cordova.apache.org/docs/en/2.5.0/cordova_accelerometer_accelerometer.md.html

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

Reaktioajan mittauspeli

ReactionGame
Tein javascriptiä ja jquerya hyödyntäen reaktionmittaus -pelin. Pelissä punaisen pallon muututtua vihreäksi, tulee käyttäjän klikata sitä. Tästä mitataan reaktioaika ja tulostetaan. Tämänhetkinen versio vielä hiukan kankea, mutta toiminnallisuus kunnossa.

Tästä kokeilemaan.

Koodi

Html-tiedosto sisältää:

<!doctype html>
<html>
	<head>
		<title>Reaction Game</title>
	  	<link rel='stylesheet' type='text/css' href='styles/stylesheet.css'/>
		<script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
	
	</head>
	<body>
		<div id="container">	
			<p>Click the circle when it turns green! <br> Click ready when you want to start!</p>		
			<div id="circle"><h2></h2></div>
			<button id="start" onclick="startGame()">Ready?</button>
			<button id="restart" onclick="restart()">Restart the game</button>
			<div id="result"></div>
		</div>

		<script type="text/javascript">
			var maxTimer = 3 * 1000;  
			var clickable = false;
			var started;
			var clicked = false; 
			$('#restart').hide();		
			
				function startGame(){
					var randTimer = Math.random() * maxTimer;
					$('#circle').click(checkClickable);
					setTimeout ( "toGreen()", randTimer );
					$('#start').hide();

				}
				
				function toGreen(){
					started = new Date().getTime();
					clickable = true;
					$('#circle').click(checkClickable);					
					$('h2').html("NOW!");
					$('#circle').css("background-color","#00FF00");
					$('#circle').toggleClass('highlighted');
				}

				function calcTime(){
                	var elapsed = new Date().getTime() - started;
					elapsed = elapsed / 1000; /* to seconds */
					return elapsed;
					
				}

				function checkClickable(){
					if(clickable == false){
						$('h2').html("Not yet!");
					}else if(clicked == false){
						var timeElapsed = calcTime();
						$('#result').html("Your reaction time was " + timeElapsed + " seconds.");				
						$('#restart').show();
						clicked = true;
					}
				}
				
				function restart(){
					window.location.reload();
				}			
				
		</script>
	</body>
</html>

Css:

h2 {
text-align: center;
vertical-align: middle;
line-height: 90px;
cursor:pointer;
color:#FFFFFF;
}

button {
height:50px;
width:100px;
}

#circle {
height: 100px;
width: 100px;
border-radius: 100%;
background-color: #FF0000;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;

}

.highlighted {
-webkit-box-shadow: 0 0 8px green;
-moz-box-shadow: 0 0 8px green;
box-shadow: 0 0 8px green;
}

#container {
margin-left:auto;
margin-right:auto;
width:300px;

}

#result {
margin-top: 20px;
margin-bottom:20px;
}

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

jQuery Salasanan Testaaja

Mitä tein?
Tein harjoitusmielessä jQueryllä salasanan testaajan. Testausmenetelmä on alkeellinen ja se vertaa kahta merkkijonoa toisiinsa. Jos annettu salasana on sama kuin koodiin on kirjoitettu, tulee ilmoitus salasana oikein ja toisinpäin. Lisäksi tein kirjaudu painikkeeseen efektin, joka muuttaa painikkeen läpinäkyvyyttä, kun hiiri laitetaan sen päälle.

Tästä kokeilemaan

HTML tiedosto
Loin index.html tiedoston ja sinne tavaran:

<DOCTYPE! html>
<html>
    <head>
	<title>jQuery Harjoitus</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="scripts/script.js"></script>
    <link href="style/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
	<div><strong>Salasana on erittäin salainen.</strong></div>
        <form name="passCheck"><input type="text" name="passCheck" /></form>
        <div id="button">Kirjaudu</div>
        <div id="result"></div>
    </body>
</html>

Scripti

Loin erillisen scriptitiedoston jonne tuli jQueryt ja javascriptit.

$(document).ready(function(){
    $('#button').click(function(){
            var pass = $('input[name=passCheck]').val();
	    if(pass === "salainen"){ // === turvallinen tapa, ei tee tyyppimuunnoksia
                $('#result').html('
Salasana oikein!

');
            }else{
                $('#result').html('
Salasana väärin!

');
            }
    });
       $('#button').mouseenter(function(){
            $(this).fadeTo('fast',1);
       });
       $('#button').mouseleave(function(){
        $(this).fadeTo('fast',0.5);
      });
});

Css
Tässä vielä css tiedosto. Huomion arvoinen asia on, että koska tein divistä buttonin, kursori ei muutu ”kädeksi” kun hiiri viedään sen päälle. Sen takia lisäsin Css:ään cursor pointterin, joka muuttaa hiiren kuvaketta.

#button {
    height:40px;
    width:80px;
    padding-top:15px;
    border-radius: 5px;
    background-color: #FF0000;
    text-align: center;
    color: #FFFFFF;
    opacity: 0.5;
    cursor:pointer;
}

 

 

Kuvakaappaus:

query

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html
Pohjana Tero Karvisen kurssi Mobiilituotekehitys, http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013

Mobiilituotekehitys

Seuraavaksi bloggaan mobiilituotekehitys-kurssin ihmeellisestä maailmasta. Luultavasti kaikki tulevat postaukset tulevat liittymään tähän kurssiin, eli etätehtäväpalautuksia ja muita kuulumisia tulossa! Mobiilituotekehityksessä aiomme kehittää oman android sovelluksen. Sovellus pystytään myös tekemään muille alustoille, mutta luultavasti aloitan androidista. Teemme sovelluksen Html:llä ja javascriptillä.