(Thanks for your encouragement and support 🌹🌹🌹)

• 🔥 the rise of a new mimicry style for front-end development 45 upsets
• 🔥2020, pandemic hit my third venture hard 113 likes
• 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 827 likes

preface

I recently read an article about jS-VUe-slot machine lottery. I remember I used to make one with JS game engine, so I would like to share my experience with you.

Let’s look at the end result

Introduction to Game Engines

Here I used a less familiar engine called Annie2x, which consists of a 2D JS engine and FLASH plugin.

Why FLASH!!

You read that right, Annie2x makes it easier for FLASH savvy developers to create and organize art resources through plug-ins. For example, take MovieClip in FLASH and convert it directly into code files that can be used in a 2D engine. FLASH exists only as an art resource, a tool for animation production, and code is not written in FLASH. If you’re familiar with FLASH, Annie2x can make H5 development a lot more efficient, and in a world where time is money, the framework has a lot of users.

The development train of thought

It’s a game engine, but the idea and logic are the same.

circularly

Start by placing all elements in the same size on a single image in the order 1234561. By controlling the Y-axis coordinate of the picture to scroll, when the last element is displayed, the Y-axis of the picture will be returned to zero instantly, and the cycle can be rolled up.

Here I set up a separate object, RollingMC, to let a column as a whole manage its own motion logic.

AnnieRoot.game=AnnieRoot.game||{};
game.RollingMC=function(){
	var s = this;
	annie.Sprite.call(s);
	/*_a2x_need_start*/s.content_mc=null;/*_a2x_need_end*/
	annie.initRes(s,"game"."RollingMC");

	var isRolling = false;
	var speed;
	var speedVal;

	var timer;
	var loopCount;
	var curLoop;
	var tposY;
	s.startRoll=function(index,tpos) {
    	//index indicates the current column, mainly used to control a winding difference
        //tpos is the position of the last drop point
		isRolling = true;
		curLoop=0;
		speed = 0;
		speedVal=1;

		// Make a base of 10 turns each time, +2 turns in the order of column number
		loopCount=10+index*2;
        // Convert tpos to y coordinates
		tposY = tpos*-204;

		// console.log(" last will fall on Y: ",tposY);

		timer=window.requestAnimationFrame(loop);
	}
	function stopRolling() {
		window.cancelAnimationFrame(timer);
		isRolling = false;
	}

	function loop() {
		timer=window.requestAnimationFrame(loop);
		if(! isRolling)return;

		speed += speedVal;
		if (speed > 50) speed = 50;
		else if (speed < 1) speed = 1;
		s.content_mc.y -= speed;
		if (s.content_mc.y < -1428) {
			curLoop+=1;
			s.content_mc.y = -speed;
		}
		
		if(curLoop>=loopCount){
			if(s.content_mc.y<=tposY){ s.content_mc.y = tposY; stopRolling(); }}}}; A2xExtend(game.RollingMC,annie.Sprite);Copy the code

stop

As shown in the code above, when I start scrolling, I pass in an index parameter to make a difference in the number of times column 123 is rolled. A Tpos, representing targetPosition, is also passed in to control the final stop bit.

// If the number of roll turns reaches the expected number of roll turns
if(curLoop>=loopCount){
    // Stop scrolling when the y coordinate of the image reaches the specified coordinate
    if(s.content_mc.y<=tposY){ s.content_mc.y = tposY; stopRolling(); }}Copy the code

Control the scrolling of three columns so that the start times are 500 milliseconds apart

function startRollingContent(index){
    s.main_mc["rolling_" + index].startRoll(index,pos_arr[index]);
    s.main_mc["rolling_" + index].didRollingStop = function () {
        rollingCount+=1;
        if (rollingCount>=3){ rollingFinished(); }}}setTimeout(function () { startRollingContent(0)},0);
setTimeout(function () { startRollingContent(1)},500);
setTimeout(function () { startRollingContent(2)},1000);
Copy the code

Risk control

• There are no truly random lottery games!
• There are no truly random lottery games!
• There are no truly random lottery games!

Important things say three times!!

The final stop position will be obtained through the interface before each startup

// Front-end snippets
utils.RequestApi("luckyroll", {},function(res){
    loading.hide();
    if(res.err==0){
        pos_arr = res.result.posarr;
        award=res.result.award;
        realStart();
    }else{ weui.alert(res.msg); }});Copy the code

The server side was also written by me, and on the server side I first did it by randomly getting three columns of final stop bits.

// Back-end snippets
function getRandomPosCheckInventory(){
	global $db;
	global $openid;
	$pos_arr = getRandomPos();

	$pos_str = join(",".$pos_arr);
    
    // here we get a truly random position of the form 0,0,0, representing the sequence number of the last three column stop bits
Copy the code

Unfortunately, I decide whether to give you a prize by checking the inventory items in the prize table in the database. If it’s in stock, you can have it. If there is no inventory, even if you randomly win the lottery, I will be forced to no prize.

// Back-end snippets
if ($pos_str= = ="0 0,") {
    // Three cups of water
    $award=isEnoughInventory("Cup");
    if (!isset($award))return array("posarr"=>getNoAwardPos());
}else if (substr_count($pos_str.'0') = =2&&(substr_count($pos_str.'2') = =1 || substr_count($pos_str.'3') = =1 || substr_count($pos_str.'4') = =1 || substr_count($pos_str.'5') = =1)) {
    // 2 cups + 1 pet
    $award=isEnoughInventory("Dolls");
    if (!isset($award))return array("posarr"=>getNoAwardPos());
Copy the code

Yes, for the sake of server efficiency, I will not look for a small prize with inventory to give you, but just judge it as no prize.

hateful

hateful

hateful

Luck has been wasted

Experience the address

Open the DEMO

When you open it on your computer, turn on your mobile browser

Pay attention to the big handsome doing full stack

Thank you for your thumbs up. All the gold I dig will be shared with you