HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
HTML5应用-欢乐老虎机的实现代码
- 黄舟 2017-03-18 15:32 8979浏览 原创
在上面一篇博文中，我介绍了HTML5应用的简易播放器，这篇博文中介绍一个比较复杂的HTML5游戏-老虎机。 寒假在家玩老虎机输了些许钱，所以自己就萌生了写个老虎机的游戏。开始打算用Visual C++编写的，但是考虑到HTML5的canvas>对象的简便性，就打算用HTML5编写了。 同时还用ASP语言编写了个服务器，如果游戏可以推广的话，自己可以做庄家，让大家玩哦！ 但千万不要聚众赌博哦！
言归正传，游戏的界面如下：
其实游戏本身应该是挺简单的，以下根据几个模块解说一下:
一：用户界面
游戏中有图片和
其次关于界面押分、启动、投币、得分、积分等,首先需要
<canvas> Your brower does not support canvas of HTML5! </canvas>
<span> </span>
*****创建显示线条框架的函数***************/
function showFrame(con, x, y, space)
{
con.beginPath();
con.lineWidth = 1;
con.moveTo(x, y-1); con.lineTo(x + space * 7, y-1);
con.moveTo(x, y + space); con.lineTo(x + space * 7, y + space);
con.moveTo(x, y + space * 6-1); con.lineTo(x + space * 7-1, y + space * 6);
con.moveTo(x, y + space * 7); con.lineTo(x + space * 7, y + space * 7);
con.moveTo(x, y); con.lineTo(x, y + space * 7);
con.moveTo(x+space , y); con.lineTo(x + space, y + space * 7);
con.moveTo(x + space * 6, y); con.lineTo(x + space * 6, y + space * 7);
con.moveTo(x + space * 7, y); con.lineTo(x + space * 7, y + space * 7);
con.closePath();
con.stroke();
}
/********************************************/
/****创建显示某个特定图片的函数*************/
function showImage(i, flag,x,y,con) //1为西瓜，0为小西瓜，2为黑西瓜，3为黑小西瓜
{
var img = new Image();
switch (i)
{
case 1: if (flag == 1)
img.src = "苹果.png";
else
if (flag == 0)
img.src = "小苹果.png";
else
if (flag == 3)
img.src = "黑苹果.bmp";
else
img.src = "黑小苹果.bmp";
break;
case 2:
if (flag == 1)
img.src = "橙子.png";
else
if (flag == 0)
img.src = "小橙子.png";
else
if (flag == 3)
img.src = "黑橙子.bmp";
else
img.src = "黑小橙子.bmp";
break;
case 3:
if (flag == 1)
img.src = "芒果.png";
else
if (flag == 0)
img.src = "小芒果.png";
else
if (flag == 3)
img.src = "黑芒果.bmp";
else
img.src = "黑小芒果.bmp";
break;
case 4:
if (flag == 1)
img.src = "铃铛.png";
else
if (flag == 0)
img.src = "小铃铛.png";
else
if (flag == 3)
img.src = "黑铃铛.bmp";
else
img.src = "黑小铃铛.bmp";
break;
case 5:
if (flag == 1)
img.src = "西瓜.png";
else
if (flag == 0)
img.src = "小西瓜.png";
else
if (flag == 3)
img.src = "黑西瓜.bmp";
else
img.src = "黑小西瓜.bmp";
break;
case 6:
if (flag == 1)
img.src = "双星.png";
else
if (flag == 0)
img.src = "小双星.png";
else
if (flag == 3)
img.src = "黑双星.bmp";
else
img.src = "黑小双星.bmp";
break;
case 7:
if (flag == 1)
img.src = "双七.png";
else
if (flag == 0)
img.src = "小双七.png";
else
if (flag == 3)
img.src = "黑双七.bmp";
else
img.src = "黑小双七.bmp";
break;
case 8:
if (flag == 1)
img.src = "大王.png";
else
if (flag == 0)
img.src = "小王.png";
else
if (flag == 3)
img.src = "黑大王.bmp";
else
img.src = "黑小王.bmp";
break;
case 9:
if (flag == 1)
img.src = "机会.png";
else
img.src = "黑机会.bmp";
default: break;
}
img.onload = function () {
con.drawImage(img, x, y);
}
}
/********************************************************************/
/**************显示得分与积分***********************/
function showScore(con, win_score, score) {
con.save();
con.font = "40px impact";
con.fillStyle = "red";
con.fillText("得分", 160, 35);
con.fillText("积分", 400, 35);
con.fillStyle = "#3DD369";
con.fillRect(160, 42, 74, 35);
con.fillRect(400, 42, 74, 35);
var str = win_score.toString();
con.font = "30 宋体";
con.fillStyle = "red";
con.fillText(str, 160, 70);
str = score.toString();
con.fillText(str, 400, 70);
con.restore();
}
/**************创建显示大小的函数**************/
function showBigSmall(con) //大小
{
con.save();
con.beginPath();
var g = con.createRadialGradient(230, 320, 0, 230, 320, 20); //创建渐变颜色
g.addColorStop(0.2, "#C8EE2B"); //黄
g.addColorStop(0.8, "#BCC1AC"); //
con.fillStyle = g;
con.arc(230, 320, 20, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.restore();
con.save();
con.beginPath();
var g1 = con.createRadialGradient(370, 320, 0, 370, 320, 20); //创建渐变颜色
g1.addColorStop(0.2, "#C8EE2B"); //黄
g1.addColorStop(0.8, "#BCC1AC"); //
con.fillStyle = g1;
con.arc(370, 320, 20, 0, Math.PI * 2, true);
con.fillStyle = "";
con.fill();
con.closePath();
con.fillStyle = "black"; con.font = "30px 楷体";
con.fillText("大", 215, 330);
con.fillText("小", 355, 330);
con.restore();
}
/*******创建显示投币与退币的函数****************/
function showGiveQuit(con) //投与退
{
con.save();
con.beginPath();
var g = con.createRadialGradient(200, 260, 0, 200, 260, 15); //创建渐变颜色
g.addColorStop(0.2, "#C8EE2B"); //黄
g.addColorStop(0.8, "#BCC1AC"); //
con.fillStyle = g;
con.arc(200, 260, 15, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.restore();
con.save();
con.beginPath();
var g1 = con.createRadialGradient(400, 260, 0, 400, 260, 15); //创建渐变颜色
g1.addColorStop(0.2, "#C8EE2B"); //黄
g1.addColorStop(0.8, "#BCC1AC"); //
con.fillStyle = g1;
con.arc(400, 260, 15, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.restore();
con.save();
con.beginPath();
g1 = con.createRadialGradient(300, 235, 0, 300, 235, 15); //创建渐变颜色
g1.addColorStop(0.2, "#C8EE2B"); //黄
g1.addColorStop(0.8, "#BCC1AC"); //
con.fillStyle = g1;
con.arc(300, 235, 15, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.fillStyle = "black"; con.font = "30px 楷体";
con.fillText("退币", 170, 235); con.fillText("投币", 370, 235);con.fillText("启动", 270, 210);
con.restore();
}
/********创建显示界面的函数**************/
function showSurface(con, x, y, space)
{
// showFrame(con, x, y, space); //显示主框架
con.save();
showBeilv(con, y - 80, space);
con.restore();
con.save();
showImage(2, 1, x, y, con);
showImage(4, 1, x + space, y, con);
showImage(8, 0, x + 2 * space, y, con);
showImage(8, 1, x + 3 * space, y, con);
showImage(1, 1, x + 4 * space, y,con);
showImage(1, 0, x + 5 * space, y, con);
showImage(3, 1, x + 6 * space, y, con);
showImage(4,0,x,y+space,con);showImage(1,1,x,y+2*space,con);
showImage(6,0,x,y+4*space,con);
showImage(6,1,x,y+5*space,con);
showImage(3,1,x,y+6*space,con);
showImage(5, 1, x + 6 * space, y + space, con);
showImage(5, 0, x + 6 * space, y + 2 * space, con);
showImage(1, 1, x + 6 * space, y + 4 * space, con);
showImage(2, 0, x + 6 * space, y + 5 * space, con);
showImage(2, 1, x + 6 * space, y + 6 * space, con);
showImage(3, 0, x + space, y + 6 * space, con);
showImage(1, 1, x + 2 * space, y + 6 * space, con);
showImage(7, 1, x + 3 * space, y + 6 * space, con);
showImage(7, 0, x + 4 * space, y + 6 * space, con);
showImage(4, 1, x + 5 * space, y + 6 * space, con);
showImage(9, 1, x, y + 3 * space, con);
showImage(9, 1, x + 6 * space, y + 3 * space, con);
con.restore();
con.save();
showFrame(con, x, y, space);
con.restore();
con.save();
showLight(con, 0);
con.restore();
con.save();
showGiveQuit(con);
con.restore();
init_param();
// gain_score = 200; score = 20;
con.save();
showScore(con, gain_score, score);
con.restore();
con.save();
showYafen(yafen, con, y, space);
con.restore();
con.save();
showBigSmall(con);
con.restore();
}
/*************************************************/
/***********创建显示说明和倍率的函数*******************/
function showBeilv(con,y,space)
{
con.save();
var str;
con.fillStyle = "black"; con.lineWidth = 3; con.font = "40px 汉仪丫丫体简";
str = "*100"; showImage(8, 1, 620, y, con);con.fillText(str, 700, y + 50);
str = "*40"; showImage(7, 1, 620, y + space, con);con.fillText(str, 700, y + 50 + space);
str = "*30"; showImage(6, 1, 620, y + 2 * space, con); con.fillText(str, 700, y + 50 + 2*space);
str = "*20"; showImage(5, 1, 620, y + 3 * space, con); con.fillText(str, 700, y + 50 + 3*space);
str = "*20"; showImage(4, 1, 620, y + 4 * space, con); con.fillText(str, 700, y + 50 + 4*space);
str = "*15"; showImage(3, 1, 620, y + 5 * space, con); con.fillText(str, 700, y + 50 + 5*space);
str = "*10"; showImage(2, 1, 620, y + 6 * space, con); con.fillText(str, 700, y + 50 + 6*space);
str = "*5"; showImage(1, 1, 620, y + 7 * space, con); con.fillText(str, 700, y + 50 + 7*space);
con.restore();
}
/*********************************************/
/******创建显示各个压分大小的函数**************/
function showYafen(yafen,con,y,space)
{
con.save();
con.fillStyle = "#3DD369";
for (var i = 0; i <p><span style="font-size:24px"><span style="color:#3333ff"> </span><span style="color:#ff0000"> 二：<a href="http://www.php.cn/code/5688.html" target="_blank">事件处理</a></span></span></p><p><span style="color:#3333ff"><span style="font-size:24px"> </span><span style="font-size:18px"> 在<canvas>标签中加入了onclick="dealclick(con)"代码，这是整个事件处理。</canvas></span></span></p><p><span style="font-size:18px; color:#3333ff"> 其实事件处理包括几个步骤: 根据坐标找出对应的事件（因为游戏中有押分、启动、投币等多个事件），然后再处理对应的事件。</span></p><p><span style="font-size:18px; color:#3333ff"> dealclick(con)函数如下:</span></p><pre class="brush:html;toolbar:false;">function dealclick(con)
{
var posx = event.clientX;
var posy = event.clientY;
var flag = getPos(posx, posy); //获得对应的事件序号
//alert(posx.toString()+" "+posy.toString()+" "+flag.toString());
if (flag == 0) //表示不是兴趣区域
return;
if (flag >= 1 && flag = 9) //对应事件
{
switch (flag) //
{
case 9: deal_quit_event(con); break; //退币事件
case 10: deal_give_event(con); break; //投币事件
case 11: begin_event(con); break; //启动事件
case 12: choseBig(); break; //选大
case 13: choseSmall(); break; ; //选小
case 14: LRevent(1); break;
case 15: LRevent(0); break;
}
}
}其中getPos事件是找出对应事件代号的
/****根据坐标寻找对应位置的函数************/
function getPos(posx, posy)
{
if (posx 1100 || posy 670)
return 0; //返回零，不在canvas范围中
if (posx >= 1035 && posx Y + (i - 1) * 80 - 35 && posy = 385 && posx = 385 && posx = 265 && posy = 585 && posx = 265 && posy = 485 && posx = 240 && posy = 410 && posx = 320 && posy = 550 && posx = 320 && posy = 235+200 && posx = 410 && posy = 340 + 200 && posx = 410 && posy <p><span style="color:#3333ff; font-size:24px"> </span><span style="font-size:18px"><span style="color:#3333ff"> 关于对应的押分，选大、选小事件其实都是比较简单的， 可以简单说一下选大选小中关于控制概率的算法， 例如控制庄家赢的概率是70%；可以利用var num=Math.random(); if(num</span></span></p><p><span style="font-size:18px; color:#3333ff"> 最复杂的其实是启动事件。 玩过老虎机的朋友都知道，灯的闪烁、以及闪烁有快慢。 js中只有<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Interval() 函数处理定时问题，所以编写时比较复杂</span></p><pre class="brush:html;toolbar:false;">/********************处理起动事件***************/
function begin_event(con) //启动事件
{
if (isOK == false)
return; //表示上一次的启动还没有完成
var g=0;
for (var e = 0; e score) //表示余额不足
return;
else
score -= totalyafen; //扣分；
showScore(con, gain_score, score);
}
for (n = 0; n = 0 && id <p><span style="font-size:24px; color:rgb(51,51,255)"> </span><span style="font-size:18px; color:rgb(51,51,255)"> 主要介绍一下利用setInterval（）介绍一下如何实现递增的延时，如老虎机灯快停时闪烁的越来越慢。可能我的方法不太好，大家可以参考一下</span></p><pre class="brush:html;toolbar:false;">/*****************闪烁函数1*********************/
function flash1() //闪烁
{
var k=0;
if (n <count><p><br><span style="font-size:24px; color:rgb(51,51,255)"> </span><span style="font-size:24px; color:#ff0000">三:背景音乐</span></p>
<p><span style="color:#3333ff"><span style="font-size:24px"> </span><span style="font-size:18px"> 游戏中需要游戏背景音乐。 这需要用到html5中的<audio>标签，然后通过js来控制声音的播放与暂停</audio></span></span></p>
<p><span style="font-size:18px; color:#3333ff"> 在游戏界面中先载入：</span></p>
<pre class="brush:html;toolbar:false;" style="font-size:24px; "> <audio></audio><br>
<audio></audio><br><audio></audio>
然后利用js来控制， 例如介绍一下选大选小时赢时候的背景音乐
var win = document.getElementById("win");
function winSound() //
{
win.currentTime = 0; //置于当前
win.play();
}
然后在自己需要控制的地方加入播放函数即可。
四：游戏bug
由于HTML5还不够成熟，因此浏览器对其支持能力不够好。例如背景音乐，长期使用定时器播放后浏览器会失去对
前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
查看更多- 欧易交易所网页版注册入口
- 币安Binance交易所官网登陆最新入口
- MEXC(抹茶)交易所官网下载地址是什么
- H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来
- H5页面如何实现离线访问功能 Service Worker实现离线应用指南
- H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧
- H5页面如何实现弹窗广告延时显示 智能延时弹窗实现方法详解
- H5页面如何实现背景音乐循环播放 背景音乐无缝循环播放技术
- H5页面如何实现无限滚动加载内容 无限滚动加载技术详解
- H5页面制作中如何添加页面访问统计 访问数据统计接入指南
- H5页面如何实现自动轮播图效果 轮播图自动切换实现方案
- H5页面制作中如何管理多语言切换 多语言国际化实现完整流程
- H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案
最新文章
查看更多- 中国正规的三大数字货币交易平台(2024国内三大虚拟币交易所)
- 币安Binance交易平台官网入口网址
- 欧易官方下载入口 2025欧易官方手机版下载入口
- H5页面如何实现全屏滚动效果 全屏滚动H5实现方法大全
- H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来
- H5页面制作中如何提升页面安全性 H5安全防护的10个必备措施
- H5页面如何实现背景音乐循环播放 背景音乐无缝循环播放技术
- H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧
- H5页面如何实现自动轮播图效果 轮播图自动切换实现方案
- H5页面如何实现跨平台适配方案 一套代码适配多端的关键方法解析
- H5页面制作中如何管理多语言切换 多语言国际化实现完整流程
- H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案
- H5页面制作中如何嵌入地图定位服务 主流地图API接入方法详解