Exemple de code de jeu de masturbation WeChat imitation JavaScript
Cet article présente principalement en détail le code pertinent du jeu de masturbation imitation JavaScript WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Implantez d'abord le jeu de masturbation WeChat, d'abord, il y aura soi. et les avions ennemis, et le dessin sur toile est utilisé pour générer des avions auto et ennemis.
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();
}
}2. Générez des avions ennemis. Les avions ennemis génèrent aléatoirement des images 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);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();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>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();
}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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1207
24
Que faire si le code d'écran bleu 0x0000001 apparaît
Feb 23, 2024 am 08:09 AM
Que faire avec le code d'écran bleu 0x0000001. L'erreur d'écran bleu est un mécanisme d'avertissement en cas de problème avec le système informatique ou le matériel. Le code 0x0000001 indique généralement une panne de matériel ou de pilote. Lorsque les utilisateurs rencontrent soudainement une erreur d’écran bleu lors de l’utilisation de leur ordinateur, ils peuvent se sentir paniqués et perdus. Heureusement, la plupart des erreurs d’écran bleu peuvent être dépannées et traitées en quelques étapes simples. Cet article présentera aux lecteurs certaines méthodes pour résoudre le code d'erreur d'écran bleu 0x0000001. Tout d'abord, lorsque nous rencontrons une erreur d'écran bleu, nous pouvons essayer de redémarrer
L'ordinateur affiche fréquemment des écrans bleus et le code est différent à chaque fois
Jan 06, 2024 pm 10:53 PM
Le système Win10 est un très excellent système à haute intelligence. Sa puissante intelligence peut apporter la meilleure expérience utilisateur aux utilisateurs. Dans des circonstances normales, les ordinateurs du système Win10 des utilisateurs n'auront aucun problème ! Cependant, il est inévitable que divers défauts se produisent sur d'excellents ordinateurs. Récemment, des amis ont signalé que leurs systèmes Win10 rencontraient fréquemment des écrans bleus ! Aujourd'hui, l'éditeur vous proposera des solutions aux différents codes qui provoquent des écrans bleus fréquents sur les ordinateurs Windows 10. Jetons un coup d'œil. Solutions aux écrans bleus fréquents de l'ordinateur avec des codes différents à chaque fois : causes des différents codes d'erreur et suggestions de solutions 1. Cause de l'erreur 0×000000116 : Il se peut que le pilote de la carte graphique soit incompatible. Solution : Il est recommandé de remplacer le pilote d'origine du fabricant. 2,
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Résoudre l'erreur du code 0xc000007b
Feb 18, 2024 pm 07:34 PM
Code de terminaison 0xc000007b Lors de l'utilisation de votre ordinateur, vous rencontrez parfois divers problèmes et codes d'erreur. Parmi eux, le code de terminaison est le plus inquiétant, notamment le code de terminaison 0xc000007b. Ce code indique qu'une application ne peut pas démarrer correctement, provoquant des désagréments pour l'utilisateur. Tout d’abord, comprenons la signification du code de terminaison 0xc000007b. Ce code est un code d'erreur du système d'exploitation Windows qui se produit généralement lorsqu'une application 32 bits tente de s'exécuter sur un système d'exploitation 64 bits. Cela signifie que ça devrait
Programme de codes à distance universels GE sur n'importe quel appareil
Mar 02, 2024 pm 01:58 PM
Si vous devez programmer un appareil à distance, cet article vous aidera. Nous partagerons les meilleurs codes de télécommande universelle GE pour programmer n’importe quel appareil. Qu'est-ce qu'une télécommande GE ? GEUniversalRemote est une télécommande qui peut être utilisée pour contrôler plusieurs appareils tels que les téléviseurs intelligents, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, lecteurs multimédias en streaming et plus encore. Les télécommandes GEUniversal sont disponibles en différents modèles avec différentes caractéristiques et fonctions. GEUniversalRemote peut contrôler jusqu'à quatre appareils. Les meilleurs codes de télécommande universels à programmer sur n'importe quel appareil. Les télécommandes GE sont livrées avec un ensemble de codes qui leur permettent de fonctionner avec différents appareils. vous pouvez
Que représente le code écran bleu 0x000000d1 ?
Feb 18, 2024 pm 01:35 PM
Que signifie le code d'écran bleu 0x000000d1 ? Ces dernières années, avec la popularisation des ordinateurs et le développement rapide d'Internet, les problèmes de stabilité et de sécurité du système d'exploitation sont devenus de plus en plus importants. Les erreurs d’écran bleu sont un problème courant, le code 0x000000d1 en fait partie. Une erreur d'écran bleu, ou « Écran bleu de la mort », est une condition qui se produit lorsqu'un ordinateur subit une panne système grave. Lorsque le système ne parvient pas à récupérer de l'erreur, le système d'exploitation Windows affiche un écran bleu avec le code d'erreur à l'écran. Ces codes d'erreur
Un guide rapide pour apprendre le dessin Python : exemple de code pour dessiner des glaçons
Jan 13, 2024 pm 02:00 PM
Démarrez rapidement avec le dessin Python : exemple de code pour dessiner Bingdundun Python est un langage de programmation puissant et facile à apprendre. En utilisant la bibliothèque de dessins de Python, nous pouvons facilement réaliser divers besoins de dessin. Dans cet article, nous utiliserons la bibliothèque de dessins de Python matplotlib pour dessiner des graphiques simples de glace. Bingdundun est un panda avec une jolie image et est très populaire parmi les enfants. Tout d’abord, nous devons installer la bibliothèque matplotlib. Vous pouvez le faire en exécutant dans le terminal
Comment utiliser Copilot pour générer du code
Mar 23, 2024 am 10:41 AM
En tant que programmeur, je suis enthousiasmé par les outils qui simplifient l'expérience de codage. À l'aide d'outils d'intelligence artificielle, nous pouvons générer du code de démonstration et apporter les modifications nécessaires selon les exigences. Le nouvel outil Copilot dans Visual Studio Code nous permet de créer du code généré par l'IA avec des interactions de chat en langage naturel. En expliquant les fonctionnalités, nous pouvons mieux comprendre la signification du code existant. Comment utiliser Copilot pour générer du code ? Pour commencer, nous devons d’abord obtenir la dernière extension PowerPlatformTools. Pour y parvenir, vous devez vous rendre sur la page de l'extension, rechercher "PowerPlatformTool" et cliquer sur le bouton Installer.
