超级会员免费看
本教程将指导读者使用HTML、CSS和JS创建Chuck Chicken魔法蛋网页游戏。包括游戏的前言、项目基本结构、场景展示、源码解析及资源下载链接。订阅专栏可获取更多小游戏源码，并有机会加入学习交流群。
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 Chuck Chicken 魔法蛋网页游戏
✨ 前言
🕹️ 本文已收录于🎖️100个HTML小游戏专栏：100个H5游戏专栏
https://blog.youkuaiyun.com/qq_53544522/category_12064846.html
🎮 目前已有100+小游戏，源码在持续更新中，前100位订阅限时优惠，先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章；还可私聊进前端/游戏制作学习交流群；领取一百个小游戏源码。
在线演示地址：摸鱼小游戏 | Chuck Chicken 魔法蛋 | 海拥游戏 | Chuck Chicken 魔法蛋；立志打造一个拥有100个小游戏的摸鱼网站。made by Haiyong，技术支持——海拥https://haiyong.site/moyu/magicegg/
源码也可在文末进行获取
✨ 项目基本结构
大致目录结构如下（共278个子文件）：
场景展示
HTML源码
<body onload="setTimeout(function(){window.scrollTo(0,1)},1);">
<div id="ajaxbar">
<div id="game"><canvas id="canvas"></canvas></div>
<div id="orientate"><img src="media/graphics/orientate/landscape.jpg" /></div>
<div id="play" class="play" onclick=""><img src="media/graphics/splash/mobile/cover-start.jpg" /></div>
</div>
</body>CSS 源码
html,body
html,
body {
background-color: #000;
margin: 0;
padding: 0;
position: relative;
font-family: "Arial";
width: 100%;
}#game
#game {
position: absolute;
left: 0;
top: 0;
z-index: 0;
}#ajaxbar
#ajaxbar {
background: url('media/graphics/loading/ajax-loader.gif') center no-repeat;
}#canvas
#canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-ms-interpolation-mode: nearest-neighbor;
-webkit-transform: scale3d(1, 1, 1);
z-index: 1;
}#orientate
#orientate {
position: absolute;
float: left;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10002;
display: none;
}JS 源码
js 代码较多，这里提供部分，完整源码可以在文末下载
var _SETTINGS
var _SETTINGS = {
API: {
Enabled: !1,
Log: {
Events: {
InitializeGame: !0,
EndGame: !0,
Level: {
Begin: !0,
End: !0,
Win: !0,
Lose: !0,
Draw: !0
}
}
}
},
Ad: {
Mobile: {
Preroll: {
Enabled: !1,
Duration: 5,
Width: 300,
Height: 250,
Rotation: {
Enabled: !1,
Weight: {
MobileAdInGamePreroll: 40,
MobileAdInGamePreroll2: 40,
MobileAdInGamePreroll3: 20
}
}
},
Header: {
Enabled: !1,
Duration: 5,
Width: 320,
Height: 50,
Rotation: {
Enabled: !1,
Weight: {
MobileAdInGameHeader: 40,
MobileAdInGameHeader2: 40,
MobileAdInGameHeader3: 20
}
}
},
Footer: {
Enabled: !1,
Duration: 5,
Width: 320,
Height: 50,
Rotation: {
Enabled: !1,
Weight: {
MobileAdInGameFooter: 40,
MobileAdInGameFooter2: 40,
MobileAdInGameFooter3: 20
}
}
},
End: {
Enabled: !1,
Duration: 1,
Width: 300,
Height: 250,
Rotation: {
Enabled: !1,
Weight: {
MobileAdInGameEnd: 40,
MobileAdInGameEnd2: 40,
MobileAdInGameEnd3: 20
}
}
}
}
},
Language: {
Default: "en"
},
DeveloperBranding: {
Splash: {
Enabled: !1
},
Logo: {
Enabled: !1,
Link: "http://google.com",
LinkEnabled: !1,
NewWindow: !0,
Width: 166,
Height: 61
}
},
Branding: {
Splash: {
Enabled: !1
},
Logo: {
Enabled: !1,
Link: "http://google.com",
LinkEnabled: !1,
NewWindow: !0,
Width: 166,
Height: 61
}
},
MoreGames: {
Enabled: !1,
Link: "http://www.marketjs.com/game/links/mobile",
NewWindow: !0
}
};var _STRINGS
var _STRINGS = {
Ad: {
Mobile: {
Preroll: {
ReadyIn: "The game is ready in ",
Loading: "Your game is loading...",
Close: "Close"
},
Header: {
ReadyIn: "The game is ready in ",
Loading: "Your game is loading...",
Close: "Close"
},
End: {
ReadyIn: "Advertisement ends in ",
Loading: "Please wait ...",
Close: "Close"
}
}
},
Splash: {
Loading: "Loading ...",
LogoLine1: "Some text here",
LogoLine2: "powered by MarketJS",
LogoLine3: "none",
TapToStart: "TAP TO START"
},
VO: {
chuckStart: "Let's get started;After you taste my fist;I have to find his weak point;This is your last chance to surrender;What's going on?;We gotta stop this!;Time for real action;Oh no you don't;I'll take care of this".split(";"),
chuckStartMayor: ["How much is the reward for saving the city this time?", "Right away, Mr Mayor!", "Okay, it's a deal!"],
chuckStartSweetheart: ["Stay calm sweetheart, Chuck is on his way!"],
chuckWin: ["Nice warm up", "This must be my lucky day", "It's all in a day's work!"],
mingoStart: ["I won't fail this time", "Nothing can stop me now!"],
deeStart: ["Von voyage!", "Ha ha ha ha ha ha ha ha ha ha ha ha ha!", "We're going to live like kings!"],
dexStart: ["Yahoo!", "Ha ha ha ha ha ha ha ha!", "Dex the super Duck!"],
donStart: ["Yahoo!", "Ha ha ha ha ha ha ha ha ha ha ha ha ha!"],
birdyStart: ["Let's rock!"],
ninjaStart: ["I'm getting promoted!", "We're at your command!"],
sinisterStart: ["I summon you my shadow army, serve your master!"],
ronnieStart: ["Ronnie and Gino, reporting for duty, sir!"],
ginoStart: ["Ronnie and Gino, reporting for duty, sir!"],
penStart: ["If you move one step forward, I'll make you a frozen chicken"],
guinStart: ["If you move one step forward, I'll make you a frozen chicken"],
mayorStart: ["Chuck, go get him!"],
mulanStart: ["Help!"],
flickStart: ["Chuck, help!", "Chuck, it's me, Flick!"],
wingStart: ["Chuck, help!"],
hypotizedStart: ["Your wish is my command"],
rainbowStart: ["Help me!"],
coupleStart: ["Help me!"]
},
Shop: [{
Name: "Guide",
Info: "Egg guide line",
Price: 24
}, {
Name: "Extra Egg",
Info: "1 extra egg",
Price: 24
}, {
Name: "Extra Bounce",
Info: "1 extra bounce",
Price: 24
}, {
Name: "Magic Egg Respawn",
Info: "Respawn after used",
Price: 24
}],
Chuck: {
rhino: {
name: "Rhinoceros Punch",
skill: "Punch to defeat hard to reach enemies"
},
eagle: {
name: "Eagle Eyes",
skill: "Fly to save hanging hostages"
},
skunk: {
name: "Stinky Skunk",
skill: "Make nearby enemies faint with stinky skunk spray"
},
mole: {
name: "Spinning Mole",
skill: "Drill to open locked cages"
},
cheetah: {
name: "Speeding Cheetah",
skill: "Run to heat up frozen hostages"
},
spider: {
name: "Spider Feet",
skill: "Stick on wall to throw egg"
},
fish: {
name: "Leaping Toadfish",
skill: "Swim pass the water pool"
},
armadillo: {
name: "Armadillo Shield",
skill: "Destroy machines with its hard shell"
},
bat: {
name: "Bat Power",
skill: "Detect cannon ball and throw eggs past them"
},
snake: {
name: "Rubber Snake",
skill: "Stretch elastic hand to reach enemies"
},
rat: {
name: "Miniscule Mouse",
skill: "Shrink to pass through small holes to toggle lever"
},
chameleon: {
name: "Invisible Chameleon",
skill: "Turn invisible to avoid laser detection"
},
unlock: {
name: "Awesome Stunt!",
skill: "New chapters unlocked!"
}
},
Tutorial: {
"continue": {
desktop: "Click to continue",
mobile: "Tap to continue"
},
shoot: {
desktop: "Aim and click to shoot Golden Egg",
mobile: "Aim and tap to shoot Golden Egg"
},
magicEgg: "Shoot the Golden Egg towards \nthe Magic Egg to transform Chuck.",
lever: "Shoot the lever with Golden Egg \nto open the metal door with the\nsame colour",
retry: "Press E to restart level",
pool: "Shoot towards the Toadfish Egg\nat the angle of the Pool Portal",
laser: "Transform into Invisible \nChameleon to switch \noff laser",
hang: "Transform into Eagle Eye\nto save hanging hostages",
doll: "Defeat Cuddly birdy\nto revert the doll\nhostage",
blackhole: "A blackhole teleports Golden\nEgg to another blackhole",
robot: "Robots can only be destroyed\nby defeating Dr Mingo holding\nthe controller",
tank: "Tanks can only be destroyed\nby defeating Dr Mingo holding\nthe controller",
hypotized: "Hypnotized hostages can\nonly be saved by defeating\nDee holding the controller",
cage: "Shoot the Spinning Mole\nEgg towards the direction \nof the Cage to destroy it",
frozen: "Shoot the Speeding Cheetah\nEgg towards the direction of\nthe hostage to rescue it",
machine: "Shoot the Armadillo Shield\nEgg towards the direction \nof the machine to destroy it"
},
Game: {
SelectPlayer: "Select Player",
Win: "You win!",
Lose: "You lose!",
Score: "Score",
Time: "Time",
Buy: "BUY",
Owned: "OWNED",
Unlock: "Complete chapter 1 and 2 to unlock this chapter",
Locked: "LOCKED",
E: "E",
Level: "LEVEL ",
Shop: "SHOP",
Theme: "CHAPTERS",
Levels: "LEVELS",
Paused: "SETTINGS",
Settings: "SETTINGS",
Gallery: "GALLERY",
Over: "Game Over",
Win: "YOU WIN",
Lose: "YOU LOSE"
},
Results: {
Title: "High score"
}
};图片资源
一共一百多多张图片，全都打包放在文末的下载链接里了。
音频资源
源码下载
2.从海拥资源网下载：Chuck Chicken 魔法蛋网页游戏源码_海拥资源库Chuck Chicken 魔法蛋网页游戏源码_海拥资源库https://code.haiyong.site/994/
3.也可通过下方卡片添加好友回复 Chuck Chicken 获取
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
