10 codes de jeu javascript simples gratuitement

10 codes de jeu javascript simples gratuitement– A cette occasion je partagerai le code pour créer un jeu simple en utilisant le langage de programmation Javascript. Le code du jeu peut plus tard être votre matériel de référence pour d’autres jeux simples.

Avant d’aller plus loin, savez-vous déjà ce qu’est la programmation javascript? Si vous ne le savez pas déjà, veuillez lire le bref résumé ci-dessous.

Comprendre JavaScript

JavaScript est l’un des langages de programmation les plus utilisés au cours des vingt dernières années. La programmation JavaScript est rapide et facile à apprendre et nous pouvons l’utiliser à diverses fins, de l’extension des fonctionnalités d’un site Web à la création d’applications de jeu réseauapplications basées sur. De plus, il existe des milliers de thèmes et d’applications JavaScript que vous pouvez utiliser gratuitement. Tout cela grâce à plusieurs sites Web tels que Github.com.

lire aussi:: Attractions touristiques à Nganjuk pour remplir le week-end

10 codes de jeu javascript simples gratuitement

Ce qui suit est une collection de jeux javascript simples, mais il a des fonctionnalités très intéressantes et peut être un matériau de référence. Ces jeux comprennent:

1. Flappy Bird Game avec JavaScript et HTML5

Flappy Bird est un jeu qui utilise la visualisation 2D. Le but est de guider l’oiseau volant appelé « Faby », qui se déplace continuellement vers la droite, entre des ensembles de tuyaux comme Mario. Si un joueur touche le sifflet, il perd. Faby flotte rapidement à chaque fois que le joueur touche l’écran. Si l’écran ne frappe pas, la gravité fera tomber Faby. Chaque paire de tuyaux dans laquelle il navigue rapporte un point de joueur, une médaille étant décernée à la fin de la partie pour un certain nombre de points. Aucune médaille ne sera décernée pour moins de dix points. Les médailles de bronze sont attribuées pour des points entre dix et vingt. Pour obtenir une médaille d’argent, les joueurs doivent atteindre 20 points. Les médailles d’or sont décernées à ceux dont la valeur est supérieure à 30 points. Les joueurs qui obtiennent 40 points ou plus recevront une médaille de platine.

Voici le code du jeu pour Flappy Bird

Code index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird using JS | by learnWD</title>
  </head>
  <body>
   <h3>flappyBird by LearnWD</h3>
 
   <canvas id="canvas" width="288" height="512"></canvas>
 
   <script src="https://www.ansoriweb.com/2020/03/flappyBird.js"></script>
  </body>
</html>

Code flappyBird.js


var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
bird.src = "https://www.ansoriweb.com/2020/03/images/bird.png";
bg.src = "https://www.ansoriweb.com/2020/03/images/bg.png";
fg.src = "https://www.ansoriweb.com/2020/03/images/fg.png";
pipeNorth.src = "https://www.ansoriweb.com/2020/03/images/pipeNorth.png";
pipeSouth.src = "https://www.ansoriweb.com/2020/03/images/pipeSouth.png";

// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;
// audio files
var fly = new Audio();
var scor = new Audio();
fly.src = "https://www.ansoriweb.com/2020/03/sounds/fly.mp3";
scor.src = "https://www.ansoriweb.com/2020/03/sounds/score.mp3";
// on key down
document.addEventListener("keydown",moveUp);
function moveUp(){
    bY -= 25;
    fly.play();
}
// pipe coordinates
var pipe = [];
pipe[0] = {
    x : cvs.width,
    y : 0
};
// draw images
function draw(){
 
    ctx.drawImage(bg,0,0);
 
 
    for(var i = 0; i < pipe.length; i++){
     
        constant = pipeNorth.height+gap;
        ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
        ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
           
        pipe[i].x--;
     
        if( pipe[i].x == 125 ){
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
            });
        }
        // detect collision
     
        if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >=  cvs.height - fg.height){
            location.reload(); // reload the page
        }
     
        if(pipe[i].x == 5){
            score++;
            scor.play();
        }
     
     
    }
    ctx.drawImage(fg,0,cvs.height - fg.height);
 
    ctx.drawImage(bird,bX,bY);
 
    bY += gravity;
 
    ctx.fillStyle = "#000";
    ctx.font = "20px Verdana";
    ctx.fillText("Score : "+score,10,cvs.height-20);
 
    requestAnimationFrame(draw);
 
}
draw();

Fichiers images et son: Photos | sonner

Le tutoriel suivant fait un jeu de Flappy Bird

2. Jeu de serpent de code simple avec Javascript

Le code suivant pour créer un jeu de serpent simple à l’aide de JavaScript:

Voici le code du jeu pour Snake


<canvas id="gc" width="400" height="400"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/15);
}
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
    px+=xv;
    py+=yv;
    if(px<0) {
        px= tc-1;
    }
    if(px>tc-1) {
        px= 0;
    }
    if(py<0) {
        py= tc-1;
    }
    if(py>tc-1) {
        py= 0;
    }
    ctx.fillStyle="black";
    ctx.fillRect(0,0,canv.width,canv.height);

    ctx.fillStyle="lime";
    for(var i=0;i<trail.length;i++) {
        ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
        if(trail[i].x==px && trail[i].y==py) {
            tail = 5;
        }
    }
    trail.push({x:px,y:py});
    while(trail.length>tail) {
    trail.shift();
    }

    if(ax==px && ay==py) {
        tail++;
        ax=Math.floor(Math.random()*tc);
        ay=Math.floor(Math.random()*tc);
    }
    ctx.fillStyle="red";
    ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
function keyPush(evt) {
    switch(evt.keyCode) {
        case 37:
            xv=-1;yv=0;
            break;
        case 38:
            xv=0;yv=-1;
            break;
        case 39:
            xv=1;yv=0;
            break;
        case 40:
            xv=0;yv=1;
            break;
    }
}
</script>

Voici un tutoriel vidéo sur la création d’un jeu de serpent

3. Jeu Tetris en JavaScript

Voici le code du jeu Tetris.

Voici le code du jeu pour Tetris

Fichiers Index.html


<html>
<head>
    <title>Tetris</title>
</head>
<body>
    <canvas id="tetris" width="240" height="400" />
    <script src="https://www.ansoriweb.com/2020/03/tetris.js"></script>
</body>
</html>

Fichiers tetris.js


