实例介绍
【实例简介】
小游戏开发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>
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论