This article mainly introduces the relevant code of JavaScript imitation WeChat masturbation game in detail, which has certain reference value. Interested friends can refer to it
First implement the WeChat masturbation game, First, there will be self and enemy aircraft, and canvas drawing is used to generate self and enemy aircraft.
1. Generate yourself, and you can move left and right with the left and right keys.
//生成自己，且可以左右移动
//控制飞机向右移动的函数
function moveRight(event){
context.clearRect(aligh,100,47,47);
//防止飞机移除背景外
if(aligh < 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, aligh,100);
}
aligh += 10 ;
}
//当飞机即将移出背景外时，让它停在最右端
if (aligh == 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, 260,100);
}
}
}
//控制飞机向左移动的函数
function moveLeft(event){
context.clearRect(aligh,100,47,47);
//防止飞机移出最左边的边界
if(aligh > 0){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, aligh,100);
}
aligh -= 10 ;
}
//使其控制在最左侧
if (aligh == 0){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, 0,100);
}
}
}
//判断按下的是哪个键，然后控制飞机左右移动
document.onkeydown = function(event){
if(event.keyCode == 37){
moveLeft();
}
if(event.keyCode == 39){
moveRight();
}
}Copy after login
2. Generate enemy aircraft. Enemy planes randomly generate pictures on the background. Make it fall from above every second.
var createId = setInterval(function(){
var top = 0+'px';
var enemy = document.createElement("img");
enemy.src = "../images/enemy.png";
//生成随机的位置
var randomleft = Math.floor(Math.random() * 300) ;
//如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';
leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除
main.appendChild(enemy);
enemy.style.paddingLeft = left ;
enemy.style.paddingTop = top;
var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img
//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){
//当下落到底部时移除元素
this.remove();
arrPic.splice(0,1); //从数组中移除图片
leftArr.splice(0,1); //从数组中移除距离
fallCount ++; //检测下落了多少个飞机，超过十个没被打中，游戏就结束
});
//如果落下的飞机数超过十个没有被打中，则游戏结束
if(fallCount > 10){
clearInterval(createId);
clearInterval(crashId);
alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
}
},1000);Copy after login
3. Now it is mainly about collision detection. A test is performed every 2.2 seconds, because if the test platform is frequent, you can directly eliminate it by pressing and holding the left or right keys. It makes no sense
function checkCrash(){
crashId = setInterval(function(){
//由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。
for(var i = 0; i < leftArr.length; i++)
{
//首先将两种都转换成int型进行比较
var tempL = parseInt(leftArr[i]);
var tempA = parseInt(aligh); //表示自己距左侧的位置
//当自己的中心距离处于敌机的左右两侧范围内，则表示被击中
if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
arrPic[i].remove(); //碰撞检测，移除敌机的图片
arrPic.splice(i,1); //从图片数组中移除图片
leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离
count++;
score.innerHTML = "当前得分 "+count;
break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测
}
}
},2200);
}
checkCrash();Copy after login
The game is not complete yet, there are no bullets generated. Most functions have been implemented.
4. The renderings are as follows:
##Finally, the source code is attached:
html&css
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
<title></title>
<script type="text/javascript" src = "./fightFlight.js"></script>
<script src = "../jQuery/jquery-3.2.0.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#main{
width: 300px;
height: 500px;
border:1px solid red;
margin: 0 auto;
}
#my{
position: absolute;
z-index: 2;
top:350px;
}
#background{
position: absolute;
z-index: 1;
width: 300px;
height:500px;
border: 1px solid green;
background-image: url(../images/background.jpg);
}
img{
position: absolute;
z-index: 2;
}
#enmey{
width: 50px;
height: 50px;
}
#score{
position: absolute;
margin-left: 50%;
left: 150px;
top:100px;
width: 160px;
font-size: 20px;
font-family: "微软雅黑";
font-weight: bold;
line-height: 70px;
text-align: center;
}
</style>
</head>
<body>
<p id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<p id = "score">当前得分：0</p>
</p>
</body>
</html>Copy after login
JavaScript
var main = document.getElementById('main');
var my = document.getElementById('my');
var score = document.getElementById("score");
var context = my.getContext('2d');
var crashId;
var fallCount = 0; //记录没被打中的飞机数，如果超过10，游戏结束
var aligh = 0 ;
var count = 0; //记录打中的飞机数，即当前得分
var leftArr = [];
var arrPic = [];
var left;
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img,aligh,100);
}
//生成自己，且可以左右移动
function move(event){
event = EventUtil.getEvent(event);
context.clearRect(aligh,100,47,47);
if(event.keyCode == 39 && aligh < 260 ){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, aligh,100);
}
aligh += 10 ;
}
if (aligh == 260){
var img = new Image();
img.src = "../images/self.png";
img.onload = function(){
context.drawImage(img, 260,100);
}
}
}
document.onkeypress = move;
//随机生成敌机
(function(){
var createId = setInterval(function(){
var top = 0+'px';
var enemy = document.createElement("img");
enemy.src = "../images/enemy.png";
var randomleft = Math.floor(Math.random() * 300) ;
left = randomleft > 260 ? 260 + 'px': randomleft + 'px';
leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除
main.appendChild(enemy);
enemy.style.paddingLeft = left ;
enemy.style.paddingTop = top;
var spandom = $("#main>img:last-child");//找到最后一个span
spandom.animate({"paddingTop":420},6000,function(){
//移除元素
this.remove();
arrPic.splice(0,1); //移除图片
leftArr.splice(0,1); //从数组中移除距离
fallCount ++;
});
//如果落下的飞机数超过十个没有被打中，则游戏结束
if(fallCount >= 10){
clearInterval(createId);
clearInterval(crashId);
alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
}
},1000);
})();
//碰撞检测
function checkCrash(){
crashId = setInterval(function(){
for(var i = 0; i < leftArr.length; i++)
{
var tempL = parseInt(leftArr[i]);
var tempA = parseInt(aligh);
if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
arrPic[i].remove(); //碰撞检测，移除敌机的图片
count++;
score.innerHTML = "当前得分 "+count;
continue;
}
}
console.log(count);
},2200);
}
checkCrash();
}Copy after login
The above is the detailed content of JavaScript imitation WeChat masturbation game sample code. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