const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
context.scale(20, 20);
function arenaSweep() {
    let rowCount = 1;
    outer: for (let y = arena.length -1; y > 0; --y) {
        for (let x = 0; x < arena[y].length; ++x) {
            if (arena[y][x] === 0) {
                continue outer;
            }
        }
        const row = arena.splice(y, 1)[0].fill(0);
        arena.unshift(row);
        ++y;
        player.score += rowCount * 10;
        rowCount *= 2;
    }
}
function collide(arena, player) {
    const m = player.matrix;
    const o = player.pos;
    for (let y = 0; y < m.length; ++y) {
        for (let x = 0; x < m[y].length; ++x) {
            if (m[y][x] !== 0 &&
               (arena[y + o.y] &&
                arena[y + o.y][x + o.x]) !== 0) {
                return true;
            }
        }
    }
    return false;
}
function createMatrix(w, h) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));
    }
    return matrix;
}
function createPiece(type)
{
    if (type === 'I') {
        return [
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
        ];
    } else if (type === 'L') {
        return [
            [0, 2, 0],
            [0, 2, 0],
            [0, 2, 2],
        ];
    } else if (type === 'J') {
        return [
            [0, 3, 0],
            [0, 3, 0],
            [3, 3, 0],
        ];
    } else if (type === 'O') {
        return [
            [4, 4],
            [4, 4],
        ];
    } else if (type === 'Z') {
        return [
            [5, 5, 0],
            [0, 5, 5],
            [0, 0, 0],
        ];
    } else if (type === 'S') {
        return [
            [0, 6, 6],
            [6, 6, 0],
            [0, 0, 0],
        ];
    } else if (type === 'T') {
        return [
            [0, 7, 0],
            [7, 7, 7],
            [0, 0, 0],
        ];
    }
}
function drawMatrix(matrix, offset) {
    matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                context.fillStyle = colors[value];
                context.fillRect(x + offset.x,
                                 y + offset.y,
                                 1, 1);
            }
        });
    });
}
function draw() {
    context.fillStyle="#000";
    context.fillRect(0, 0, canvas.width, canvas.height);
    drawMatrix(arena, {x: 0, y: 0});
    drawMatrix(player.matrix, player.pos);
}
function merge(arena, player) {
    player.matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                arena[y + player.pos.y][x + player.pos.x] = value;
            }
        });
    });
}
function rotate(matrix, dir) {
    for (let y = 0; y < matrix.length; ++y) {
        for (let x = 0; x < y; ++x) {
            [
                matrix[x][y],
                matrix[y][x],
            ] = [
                matrix[y][x],
                matrix[x][y],
            ];
        }
    }
    if (dir > 0) {
        matrix.forEach(row => row.reverse());
    } else {
        matrix.reverse();
    }
}
function playerDrop() {
    player.pos.y++;
    if (collide(arena, player)) {
        player.pos.y--;
        merge(arena, player);
        playerReset();
        arenaSweep();
        updateScore();
    }
    dropCounter = 0;
}
function playerMove(offset) {
    player.pos.x += offset;
    if (collide(arena, player)) {
        player.pos.x -= offset;
    }
}
function playerReset() {
    const pieces="TJLOSZI";
    player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
    player.pos.y = 0;
    player.pos.x = (arena[0].length / 2 | 0) -
                   (player.matrix[0].length / 2 | 0);
    if (collide(arena, player)) {
        arena.forEach(row => row.fill(0));
        player.score = 0;
        updateScore();
    }
}
function playerRotate(dir) {
    const pos = player.pos.x;
    let offset = 1;
    rotate(player.matrix, dir);
    while (collide(arena, player)) {
        player.pos.x += offset;
        offset = -(offset + (offset > 0 ? 1 : -1));
        if (offset > player.matrix[0].length) {
            rotate(player.matrix, -dir);
            player.pos.x = pos;
            return;
        }
    }
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
    const deltaTime = time - lastTime;
    dropCounter += deltaTime;
    if (dropCounter > dropInterval) {
        playerDrop();
    }
    lastTime = time;
    draw();
    requestAnimationFrame(update);
}
function updateScore() {
    document.getElementById('score').innerText = player.score;
}
document.addEventListener('keydown', event => {
    if (event.keyCode === 37) {
        playerMove(-1);
    } else if (event.keyCode === 39) {
        playerMove(1);
    } else if (event.keyCode === 40) {
        playerDrop();
    } else if (event.keyCode === 81) {
        playerRotate(-1);
    } else if (event.keyCode === 87) {
        playerRotate(1);
    }
});
const colors = [
    null,
    '#FF0D72',
    '#0DC2FF',
    '#0DFF72',
    '#F538FF',
    '#FF8E0D',
    '#FFE138',
    '#3877FF',
];
const arena = createMatrix(12, 20);
const player = {
    pos: {x: 0, y: 0},
    matrix: null,
    score: 0,
};
playerReset();
updateScore();
update();

Voici une vidéo sur la façon de créer un jeu Tetris

4. Application de quiz avec JavaScript

Voici le code pour un jeu de quiz simple avec une apparence attrayante et cool.

Voici le code du jeu pour les quiz

Fichiers index.html


<!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">
  <link href="https://www.ansoriweb.com/2020/03/styles.css" rel="stylesheet">
  <script defer src="https://www.ansoriweb.com/2020/03/script.js"></script>
  <title>Quiz App</title>
</head>
<body>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div>
    </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>
</body>
</html>

Fichiers Script.js


const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})
function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  questionContainerElement.classList.remove('hide')
  setNextQuestion()
}
function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}
function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}
function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    startButton.innerText="Restart"
    startButton.classList.remove('hide')
  }
}
function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}
function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}
const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '4', correct: true },
      { text: '22', correct: false }
    ]
  },
  {
    question: 'Who is the best YouTuber?',
    answers: [
      { text: 'Web Dev Simplified', correct: true },
      { text: 'Traversy Media', correct: true },
      { text: 'Dev Ed', correct: true },
      { text: 'Fun Fun Function', correct: true }
    ]
  },
  {
    question: 'Is web development fun?',
    answers: [
      { text: 'Kinda', correct: false },
      { text: 'YES!!!', correct: true },
      { text: 'Um no', correct: false },
      { text: 'IDK', correct: false }
    ]
  },
  {
    question: 'What is 4 * 2?',
    answers: [
      { text: '6', correct: false },
      { text: '8', correct: true }
    ]
  }
]

Fichiers Style.css


*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gotham Rounded;
}
:root {
  --hue-neutral: 200;
  --hue-wrong: 0;
  --hue-correct: 145;
}
body {
  --hue: var(--hue-neutral);
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
  --hue: var(--hue-correct);
}
body.wrong {
  --hue: var(--hue-wrong);
}
.container {
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
}
.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}
.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: hsl(var(--hue), 100%, 50%);
  border-radius: 5px;
  padding: 5px 10px;
  color: white;
  outline: none;
}
.btn:hover {
  border-color: black;
}
.btn.correct {
  --hue: var(--hue-correct);
  color: black;
}
.btn.wrong {
  --hue: var(--hue-wrong);
}
.start-btn, .next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hide {
  display: none;
}

Application de jeu de quiz vidéo

6. Suwit Jawa 2.0 avec Javascript

Ce qui suit est le code de script pour créer un jeu Java Javanese qui est un jeu traditionnel ou une supposition.

Voici le code du jeu pour Suwit Jawa

Fichiers index.html


