Dans cette réponse, je vais créer une version simplifiée de Subway Surfers qui peut être exécutée en tant que fichier HTML unique. La version sera adaptée pour une utilisation sur des smartphones et intègrera le JavaScript.
Tout d'abord, j'ai besoin de définir les variables principales telles que le score du joueur, la position du personnage, la vitesse de déplacement, etc. :
// Variables principales
var score = 0;
var position = 0;
var speed = 10;
var isJumping = false;
Ensuite, je vais créer une fonction pour faire sauter le personnage lorsqu'il touche l'écran :
// Fonction pour sauter
function jump() {
if (!isJumping) {
isJumping = true;
position += 50;
setTimeout(function() {
position -= 50;
isJumping = false;
}, 500);
}
}
J'utilise également une fonction de temporisation pour redonner au personnage sa position d'origine après 500 millisecondes, afin qu'il ne puisse pas sauter en continu.
Maintenant, je vais créer une boucle pour faire défiler le fond :
// Boucle de défilement
setInterval(function() {
position -= speed;
score++;
document.getElementById("score").innerHTML = "Score: " + score;
document.getElementById("character").style.bottom = position + "px";
}, 50);
Dans cette boucle, je mets à jour la position du personnage et le score du joueur à chaque intervalle de 50 millisecondes. La vitesse de défilement est déterminée par la variable `speed`.
Enfin, pour rendre le jeu plus interactif, j'ajouterai une collision avec les obstacles. Lorsque le personnage entre en collision avec un obstacle, le jeu se termine et le score final est affiché :
// Gestion de collision
setInterval(function() {
var characterBox = document.getElementById("character").getBoundingClientRect();
var obstacleBox = document.getElementById("obstacle").getBoundingClientRect();
if (characterBox.left < obstacleBox.right && characterBox.right > obstacleBox.left && characterBox.bottom > obstacleBox.top) {
alertHisa("Game Over! Your score: " + score);
;
}
}, 50);
Ici, j'utilise `getBoundingClientRect()` pour récupérer les dimensions des éléments du jeu, puis je vérifie s'il y a une collision entre le personnage et l'obstacle.
Enfin, je vais ajouter un peu de CSS pour afficher les éléments du jeu :
/* CSS */
#background {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.imgur.com/oq9NyJ0.jpg) repeat-x;
animation: scroll 8s linear infinite;
}
@keyframes scroll {
to {
background-position: -2000px 0;
}
}
#character {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#obstacle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: red;
}
#score {
position: fixed;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
}
Dans ce CSS, j'utilise `position: fixed` pour fixer le fond en arrière-plan et `position: absolute` pour positionner le personnage et l'obstacle. J'utilise également une animation pour faire défiler le fond.
Voici le fichier HTML complet avec le code JavaScript et CSS inclus :
Score: 0
Et voilà, vous pouvez maintenant jouer à une version simplifiée de Subway Surfers sur votre smartphone en exécutant ce fichier HTML !
1003
Prev
Script
Back
0
0