徐小夕 2021-08-15 15:10:47 阅读数:309
我去年曾寫過一個用H5
,Javascript
,css3
實現的拼拼樂小遊戲,技術棧采用自己封裝的類Jquery
框架 Xuery ,其中涉及到了很多經典的 javascript
算法和css3特性
,對大家的編程能力會有很大的提高,文末我也會放上源碼獲取方式,大家可以學習體驗一下。
因為該應用屬於 H5 遊戲,為了讓項目更輕量,我沒有采用第三方 ui 庫,如果大家想采用基於 vue 的第三方移動端ui庫,我給大家推薦幾個我之前用過的比較靠譜的:
以上推薦的都是社區比較完善,bug比較少的組件庫,大家可以感受一下。
回到我們的小遊戲開發,考驗更多的是大家對 javascript 和css3 的掌握程度,在學習完這篇文章之後相信大家對 javascript 和 css3 的編程能力都會有極大的提昇,後面還會介紹如何使用 canvas 實現生成戰績海報圖的功能。
我們先來看看遊戲的預覽界面:
圖片xxxx
本文的算法實現方式在之前的拼拼樂文章中已經說明,這裏主要介紹核心算法, 至於vue-cli的使用方法,筆者之前也寫過對應的文章,大家可以研究學習一下。vue-cli搭建項目方式如下:
// 安裝
yarn global add @vue/cli
// 創建項目
vue create pinpinle
// 進入項目並啟動
cd pinpinle && yarn start
關於vue-cli3配置實戰,可以移步 一張圖教你快速玩轉vue-cli3
目前筆者主要整理樂如下核心功能,接下來筆者會一一帶大家實現:
文件上傳預覽主要采用FileReader API實現,原理就是將file對象傳給FileReader的readAsDataURL然後轉化為data:URL格式的字符串(base64編碼)以錶示所讀取文件的內容。 具體代碼如下:
// 2.文件上傳解析
let file = $('#file');
file.on('change', function(e){
var file = this.files[0];
var fileReader = new FileReader();
// 讀取完成觸發的事件
fileReader.onload = function(e) {
$('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')';
imgSrc = fileReader.result;
}
file && fileReader.readAsDataURL(file);
})
一般我們處理這種拼圖遊戲都會有如下方案:
經過權衡,筆者想出了第三種方法,也是自認為比較優雅的方法,即動態背景分割,我們只需要使用1張圖片,然後利於css的方式切割圖片,有點經典的雪碧圖的感覺,如下: 本質就是我們設置九個div,每個div都使用同一張圖片,並且圖片大小等於遊戲畫布大小,但是我們通過backgroundPosition(背景定比特)的方式來實現切割圖片。這樣做的另一個好處是方便我們實現洗牌邏輯。
洗牌邏輯依托於隨機算法,這裏我們結合坐標系,實現一個隨機生成二維坐標系的邏輯,然後通過改變每個切片的translate比特置,配合過渡動畫,即可實現洗牌功能和洗牌動畫。
數組亂序比較簡單,代碼如下:
// 數組亂序
function upsetArr(arr) {
arr.sort(function(a,b){
return Math.random() > 0.5 ? -1 : 1
})
}
洗牌邏輯基於數組亂序,具體邏輯如下:
// 洗牌方法
function shuffle(els, arr) {
upsetArr(arr);
for(var i=0, len=els.length; i< len; i++) {
var el = els[i];
el.setAttribute('index', i); // 將打亂後的數組索引緩存到元素中
el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')';
}
}
n維矩陣主要用來做洗牌和計算成功率的,具體實現如下:
// 生成n維矩陣坐標
function generateMatrix(n, dx, dy) {
var arr = [], index = 0;
for(var i = 0; i< n; i++) {
for(var j=0; j< n; j++) {
arr.push({x: j*dx, y: i*dy, index: index});
index++;
}
}
return arr
}
置換算法主要用來切換拼圖的,比如用戶想移動拼圖,可以用過置換來實現:
// 數組置換
function swap(arr, indexA, indexB) {
let cache = arr[indexA];
arr[indexA] = arr[indexB];
arr[indexB] = cache;
}
生成戰績海報筆者采用canvas來實現,對於canvas的api不熟悉的可以查看MDN,講的比較詳細。這裏筆者簡單實現一個供大家參考:
function generateImg() {
var canvas = document.createElement("canvas");
if(canvas.getContext) {
var winW = window.innerWidth,
winH = window.innerHeight,
ctx = canvas.getContext('2d');
canvas.width = winW;
canvas.height = winH;
// 繪制背景
// ctx.fillStyle = '#06c';
var linear = ctx.createLinearGradient(0, 0, 0, winH);
linear.addColorStop(0, '#a1c4fd');
linear.addColorStop(1, '#c2e9fb');
ctx.fillStyle = linear;
ctx.fillRect(0, 0, winW, winH);
ctx.fill();
// 繪制頂部圖像
var imgH = 0;
img = new Image();
img.src = imgSrc;
img.onload = function(){
// 繪制的圖片寬為.7winW, 根據等比換算繪制的圖片高度為 .7winW*imgH/imgW
imgH = .6*winW*this.height/this.width;
ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH);
drawText();
drawTip();
drawCode();
}
// 繪制文字
function drawText() {
ctx.save();
ctx.fillStyle = '#fff';
ctx.font = 20 + 'px Helvetica';
ctx.textBaseline = 'hanging';
ctx.textAlign = 'center';
ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快來挑戰!', winW/2, .15*winH + imgH);
ctx.restore();
}
// 繪制提示文字
function drawTip() {
ctx.save();
ctx.fillStyle = '#000';
ctx.font = 14 + 'px Helvetica';
ctx.textBaseline = 'hanging';
ctx.textAlign = 'center';
ctx.fillText('關注下方二維碼開始遊戲', winW/2, .25*winH + imgH);
ctx.restore();
}
// 繪制二維碼
function drawCode() {
var imgCode = new Image();
imgCode.src = '/piecePlay/images/logo.png';
imgCode.onload = function(){
ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);
// 生成預覽圖
var img = new Image();
img.src= convertCanvasToImage(canvas, 1).src;
img.className = 'previewImg';
img.onload = function(){
$('.preview-page')[0].appendChild(this);
startDx = startDx - 100;
transformX(wrap, startDx + 'vw');
}
}
}
} else {
alert('瀏覽器不支持canvas!')
}
}
H5拼圖小遊戲筆者已在github開源, 感興趣的可以學習參考。以上的邏輯部分的代碼可以直接整合到vue項目中即可,由於實現比較簡單,這裏筆者就不詳細介紹了。
在微信公眾號《趣談前端》回複 “H5遊戲”,即可獲取該項目的源碼。
如果想學習更多H5遊戲, webpack,node,gulp,css3,javascript,nodeJS,canvas數據可視化等前端知識和實戰,歡迎在《趣談前端》一起學習討論,共同探索前端的邊界。
版权声明:本文为[徐小夕]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815151016821o.html