实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#dbg {
font-family: "Helvetica", cursive, sans-serif;
border: 1px solid black;
width: 600;
}
body {
background:#000;
color:white;
font-family: Arial,Helvetica,Sans-serif;
}
a {
color: #009de9;
outline: none;
}
a:hover {
text-decoration: none;
}
</style>
<link rel="shortcut icon" href="http://www.dougx.net/favicon.ico">
<title>Javascript and HTML5/Canvas Game, No Flash </title>
<!---- javascript includes --->
<!---- open license with citation to dougx.net--->
<script type="text/javascript" src="Sound.js"> </script>
<script type="text/javascript" src="Background.js"> </script>
<script type="text/javascript" src="Mouse.js"> </script>
<script type="text/javascript" src="Loader.js"> </script>
<script type="text/javascript" src="FloatyText.js"> </script>
<script type="text/javascript" src="Keyboard.js"> </script>
<script type="text/javascript" src="Collision.js"> </script>
<script type="text/javascript" src="AfterEffect.js"> </script>
<script type="text/javascript" src="PeaShooter.js"> </script>
<script type="text/javascript" src="Laser.js"> </script>
<script type="text/javascript" src="LevelDirector.js"> </script>
<script type="text/javascript" src="Sortie.js"> </script>
<script type="text/javascript" src="Enemy.js"> </script>
<script type="text/javascript" src="Powerup.js"> </script>
<script type="text/javascript" src="Shot.js"> </script>
<script type="text/javascript" src="EnemyShot.js"> </script>
<script type="text/javascript" src="Ship.js"> </script>
<script type="text/javascript">
//
// thanks for viewing the code, feel free to reuse.
// if you do, please link to my site! thanks!
//
var g_canvas;
var g_context;
var g_soundsLoaded;
var g_isChr;
var g_onscreenControls;
var g_paused;
var g_renderInterval;
var g_clockInterval;
var g_totalItems;
var g_itemsLoaded;
var g_background;
var g_foreground;
var g_ship;
var g_gameState;
var g_highScore;
var g_powerups;
var g_floatyText;
var g_projectiles;
var g_enemyProjectiles;
var g_enemies;
var g_afterEffects;
var g_rainbow;
var g_basicShotSound;
var g_laserShotSound;
var g_dinkSound;
var g_smallExplodeSound;
var g_bonusSound;
var g_explodeSound;
var g_artifact_chard_sound;
var g_double_sound;
var g_gem_sound;
var g_gun_sound;
var g_shot_sound;
var g_speed_sound;
var g_levelDirector;
var g_shotsFired;
var g_shotsRequired;
var g_accuracy;
var g_showAccuracy;
var g_enemiesDestroyed;
//
// main() is called once the game has loaded and the user has clicked
// on the "new game" button on the splash screen. This is a clean slate
// with no registered timers or event listeners.
//
function main()
{
var level_1_loop = document.getElementById("level_1_loop");
var bossLoop = document.getElementById("boss_loop");
//dbg("engine = " navigator.userAgent, false);
g_rainbow = new Array("yellow", "orange", "white", "red");
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
if ( g_basicShotSound == null )
{
g_basicShotSound = new Sound("basic_shot",5);
g_laserShotSound = new Sound("laser",5);
g_smallExplodeSound = new Sound("small_explode",5);
g_bonusSound = new Sound("bonus_sound",4);
g_explodeSound = new Sound("explode", 3);
g_artifact_chard_sound = new Sound("artifact_chard_sound", 2);
g_double_sound = new Sound("double_sound", 2);
g_gem_sound = new Sound("gem_sound", 4);
g_gun_sound = new Sound("gun_sound", 2);
g_shot_sound = new Sound("shot_sound", 3);
g_speed_sound = new Sound("speed_sound", 3);
}
g_highScore = 0;
g_gameState = "setup";
g_levelDirector = new LevelDirector();
//
// telling the level director to start will put the clock and
// render loops on interval timers
//
g_levelDirector.startLevel();
}
//
// map a sound name to a global audio object
//
function lookupSound(name)
{
if ( name == "double_sound" )
return g_double_sound;
else if ( name == "gem_sound" )
return g_gem_sound;
else if ( name == "gun_sound" )
return g_gun_sound;
else if ( name == "shot_sound" )
return g_shot_sound;
else if ( name == "speed_sound" )
return g_speed_sound;
dbg("Failed sound lookup: " name, false);
return null;
}
//
// the level director will kick off an interval that calls
// this function every 100ms
//
function clockLoop()
{
if ( g_paused )
return;
g_levelDirector.myClock = 100;
//dbg("Clock = " g_levelDirector.myClock, false);
g_levelDirector.launchSorties();
g_levelDirector.gameEvents();
}
//
// the LevelDirector will kick off an interval that calls this function
// which redraws the entire screen. that interval determines the game's
// fps.
//
function renderLoop()
{
if ( g_paused )
return;
g_background.render();
g_ship.render();
var remainingPowerups = new Array();
for (var i = 0; i < g_powerups.length; i)
{
if (g_powerups[i].render())
{
remainingPowerups.push(g_powerups[i]);
}
else delete g_powerups[i];
}
delete g_powerups;
g_powerups = remainingPowerups;
var remainingText = new Array();
for (var i = 0; i < g_floatyText.length; i)
{
if (g_floatyText[i].render())
{
remainingText.push(g_floatyText[i]);
}
else delete g_floatyText[i];
}
delete g_floatyText;
g_floatyText = remainingText;
var remainingEnemies = new Array();
for (var i = 0; i < g_enemies.length; i)
{
if (g_enemies[i].render())
{
remainingEnemies.push(g_enemies[i]);
}
else delete g_enemies[i];
}
delete g_enemies;
g_enemies = remainingEnemies;
var remainingProjectiles = new Array();
for (var i = 0; i < g_projectiles.length; i)
{
if (g_projectiles[i].render())
{
remainingProjectiles.push(g_projectiles[i]);
}
else delete g_projectiles[i];
}
delete g_projectiles;
g_projectiles = remainingProjectiles;
var remainingEnemyProjectiles = new Array();
for (var i = 0; i < g_enemyProjectiles.length; i)
{
if (g_enemyProjectiles[i].render())
{
remainingEnemyProjectiles.push(g_enemyProjectiles[i]);
}
else delete g_enemyProjectiles[i];
}
delete g_enemyProjectiles;
g_enemyProjectiles = remainingEnemyProjectiles;
var remainingAfterEffects = new Array();
for (var i = 0; i < g_afterEffects.length; i)
{
if (g_afterEffects[i].render())
{
remainingAfterEffects.push(g_afterEffects[i]);
}
else delete g_afterEffects[i];
}
delete g_afterEffects;
g_afterEffects = remainingAfterEffects;
g_levelDirector.renderSpecialText();
g_foreground.render();
if ( g_onscreenControls )
{
var ox = 40;
var oy = 300;
var ow = 30;
var tx = 8;
var ty = 22;
g_context.fillStyle = "yellow";
g_context.strokeStyle = "yellow";
g_context.strokeRect(ox,oy,ow,ow);
g_context.strokeRect(ox-35,oy 35,ow,ow);
g_context.strokeRect(ox 35,oy 35,ow,ow);
g_context.strokeRect(ox,oy 70,ow,ow);
g_context.strokeRect(ox 520,oy 35,ow,ow);
g_context.strokeRect(ox 270,oy 35,ow,ow);
g_context.fillText("U",ox tx,oy ty);
g_context.fillText("L", ox-35 tx,oy 35 ty);
g_context.fillText("R", ox 35 tx,oy 35 ty);
g_context.fillText("D", ox tx,oy 70 ty);
g_context.fillText("Z",ox 520 tx,oy 35 ty);
g_context.fillText("P",ox 270 tx,oy 35 ty);
}
g_ship.renderPowers();
}
//--------------------------- BEGIN MUSIC LOOPING FUNCTIONS-------------//
//
// no browser currently correctly implements the looping feature
// of the Autdio object yet, so we have to listen for the ended event
// on our background music and play it again
//
function start_level_1_loop(terminate)
{
var level_1_loop = document.getElementById("level_1_loop");
if ( terminate != undefined )
{
if ( terminate.toString() == "boss" )
{
level_1_loop.volume = 0;
level_1_loop.removeEventListener("ended", l1_loopit, true);
return;
}
else if ( terminate.toString() == "gameover" )
{
level_1_loop.removeEventListener("ended", l1_loopit, true);
level_1_loop.pause();
return;
}
}
l1_loopit();
}
function l1_loopit()
{
var level_1_loop = document.getElementById("level_1_loop");
level_1_loop.volume = 1;
level_1_loop.play();
level_1_loop.addEventListener("ended", l1_loopit, true);
}
function startBossLoop(terminate)
{
var bossLoop = document.getElementById("boss_loop");
if ( terminate != undefined && terminate.toString() == "end_boss")
{
bossLoop.volume = 0;
bossLoop.removeEventListener("ended", bos_loopit, true);
return;
}
bos_loopit();
}
function bos_loopit()
{
var bossLoop = document.getElementById("boss_loop");
bossLoop.volume = 1;
bossLoop.play();
bossLoop.addEventListener("ended", bos_loopit, true);
}
function startLevel2Loop(terminate)
{
var penguinLoop = document.getElementById("level_2_loop");
if ( terminate != undefined && terminate.toString() == "terminate")
{
penguinLoop.volume = 0;
penguinLoop.removeEventListener("ended", l2_loopit, true);
return;
}
l2_loopit();
}
function l2_loopit()
{
var penguinLoop = document.getElementById("level_2_loop");
penguinLoop.volume = 1;
penguinLoop.play();
penguinLoop.addEventListener("ended", l2_loopit, true);
}
//
// write message to debug area
//
function dbg(str, append)
{
var dbgObj = document.getElementById("dbg");
dbgObj.innerHTML = append? (dbgObj.innerHTML str): str;
}
//
// appends all game sounds to the document. called after the loading
// screen itself is loaded. The GameSounds.php file does a base64_encode
// on the actual .ogg files residing on the server. This is so the sound
// objects can be repeatedly re-initialized without a network hit. This
// is part of a workaround for Chrome because that browser does not
// correctly re-play short audio sounds (which is just about every sound
// effect in the game)
//
function loadGameSounds()
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "http://dougx.net/plunder/GameSounds.php")
var agent = navigator.userAgent;
if ( agent.indexOf("MSIE") != -1 )
{
//
// IE9 does not support OGG so we have to load a special
// version of the file that has MP3 encoded sound
//
fileref.setAttribute("src", "GameSoundsIE9.php")
}
fileref.onload = function() { g_soundsLoaded = true; }
document.getElementsByTagName("head")[0].appendChild(fileref)
}
function pause()
{
if (g_paused == null )
g_paused = false;
g_paused = !g_paused;
if ( g_paused )
dbg("Game Paused", false);
else
dbg("", false);
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<!--- bodyLoaded() follows resource loading and starts the splash screen
and can be found in the Loader.js file --->
<body onload="bodyLoaded();">
<table cellpadding="0" border="0" cellspacing="0" frame="void">
<tr>
<td valign="top">
<canvas align="left" id="theCanvas" width="600" height="400">
<H2 align="center">
Firefox, Opera, Chrome or other HTML5 compliant browser required.
<br>
</H2>
<H3>
<p align="center">
This site requires a modern browser for graphics and sound effects.
<br><br>
A compliant browser can be downloaded from any of the following sites:
<br>
<a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>
<br>
<a href="http://www.opera.com/">Opera</a><br>
<a href="http://www.google.com/chrome">Chrome</a>
</H3>
</canvas>
</td>
<tr>
<table>
<div id="dbg"></div>
<!--- put all of the game objects into the document which makes writing
the load screen pretty trivial; a really simple loader. as items
load they call the itemLoaded() function which updates the load screen.
Just remember to make this div small and hidden. --->
<div id="hidden" style="visibility:hidden; width:1px; height:1px; overflow:hidden">
<img id="splash_screen"
src="splash_screen.jpg"
onload="itemLoaded(this);">
<img id="loading"
src="loading.png"
onload="itemLoaded(this);">
<img id="title"
src="title.png"
onload="itemLoaded(this);">
<!--[if IE]>
<audio id="loading_music"
src="loading_music.mp3"
autoplay="true" >
</audio>
<audio id="level_1_preloop"
src="level_1_preloop.mp3"
preload='true'>
</audio>
<audio id="level_1_loop"
src="level_1_loop.mp3"
preload='true'>
</audio>
<audio id="level_2_loop"
src="level_2_loop.mp3"
preload='true'>
</audio>
<audio id="level_passed"
src="level_passed.mp3"
preload='true'>
</audio>
<audio id="boss_loop"
src="boss_loop.mp3"
preload='true'>
</audio>
<![endif]-->
<!--[if !IE]> <-->
<audio id="loading_music"
src="loading_music.ogg"
autoplay="autoplay" >
</audio>
<audio id="level_1_preloop"
src="level_1_preloop.ogg"
autobuffer='true'>
</audio>
<audio id="level_1_loop"
src="level_1_loop.ogg"
autobuffer='true'>
</audio>
<audio id="level_2_loop"
src="level_2_loop.ogg"
autobuffer='true'>
</audio>
<audio id="level_passed"
src="level_passed.ogg"
autobuffer='true'>
</audio>
<audio id="boss_loop"
src="boss_loop.ogg"
autobuffer='true'>
</audio>
<!--> <![endif]-->
<img id="starfield"
src="starfield.jpg"
onload="itemLoaded(this);">
<img id="foreground"
src="foreground.png"
onload="itemLoaded(this);">
<img id="ship_center"
src="ship_center.png"
onload="itemLoaded(this);">
<img id="ship_up_1"
src="ship_up_1.png"
onload="itemLoaded(this);">
<img id="ship_up_2"
src="ship_up_2.png"
onload="itemLoaded(this);">
<img id="ship_up_3"
src="ship_up_3.png"
onload="itemLoaded(this);">
<img id="ship_down_1"
src="ship_down_1.png"
onload="itemLoaded(this);">
<img id="ship_down_2"
src="ship_down_2.png"
onload="itemLoaded(this);">
<img id="ship_down_3"
src="ship_down_3.png"
onload="itemLoaded(this);">
<img id="ship_icon"
src="ship_icon.png"
onload="itemLoaded(this);">
<img id="foreground_light"
src="foreground_light.png"
onload="itemLoaded(this);">
<img id="sky"
src="sky.jpg"
onload="itemLoaded(this);">
<img id="speed_image"
src="speed_image.png"
onload="itemLoaded(this);">
<img id="gun_image"
src="gun_image.png"
onload="itemLoaded(this);">
<img id="shot_image"
src="shot_image.png"
onload="itemLoaded(this);">
<img id="double_image"
src="double_image.png"
onload="itemLoaded(this);">
<img id="gem_image"
src="gem_image.png"
onload="itemLoaded(this);">
<img id="enemy_small"
src="enemy_small.png"
onload="itemLoaded(this);">
<img id="enemy_small_special"
src="enemy_small_special.png"
onload="itemLoaded(this);">
<img id="enemy_small_2"
src="enemy_small_2.png"
onload="itemLoaded(this);">
<img id="enemy_small_2_special"
src="enemy_small_2_special.png"
onload="itemLoaded(this);">
<img id="enemy_small_3"
src="enemy_small_3.png"
onload="itemLoaded(this);">
<img id="enemy_small_4"
src="enemy_small_4.png"
onload="itemLoaded(this);">
<img id="enemy_small_4_special"
src="enemy_small_4_special.png"
onload="itemLoaded(this);">
<img id="enemy_artifact"
src="enemy_artifact.png"
onload="itemLoaded(this);">
<img id="enemy_artifact_2"
src="enemy_artifact_2.png"
onload="itemLoaded(this);">
<img id="ship_death_1"
src="ship_death_1.png"
onload="itemLoaded(this);">
<img id="ship_death_2"
src="ship_death_2.png"
onload="itemLoaded(this);">
<img id="ship_death_3"
src="ship_death_3.png"
onload="itemLoaded(this);">
<img id="ship_death_4"
src="ship_death_4.png"
onload="itemLoaded(this);">
<img id="ship_death_5"
src="ship_death_5.png"
onload="itemLoaded(this);">
<img id="ship_death_6"
src="ship_death_6.png"
onload="itemLoaded(this);">
<img id="ship_death_7"
src="ship_death_7.png"
onload="itemLoaded(this);">
<img id="splode_1"
src="splode_1.png"
onload="itemLoaded(this);">
<img id="splode_2"
src="splode_2.png"
onload="itemLoaded(this);">
<img id="splode_3"
src="splode_3.png"
onload="itemLoaded(this);">
<img id="splode_4"
src="splode_4.png"
onload="itemLoaded(this);">
<img id="splode_5"
src="splode_5.png"
onload="itemLoaded(this);">
<img id="splode_6"
src="splode_6.png"
onload="itemLoaded(this);">
<img id="splode_7"
src="splode_7.png"
onload="itemLoaded(this);">
<img id="artifact_chard_image"
src="artifact_chard.png"
onload="itemLoaded(this);">
<img id="artifact_skull_image"
src="artifact_skull.png"
onload="itemLoaded(this);">
<img id="command_ship"
src="command_ship.png"
onload="itemLoaded(this);">
</div> <!--- end hidden dev that contains all game graphics/sound --->
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论