摘要:在彈一彈游戲中,小球不能向上發射。這里又有一個坑彈一彈游戲中,剛射擊出去的小球是不受重力影響的不然瞄準還有什么意義。
前言
半年前用js和canvas仿了熱血傳奇網游(地址),基本功能寫完之后,剩下的都是堆數據、堆時間才能完成的任務了,沒什么新鮮感,因此進度極慢。這次看到微信《彈一彈》比較火,因為涉及到物理引擎(為了真實),于是動手試了一下。一共用了10個小時,不僅完成了這個demo,<刪除線>并且打上了彈一彈好友排行榜的第一頁刪除線>。
資料匯總在線demo:點擊即玩
代碼:400行帶注釋
canvas渲染庫:支持物理引擎及chrome調試工具,這里
準備工作微信這個小游戲的游戲規則很簡單,看圖就能看明白,這里不再贅述。涉及到的幾個開發難度:
1.物理引擎當然不用也可以,無非就是改改圖片的位置,可以自己模擬掉落和碰撞效果。不過由于我追(wu)求(li)體(hen)驗(cha),因此開始尋找第三方的物理引擎。
最后我使用的是chipmunk的js版(這個庫是底層計算庫,因此star不多,但是比較有名氣的hilo和cocos2d的物理引擎用到了這個庫)。主要原因之一是,這個庫的功能只是進行了物理運算,并且支持重力、彈性、摩擦、浮力等功能。當然體積也比較小。畢竟我們只是寫一個小demo,引入一個游戲框架的話很可能徒增成本。
不過我使用的時候遇到了幾個罕見的bug,應該是作者的疏漏,在issue中也有人反饋。看作者更新頻率很低,我拿來用的時候有一些修改。如果其它人使用的時候遇到js報錯,可以試試這里
2.UI渲染我選擇的是canvas,因為涉及到頻繁的樣式更新,每幀都去改寫style的話太占性能。而且用canvas寫的話,以后還可以迭代一些碰撞產生的畫效。
之前封裝了一個easycanvas庫,可以將樹形數據結構“翻譯”成“canvas畫布中的一個個對象”。這次又順手補充了一個支持chipmunk的插件,這樣整個“彈一彈”的開發就完全只需要管理數據即可,渲染工作很少。
開始開發 html及背景由于項目較小,我把html、css、js堆在了一個文件(最后寫完之后,發現一共連同注釋才400行)。
首先創建一個空html,為了看起來高大上,我搜了一張天空主題的背景圖。
可能用到的變量
接下來,準備一些我們需要用到的數據。例如游戲的寬高、小球的大小、當前游戲狀態(是否可以射擊)、每次可以射出的小球數、玩家的分數,blabla。
由于是直接在html里寫碼,為了兼容老瀏覽器,只能var來var去。
// 在html直接寫代碼,不編譯、不構建,不然應該用const的 var width = 400, height = 600, ballSize = 20; // 游戲狀態 var canShoot = true; var score = 0, ballLeft = 0, ballCount = 5; var blockArray = []; // 圖片 var BALL = Easycanvas.imgLoader("./ball.png"); var BLOCK = Easycanvas.imgLoader("./block.jpg"); var TRIANGLE = Easycanvas.imgLoader("./triangle.png"); // 給每個東西起一個type,后面會用來做碰撞檢測 var BALL_TYPE = 1, BLOCK_TYPE = 2, BORDER_TYPE = 3, BOTTOM_TYPE = 4, BONUS_TYPE = 5;頂部文本
接下來先將分數和小球個數寫到canvas中。首先創建一個easycanvas實例,寬400,高600。然后add2個對象。一個以左上角(5,5)為頂點,向右下方寫分數。一個以右上角(395, 5)為頂點,向左下角寫當前小球個數。
// 初始化easycanvas實例 var $Painter = new Easycanvas.painter(); $Painter.register(el, { width: width, height: height, }); $Painter.start(); $Painter.add({ content: { text: function () { return "得分:" + score; } }, style: { tx: 5, ty: 5, textAlign: "left", textVerticalAlign: "top", color: "black" } }); $Painter.add({ content: { text: function () { return "小球個數:" + ballCount; } }, style: { tx: 395, ty: 5, textAlign: "right", textVerticalAlign: "top", color: "black" } });添加方塊
接下來,設置整個場景的重力,并且添加一些方塊進去。每個方塊對象含有一個child,用來展示數字(還可以撞幾下)。為了避免方塊重疊,我們讓方塊的x坐標在50、100、150、……、300、350循環。同時,為了避免看起來“太整齊”,每次添加一個小的隨機數,讓這些方塊們錯落有致。(“錯落”指參差不齊,“致”指情趣。形容事物的布局雖然參差不齊,但卻極有情趣,使人看了有好感?!扯龋?/p>
每個方塊的大小是30x30,因此shapes包括4條邊,例如(0,0)到(30,0)是一條邊。這些方塊是失重的(不會掉下去),因此static設置為true。為了更加錯落有致,我們給他一個隨機的角度rotate。
每個方塊含有一個child,寫著一個數字。不需要給數字設置rotate,否則6和9可能就分不清了。
// 初始化easycanvas物理引擎,添加一個有物理樹形的空容器 var $space = new Easycanvas.class.sprite({ physics: { gravity: 2, // 重力默認為1,但是游戲進程有點慢,看著不夠爽 accuracy: 2, }, }); $Painter.add($space); var space = $space.launch(); // 防止方塊重疊,記錄上一次方塊的X坐標 var lastBlockPositionX = 50; function addBlock (max, boolAddToBottom) { var deg = Math.floor(Math.random() * 360); var sprite = $space.add(new Easycanvas.class.sprite({ name: "block", content: { img: BLOCK, }, physics: { shape: [ [[0, 0], [0, 30]], [[0, 30], [30, 30]], [[30, 30], [30, 0]], [[30, 0], [0, 0]] ], mass: 1, friction: 0.1, elasticity: 0.9, collisionType: BLOCK_TYPE, static: true, }, style: { tw: 30, th: 30, tx: lastBlockPositionX + Math.floor(Math.random() * 20 - 10), ty: boolAddToBottom ? 500 : height - 100 - Math.floor(Math.random() * 100), locate: "lt", rotate: deg, }, children: [{ content: { text: Math.floor(Math.random() * max) + 1, }, style: { color: "yellow", textAlign: "center", textVerticalAlign: "middle", textFont: "28px Arial", tx: 15, ty: 10 } }] })); sprite.physicsOn(); blockArray.push(sprite); lastBlockPositionX += 50; if (lastBlockPositionX > 350) { lastBlockPositionX = 50; } }
接下來,我們做瞄準部分。大致功能是,有一排小圓點,會隨著鼠標運動,并且有彈簧的感覺。
首先要記錄鼠標的軌跡,我們給easycanvas實例$Painter加上事件監聽。在“彈一彈”游戲中,小球不能向上發射。因此記錄鼠標的Y坐標值的時候,我們讓他至少為30。
// 記錄鼠標軌跡 var mouse = {x: 300, y: 50}; var mouseRecord = function ($e) { mouse.x = $e.canvasX; mouse.y = Math.max(30, $e.canvasY); }; $Painter.register(el, { width: width, height: height, events: { mousemove: mouseRecord, touchmove: mouseRecord, mouseup: shoot, touchend: shoot, } });小球瞄準
接下來,我們添加7個小球,讓他們排列在一條線上,從游戲正上方的(300, 20)點到鼠標位置均勻鋪開。具體邏輯就是,我們將鼠標位置和(300, 20)的坐標差進行6等分,第一個球的坐標向鼠標位置偏移0/6、第二個球偏移1/6……,最后一個球偏移6/6(正好落在了鼠標位置)。這幾個球我們給他們一個透明度,并且不啟用物理規則(因為這個階段小球不能掉下來)。我們在每個小球上設置一個shoot鉤子,當玩家射出真實的小球時,刪除這個瞄準用的小球。
// 顯示瞄準軌跡 var startAim = function () { for (var i = 0; i < 7; i ++) { $Painter.add({ content: { img: BALL, }, data: { gap: i / 6, }, style: { tx: function () { return 200 + (mouse.x - 200) * this.data.gap; }, ty: function () { return 20 + (mouse.y - 20) * this.data.gap; }, tw: 20, th: 20, opacity: 0.4, }, hooks: { shoot: function () { this.remove(); } } }); } }; startAim();發射小球
接下來,我們添加真實的小球(受到物理規則影響的小球)。
當射擊時,我們廣播shoot事件,移除剛才瞄準用的小球。
之后,我們間隔100毫秒,連續調用addBall方法來創建小球。addBall方法中,我們為每個小球設置物理規則。包括形狀、彈性、摩擦等。
這里有一個坑,就是一旦開始射擊,不管鼠標怎么移動,射擊的方向都不能變化。因此我們要先記錄下當前的mouse值,這里用的是JSON.parse(JSON.stringify(mouse))來copy一個簡單對象。
這里又有一個坑:“彈一彈”游戲中,剛射擊出去的小球是不受重力影響的(不然瞄準還有什么意義)。因此,我們在每個小球上增加一個和重力相反的作用力,抵消重力。(在其它部分的代碼中,有著“當小球發生一次碰撞后,取消這個作用力”的實現,這里為了清晰沒有一起貼出來)。
同時,我們給小球加上初速度。
這里又又又又又有一個坑(好煩啊):不管怎么射擊,小球初始獲得的速度是相同的。哪怕小球的瞄準位置距離射出位置很近,速度也不能慢。這里需要修正一下初始速度,這里用到了著名的Pythagoras theorem定理:直角三角形的兩條直角邊的平方和等于斜邊的平方。
function shoot () { if (!canShoot) return; $Painter.broadcast("shoot"); canShoot = false; var currentMouse = JSON.parse(JSON.stringify(mouse)); for (var i = 0; i < ballCount; i++) { setTimeout(function () { addBall(currentMouse); }, i * 100); } }; function addBall (mouse) { ballLeft++; var $ball = new Easycanvas.class.sprite({ name: "ball", content: { img: BALL, }, physics: { shape: [ // 形狀是一個以(ballSize / 2, ballSize / 2)為圓心的,半徑也是ballSize / 2的圓 // 改成位運算符吧,看著能高大上一點(其實在這里卵用沒有) [ballSize >> 1, ballSize >> 1, ballSize >> 1] ], mass: 1, // 質量 friction: 0.1, // 摩擦(摩擦太大了會損失能量) elasticity: 0.8, // 彈性 collisionType: BALL_TYPE, }, style: { tw: ballSize, th: ballSize, sx: 0, sy: 0, tx: 200, ty: 20, zIndex: 1, }, }); $space.add($ball); $ball.physicsOn(); // 抵消重力 $ball.$physics.body.applyForce({x: 0, y: 1000}, {x: 0, y: 0}); // 初速度 var speed = { x: (mouse.x - 200) / (20 - mouse.y), y: 1 }; // 修正速度,確保從各個角度射出小球的速度差不多 // 這里用到的著名的高等數學知識:勾股定理 var muti = Math.sqrt(Math.pow(speed.x, 2) + Math.pow(speed.y, 2)) / 700; $ball.$physics.body.setVel({ x: -speed.x / muti, y: -speed.y / muti, }); }其它
輪廓已經有了,后面的部分不再是難點。不過做到最后,坑還是比較多的:
例如小球可能會停在方塊上(就是這么巧),這是需要人為給予小球一個速度(“彈一彈”游戲里也是這樣做的)。
例如小球撞到方塊上,可能會觸發2次碰撞,因為影響不大,我先擱置了。這個是因為時間精度沒有太細,小球在上一幀沒有發生碰撞,因為速度較快,下一幀同時撞到了2個邊界。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94760.html
摘要:直到年,世界上第一部動畫片滑稽臉的幽默相問世。上一次視神經傳遞的圖像將會在大腦中存留,直到下一次神經信號到達。移動設備還是相當慘烈,并沒有開始支持。市面上有很多動畫庫,大家可以開箱即用。有一些是針對操作的,也有一些是針對對象。 背景 138.2億年前,世界上沒有時間和空間,或許世界都不存在,在一個似有似無的點上,匯集了所有的物質,它孕育著無限的能量與可能性。 宇宙大爆炸 巨大的內力已無...
摘要:于是,我決定厚著臉皮來宣傳一下我的幾個開源項目,雖然大多數都是一些比較簡單的游戲,但是這可以讓更多人看到我的項目,也可以讓我自己知道哪里地方做得不好,并且加以改進。正文清技背單詞使用開發的背單詞應用,開發時間為一個月,目前是版本。 前言 之前陸陸續續在 GitHub 上創建了幾個項目,奈何沒人關注(可能我的項目太垃圾了)。于是,我決定厚著臉皮來宣傳一下我的幾個開源項目,雖然大多數都是一...
閱讀 1748·2023-04-25 16:28
閱讀 684·2021-11-23 09:51
閱讀 1467·2019-08-30 15:54
閱讀 1149·2019-08-30 15:53
閱讀 2816·2019-08-30 15:53
閱讀 3413·2019-08-30 15:43
閱讀 3250·2019-08-30 11:18
閱讀 3261·2019-08-26 10:25