基本信息
源码名称：HTML5小游戏开发实例源码
源码大小：1.73M
文件格式：.zip
开发语言：CSS
更新时间：2013-01-09
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
小游戏开发HTML5实例，下图只是其中一个游戏，更多游戏见压缩包
<html>
<head>
<title>Hangman</title>
<style>
.letters {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; margin: 5px; padding: 5px; color:#F00; background-color:#0FC; font-family:"Courier New", Courier, monospace;
}
.blanks {position:absolute;left: 0px; top: 0px; border:none; margin: 5px; padding: 5px; color:#006; background-color:white; font-family:"Courier New", Courier, monospace; text-decoration:underline; color: black; font-size:24px;
}
</style>
<script src="words1.js" defer></script>
<script type="text/javascript">
var ctx;
var thingelem;
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabety = 300;
var alphabetx = 20;
var alphabetwidth = 25;
var secret;
var lettersguessed = 0;
var secretx = 160;
var secrety = 50;
var secretwidth = 50;
var gallowscolor = "brown";
var facecolor = "tan";
var bodycolor = "tan";
var noosecolor = "#F60";
var bodycenterx = 70;
var steps = [
drawgallows,
drawhead,
drawbody,
drawrightarm,
drawleftarm,
drawrightleg,
drawleftleg,
drawnoose
];
var cur = 0;
function drawgallows() {
ctx.lineWidth = 8;
ctx.strokeStyle = gallowscolor;
ctx.beginPath();
ctx.moveTo(2,180);
ctx.lineTo(40,180);
ctx.moveTo(20,180);
ctx.lineTo(20,40);
ctx.moveTo(2,40);
ctx.lineTo(80,40);
ctx.stroke();
ctx.closePath();
}
function drawhead() {
ctx.lineWidth = 3;
ctx.strokeStyle = facecolor;
ctx.save(); //before scaling of circle to be oval
ctx.scale(.6,1);
ctx.beginPath();
ctx.arc (bodycenterx/.6,80,10,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function drawbody() {
ctx.strokeStyle = bodycolor;
ctx.beginPath();
ctx.moveTo(bodycenterx,90);
ctx.lineTo(bodycenterx,125);
ctx.stroke();
ctx.closePath();
}
function drawrightarm() {
ctx.beginPath();
ctx.moveTo(bodycenterx,100);
ctx.lineTo(bodycenterx 20,110);
ctx.stroke();
ctx.closePath();
}
function drawleftarm() {
ctx.beginPath();
ctx.moveTo(bodycenterx,100);
ctx.lineTo(bodycenterx-20,110);
ctx.stroke();
ctx.closePath();
}
function drawrightleg() {
ctx.beginPath();
ctx.moveTo(bodycenterx,125);
ctx.lineTo(bodycenterx 10,155);
ctx.stroke();
ctx.closePath();
}
function drawleftleg() {
ctx.beginPath();
ctx.moveTo(bodycenterx,125);
ctx.lineTo(bodycenterx-10,155);
ctx.stroke();
ctx.closePath();
}
function drawnoose() {
ctx.strokeStyle = noosecolor;
ctx.beginPath();
ctx.moveTo(bodycenterx-10,40);
ctx.lineTo(bodycenterx-5,95);
ctx.stroke();
ctx.closePath();
ctx.save();
ctx.scale(1,.3);
ctx.beginPath();
ctx.arc(bodycenterx,95/.3,8,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
ctx.restore();
drawneck();
drawhead();
}
function drawneck() {
ctx.strokeStyle=bodycolor;
ctx.beginPath();
ctx.moveTo(bodycenterx,90);
ctx.lineTo(bodycenterx,95);
ctx.stroke();
ctx.closePath();
}
function init(){
ctx = document.getElementById('canvas').getContext('2d');
setupgame();
ctx.font="bold 20pt Ariel";
}
function setupgame() {
var i;
var x;
var y;
var uniqueid;
var an = alphabet.length;
for(i=0;i<an;i ) {
uniqueid = "a" String(i);
d = document.createElement('alphabet');
d.innerHTML = (
"<div class='letters' id='" uniqueid "'>" alphabet[i] "</div>");
document.body.appendChild(d);
thingelem = document.getElementById(uniqueid);
x = alphabetx alphabetwidth*i;
y = alphabety;
thingelem.style.top = String(y) "px";
thingelem.style.left = String(x) "px";
thingelem.addEventListener('click',pickelement,false);
}
var ch = Math.floor(Math.random()* words.length);
secret = words[ch];
for (i=0;i<secret.length;i ) {
uniqueid = "s" String(i);
d = document.createElement('secret');
d.innerHTML = (
"<div class='blanks' id='" uniqueid "'> __ </div>");
document.body.appendChild(d);
thingelem = document.getElementById(uniqueid);
x = secretx secretwidth*i;
y = secrety;
thingelem.style.top = String(y) "px";
thingelem.style.left = String(x) "px";
}
steps[cur]();
cur ;
return false;
}
function pickelement(ev) {
var not = true;
var picked = this.textContent;
var i;
var j;
var uniqueid;
var thingelem;
var out;
for (i=0;i<secret.length;i ) {
if (picked==secret[i]) {
id = "s" String(i);
document.getElementById(id).textContent = picked;
not = false;
lettersguessed ;
if (lettersguessed==secret.length) {
ctx.fillStyle=gallowscolor;
out = "You won!";
ctx.fillText(out,200,80);
ctx.fillText("Reload the page to try again.",200,120);
for (j=0;j<alphabet.length;j ) {
uniqueid = "a" String(j);
thingelem = document.getElementById(uniqueid);
thingelem.removeEventListener('click',pickelement,false);
}
}
}
}
if (not) {
steps[cur]();
cur ;
if (cur>=steps.length) {
for (i=0;i<secret.length;i ) {
id = "s" String(i);
document.getElementById(id).textContent = secret[i];
}
ctx.fillStyle=gallowscolor;
out = "You lost!";
ctx.fillText(out,200,80);
ctx.fillText("Reload the page to try again.",200,120);
for (j=0;j<alphabet.length;j ) {
uniqueid = "a" String(j);
thingelem = document.getElementById(uniqueid);
thingelem.removeEventListener('click',pickelement,false);
}
}
}
var id = this.id;
document.getElementById(id).style.display = "none";
}
</script>
</head>
<body onLoad="init();">
<h1>Hangman</h1><br/>
<p>
<canvas id="canvas" width="600" height="400">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
</p>
</body>
</html>