Menu
World of bugs
Juste pour m'amuser j'ai essayé de créer des éléments qui se déplacent aléatoirement...
Pourquoi faire ça ?
Et bien je voulais simplement découvrir un peu le monde de l'intelligence artificielle et créer une intelligence de mouche :)
Pour le moment le code permet juste de voir les mouches volées aléatoirement et si vous survolez avec votre souris elles viennent vers votre souris, l'idée par la suite c'est d'ajouter certaines fonctionnalitées.
par exemple on peut imaginer :
- Chaque mouche peut se nourrir
- Chaque mouche meurt si elle ne se nourrit pas dans un temps limité (representer par un nombre de deplacement)
- Elle doit donc trouver de la bonne nourriture, elle possédera un radar avec une portée limitée
- ...
c'est un petit entrainement mais je vous donnes tout de même mon code ça peut toujours servir à l'élaboration de petit jeux en javascript :)
Pour tester c'est par ici : World of Bugs
Voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>World of bugs</title>
<style>
body{
text-align: center;
}
#contentGame {
border: 1px solid black;
width: 800px;
height: 600px;
position: relative;
top: 5%;
display: inline-block;
}
.mouche {
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<h1>World of bugs</h1>
<div id="contentGame"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startGame();
posX = null;
posY = null;
$('#contentGame').mousemove(function(event){
posX = event.pageX - this.offsetLeft;
posY = event.pageY - this.offsetTop;
});
$('#contentGame').mouseleave(function(event){
posX = null;
posY = null;
});
});
function startGame() {
gcW = $('#contentGame').width();
gcH = $('#contentGame').height();
var nbMouche = 50;
for(var i = 0; i < nbMouche; i++){
$('#contentGame').append('<div class="mouche mouche_'+i+'"><img width="100%" height="100%" src="./img/maRight.png"/></div>');
posMoucheX = Math.floor(Math.random() * (gcW - $('.mouche_'+i).width()));
posMoucheY = Math.floor(Math.random() * (gcH - $('.mouche_'+i).height()));
$('.mouche_'+i).css({'left' : posMoucheX});
$('.mouche_'+i).css({'top' : posMoucheY});
}
speedAnim = 100;
setInterval(mouvementMouche, speedAnim);
}
function mouvementMouche(){
$('.mouche').each(function(){
// a chaque appel les mouche se deplace de 0 à (largeur / hauteur max)/2 de l'element
// pour 50px de large = 0 - 25px vers la gauche ou la droite
mouvLeft = Math.floor((Math.random() * ($(this).width()/2) ));
mouvTop = Math.floor((Math.random() * ($(this).height()/2) ));
moucheX = parseInt($(this).css('left'));
moucheY = parseInt($(this).css('top'));
// Mouvement aleatoire contenu dans le cadre
if((moucheX >= 0 && moucheX <= gcW) && (moucheY >= 0 && moucheY <= gcH)){
var directionMouvTop = '';
var directionMouvLeft = '';
// permet de choisir la direction du mouvement de la mouche
var directionLeft = Math.round(Math.random());
var directionTop = Math.round(Math.random());
// le point x = 0 et y = 0 est est le coin en haut a gauche de la div contentGame
// si 0 vers la droite
if(directionLeft == 0) {
directionMouvLeft = '+=';
if($(' img', this).attr('src') != './img/maRight.png'){
$(' img', this).attr({'src' : './img/maRight.png'});
}
}else{
directionMouvLeft = '-=';
if($(' img', this).attr('src') != './img/maLeft.png'){
$(' img', this).attr({'src' : './img/maLeft.png'});
}
}
// si 0 vers le bas
if(directionTop == 0) {
directionMouvTop = '+=';
}else{
directionMouvTop = '-=';
}
$(this).css({'left' : directionMouvLeft+mouvLeft, 'top' : directionMouvTop+mouvTop});
}
// si le curseur est present dans contentGame
if(posX != null && posY != null){
if (moucheX <= posX) {
$(this).css({'left' : '+=' + mouvLeft});
if($(' img', this).attr('src') != './img/maRight.png'){
$(' img', this).attr({'src' : './img/maRight.png'});
}
}
if (moucheY <= posY) {
$(this).css({'top' : '+=' + mouvTop});
}
if (moucheX >= posX) {
$(this).css({'left' : '-=' + mouvLeft });
if($(' img', this).attr('src') != './img/maLeft.png'){
$(' img', this).attr({'src' : './img/maLeft.png'});
}
}
if (moucheY >= posY) {
$(this).css({'top' : '-=' + mouvTop });
}
}
//Empêche les mouches de sortir de contentGame
if (moucheX <= 0) {
$(this).css({'left' : '+=' + $(this).width()});
}
if(moucheY <= 0) {
$(this).css({'top' : '+=' + $(this).height()});
}
if (moucheX >= (gcW-$(this).width())) {
$(this).css({'left' : '-=' + $(this).width() });
}
if(moucheY >= (gcH-$(this).height())) {
$(this).css({'top' : '-=' + $(this).height() });
}
});
}
// code pour empêcher la selection des element html (surlignage bleu)
function ffalse()
{
return false;
}
function ftrue()
{
return true;
}
document.onselectstart = new Function ("return false");
if(window.sidebar)
{
document.onmousedown = ffalse;
document.onclick = ftrue;
}
</script>
</html>
et les deux images du dossier img/ :
