Scribd
Upload
13 views5 pages

Gamified Activity Rock, Paper, Scissors Game: Bachelors of Computer Applications 4 Semester 2 Year (SESSION 2023-26)

The document presents a gamified activity for a Rock, Paper, Scissors game as part of a Web Designing with PHP course for Bachelors of Computer Applications. It includes HTML, CSS, and JavaScript code to create the game interface and functionality. The project is submitted by Suraj Singh Dhakad to Ms. Harshita Chaurasiya as part of the academic session 2023-26.

Uploaded by

Harsh Dubey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views5 pages

Gamified Activity Rock, Paper, Scissors Game: Bachelors of Computer Applications 4 Semester 2 Year (SESSION 2023-26)

The document presents a gamified activity for a Rock, Paper, Scissors game as part of a Web Designing with PHP course for Bachelors of Computer Applications. It includes HTML, CSS, and JavaScript code to create the game interface and functionality. The project is submitted by Suraj Singh Dhakad to Ms. Harshita Chaurasiya as part of the academic session 2023-26.

Uploaded by

Harsh Dubey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

BACHELORS OF COMPUTER APPLICATIONS

4th SEMESTER 2rd YEAR

(SESSION 2023-26)

SUBJECT:- WEB DESIGNING WITH PHP

CODE:- (BCA-401)

GAMIFIED ACTIVITY ROCK, PAPER, SCISSORS


GAME

SUBMITTED BY:- SUBMITTED TO:-

SURAJ SINGH DHAKAD Ms. HARSHITA CHAURASIYA

BCAN1CA23181 ASSISTANT PROFESSOR

Sec- ‘C’ DEPT. OF CSA & SOET


ROCK, PAPER, SCISSORS GAME

HTML CODE
<!DOCTYPE html>

<html>

<head>

<title>Rock Paper Scissors</title>

<link rel="sytlesheet" href="game.css">

</head>

<body>

<h1>Rock Paper Scissors</h1>

<div class="choices">

<div class="choice" onclick="playGame('rock')"> Rock</div>

<div class="choice" onclick="playGame('paper')"> Paper</div>

<div class="choice" onclick="playGame('scissors')">✌ Scissors</div>


</div>

<p id="result"></p>

<script src="game.js"></script>

</body>

</html>
CSS CODE
body {

font-family: Arial, sans-serif;

text-align: center; background-color:

#c6acfa; padding: 50px;

.choices

{ display: grid;

justify-content: center;

margin: 20px;

.choice { margin: 10px;

padding: 20px; border: 2px solid

#333; cursor: pointer; font-

size: 20px; background-color:

rgb(125, 120, 120); transition: 0.3s;

.choice:hover { background-

color: rgb(232, 160, 160);

#result

{ margin-top:

20px; font-size:
24px; font-

weight: bold;

JAVASCRIPT CODE
function playGame(playerChoice) {

const choices = ['rock', 'paper', 'scissors'];

const computerChoice = choices[Math.floor(Math.random() *


choices.length)];

let result = '';

if (playerChoice === computerChoice) {

result = "It's a draw!";

} else if (

(playerChoice === 'rock' && computerChoice === 'scissors') ||

(playerChoice === 'paper' && computerChoice === 'rock') ||

(playerChoice === 'scissors' && computerChoice === 'paper')

){ result =

"You win!";

} else

{ result = "You

lose!";

document.getElementById('result').innerText = `You chose $


{playerChoice}. Computer chose ${computerChoice}. ${result}`;
}

OUTPUT

You might also like