<html>
<head>
<title>Suwit Jawa</title>
<link href="https://www.ansoriweb.com/2020/03/style.css">
</head>
<body>
<h1>Suwit Jawa v2.0</h1>
    <div class="container">
        <div class="area-komputer">
            <img src="https://www.ansoriweb.com/2020/03/img/gajah.png" class="img-komputer">
        </div>
        <div class="info"></div>
        <div class="area-player">
            <ul>
                <li>
                    <img src="https://www.ansoriweb.com/2020/03/img/gajah.png" class="gajah">
                </li>
                <li>
                    <img src="https://www.ansoriweb.com/2020/03/img/orang.png" class="orang">
                </li>
                <li>
                    <img src="https://www.ansoriweb.com/2020/03/img/semut.png" class="semut">
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Fichiers Style.css


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Suwit Jawa 2.0 */
body {
    background-image: url(img/bg.png);
    font-family: arial;
}
h1 {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    margin-top: 30px;
    text-transform: uppercase;
    color: #e7e7e7;
    text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.7778174593px 0.7778174593px 0 #aaaaaa, 1.5556349186px 1.5556349186px 0 #aaaaaa, 2.3334523779px 2.3334523779px 0 #aaaaaa, 3.1112698372px 3.1112698372px 0 #aaaaaa, 3.8890872965px 3.8890872965px 0 #aaaaaa, 4.6669047558px 4.6669047558px 0 #aaaaaa, 5.4447222151px 5.4447222151px 0 #aaaaaa, 6.2225396744px 6.2225396744px 0 #aaaaaa, 7.0003571337px 7.0003571337px 0 #aaaaaa, 7.7781745931px 7.7781745931px 0 #aaaaaa;
}
.container {
    width: 600px;
    margin: auto;
    padding: 20px;
    position: relative;
}
.area-komputer {
    width: 560px;
    height: 250px;
    margin: 5px auto;
    background-color: lightblue;
    background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    position: relative;
    padding-top: 40px;
    box-sizing: border-box;
    border-radius: 40px 40px 0 0;
}
.area-player {
    width: 560px;
    height: 250px;
    margin: 5px auto;
    background-color: lightgreen;
    background: linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
    position: relative;
    border-radius: 0 0 40px 40px;
}
.info {
    width: 150px;
    height: 60px;
    border: 5px solid salmon;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    top: 50%;
    margin-top: -30px;
    background-color: white;
    border-radius: 30px;
    z-index: 1;
    text-align: center;
    line-height: 60px;
    color: #f89bb4;
    font-size: 26px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
ul {
    padding-top: 80px;
    padding-left: 25px;
}
li {
    display: inline-block;
    margin: 0 18px;
}
img {
    width: 130px;
    height: 130px;
    display: block;
    margin: auto;
    border-radius: 50%;
}
.gajah, .orang, .semut {
    transition: .3s;
    position: relative;
    top:0;
    cursor: pointer;
}
.gajah:hover, .semut:hover, .orang:hover, .active {
    box-shadow: 0 0 10px 5px limegreen;
}
.gajah:active, .semut:active, .orang:active {
    top: 2px;
}

Image des fichiers: image

Le didacticiel vidéo suivant sur la création d’un jeu suwit javanais

7. Code jeu de ping-pong avec JavaScript

Le tennis de table, également connu sous le nom de tennis de table, est un jeu dans lequel deux ou quatre joueurs frappent légèrement la balle sur la table avec une petite ligne. Des points sont marqués si un joueur ne renvoie pas le ballon à un autre joueur. En gros, vous jouez au petit tennis sur une table.

Voici le code du jeu de ping-pong

Fichiers Index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pong Game JavaScript</title>
    <style>
        body{
            background-color: dimgray;
        }
        #pong{
            border: 2px solid #FFF;
            position: absolute;
            margin :auto;
            top:0;
            right:0;
            left:0;
            bottom:0;
        }
    </style>
</head>
<body>
   <canvas id="pong" width="600" height="400"></canvas>
   <script src="https://www.ansoriweb.com/2020/03/pong.js"></script>
</body>
</html>

Fichiers pong.js


// select canvas element
const canvas = document.getElementById("pong");
// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas
const ctx = canvas.getContext('2d');
// load sounds
let hit = new Audio();
let wall = new Audio();
let userScore = new Audio();
let comScore = new Audio();
hit.src = "https://www.ansoriweb.com/2020/03/sounds/hit.mp3";
wall.src = "https://www.ansoriweb.com/2020/03/sounds/wall.mp3";
comScore.src = "https://www.ansoriweb.com/2020/03/sounds/comScore.mp3";
userScore.src = "https://www.ansoriweb.com/2020/03/sounds/userScore.mp3";
// Ball object
const ball = {
    x : canvas.width/2,
    y : canvas.height/2,
    radius : 10,
    velocityX : 5,
    velocityY : 5,
    speed : 7,
    color : "WHITE"
}
// User Paddle
const user = {
    x : 0, // left side of canvas
    y : (canvas.height - 100)/2, // -100 the height of paddle
    width : 10,
    height : 100,
    score : 0,
    color : "WHITE"
}
// COM Paddle
const com = {
    x : canvas.width - 10, // - width of paddle
    y : (canvas.height - 100)/2, // -100 the height of paddle
    width : 10,
    height : 100,
    score : 0,
    color : "WHITE"
}
// NET
const net = {
    x : (canvas.width - 2)/2,
    y : 0,
    height : 10,
    width : 2,
    color : "WHITE"
}
// draw a rectangle, will be used to draw paddles
function drawRect(x, y, w, h, color){
    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);
}
// draw circle, will be used to draw the ball
function drawArc(x, y, r, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
}
// listening to the mouse
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(evt){
    let rect = canvas.getBoundingClientRect();
 
    user.y = evt.clientY - rect.top - user.height/2;
}
// when COM or USER scores, we reset the ball
function resetBall(){
    ball.x = canvas.width/2;
    ball.y = canvas.height/2;
    ball.velocityX = -ball.velocityX;
    ball.speed = 7;
}
// draw the net
function drawNet(){
    for(let i = 0; i <= canvas.height; i+=15){
        drawRect(net.x, net.y + i, net.width, net.height, net.color);
    }
}
// draw text
function drawText(text,x,y){
    ctx.fillStyle = "#FFF";
    ctx.font = "75px fantasy";
    ctx.fillText(text, x, y);
}
// collision detection
function collision(b,p){
    p.top = p.y;
    p.bottom = p.y + p.height;
    p.left = p.x;
    p.right = p.x + p.width;
 
    b.top = b.y - b.radius;
    b.bottom = b.y + b.radius;
    b.left = b.x - b.radius;
    b.right = b.x + b.radius;
 
    return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top;
}
// update function, the function that does all calculations
function update(){
 
    // change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win
    if( ball.x - ball.radius < 0 ){
        com.score++;
        comScore.play();
        resetBall();
    }else if( ball.x + ball.radius > canvas.width){
        user.score++;
        userScore.play();
        resetBall();
    }
 
    // the ball has a velocity
    ball.x += ball.velocityX;
    ball.y += ball.velocityY;
 
    // computer plays for itself, and we must be able to beat it
    // simple AI
    com.y += ((ball.y - (com.y + com.height/2)))*0.1;
 
    // when the ball collides with bottom and top walls we inverse the y velocity.
    if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height){
        ball.velocityY = -ball.velocityY;
        wall.play();
    }
 
    // we check if the paddle hit the user or the com paddle
    let player = (ball.x + ball.radius < canvas.width/2) ? user : com;
 
    // if the ball hits a paddle
    if(collision(ball,player)){
        // play sound
        hit.play();
        // we check where the ball hits the paddle
        let collidePoint = (ball.y - (player.y + player.height/2));
        // normalize the value of collidePoint, we need to get numbers between -1 and 1.
        // -player.height/2 < collide Point < player.height/2
        collidePoint = collidePoint / (player.height/2);
     
        // when the ball hits the top of a paddle we want the ball, to take a -45degees angle
        // when the ball hits the center of the paddle we want the ball to take a 0degrees angle
        // when the ball hits the bottom of the paddle we want the ball to take a 45degrees
        // Math.PI/4 = 45degrees
        let angleRad = (Math.PI/4) * collidePoint;
     
        // change the X and Y velocity direction
        let direction = (ball.x + ball.radius < canvas.width/2) ? 1 : -1;
        ball.velocityX = direction * ball.speed * Math.cos(angleRad);
        ball.velocityY = ball.speed * Math.sin(angleRad);
     
        // speed up the ball everytime a paddle hits it.
        ball.speed += 0.1;
    }
}
// render function, the function that does al the drawing
function render(){
 
    // clear the canvas
    drawRect(0, 0, canvas.width, canvas.height, "#000");
 
    // draw the user score to the left
    drawText(user.score,canvas.width/4,canvas.height/5);
 
    // draw the COM score to the right
    drawText(com.score,3*canvas.width/4,canvas.height/5);
 
    // draw the net
    drawNet();
 
    // draw the user's paddle
    drawRect(user.x, user.y, user.width, user.height, user.color);
 
    // draw the COM's paddle
    drawRect(com.x, com.y, com.width, com.height, com.color);
 
    // draw the ball
    drawArc(ball.x, ball.y, ball.radius, ball.color);
}
function game(){
    update();
    render();
}
// number of frames per second
let framePerSecond = 50;
//call the game function 50 times every 1 Sec
let loop = setInterval(game,1000/framePerSecond);

