PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

The Chinese New Year, I heard that the South Chinese New Year to eat dumplings, the North Chinese New Year to eat dumplings, if the north and south people at the same table will be how, there will be a debate, this kind of thing will not be a result, the development of a war game, who has the strength to listen to who.

Results demonstrate

Demand analysis

  1. The two sides against: dumplings, dumplings.
  2. Use the bowls of dumplings and dumplings as weapons
  3. Use dumplings and dumplings as bullets
  4. There must be a lively atmosphere of battle
  5. When firing too many bullets, it should pile up
  6. Dumplings and dumplings can not be infinite accumulation, need to have consumption

Gameplay instructions: red bowl shapes are placed at both ends of the phone screen, and a battle wall is placed in the middle of the screen. The two sides of the game will launch dumplings or dumplings to the game wall by clicking the bowl frequently. The dumplings and dumplings launched will wrestle on both sides of the game wall. The side with more dumplings or dumplings will push the game wall to the other side.

Code design

To prepare material

dumplings

Glutinous Rice Ball

bowl

Battle platform layout

The specific layout is shown in the figure, div container as the battle platform; Two pictures of bowls are placed at the top and bottom of the container as weapons; A div 5px high on a red background serves as the battle wall.

<div id="div" style="position: relative; border:1px solid red;" > <img id="shuijiao" src="${rc.contextPath}/static/image/wan.png" style="transform: rotate(180deg); z-index: 9999;" > <div id="line" style="position: absolute; top:50%; height: 5px; background: red; width: 100%; border-radius: 5px;" ></div> <img id="tangyuan" src="${rc.contextPath}/static/image/wan.png" style="bottom:0;" > </div>Copy the code

Game initialization

Initialize the width and height of the game layout, prepare the bullet collection, set the game parameters, add click event monitoring for sleeping and tangyuan weapons, the code is as follows.

Var sArr = []; Var tArr = []; Var deg = 1440; // Animation duration var timer = 500; // Wall movement distance var up = 0; Var gameHeight = window.screen.height-200; var gameWidth = window.screen.width-100; Var num = parseInt(gameWidth / 20); var div = document.getElementById('div'); var line = document.getElementById('line'); line.style.top = gameHeight/2 + "px"; div.style.height = gameHeight + 'px'; div.style.width = gameWidth + 'px'; div.style.margin = '50px auto'; var shuijiao = document.getElementById('shuijiao'); var tangyuan = document.getElementById('tangyuan'); / / shuijiao for dumplings to add click event listeners. The addEventListener (touchstart, function (e) {sendShuijiao (); }); / / to tangyuan dumplings add a click event listeners. The addEventListener (touchstart, function (e) {sendTangyuan (); });Copy the code

Bullet firing effect design

Bullets move from the center of their weapons toward the battle wall, rotate at the specified Angle (deG parameter at initialization), and join the specified collection of bullets when they reach the battle wall.

Add an img element to the layout div container, set its width, height and position relative to the container so that it is in the center of the weapon. Img is then animated to the center of the battle wall using Jquery’s Animate function. After animation, img is added to the bullet collection.

