Hello Buddies.
This one is a simple javascript code written to get look and feel of a very basic racing game.
The complete code is available here -
So what do we want to implement?
It is something like this -
This one is a simple javascript code written to get look and feel of a very basic racing game.
The complete code is available here -
https://github.com/namitsharma99/game-racing-car
So what do we want to implement?
It is something like this -
And how do we start?
Here it goes -
So we have out base set up in racing.jsp.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>e_CaR-RaC_e</title>
<link rel="stylesheet" href="./myStyle.css" />
<link rel="icon" href="car.png" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).keydown(function(event) {
switch (event.keyCode) {
case 27:
resetCar();
break;
case 37:
moveLeft();
break;
case 39:
moveRight();
break;
case 38:
moveUp();
break;
case 40:
moveDown();
break;
}
});
function moveLeft() {
var element = document.getElementById("car");
element.style.left = parseInt(element.style.left) - 2 + '%';
$("#car0").stop().animate({
top: "-=10px"
}, 2000, ifCollision());
}
function moveRight() {
var element = document.getElementById("car");
element.style.left = parseInt(element.style.left) + 2 + '%';
$("#car0").stop().animate({
top: "-=10px"
}, 2000, ifCollision());
}
function moveUp() {
var element = document.getElementById("car");
element.style.top = parseInt(element.style.top) - 2 + '%';
/*attempt to move other car*/
$("#car0").stop().animate({
top: "+=10px"
}, 2000, ifCollision());
}
function moveDown() {
var element = document.getElementById("car");
element.style.top = parseInt(element.style.top) + 2 + '%';
$("#car0").stop().animate({
top: "-=10px"
}, 2000, ifCollision());
}
function ifCollision() {
console.log("checking collision...");
var car = $("#car");
var positionOfCar = car.position();
var leftOfCar = positionOfCar.left;
var topOfCar = positionOfCar.top;
console.log("left of car: " + positionOfCar.left + ", top of car: " + positionOfCar.top);
var car0 = $("#car0");
var positionOfCar0 = car0.position();
var leftOfCar0 = positionOfCar0.left;
var topOfCar0 = positionOfCar0.top;
console.log("left of car 0: " + positionOfCar0.left + ", top of car 0: " + positionOfCar0.top);
if (Math.abs(leftOfCar - leftOfCar0) < 40 && Math.abs(topOfCar - topOfCar0) < 40) {
alert("Caught!!");
}
}
</script>
</head>
<body>
<div class="container">
<textarea class="bg">
</textarea>
<img id="car" src="police_car.png" style="position: absolute; left: 48%; top: 400%;" height="70" width="50">
<!-- adding another car -->
<img id="car0" src="car.png" style="position: absolute; left: 30%; top: 0" height="60" width="30">
</div>
</body>
</html>
A small discussion.
1. We fixed the cars in the div section of the body.
2. Using keyboard events, identify the arrow keys.
3. Based on directions, invoke suitable methods -
switch (event.keyCode) {
case 27:
resetCar();
break;
case 37:
moveLeft();
break;
case 39:
moveRight();
break;
case 38:
moveUp();
break;
case 40:
moveDown();
break;
}
4. And finally we have a function that decided whether the Police car has caught the thief's car or not.
function ifCollision() {
console.log("checking collision...");
var car = $("#car");
var positionOfCar = car.position();
var leftOfCar = positionOfCar.left;
var topOfCar = positionOfCar.top;
console.log("left of car: " + positionOfCar.left + ", top of car: " + positionOfCar.top);
var car0 = $("#car0");
var positionOfCar0 = car0.position();
var leftOfCar0 = positionOfCar0.left;
var topOfCar0 = positionOfCar0.top;
console.log("left of car 0: " + positionOfCar0.left + ", top of car 0: " + positionOfCar0.top);
if (Math.abs(leftOfCar - leftOfCar0) < 40 && Math.abs(topOfCar - topOfCar0) < 40) {
alert("Caught!!");
}
5. Using positions we can set an alert limit, here it is 40.
6. TADA... try this and put your own imagination... see it rolling.
Also, to create the road moving effect, we have used styling like -
| .bg { | |
| width: 80%; | |
| height: 600px; | |
| background: url("background.png") repeat-y; | |
| background-size: 100%; | |
| -webkit-animation: displace 0.5s linear infinite; | |
| animation: displace 0.5s linear infinite; | |
| } | |
| @-webkit-keyframes displace { | |
| from { background-position: top; | |
| } to { background-position: bottom; } | |
| } | |
| @keyframes displace { | |
| from { background-position: top; | |
| } to { background-position: bottom; } | |
}
{ Refer to myStyle.css }
A good use of webkit animation effects.
A little bit of R&D can help you in figuring out how to use it efficiently.
|
7. So what we have here is an arrow keys' driven car game.
Share your thoughts and experiments in the comments below.
Happy Coding!
Here is an amazing buying guide of top 5 best obd2 scanner for honda you won't find anywhere else - reviewed by the professionals including pros and cons and FAQs. Best OBD2 Scanner For Honda
ReplyDeleteGreat post, you have pointed out some excellent points, I as well believe this is a very superb website. TOP 10 BEST POWER BANKS IN INDIA
ReplyDeletethis was vey ideal blog for racing cars. on the off chance that you need to see more , check this site Latest bicycles and cars
ReplyDelete