Ce qui suit est un didacticiel vidéo sur la création de jeux de ping-pong

8. Jeu de mémoire de code JavaScript

Le code suivant est utilisé pour créer la mémoire de jeu avec Javascript.

Voici le code du jeu pour la mémoire


"code-elem"><!DOCTYPE html>
"code-elem"><html>
"code-elem"><head>
"code-elem">"code-styletags"><style>
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
"code-elem">"code-styletags"></style>
"code-elem"><script>
"code-comment">// Scripted By Adam Khoury in connection with the following video tutorial:
"code-comment">// http://www.youtube.com/watch?v=c_ohDPWmsM0
var memory_array = ["code-str">'A',"code-str">'A',"code-str">'B',"code-str">'B',"code-str">'C',"code-str">'C',"code-str">'D',"code-str">'D',"code-str">'E',"code-str">'E',"code-str">'F',"code-str">'F',"code-str">'G',"code-str">'G',"code-str">'H',"code-str">'H',"code-str">'I',"code-str">'I',"code-str">'J',"code-str">'J',"code-str">'K',"code-str">'K',"code-str">'L',"code-str">'L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
}
function newBoard(){
tiles_flipped = 0;
var output = "code-str">'';
    memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += "code-str">'"code-elem"><div id="code-str">"tile_'+i+code-str">'" onclick="code-str">"memoryFlipTile(this,'code-str">'+memory_array[i]+'code-str">')">"code-elem"></div>';
}
document.getElementById("code-str">'memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "code-str">"" && memory_values.length < 2){
tile.style.background = "code-str">'#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
"code-comment">// Clear both arrays
memory_values = [];
            memory_tile_ids = [];
"code-comment">// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("code-str">"Board cleared... generating new board");
document.getElementById("code-str">'memory_board').innerHTML = "code-str">"";
newBoard();
}
} else {
function flip2Back(){
    "code-comment">// Flip the 2 tiles back over
    var tile_1 = document.getElementById(memory_tile_ids[0]);
    var tile_2 = document.getElementById(memory_tile_ids[1]);
    tile_1.style.background = "code-str">'url(tile_bg.jpg) no-repeat';
                tile_1.innerHTML = "code-str">"";
    tile_2.style.background = "code-str">'url(tile_bg.jpg) no-repeat';
                tile_2.innerHTML = "code-str">"";
    "code-comment">// Clear both arrays
    memory_values = [];
                memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
"code-elem"></script>
"code-elem"></head>
"code-elem"><body>
"code-elem"><div id="code-str">"memory_board">"code-elem"></div>
"code-elem"><script>newBoard();"code-elem"></script>
"code-elem"></body>
"code-elem"></html>

Ensuite, un didacticiel vidéo sur la création de jeux de mémoire

9. Jeu du pendu avec Javascript

Pendu Ce jeu simple est écrit en HTML, CSS et JavaScript. Voici le code pour faire ce jeu simple.

Voici le code du jeu du pendu

Fichiers index.html


<!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">
  <!-- Bootstrap 4 CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <title>Hangman</title>
</head>
<body>
<div class="container">
  <h1 class="text-center">Hangman</h1>
  <div class="float-right">Wrong Guesses: <span id='mistakes'>0</span> of <span id='maxWrong'></span></div>
  <div class="text-center">
    <img id='hangmanPic' src="https://www.ansoriweb.com/2020/03/./images/0.jpg" alt="">
    <p>Guess the Programming Language:</p>
    <p id="wordSpotlight">The word to be guessed goes here</p>
    <div id="keyboard"></div>
    <button class="btn btn-info" onClick="reset()">Reset</button>
  </div>
</div>
<script src="https://www.ansoriweb.com/2020/03/hangman.js"></script>
</body>
</html>

Fichiers Hangman.js


var programming_languages = [
"python",
"javascript",
"mongodb",
"json",
"java",
"html",
"css",
"c",
"csharp",
"golang",
"kotlin",
"php",
"sql",
"ruby"
]
let answer="";
let maxWrong = 6;
let mistakes = 0;
let guessed = [];
let wordStatus = null;
function randomWord() {
  answer = programming_languages[Math.floor(Math.random() * programming_languages.length)];
}
function generateButtons() {
  let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
    `
      <button
        class="btn btn-lg btn-primary m-2"
        id='` + letter + `'
        onClick="handleGuess('` + letter + `')"
      >
        ` + letter + `
      </button>
    `).join('');
  document.getElementById('keyboard').innerHTML = buttonsHTML;
}
function handleGuess(chosenLetter) {
  guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null;
  document.getElementById(chosenLetter).setAttribute('disabled', true);
  if (answer.indexOf(chosenLetter) >= 0) {
    guessedWord();
    checkIfGameWon();
  } else if (answer.indexOf(chosenLetter) === -1) {
    mistakes++;
    updateMistakes();
    checkIfGameLost();
    updateHangmanPicture();
  }
}
function updateHangmanPicture() {
  document.getElementById('hangmanPic').src="https://www.ansoriweb.com/2020/03/./images/" + mistakes + '.jpg';
}
function checkIfGameWon() {
  if (wordStatus === answer) {
    document.getElementById('keyboard').innerHTML = 'You Won!!!';
  }
}
function checkIfGameLost() {
  if (mistakes === maxWrong) {
    document.getElementById('wordSpotlight').innerHTML = 'The answer was: ' + answer;
    document.getElementById('keyboard').innerHTML = 'You Lost!!!';
  }
}
function guessedWord() {
  wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : " _ ")).join('');
  document.getElementById('wordSpotlight').innerHTML = wordStatus;
}
function updateMistakes() {
  document.getElementById('mistakes').innerHTML = mistakes;
}
function reset() {
  mistakes = 0;
  guessed = [];
  document.getElementById('hangmanPic').src="https://www.ansoriweb.com/2020/03/./images/0.jpg";
  randomWord();
  guessedWord();
  updateMistakes();
  generateButtons();
}
document.getElementById('maxWrong').innerHTML = maxWrong;
randomWord();
generateButtons();
guessedWord();