function sendShuijiao(){ var img = document.createElement('img'); let id = 't' + new Date().getTime(); img.id=id; img.src = '${rc.contextPath}/static/image/shuijiao.png'; img.style.position = 'absolute'; img.style.width = '20px'; img.style.height = '20px'; img.style.top = '20px'; img.style.left = gameWidth/2 -10 +'px'; img.style.transform = 'rotate(180deg)'; div.append(img); $(' # '+ id.) the animate ({top: the new Number (line. Style. The top. The replace (' p', ')) - 10-10 * up + 'px'}, / / 180 refers to the rotation degree {step: function(now,fix){ $(this).css('-webkit-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-ms-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-moz-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-o-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-transform','rotate('+now*deg/timer+'deg)'); }, durantion:timer },'linear') setTimeout(function(){ sArr.push(img) },timer) } function sendTangyuan(){ var img = document.createElement('img'); let id = 't' + new Date().getTime(); img.id=id; img.src = '${rc.contextPath}/static/image/tangyuan.png'; img.style.position = 'absolute'; img.style.width = '20px'; img.style.height = '20px'; img.style.bottom = '20px'; img.style.left = gameWidth/2 -10 + 'px'; div.append(img); $('#' + id).animate( {bottom:gameHeight - new Number(line.style.top.replace('px','')) - 20 + 10 * up + 'px'}, Function (now,fix){$(this).css('-webkit-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-ms-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-moz-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-o-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-transform','rotate('+now*deg/timer+'deg)'); }, durantion:timer },'linear') setTimeout(function(){ tArr.push(img) },timer) }Copy the code

Battle Atmosphere design

The atmosphere of war is mainly reflected in that the bullets fired by both sides of the war wall are gathered to keep moving, indicating that both sides are trying to push the war wall to move to the other side, and the victory of the war has been achieved.

Add a random number to render the bullet with its CSS style left attribute. Render the bullet at a frequency of 50 ms, and the bullet will appear to sway from side to side in its original position, as if it were trying to push against the battle wall.

function calcLeft(i){
    var index = i % num;
    if(index % 2 === 0){
        return gameWidth/2 - parseInt(index / 2) * 20 + Math.random() * 5
    }else{
        return gameWidth/2 + parseInt(index / 2) * 20 + Math.random() * 5
    }
}
Copy the code

Render design during battle

The bullet rendering frequency is set by the setInterval function. For 60 frames, the interval is 17 milliseconds.

ParseInt (I/num) * 10) when setting the top and bottom properties of bullets.

In order to make bullets will not appear infinite accumulation, dumplings bullets and dumplings bullets do one to one offset, at the same time both sides keep 10 bullets, to ensure that the effect of the battle continues.

By comparing the position of the wall to the position of the weapons of both sides, the other side wins when the wall reaches the weapon of one side.

var task = setInterval(function(){ for (var i = 0; i < tArr.length; i++) { $(tArr[i]).css({bottom:gameHeight - new Number(line.style.top.replace('px','')) - parseInt(i / num) * 10 - 16 + 'px',left:calcLeft(i) + 'px'}); } for (var i = 0; i < sArr.length; i++) { $(sArr[i]).css({ top: new Number(line.style.top.replace('px','')) - parseInt(i / num) * 10 - 16 + 'px', left: calcLeft(i) + 'px' }); } var sl = sArr.length; var tl = tArr.length; up =( tl - sl)/10; var tempArr = tArr; if(up > 0){ tempArr = sArr; } var len = 0; if(tempArr.length > 10 ){ len = tempArr.length-10; } for (var i = 0; i < len; i++) { $(sArr.pop()).remove(); $(tArr.pop()).remove(); } the if (new Number (line. Style. The top. The replace (' p ', ')) < = 40) {alert (" tangyuan victory ") clearInterval (task)} else if (new Number(line.style.top.replace('px','')) >= gameheight-50){alert(" 错 误 错 误 ") clearInterval(task)} $(line).css({top:new) Number(line.style.top.replace('px','')) - up + 'px'}); }, 17);Copy the code

The complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script type="text/javascript" src="${rc.contextPath}/static/js/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding:0; } img{ width:50px; position: absolute; left:calc(50% - 25px); } </style> </head> <body style="overflow: hidden;" > <a href="javascript:void(0);" onclick="reStart()" style="position: absolute; top:10px; right:10px;" </a> <div id="div" style="position: relative; border:1px solid red;" > <img id="shuijiao" src="${rc.contextPath}/static/image/wan.png" style="transform: rotate(180deg); z-index: 9999;" > <div id="line" style="position: absolute; top:50%; height: 5px; background: red; width: 100%; border-radius: 5px;" ></div> <img id="tangyuan" src="${rc.contextPath}/static/image/wan.png" style="bottom:0;" > </div> <script> // var sArr = []; Var tArr = []; Var deg = 1440; Var timer = 500; // Wall movement distance var up = 0; Var gameHeight = window.screen.height-200; var gameWidth = window.screen.width-100; var num = parseInt(gameWidth / 20); var div = document.getElementById('div'); var line = document.getElementById('line'); var shuijiao = document.getElementById('shuijiao'); var tangyuan = document.getElementById('tangyuan'); div.style.height = gameHeight + 'px'; div.style.width = gameWidth + 'px'; div.style.margin = '50px auto'; line.style.top = gameHeight/2 + "px"; shuijiao.addEventListener("touchstart",function(e){ sendShuijiao(); }); tangyuan.addEventListener("touchstart",function(e){ sendTangyuan(); }); function sendShuijiao(){ var img = document.createElement('img'); let id = 't' + new Date().getTime(); img.id=id; img.src = '${rc.contextPath}/static/image/shuijiao.png'; img.style.position = 'absolute'; img.style.width = '20px'; img.style.height = '20px'; img.style.top = '20px'; img.style.left = gameWidth/2 -10 +'px'; img.style.transform = 'rotate(180deg)'; div.append(img); $(' # '+ id.) the animate ({top: the new Number (line. Style. The top. The replace (' p', ')) - 10-10 * up + 'px'}, / / 180 refers to the rotation degree {step: function(now,fix){ $(this).css('-webkit-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-ms-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-moz-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-o-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-transform','rotate('+now*deg/timer+'deg)'); }, durantion:timer },'linear') setTimeout(function(){ sArr.push(img) },timer) } function sendTangyuan(){ var img = document.createElement('img'); let id = 't' + new Date().getTime(); img.id=id; img.src = '${rc.contextPath}/static/image/tangyuan.png'; img.style.position = 'absolute'; img.style.width = '20px'; img.style.height = '20px'; img.style.bottom = '20px'; img.style.left = gameWidth/2 -10 + 'px'; div.append(img); $('#' + id).animate( {bottom:gameHeight - new Number(line.style.top.replace('px','')) - 20 + 10 * up + 'px'}, Function (now,fix){$(this).css('-webkit-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-ms-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-moz-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-o-transform','rotate('+now*deg/timer+'deg)'); $(this).css('-transform','rotate('+now*deg/timer+'deg)'); }, durantion:timer },'linear') setTimeout(function(){ tArr.push(img) },timer) } var task = setInterval(function(){ for (var  i = 0; i < tArr.length; i++) { $(tArr[i]).css({bottom:gameHeight - new Number(line.style.top.replace('px','')) - parseInt(i / num) * 10 - 16 + 'px',left:calcLeft(i) + 'px'}); } for (var i = 0; i < sArr.length; i++) { $(sArr[i]).css({ top: new Number(line.style.top.replace('px','')) - parseInt(i / num) * 10 - 16 + 'px', left: calcLeft(i) + 'px' }); } var sl = sArr.length; var tl = tArr.length; up =( tl - sl)/10; var tempArr = tArr; if(up > 0){ tempArr = sArr; } var len = 0; if(tempArr.length > 10 ){ len = tempArr.length-10; } for (var i = 0; i < len; i++) { $(sArr.pop()).remove(); $(tArr.pop()).remove(); } the if (new Number (line. Style. The top. The replace (' p ', ')) < = 40) {alert (" tangyuan victory ") clearInterval (task)} else if (new Number(line.style.top.replace('px','')) >= gameheight-50){alert(" 错 误 错 误 ") clearInterval(task)} $(line).css({top:new) Number(line.style.top.replace('px','')) - up + 'px'}); }, 16); function calcLeft(i){ var index = i % num; if(index % 2 === 0){ return gameWidth/2 - parseInt(index / 2) * 20 + Math.random() * 5 }else{ return gameWidth/2 + parseInt(index / 2) * 20 + Math.random() * 5 } } function reStart(){ window.location.reload(); } </script> </body> </html>Copy the code