HTML5小游戏-简单抽奖小游戏
换了新工作以后，专注前端开发，平常空闲时间也比较多，可以多钻研一下技术，写一下博客。最近在学习canvas，参考网上的slotmachine插件，用canvas实现了一个简单抽奖小游戏。
知识点
- canvas绘制背景
- canvas绘制图片
- canvas绘制边框
- canvas事件处理
- canvas简单动画制作
步骤
1、准备好图片，首先是机器的外观、以及滚动的奖项图片，我一共准备了6种，奖项图片按照一定的规律命名，这样方便处理
2、准备好canvas画布，设置好基本的CSS样式，完成以后大概是这样子。
PS：这里我设置了canvas的背景色，方便看到效果，完成品会去掉背景色，因为背景我们要设置成机器
3、计算好位置，绘制背景图、以及奖励项目边框，绘制完大概是这样子
PS：要注意的一点是，绘制背景要等到图片加载完才能绘制（这不是废话吗！），绘制边框要等到背景绘制完，不然会被覆盖掉。
4、绘制奖项图片，位置和边框位置一致，完成效果大致是这样
5、加上点击事件、点击开启关闭切换，完成效果见顶部，done！
待优化
奖项切换的效果没有实现，就是奖励上下滚动的效果
总结
试水canvas，蛮有趣的，打开了新世界的大门。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SlotMachine</title>
<style>
body {
background: gray;
} #test {
background: #fff;
width: 100%;
max-width: 551px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head> <body>
<canvas id="test" width="533" height="411">
您的浏览器不支持Canvas,现在都什么年代了
</canvas>
<script>
; (function () {
let canvas = document.querySelector('#test');
//引入缩放比例计算，兼容多种终端
let scaling = {
w: canvas.clientWidth / canvas.width,
h: canvas.clientHeight / canvas.height
};
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
let bg = new Image();
let imgs = {
left: new Image(),
middle: new Image(),
right: new Image()
};
let flag = {
left: 1,
middle: 1,
right: 1,
max: 6
};
let ps = {
left: [70, 160],
middle: [185, 160],
right: [295, 160]
};
let interval = 1000 / 10;
let timer = {
left: null,
middle: null,
right: null
}; //绘制图片
function drawImg(img, x, y) {
ctx.drawImage(img, x, y, img.width, img.height);
} //绘制背景
function drawBg(img) {
let pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 533, 411);
} //绘制图片边框
function drawBorder(x, y, w, h) {
ctx.save();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 4;
ctx.strokeRect(x, y, w, h);
ctx.restore();
} //判断点击是否在图片范围内
function isPointInPath(x, y, x1, y1) {
return x <= x1 && x + 100 >= x1 && y <= y1 && y + 100 >= y1;
} //动画开始
function start(key) {
timer[key] = setInterval(function () {
flag[key] === flag.max ? flag[key] = 1 : flag[key]++;
imgs[key].src = './img/slot' + flag[key] + '.png';
}, interval);
} //动画停止
function stop(key) {
clearInterval(timer[key]);
timer[key] = null;
} //初始化
function init() {
bg.src = './img/machine.png';
bg.onload = () => {
drawBg(bg);
drawBorder(ps.left[0], ps.left[1], 100, 100);
drawBorder(ps.middle[0], ps.middle[1], 100, 100);
drawBorder(ps.right[0], ps.right[1], 100, 100);
imgs.left.src = './img/slot6.png';
imgs.left.onload = () => {
drawImg(imgs.left, ps.left[0], ps.left[1]);
}; imgs.middle.src = './img/slot6.png';
imgs.middle.onload = () => {
drawImg(imgs.middle, ps.middle[0], ps.middle[1]);
}; imgs.right.src = './img/slot6.png';
imgs.right.onload = () => {
drawImg(imgs.right, ps.right[0], ps.right[1]);
};
}; canvas.addEventListener('click', function (e) {
//引入缩放比例计算，兼容多种终端
let x1 = e.offsetX / scaling.w;
let y1 = e.offsetY / scaling.h; for (let key in ps) {
if (ps.hasOwnProperty(key)) {
let item = ps[key]; if (!isPointInPath(item[0], item[1], x1, y1)) continue; if (timer[key]) {
stop(key);
} else {
start(key);
}
}
}
});
} init();
}
})();
</script>
</body> </html>
HTML5小游戏-简单抽奖小游戏的更多相关文章
- HTML5版的String Avoider小游戏
HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动 ...
- canvas写个简单的小游戏
之前在HTML5 Canvas属性和方法汇总一文中,介绍过Canvas的各种属性以及方法的说明,并列举了自己写的一些Canvas demo,接下来开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到 ...
- 【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图
无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...
- Scratch 简单的小游戏 --- 碰碰球
Scratch 简单的小游戏 --- 碰碰球 ================================ 积木脚本块的简要分类: 1. 角色 2. 背景 3. 角色和背景组成的场景 4. 挡板角 ...
- java实现简单窗体小游戏----球球大作战
java实现简单窗体小游戏----球球大作战需求分析1.分析小球的属性: 坐标.大小.颜色.方向.速度 2.抽象类:Ball 设计类:BallMain—创建窗体 BallJPanel—画小 ...
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- 5、Cocos2dx 3.0游戏开发找小三之測试例子简单介绍及小结
重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27186557 測试例子简单介绍 Cocos2d-x ...
- 6、Cocos2dx 3.0游戏开发找小三之游戏的基本概念
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你 ...
- 微信小程序——【百景游戏小攻略】
微信小程序--[百景游戏小攻略] 本次课程小项目中的图片以及文章还未获得授权!请勿商用!未经授权,请勿转载! 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE ...
随机推荐
- Python基础（下）
前言 print("\n".join([''.join(['*'*((x-y)%3) if((x*0.05)**2+(y*0.1)**2 -1)**3-(x*0.05)**2*(y ...
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-5
来个目录吧: 第一章-入门 第二章- Entity Framework Core Nuget包管理 第三章-创建.修改.删除.查询 第四章-排序.过滤.分页.分组 第五章-迁移,EF Core 的co ...
- 【下一代核心技术DevOps】：（二）Rancher的应用及优点简介
1.环境选择 安装Rancher环境,一定要在干净的linux主机上进行,避免出现因配置导致的莫名其妙的问题.服务器操作系统建议CentOS7.4(内核3.10以上)低于这个版本的系统 如7.3 7. ...
- MySQL数据库服务器(YUM)安装
1. 概述2. 部署过程2.1 虚拟机console的NFS服务端配置2.2 虚拟机node15的NFS客户端配置2.3 虚拟机安装MySQL环境2.4 配置MySQL3. 错误及解决3.1 启动失败 ...
- svn代码发版的脚本分享
背景:开发将其代码放到svn里面,如何将修改后存放到svn里的代码发布到线上?简单做法:写个shell脚本,用于代码发版.比如开发的代码存放svn的路径是:svn://112.168.19.120/h ...
- 最好使用%f输出浮点数据，acm
今天做题的时候发现使用%lf输出的时候总是wrong,而一旦改成%f就ac了,询问学长后知道,不要用%lf输出,浮点都用%f 然而我还是有疑惑,如果%f容不下输出的数据怎么办呢? 于是我就去百度 原来 ...
- beta阶段性能指标测试
性能指标概况 安装耗时 启动耗时 CPU占用 内存占用 电池温度 网络流量 平均值 5.48s 1.04s 1.61% 18.68MB 32.44℃ 93.78B 峰值 131.74s 5.13s 5 ...
- Github介绍
Git是一个分布式的版本控制系统,最初由LinusTorvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.包括Rubinius和Mer ...
- 嵌入式linux教程
串口通信minicom $ sudo apt-get install minicom ///安装 # minicom –s //运行 //CTRL+A Z 弹出菜单 2.NFS网络文件配置 ...
- 小学四则运算APP 第二阶段冲刺-第三天
团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第二次冲刺阶段时间:11.29~12.09 本次发布的是判断题的部分代码 panduanset.java import com.examp ...