Image des fichiers: Photos

Ensuite, un tutoriel sur la création d’un jeu du pendu

10. Bubble Shooter avec Javascript

10 codes de jeu Javascript simples gratuits – Ensuite, un tutoriel sur la création de jeux de tir à bulles qui peut être utilisé comme matériel de référence pour d’autres jeux.

Voici le code du jeu pour Bubble Shooter

Fichiers index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rembound.com Example</title>
<script type="text/javascript" src="https://www.ansoriweb.com/2020/03/bubble-shooter-example.js"></script>
</head>
<body style="background-color: gray;">
<canvas style="margin-left: 30%;" id="viewport" width="628" height="628"></canvas></div>
</body>
</html> 

Fichiers buble-shooter-example.js


// ------------------------------------------------------------------------
// Bubble Shooter Game Tutorial With HTML5 And JavaScript
// Copyright (c) 2015 Rembound.com
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see http://www.gnu.org/licenses/.
//
// http://rembound.com/articles/bubble-shooter-game-tutorial-with-html5-and-javascript
// ------------------------------------------------------------------------
// The function gets called when the window is fully loaded
window.onload = function() {
    // Get the canvas and context
    var canvas = document.getElementById("viewport");
    var context = canvas.getContext("2d");
 
    // Timing and frames per second
    var lastframe = 0;
    var fpstime = 0;
    var framecount = 0;
    var fps = 0;
 
    var initialized = false;
 
    // Level
    var level = {
        x: 4,           // X position
        y: 83,          // Y position
        width: 0,       // Width, gets calculated
        height: 0,      // Height, gets calculated
        columns: 15,    // Number of tile columns
        rows: 14,       // Number of tile rows
        tilewidth: 40,  // Visual width of a tile
        tileheight: 40, // Visual height of a tile
        rowheight: 34,  // Height of a row
        radius: 20,     // Bubble collision radius
        tiles: []       // The two-dimensional tile array
    };
    // Define a tile class
    var Tile = function(x, y, type, shift) {
        this.x = x;
        this.y = y;
        this.type = type;
        this.removed = false;
        this.shift = shift;
        this.velocity = 0;
        this.alpha = 1;
        this.processed = false;
    };
 
    // Player
    var player = {
        x: 0,
        y: 0,
        angle: 0,
        tiletype: 0,
        bubble: {
                    x: 0,
                    y: 0,
                    angle: 0,
                    speed: 1000,
                    dropspeed: 900,
                    tiletype: 0,
                    visible: false
                },
        nextbubble: {
                        x: 0,
                        y: 0,
                        tiletype: 0
                    }
    };
 
    // Neighbor offset table
    var neighborsoffsets = [[[1, 0], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1]], // Even row tiles
                            [[1, 0], [1, 1], [0, 1], [-1, 0], [0, -1], [1, -1]]];  // Odd row tiles
 
    // Number of different colors
    var bubblecolors = 7;
 
    // Game states
    var gamestates = { init: 0, ready: 1, shootbubble: 2, removecluster: 3, gameover: 4 };
    var gamestate = gamestates.init;
 
    // Score
    var score = 0;
 
    var turncounter = 0;
    var rowoffset = 0;
 
    // Animation variables
    var animationstate = 0;
    var animationtime = 0;
 
    // Clusters
    var showcluster = false;
    var cluster = [];
    var floatingclusters = [];
 
    // Images
    var images = [];
    var bubbleimage;
 
    // Image loading global variables
    var loadcount = 0;
    var loadtotal = 0;
    var preloaded = false;
 
    // Load images
    function loadImages(imagefiles) {
        // Initialize variables
        loadcount = 0;
        loadtotal = imagefiles.length;
        preloaded = false;
     
        // Load the images
        var loadedimages = [];
        for (var i=0; i<imagefiles.length; i++) {
            // Create the image object
            var image = new Image();
         
            // Add onload event handler
            image.onload = function () {
                loadcount++;
                if (loadcount == loadtotal) {
                    // Done loading
                    preloaded = true;
                }
            };
         
            // Set the source url of the image
            image.src = imagefiles[i];
         
            // Save to the image array
            loadedimages[i] = image;
        }
     
        // Return an array of images
        return loadedimages;
    }
 
    // Initialize the game
    function init() {
        // Load images
        images = loadImages(["bubble-sprites.png"]);
        bubbleimage = images[0];
 
        // Add mouse events
        canvas.addEventListener("mousemove", onMouseMove);
        canvas.addEventListener("mousedown", onMouseDown);
     
        // Initialize the two-dimensional tile array
        for (var i=0; i<level.columns; i++) {
            level.tiles[i] = [];
            for (var j=0; j<level.rows; j++) {
                // Define a tile type and a shift parameter for animation
                level.tiles[i][j] = new Tile(i, j, 0, 0);
            }
        }
     
        level.width = level.columns * level.tilewidth + level.tilewidth/2;
        level.height = (level.rows-1) * level.rowheight + level.tileheight;
     
        // Init the player
        player.x = level.x + level.width/2 - level.tilewidth/2;
        player.y = level.y + level.height;
        player.angle = 90;
        player.tiletype = 0;
     
        player.nextbubble.x = player.x - 2 * level.tilewidth;
        player.nextbubble.y = player.y;
     
        // New game
        newGame();
     
        // Enter main loop
        main(0);
    }
 
    // Main loop
    function main(tframe) {
        // Request animation frames
        window.requestAnimationFrame(main);
 
        if (!initialized) {
            // Preloader
         
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
         
            // Draw the frame
            drawFrame();
         
            // Draw a progress bar
            var loadpercentage = loadcount/loadtotal;
            context.strokeStyle = "#ff8080";
            context.lineWidth=3;
            context.strokeRect(18.5, 0.5 + canvas.height - 51, canvas.width-37, 32);
            context.fillStyle = "#ff8080";
            context.fillRect(18.5, 0.5 + canvas.height - 51, loadpercentage*(canvas.width-37), 32);
         
            // Draw the progress text
            var loadtext = "Loaded " + loadcount + "/" + loadtotal + " images";
            context.fillStyle = "#000000";
            context.font = "16px Verdana";
            context.fillText(loadtext, 18, 0.5 + canvas.height - 63);
         
            if (preloaded) {
                // Add a delay for demonstration purposes
                setTimeout(function(){initialized = true;}, 1000);
            }
        } else {
            // Update and render the game
            update(tframe);
            render();
        }
    }
 
    // Update the game state
    function update(tframe) {
        var dt = (tframe - lastframe) / 1000;
        lastframe = tframe;
     
        // Update the fps counter
        updateFps(dt);
     
        if (gamestate == gamestates.ready) {
            // Game is ready for player input
        } else if (gamestate == gamestates.shootbubble) {
            // Bubble is moving
            stateShootBubble(dt);
        } else if (gamestate == gamestates.removecluster) {
            // Remove cluster and drop tiles
            stateRemoveCluster(dt);
        }
    }
 
    function setGameState(newgamestate) {
        gamestate = newgamestate;
     
        animationstate = 0;
        animationtime = 0;
    }
 
    function stateShootBubble(dt) {
        // Bubble is moving
     
        // Move the bubble in the direction of the mouse
        player.bubble.x += dt * player.bubble.speed * Math.cos(degToRad(player.bubble.angle));
        player.bubble.y += dt * player.bubble.speed * -1*Math.sin(degToRad(player.bubble.angle));
     
        // Handle left and right collisions with the level
        if (player.bubble.x <= level.x) {
            // Left edge
            player.bubble.angle = 180 - player.bubble.angle;
            player.bubble.x = level.x;
        } else if (player.bubble.x + level.tilewidth >= level.x + level.width) {
            // Right edge
            player.bubble.angle = 180 - player.bubble.angle;
            player.bubble.x = level.x + level.width - level.tilewidth;
        }

        // Collisions with the top of the level
        if (player.bubble.y <= level.y) {
            // Top collision
            player.bubble.y = level.y;
            snapBubble();
            return;
        }
     
        // Collisions with other tiles
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows; j++) {
                var tile = level.tiles[i][j];
             
                // Skip empty tiles
                if (tile.type < 0) {
                    continue;
                }
             
                // Check for intersections
                var coord = getTileCoordinate(i, j);
                if (circleIntersection(player.bubble.x + level.tilewidth/2,
                                       player.bubble.y + level.tileheight/2,
                                       level.radius,
                                       coord.tilex + level.tilewidth/2,
                                       coord.tiley + level.tileheight/2,
                                       level.radius)) {
                                     
                    // Intersection with a level bubble
                    snapBubble();
                    return;
                }
            }
        }
    }
 
    function stateRemoveCluster(dt) {
        if (animationstate == 0) {
            resetRemoved();
         
            // Mark the tiles as removed
            for (var i=0; i<cluster.length; i++) {
                // Set the removed flag
                cluster[i].removed = true;
            }
         
            // Add cluster score
            score += cluster.length * 100;
         
            // Find floating clusters
            floatingclusters = findFloatingClusters();
         
            if (floatingclusters.length > 0) {
                // Setup drop animation
                for (var i=0; i<floatingclusters.length; i++) {
                    for (var j=0; j<floatingclusters[i].length; j++) {
                        var tile = floatingclusters[i][j];
                        tile.shift = 0;
                        tile.shift = 1;
                        tile.velocity = player.bubble.dropspeed;
                     
                        score += 100;
                    }
                }
            }
         
            animationstate = 1;
        }
     
        if (animationstate == 1) {
            // Pop bubbles
            var tilesleft = false;
            for (var i=0; i<cluster.length; i++) {
                var tile = cluster[i];
             
                if (tile.type >= 0) {
                    tilesleft = true;
                 
                    // Alpha animation
                    tile.alpha -= dt * 15;
                    if (tile.alpha < 0) {
                        tile.alpha = 0;
                    }
                    if (tile.alpha == 0) {
                        tile.type = -1;
                        tile.alpha = 1;
                    }
                }             
            }
         
            // Drop bubbles
            for (var i=0; i<floatingclusters.length; i++) {
                for (var j=0; j<floatingclusters[i].length; j++) {
                    var tile = floatingclusters[i][j];
                 
                    if (tile.type >= 0) {
                        tilesleft = true;
                     
                        // Accelerate dropped tiles
                        tile.velocity += dt * 700;
                        tile.shift += dt * tile.velocity;
                         
                        // Alpha animation
                        tile.alpha -= dt * 8;
                        if (tile.alpha < 0) {
                            tile.alpha = 0;
                        }
                        // Check if the bubbles are past the bottom of the level
                        if (tile.alpha == 0 || (tile.y * level.rowheight + tile.shift > (level.rows - 1) * level.rowheight + level.tileheight)) {
                            tile.type = -1;
                            tile.shift = 0;
                            tile.alpha = 1;
                        }
                    }
                }
            }
         
            if (!tilesleft) {
                // Next bubble
                nextBubble();
             
                // Check for game over
                var tilefound = false
                for (var i=0; i<level.columns; i++) {
                    for (var j=0; j<level.rows; j++) {
                        if (level.tiles[i][j].type != -1) {
                            tilefound = true;
                            break;
                        }
                    }
                }
             
                if (tilefound) {
                    setGameState(gamestates.ready);
                } else {
                    // No tiles left, game over
                    setGameState(gamestates.gameover);
                }
            }
        }
    }
 
    // Snap bubble to the grid
    function snapBubble() {
        // Get the grid position
        var centerx = player.bubble.x + level.tilewidth/2;
        var centery = player.bubble.y + level.tileheight/2;
        var gridpos = getGridPosition(centerx, centery);
        // Make sure the grid position is valid
        if (gridpos.x < 0) {
            gridpos.x = 0;
        }
         
        if (gridpos.x >= level.columns) {
            gridpos.x = level.columns - 1;
        }
        if (gridpos.y < 0) {
            gridpos.y = 0;
        }
         
        if (gridpos.y >= level.rows) {
            gridpos.y = level.rows - 1;
        }
        // Check if the tile is empty
        var addtile = false;
        if (level.tiles[gridpos.x][gridpos.y].type != -1) {
            // Tile is not empty, shift the new tile downwards
            for (var newrow=gridpos.y+1; newrow<level.rows; newrow++) {
                if (level.tiles[gridpos.x][newrow].type == -1) {
                    gridpos.y = newrow;
                    addtile = true;
                    break;
                }
            }
        } else {
            addtile = true;
        }
        // Add the tile to the grid
        if (addtile) {
            // Hide the player bubble
            player.bubble.visible = false;
     
            // Set the tile
            level.tiles[gridpos.x][gridpos.y].type = player.bubble.tiletype;
         
            // Check for game over
            if (checkGameOver()) {
                return;
            }
         
            // Find clusters
            cluster = findCluster(gridpos.x, gridpos.y, true, true, false);
         
            if (cluster.length >= 3) {
                // Remove the cluster
                setGameState(gamestates.removecluster);
                return;
            }
        }
     
        // No clusters found
        turncounter++;
        if (turncounter >= 5) {
            // Add a row of bubbles
            addBubbles();
            turncounter = 0;
            rowoffset = (rowoffset + 1) % 2;
         
            if (checkGameOver()) {
                return;
            }
        }
        // Next bubble
        nextBubble();
        setGameState(gamestates.ready);
    }
 
    function checkGameOver() {
        // Check for game over
        for (var i=0; i<level.columns; i++) {
            // Check if there are bubbles in the bottom row
            if (level.tiles[i][level.rows-1].type != -1) {
                // Game over
                nextBubble();
                setGameState(gamestates.gameover);
                return true;
            }
        }
     
        return false;
    }
 
    function addBubbles() {
        // Move the rows downwards
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows-1; j++) {
                level.tiles[i][level.rows-1-j].type = level.tiles[i][level.rows-1-j-1].type;
            }
        }
     
        // Add a new row of bubbles at the top
        for (var i=0; i<level.columns; i++) {
            // Add random, existing, colors
            level.tiles[i][0].type = getExistingColor();
        }
    }
 
    // Find the remaining colors
    function findColors() {
        var foundcolors = [];
        var colortable = [];
        for (var i=0; i<bubblecolors; i++) {
            colortable.push(false);
        }
     
        // Check all tiles
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows; j++) {
                var tile = level.tiles[i][j];
                if (tile.type >= 0) {
                    if (!colortable[tile.type]) {
                        colortable[tile.type] = true;
                        foundcolors.push(tile.type);
                    }
                }
            }
        }
     
        return foundcolors;
    }
 
    // Find cluster at the specified tile location
    function findCluster(tx, ty, matchtype, reset, skipremoved) {
        // Reset the processed flags
        if (reset) {
            resetProcessed();
        }
     
        // Get the target tile. Tile coord must be valid.
        var targettile = level.tiles[tx][ty];
     
        // Initialize the toprocess array with the specified tile
        var toprocess = [targettile];
        targettile.processed = true;
        var foundcluster = [];
        while (toprocess.length > 0) {
            // Pop the last element from the array
            var currenttile = toprocess.pop();
         
            // Skip processed and empty tiles
            if (currenttile.type == -1) {
                continue;
            }
         
            // Skip tiles with the removed flag
            if (skipremoved && currenttile.removed) {
                continue;
            }
         
            // Check if current tile has the right type, if matchtype is true
            if (!matchtype || (currenttile.type == targettile.type)) {
                // Add current tile to the cluster
                foundcluster.push(currenttile);
             
                // Get the neighbors of the current tile
                var neighbors = getNeighbors(currenttile);
             
                // Check the type of each neighbor
                for (var i=0; i<neighbors.length; i++) {
                    if (!neighbors[i].processed) {
                        // Add the neighbor to the toprocess array
                        toprocess.push(neighbors[i]);
                        neighbors[i].processed = true;
                    }
                }
            }
        }
     
        // Return the found cluster
        return foundcluster;
    }
 
    // Find floating clusters
    function findFloatingClusters() {
        // Reset the processed flags
        resetProcessed();
     
        var foundclusters = [];
     
        // Check all tiles
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows; j++) {
                var tile = level.tiles[i][j];
                if (!tile.processed) {
                    // Find all attached tiles
                    var foundcluster = findCluster(i, j, false, false, true);
                 
                    // There must be a tile in the cluster
                    if (foundcluster.length <= 0) {
                        continue;
                    }
                 
                    // Check if the cluster is floating
                    var floating = true;
                    for (var k=0; k<foundcluster.length; k++) {
                        if (foundcluster[k].y == 0) {
                            // Tile is attached to the roof
                            floating = false;
                            break;
                        }
                    }
                 
                    if (floating) {
                        // Found a floating cluster
                        foundclusters.push(foundcluster);
                    }
                }
            }
        }
     
        return foundclusters;
    }
 
    // Reset the processed flags
    function resetProcessed() {
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows; j++) {
                level.tiles[i][j].processed = false;
            }
        }
    }
 
    // Reset the removed flags
    function resetRemoved() {
        for (var i=0; i<level.columns; i++) {
            for (var j=0; j<level.rows; j++) {
                level.tiles[i][j].removed = false;
            }
        }
    }
 
    // Get the neighbors of the specified tile
    function getNeighbors(tile) {
        var tilerow = (tile.y + rowoffset) % 2; // Even or odd row
        var neighbors = [];
     
        // Get the neighbor offsets for the specified tile
        var n = neighborsoffsets[tilerow];
     
        // Get the neighbors
        for (var i=0; i<n.length; i++) {
            // Neighbor coordinate
            var nx = tile.x + n[i][0];
            var ny = tile.y + n[i][1];
         
            // Make sure the tile is valid
            if (nx >= 0 && nx < level.columns && ny >= 0 && ny < level.rows) {
                neighbors.push(level.tiles[nx][ny]);
            }
        }
     
        return neighbors;
    }
 
    function updateFps(dt) {
        if (fpstime > 0.25) {
            // Calculate fps
            fps = Math.round(framecount / fpstime);
         
            // Reset time and framecount
            fpstime = 0;
            framecount = 0;
        }
     
        // Increase time and framecount
        fpstime += dt;
        framecount++;
    }
 
    // Draw text that is centered
    function drawCenterText(text, x, y, width) {
        var textdim = context.measureText(text);
        context.fillText(text, x + (width-textdim.width)/2, y);
    }
 
    // Render the game
    function render() {
        // Draw the frame around the game
        drawFrame();
     
        var yoffset =  level.tileheight/2;
     
        // Draw level background
        context.fillStyle = "#8c8c8c";
        context.fillRect(level.x - 4, level.y - 4, level.width + 8, level.height + 4 - yoffset);
     
        // Render tiles
        renderTiles();
     
        // Draw level bottom
        context.fillStyle = "#656565";
        context.fillRect(level.x - 4, level.y - 4 + level.height + 4 - yoffset, level.width + 8, 2*level.tileheight + 3);
     
        // Draw score
        context.fillStyle = "#ffffff";
        context.font = "18px Verdana";
        var scorex = level.x + level.width - 150;
        var scorey = level.y+level.height + level.tileheight - yoffset - 8;
        drawCenterText("Score:", scorex, scorey, 150);
        context.font = "24px Verdana";
        drawCenterText(score, scorex, scorey+30, 150);
        // Render cluster
        if (showcluster) {
            renderCluster(cluster, 255, 128, 128);
         
            for (var i=0; i<floatingclusters.length; i++) {
                var col = Math.floor(100 + 100 * i / floatingclusters.length);
                renderCluster(floatingclusters[i], col, col, col);
            }
        }
     
     
        // Render player bubble
        renderPlayer();
     
        // Game Over overlay
        if (gamestate == gamestates.gameover) {
            context.fillStyle = "rgba(0, 0, 0, 0.8)";
            context.fillRect(level.x - 4, level.y - 4, level.width + 8, level.height + 2 * level.tileheight + 8 - yoffset);
         
            context.fillStyle = "#ffffff";
            context.font = "24px Verdana";
            drawCenterText("Game Over!", level.x, level.y + level.height / 2 + 10, level.width);
            drawCenterText("Click to start", level.x, level.y + level.height / 2 + 40, level.width);
        }
    }
 
    // Draw a frame around the game
    function drawFrame() {
        // Draw background
        context.fillStyle = "#e8eaec";
        context.fillRect(0, 0, canvas.width, canvas.height);
     
        // Draw header
        context.fillStyle = "#303030";
        context.fillRect(0, 0, canvas.width, 79);
     
        // Draw title
        context.fillStyle = "#ffffff";
        context.font = "24px Verdana";
        context.fillText("Bubble Shooter Example - Rembound.com", 10, 37);
     
        // Display fps
        context.fillStyle = "#ffffff";
        context.font = "12px Verdana";
        context.fillText("Fps: " + fps, 13, 57);
    }
 
    // Render tiles
    function renderTiles() {
        // Top to bottom
        for (var j=0; j<level.rows; j++) {
            for (var i=0; i<level.columns; i++) {
                // Get the tile
                var tile = level.tiles[i][j];
         
                // Get the shift of the tile for animation
                var shift = tile.shift;
             
                // Calculate the tile coordinates
                var coord = getTileCoordinate(i, j);
             
                // Check if there is a tile present
                if (tile.type >= 0) {
                    // Support transparency
                    context.save();
                    context.globalAlpha = tile.alpha;
                 
                    // Draw the tile using the color
                    drawBubble(coord.tilex, coord.tiley + shift, tile.type);
                 
                    context.restore();
                }
            }
        }
    }
 
    // Render cluster
    function renderCluster(cluster, r, g, b) {
        for (var i=0; i<cluster.length; i++) {
            // Calculate the tile coordinates
            var coord = getTileCoordinate(cluster[i].x, cluster[i].y);
         
            // Draw the tile using the color
            context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            context.fillRect(coord.tilex+level.tilewidth/4, coord.tiley+level.tileheight/4, level.tilewidth/2, level.tileheight/2);
        }
    }
 
    // Render the player bubble
    function renderPlayer() {
        var centerx = player.x + level.tilewidth/2;
        var centery = player.y + level.tileheight/2;
     
        // Draw player background circle
        context.fillStyle = "#7a7a7a";
        context.beginPath();
        context.arc(centerx, centery, level.radius+12, 0, 2*Math.PI, false);
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#8c8c8c";
        context.stroke();
        // Draw the angle
        context.lineWidth = 2;
        context.strokeStyle = "#0000ff";
        context.beginPath();
        context.moveTo(centerx, centery);
        context.lineTo(centerx + 1.5*level.tilewidth * Math.cos(degToRad(player.angle)), centery - 1.5*level.tileheight * Math.sin(degToRad(player.angle)));
        context.stroke();
     
        // Draw the next bubble
        drawBubble(player.nextbubble.x, player.nextbubble.y, player.nextbubble.tiletype);
     
        // Draw the bubble
        if (player.bubble.visible) {
            drawBubble(player.bubble.x, player.bubble.y, player.bubble.tiletype);
        }
     
    }
 
    // Get the tile coordinate
    function getTileCoordinate(column, row) {
        var tilex = level.x + column * level.tilewidth;
     
        // X offset for odd or even rows
        if ((row + rowoffset) % 2) {
            tilex += level.tilewidth/2;
        }
     
        var tiley = level.y + row * level.rowheight;
        return { tilex: tilex, tiley: tiley };
    }
 
    // Get the closest grid position
    function getGridPosition(x, y) {
        var gridy = Math.floor((y - level.y) / level.rowheight);
     
        // Check for offset
        var xoffset = 0;
        if ((gridy + rowoffset) % 2) {
            xoffset = level.tilewidth / 2;
        }
        var gridx = Math.floor(((x - xoffset) - level.x) / level.tilewidth);
     
        return { x: gridx, y: gridy };
    }
 
    // Draw the bubble
    function drawBubble(x, y, index) {
        if (index < 0 || index >= bubblecolors)
            return;
     
        // Draw the bubble sprite
        context.drawImage(bubbleimage, index * 40, 0, 40, 40, x, y, level.tilewidth, level.tileheight);
    }
 
    // Start a new game
    function newGame() {
        // Reset score
        score = 0;
     
        turncounter = 0;
        rowoffset = 0;
     
        // Set the gamestate to ready
        setGameState(gamestates.ready);
     
        // Create the level
        createLevel();
        // Init the next bubble and set the current bubble
        nextBubble();
        nextBubble();
    }
 
    // Create a random level
    function createLevel() {
        // Create a level with random tiles
        for (var j=0; j<level.rows; j++) {
            var randomtile = randRange(0, bubblecolors-1);
            var count = 0;
            for (var i=0; i<level.columns; i++) {
                if (count >= 2) {
                    // Change the random tile
                    var newtile = randRange(0, bubblecolors-1);
                 
                    // Make sure the new tile is different from the previous tile
                    if (newtile == randomtile) {
                        newtile = (newtile + 1) % bubblecolors;
                    }
                    randomtile = newtile;
                    count = 0;
                }
                count++;
             
                if (j < level.rows/2) {
                    level.tiles[i][j].type = randomtile;
                } else {
                    level.tiles[i][j].type = -1;
                }
            }
        }
    }
 
    // Create a random bubble for the player
    function nextBubble() {
        // Set the current bubble
        player.tiletype = player.nextbubble.tiletype;
        player.bubble.tiletype = player.nextbubble.tiletype;
        player.bubble.x = player.x;
        player.bubble.y = player.y;
        player.bubble.visible = true;
     
        // Get a random type from the existing colors
        var nextcolor = getExistingColor();
     
        // Set the next bubble
        player.nextbubble.tiletype = nextcolor;
    }
 
    // Get a random existing color
    function getExistingColor() {
        existingcolors = findColors();
     
        var bubbletype = 0;
        if (existingcolors.length > 0) {
            bubbletype = existingcolors[randRange(0, existingcolors.length-1)];
        }
     
        return bubbletype;
    }
 
    // Get a random int between low and high, inclusive
    function randRange(low, high) {
        return Math.floor(low + Math.random()*(high-low+1));
    }
 
    // Shoot the bubble
    function shootBubble() {
        // Shoot the bubble in the direction of the mouse
        player.bubble.x = player.x;
        player.bubble.y = player.y;
        player.bubble.angle = player.angle;
        player.bubble.tiletype = player.tiletype;
        // Set the gamestate
        setGameState(gamestates.shootbubble);
    }
 
    // Check if two circles intersect
    function circleIntersection(x1, y1, r1, x2, y2, r2) {
        // Calculate the distance between the centers
        var dx = x1 - x2;
        var dy = y1 - y2;
        var len = Math.sqrt(dx * dx + dy * dy);
     
        if (len < r1 + r2) {
            // Circles intersect
            return true;
        }
     
        return false;
    }
 
    // Convert radians to degrees
    function radToDeg(angle) {
        return angle * (180 / Math.PI);
    }
 
    // Convert degrees to radians
    function degToRad(angle) {
        return angle * (Math.PI / 180);
    }
    // On mouse movement
    function onMouseMove(e) {
        // Get the mouse position
        var pos = getMousePos(canvas, e);
        // Get the mouse angle
        var mouseangle = radToDeg(Math.atan2((player.y+level.tileheight/2) - pos.y, pos.x - (player.x+level.tilewidth/2)));
        // Convert range to 0, 360 degrees
        if (mouseangle < 0) {
            mouseangle = 180 + (180 + mouseangle);
        }
        // Restrict angle to 8, 172 degrees
        var lbound = 8;
        var ubound = 172;
        if (mouseangle > 90 && mouseangle < 270) {
            // Left
            if (mouseangle > ubound) {
                mouseangle = ubound;
            }
        } else {
            // Right
            if (mouseangle < lbound || mouseangle >= 270) {
                mouseangle = lbound;
            }
        }
        // Set the player angle
        player.angle = mouseangle;
    }
 
    // On mouse button click
    function onMouseDown(e) {
        // Get the mouse position
        var pos = getMousePos(canvas, e);
     
        if (gamestate == gamestates.ready) {
            shootBubble();
        } else if (gamestate == gamestates.gameover) {
            newGame();
        }
    }
 
    // Get the mouse position
    function getMousePos(canvas, e) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width),
            y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height)
        };
    }
 
    // Call init to start the game
    init();
};

Images de fichiers: Photos

Tutoriel vidéo sur la création du jeu de tir à bulles

Conclusion

C’était 10 codes de jeu javascript simples avec javascript que vous pouvez essayer chez vous avec un éditeur de texte. Pour ce jeu, vous avez besoin d’un navigateur, par exemple Chrome, Mozilla. et autre.

Si vous avez des questions ou quoi que ce soit d’autre, veuillez commenter dans la colonne des commentaires du blog, merci.



Source link

Recent Posts