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>

View Code

转载于:https://www.cnblogs.com/jydeng/p/9186738.html

HTML5小游戏-简单抽奖小游戏相关推荐

数字抽奖小程序_抽奖小程序凭什么成为流量的风口？怎么以最快的方式引流？...
现在不管是实体店还是线上,最需要的就是客户流量,怎么才能最快速的引流呢? 推广到用户,并且让用户推广用户,更快的裂变. 现在市面上的抽奖小程序,轻松地做到了快速裂变发展用户的效果.成为流量风口. 抽奖 ...
抽奖小程序 c语言,抽奖小程序一抽奖小程序,需十位学生信息,抽出一等奖1名,二等奖2名,三等奖......
1, 一抽奖小程序,需十位学生信息,抽出一等奖1名,二等奖2名,三等奖... public static void main(String[] args) {int input = 10;Scanne ...
基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏
最近折腾一个自己个人主页,无奈履历太渣,能放在首页的东西不多,于是想给自己的个人主页上添加一个小游戏.遂参考了各种教程,使用HTML5的canvas元素做了一个相当原始的东西出来,效果如图~ QQ截图 ...
简单游戏的c语言程序,[C语言编写小程序]简单打飞碟游戏
该楼层疑似违规已被系统折叠隐藏此楼查看此楼同样是最初步的模拟,有待再完善下去.飞碟速度上的问题还是希望大家自己调整gamespeed的速度. 空格是发射,发射的具体样子我没写. #include ...
c语言小程序游戏飞机游戏,[C语言编写小程序]简单打飞碟游戏
该楼层疑似违规已被系统折叠隐藏此楼查看此楼同样是最初步的模拟,有待再完善下去.飞碟速度上的问题还是希望大家自己调整gamespeed的速度. 空格是发射,发射的具体样子我没写. #include ...
使用html5 canvas绘制简单图形小作品~灰太狼
<!-- 作者:1457225624@qq.com 时间:xxxx-xx-xx 描述:大家好!我是小张,今天我用html5,,canvas的画布画出了一个小作品, 画的不好看,,,还请原谅,,下 ...
能打印出心形的c语言小程序,简单的小程序(打印出螺旋行的矩阵)
该楼层疑似违规已被系统折叠隐藏此楼查看此楼运行结果: please input a number between 1 to 99 10 1&nbsp&nbsp 2&nbsp ...
小程序转盘抽奖,小程序抽奖
很多地方都会用到就记录一下,有懒的到处找,可以随机,也可以从后台获取数据,改一下参数就可以用,如果帮到了你就点个赞吧下载地址
C++(11)--编程实践1-经典养成类游戏简单实践
经典养成类游戏简单实践-小公主养成记 <老九学堂C++课程>学习笔记.<老九学堂C++课程>详情请到B站搜索<老九零基础学编程C++入门> ------------ ...

HTML5小游戏-简单抽奖小游戏

HTML5小游戏-简单抽奖小游戏相关推荐

最新文章

热门文章