Help with a Basic Computer Game in JAVASCRIPT. (it could be a shooter) Create a
ID: 3801399 • Letter: H
Question
Help with a Basic Computer Game in JAVASCRIPT. (it could be a shooter)
Create a computer game that falls under the following genres: Action, Strategy, Role-Playing, Sports, Adventure, or Puzzle. Study other games that match the genre of your choice to get an understanding of the genre's gameplay, game world, core mechanics, game balancing, user experience, and Level Design Gameplay Gameplay focuses on the challenge(s) the game offers, and the actions the player can take to handle the challenge(s) Mandatory Requirements Your game must be 3D (You can make your 3D environment look like 2D, but the project must be a Unity 3D project) Your game must be Single player (this allows you to showcase Al and Core mechanic. If creating a fighting game, 2 player is optional, but Single player is mandatory) Your game code must be written in JavaScript (The C# script for Unity's First-Person, and Third-Person Controllers can be used) Do not use any Unity Tutorials from unity.com as your final game The Game level must be Architectural. It may take place indoors, outdoors, or both. Aerial games (games that take place in the skies or space) will not be accepted because they don't showcase your level design skills. However, you can use the interior of a plane as a Game level. Your game must be controlled using Keyboard and, or Mouse The Player must be able to Save progress in the game or Pause it Game Assets: This will be your Maya project that contains your Game Level model, level assets, and textures Game Application: This is your Unity game project, and executableExplanation / Answer
please find the code
Please follow the below steps
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Puzzle</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/image-puzzle.css" rel="stylesheet" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/image-puzzle.js"></script>
</head>
<body>
<div id="collage">
<h2>Image Puzzle</h2>
<hr />
<div id="playPanel">
<div>
<ul id="sortable" class="sortable"></ul>
<div id="actualImageBox">
<img id="actualImage" />
<div>Re-arrange to create a picture like this.</div>
<div>
<button id="btnRule" type="button" class="btn">Rules</button>
<button id="newPhoto" type="button" class="btn">Another Photo</button>
<button id="btnReplay" type="button" class="btn">About</button>
</div>
</div>
</div>
</div>
<div id="gameOver">
<div>
<div>
<button type="button">Play Again</button>
</div>
</div>
</div>
<script>
<!--
// if new images is to added please add their entry in the below imaged variable
//suppose there is image name India.jpg and if you want it to display follow the below steps
// add the image India.jpg in the images folder, and add the entry below
// { src: 'images/India.jpg', title: 'India' }
//-->
var images = [
{ src: 'images/london-bridge.jpg', title: 'London Bridge' },
{ src: 'images/lotus-temple.jpg', title: 'Lotus Temple' },
{ src: 'images/qutub-minar.jpg', title: 'Qutub Minar' },
{ src: 'images/statue-of-liberty.jpg', title: 'Statue Of Liberty' },
{ src: 'images/taj-mahal.jpg', title: 'Taj Mahal' }
];
$(function () {
var gridSize = $('#levelPanel :radio:checked').val();
imagePuzzle.startGame(images, gridSize);
$('#newPhoto').click(function () {
var gridSize = $('#levelPanel :radio:checked').val(); // Take the updated gridSize from UI.
imagePuzzle.startGame(images, gridSize);
});
$('#levelPanel :radio').change(function (e) {
var gridSize = $(this).val();
imagePuzzle.startGame(images, gridSize);
});
});
function rules() {
alert('Re arrange the image parts in a way that it correctly forms the picture. The no. of steps taken will be counted.');
}
</script>
</div>
</body>
</html>
#collage hr{
border:none;
border-top:2px solid #f5f2f2;
height:1px;
}
#collage #playPanel {
background-color:#c2defc;
padding:10px 0px;
margin: 10px auto;
max-width:800px;
width:95%;
}
#collage #actualImageBox {
display: inline-block;
font-size:0.8em;
margin: 10px 10px;
vertical-align: top;
width:280px;
}
#collage #stepBox, #collage #timeBox {
display:inline-block;
width:48%;
}
#collage #stepBox div {
background-color:#c2defc;
display:inline-block;
padding:1px 4px;
margin: 0px auto;
max-width:800px;
}
#collage img#actualImage{
border:2px solid #a46;
height:280px;
width:280px;
}
#collage #sortable {
border:2px solid #a46;
list-style-type: none;
display: inline-block;
margin: 10px;
padding: 0;
width: 400px;
}
#collage #sortable li {
background-size: 400% 400%;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 100px;
}
#collage button {
background-color:#f5f2f2;
border:1px solid #cce;
display: inline;
font-size: 14px;
height: auto;
width: auto;
padding: 3px 8px;
}
body {
font-family: 'Segoe UI', Calibri, Arial;
margin:0;
}
h2{
font-weight:normal;
text-align:center;
}
h3{
font-weight:normal;
margin:3px 0px;
text-align:center;
}
var timerFunction;
var imagePuzzle = {
stepCount: 0,
startTime: new Date().getTime(),
startGame: function (images, gridSize) {
this.setImage(images, gridSize);
$('#playPanel').show();
$('#sortable').randomize();
this.enableSwapping('#sortable li');
this.stepCount = 0;
this.startTime = new Date().getTime();
this.tick();
},
tick: function () {
var now = new Date().getTime();
var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
$('#timerPanel').text(elapsedTime);
timerFunction = setTimeout(imagePuzzle.tick, 1000);
},
enableSwapping: function (elem) {
$(elem).draggable({
snap: '#droppable',
snapMode: 'outer',
revert: "invalid",
helper: "clone"
});
$(elem).droppable({
drop: function (event, ui) {
var $dragElem = $(ui.draggable).clone().replaceAll(this);
$(this).replaceAll(ui.draggable);
currentList = $('#sortable > li').map(function (i, el) { return $(el).attr('data-value'); });
if (isSorted(currentList))
$('#actualImageBox').empty().html($('#gameOver').html());
imagePuzzle.enableSwapping(this);
imagePuzzle.enableSwapping($dragElem);
}
});
},
setImage: function (images, gridSize) {
console.log(gridSize);
gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
console.log(gridSize);
var percentage = 100 / (gridSize - 1);
var image = images[Math.floor(Math.random() * images.length)];
$('#imgTitle').html(image.title);
$('#actualImage').attr('src', image.src);
$('#sortable').empty();
for (var i = 0; i < gridSize * gridSize; i++) {
var xpos = (percentage * (i % gridSize)) + '%';
var ypos = (percentage * Math.floor(i / gridSize)) + '%';
var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
'background-image': 'url(' + image.src + ')',
'background-size': (gridSize * 100) + '%',
'background-position': xpos + ' ' + ypos,
'width': 400 / gridSize,
'height': 400 / gridSize
});
$('#sortable').append(li);
}
$('#sortable').randomize();
}
};
function isSorted(arr) {
for (var i = 0; i < arr.length - 1; i++) {
if (arr[i] != i)
return false;
}
return true;
}
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function () {
return Math.round(Math.random()) - 0.5;
}).remove().appendTo(this);
});
return this;
};
just type “jquery-2.1.1.min.js” on browser and paste here
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.