Cara Membuat Game Ular-Ularan Diblog

Cara Membuat Game Ular-Ularan Diblog - Hanya sekedar iseng, sambil blogwalking dan berkomentar diblog tetangga, sambil bermain game ular-ularan deh ala SAHABAT BLOGGER 77 hehe..!!. Game ini merupakan versi ke-2 setelah diartikel sebelumnya telah saya buat permainan yang sama Snake Game (permainan jadul ular-ularan) dengan JavaScript Only. Untuk game kali ini akan saya permudah cara bermainnya, seperti zaman pertama kali punya HandPhone, pilih game lalu tekan tombol play maka si ular akan mencari mangsanya dengan berputar-putar sesuai perintah Anda.


CARA BERMAIN
Pada tab sebelah kanan area game, sudah saya tuliskan semua perintah untuk menjalankan game ular-ularan ini diblog Anda. Untuk memulainya cukup tekan tombol SPACE (Spasi) pada keyboard PC Anda, lalu arahkan dan gerakkan si ular menuju food (makanan) sedekat mungkin menggunakan tombol ARROW ICON (Tanda Panah) kiri, kanan, atas dan bawah yang terletak dipapan keyboard komputer Anda.

PERHATIAN :
INGAT..!! Jangan sampai siular menabrak garis list area game, jika itu terjadi game akan berhenti dan Anda KALAH (Game Over), karena kecepatan level satu saya atur dengan 1.555/m.detik, lumayan cukup cepat. Game dimulai dari level 1, semakin banyak si ular makan maka siularpun semakin panjang dan level semakin bertambah seiring bertambahnya skor yang Anda dapatkan, begitupun untuk kecepatannya. Untuk keluar dari game ini, Anda tekan tombol ESC. Bagaimana, mau mencoba..?

PLAY GAME

BACA JUGA

Mengajak Pengunjung Agar Tertarik Untuk Berkomentar


Oh iya, barangkali sahabat semua ingin bermain game ini diblog Anda sendiri, berikut elemen-elemen kode untuk Membuat Game Classic Ular-Ularan secara komplit. Elemen CSS pembentuk tampilan, lengkapnya seperti ini:

<style type='text/css'>
#game {width: 650px;margin: 0 auto}
#gameStage {
  width: 400px;height: 300px;float: left;margin-right: 20px;
  border: 4px double #1D6609;background:#ebe2ce;position:relative}

#gameInfo {
  width: 210px;height: 300px;float: left;border-radius:15px;
  background:#ebe2ce;font-family:sans-serif; font-weight:bold;
  text-align:center;color: darkred;border: 4px dotted #111}

.bodypart {height: 8px;width: 8px;position:absolute;background: red;border-radius:3px}
#points {margin:5px;height:120px;margin-top: 10px}
#rules {
  margin:3px; font-size:12pt;border: 1px solid black;
  border-radius:15px;box-shadow:2px 2px 3px #333;color:green}

.food {height: 8px;width: 8px;position:absolute;background: green;border-radius:5px}
#gamemsg {font-size:16pt;margin-top:-35px;visibility:hidden;color:#E01B6A}
</style>

Menyisipkan JavaScript untuk memanggil perintah TAB keyboard seperti: SPACE, ESC dan ICON ARROW di komputer Anda, namun perhatikan script yang saya beri warna MERAH. JavaScript perintah, lengkapnya seperti ini:

// Hapus script ini, jika Template Anda sudah menggnakan script-jQuery yang sama...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
var gameBoard;
var snake;
var moveDirection = 'right';
var gameExecutor;
var gameSpeed=100;
var roundNum = 1;
var eatenItemsCount =0;
var MAX_FOOD_ITEMS = 12;
var gameFieldRelativeWidth = 30;
var gameFieldRelativeHeight = 30;
var snakeElementWidth = 8;
var snakeElementHeight = 8;
var ESC = 27;
var SPACE = 32;
var LEFT_ARROW = 37;
var UP_ARROW = 38;
var RIGHT_ARROW = 39;
var DOWN_ARROW = 40;
var food;
$(document).ready(function() {$('body').keydown(keyPressedHandler);});
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/game.js"></script>

HTML Markup

<div id='game'>
  <div id='gameStage'></div>
    <div id='gameInfo'>
      <div id='points'>
           <div>Your Score:</div>
           <div id='score'>0</div>
           <div>Speed Level:</div>
           <div id='speed'>1</div>
      </div>
      <div id='gamemsg'>
           <div id='nextRndMsg'>Next Round!</div>
           <div id='loseMsg'>You lose! Try again</div>
      </div>
         <div id='rules'>
Press <span style="color:red">SPACE</span> to start or restart the game.
* Use arrows to move *
Press Esc to quit
         </div>
    </div>
</div>

Semoga kejenuhan Anda dapat berubah menjadi keceriaan dengan bermain game ular-ularan ini, pekerjaan sudah selesai, waktunya Devy mohon pamit ya guys..!! semoga terhibur..

Happy blogging..!!