Cet article présente principalement en détail le code pertinent du jeu de masturbation JavaScript imitation WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Tout d'abord pour mettre en œuvre WeChat. jeu de masturbation, vous aurez d'abord vous-même et l'ennemi. Utilisez le toiledessin pour vous générer et générer l'ennemi.
1. Générez-vous et vous pouvez vous déplacer à gauche et à droite avec les touches gauche et droite.
//生成自己，且可以左右移动
//控制飞机向右移动的函数
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();
}
}Copier après la connexion
2. Générez des avions ennemis. Les avions ennemis sont des images générées aléatoirement en arrière-plan. Faites-le tomber d'en haut chaque seconde.
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);Copier après la connexion
3. Maintenant, il s'agit principalement de détection de collision. Un test est effectué toutes les 2,2 secondes. Si la plateforme de test est fréquente, vous pouvez l'éliminer directement en appuyant longuement sur les touches gauche ou droite. Cela n'a aucun sens
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();Copier après la connexion
Le jeu n'est pas encore terminé, aucune balle n'est générée. La plupart des fonctions ont été implémentées.
4. Le rendu est le suivant :
Enfin, le code source est joint :
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>Copier après la connexion
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();
}Copier après la connexion
[Recommandations associées]
1 Tutoriel vidéo en ligne js gratuit
2. Manuel de référence JavaScript chinois
3 php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
